/* -----------------------------------------------------------------------------
Engine:      Gametize
Author:     Gametize Pte Ltd
Description:  Key component definitions
----------------------------------------------------------------------------- */

/* DEFAULT POPUP */
.default-popup { width : 500px }
  .default-popup-header { padding : 5px 36px 5px 10px; background : #111; color : #fff }
  .default-popup-header h5 { margin : 0; color : #fff }
  .default-popup-image-view {
    max-width : 600px; min-height : 50px; line-height : 0; /* Removes additional spacing below images */
    background : #ccc url(/images/core/consumer/game/loaders/ajax_loader_small.gif) center center no-repeat;
  }
  .default-popup-image-view img { width : 100%; line-height : 0; /* Removes additional spacing below image */ }

/* ---- FORCE IMAGE TO SQUARE ---- */
.square-image-wrapper { padding: 3px; display: block; }
.square-image {display: block;overflow:hidden;position:relative;box-sizing: content-box;padding-bottom: 100%;}
  .square-image img, .square-image a {position:absolute;width:auto;object-fit:cover;min-width:100%;min-height:100%;left : 0;top : 0;}
  .square-image.img-circle.light-grey-border-thick { margin: -3px; }

/* ---- PHOTO ICONS ---- */
.photo-icon-wrap { position : relative; display : inline-block; } /* Photo wrapper - to position other images on top of photo */
.photo-icon-whiteframe { border-color : #fff !important; background-color : #fff;} /* Other coloured frames */

/* ---- USER SEGMENTS ---- */
.photo-icon-segment-wrap { display: table; width : 100% }
.photo-icon-col, .photo-info-col { display: table-cell; vertical-align: top }
  .photo-icon-col { padding-right : 20px }
  .photo-icon-col.large { width : 150px }
  .photo-icon-col.medium { width : 84px }
  .photo-icon-col.small { width : 52px }
  .photo-icon-col.middle { vertical-align: middle }

/* ---- EXPAND/CONDENSE TOGGLE ARROWS ---- */
.togglearrow {
  background-color: #1c344c;
  background-image : url(/images/core/consumer/game/expandcondense_sprite.png);
  background-position : 7px 10px;
  background-repeat: no-repeat;
  width : 25px; height : 25px;
  display : inline-block;
  margin-right : 10px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
  .togglearrow.active { background-position : 7px -8px }

/* ---- LOAD MORE ---- */
.load-more-content {
  display : block;
  text-align : center;
  font-size : 1.25em; /* 20px */
  line-height : 1.75; /* 28px */
  margin-bottom : 32px;
}

/* ---- IN-PAGE FILTERS ---- */
a.page-filter {
  background : #ccc; color : #fff; padding : 4px 10px; margin : 0 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  text-decoration : none; display : inline-block;
}

a.page-filter.active { background : #b91d54; font-weight : bold }
a.page-filter.active:hover {background: #a91a4d; color: #fff;}
a.page-filter:hover { background: #bbb; color: #fff;}

@media screen and (max-width: 767px) {    /* Mobile screens */
  a.page-filter { font-size : 0.75em; margin : 0 5px; }
}

/* ---- METADATA/KPI BOX ---- */
/* Currently used to show Project/Topic IDs */
.metadata-box {
  border: 1px solid #333;
  background: none;
  padding: 8px;
  color: #333;
  display: inline-block;
  border-radius: 8px;
}
.metadata-box.metadata-box-white { border: 1px solid white; color: white; }

/* ---- SEARCH WIDGET ---- */
.search-widget-wrap {
  background: #fff;
  border : 1px solid #d0d0d0;
  padding : 8px 8px 8px 36px;
  font-size : 0.875em;
  -moz-border-radius : 15px;
  -webkit-border-radius : 15px;
  border-radius : 15px;
  width : 250px;
  text-align: left;
  position : relative;
}

.search-widget-wrap:before {
  position:absolute;
  left: 25px;
  font-size: 1.3em;
}

.search-widget-wrap form input[type=text] {
  padding : 0; border : 0;
  -moz-border-radius : 0;
  -webkit-border-radius : 0;
  border-radius : 0;
}
.search-widget-wrap form input[type=text]:focus {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.search-widget-wrap .search-cancel { position : absolute; top : 0; right : 5px }

.search-widget-wrap .fa {
  position: absolute;
  left: -23px;
  font-size: 1.3em;
  top: 1px;
}

.cancel-search {
  position: absolute;
  right: 0;
  top: 0;
}

/* ---- LOADER ---- */
.loader-wrap {
  background : #000;
  opacity : 0.8;
  color : #fff;
  font-size : 1em; line-height : 1;
  text-align : center;
  position : fixed;
  bottom : 0px; left : 40%;
  width : 20%;
  z-index : 999;
  -moz-border-radius : 10px 10px 0 0;
  -webkit-border-radius : 10px 10px 0 0;
  border-radius : 10px 10px 0 0;
}

  .loader-inner { padding: 10px 20px }

@media screen and (max-width: 767px) {    /* Mobile screens */
  .loader-wrap { left : 20%; width : 60% }
}

/* ---- SPECIALIZED ALERTS ---- */
.uploader_alert_bar {
  background: #999;
  color : #fff;
  font-size : 0.75em;
  padding : 5px 10px;
  margin : 0 0 20px;
  text-align : center;
  display : none;
}

/* ---- IFRAMES ---- */
/*
  Allows IFRAMEs to be scrollable on iOS / Safari, whereby it is by default not allowed.
  To use: <div class="iframe-scroll-wrapper"><iframe></iframe></div>
*/
.iframe-scroll-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.search-widget-wrap {
    background: #fff;
    border: 1px solid #d0d0d0;
    padding: 8px 8px 8px 36px;
    font-size: 0.875em;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    width: 270px;
    text-align: left;
}

/* Password field with reveal icon */
.password-wrap i.fa-eye, i.fa-eye-slash {
  /*margin-left: -30px;*/ /* does not work for android */
  cursor: pointer;

  /* alternate styling to make it work for android*/
  float: right;
  position: relative;
  top: -28px;
  right: 8px;
}

/* Terms and Conditions */
.embed-terms-wrap {
  padding : 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background: #f7f7f7;
  border: 1px solid #ddd;
}

.embed-terms {
  height : 200px;
  overflow-x : hidden; overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 15px;
  font-size : 12px; /* Base font size */
}
  .embed-terms h2 { font-size: 1.5em }
  .embed-terms h3 { font-size: 1.25em }
  .embed-terms h4 { font-size: 1.125em }