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

/* ---- CHALLENGE TYPES ---- */
.challengetype-default { }
.challengetype-locked { background : #797979 }

.challengetype-standard .challengetype-bgfill { background-color : #36afe6 }
.challengetype-photo .challengetype-bgfill { background-color : #fb970b }
.challengetype-quiz .challengetype-bgfill { background-color : #aa4fb8 }
.challengetype-quizrepeat .challengetype-bgfill { background-color : #aa4fb8 }
.challengetype-prediction .challengetype-bgfill { background-color : #9ccc28 }
.challengetype-qr .challengetype-bgfill { background-color : #eb424b }
.challengetype-code .challengetype-bgfill { background-color : #220fb3 }  /* Type not in use */
.challengetype-answer .challengetype-bgfill { background-color : #efd608 }
.challengetype-api .challengetype-bgfill { background-color : #3a3a3a }
.challengetype-info .challengetype-bgfill { background-color : #1fba7a }
.challengetype-poll .challengetype-bgfill { background-color : #d60d7f }
.challengetype-invite .challengetype-bgfill { background-color : #9f5d16 }  /* Type not in use */
.challengetype-multifield .challengetype-bgfill { background-color : #059fa9 }
.challengetype-confirmation .challengetype-bgfill { background-color : #234d8c }
.challengetype-video .challengetype-bgfill { background-color : #ce2951 }
.challengetype-external .challengetype-bgfill { background-color : #b1bc31 }

  .challengetype-icon { background-image : url(/images/core/consumer/game/challengecard/icon_mini_sprite.png); display : inline-block; width : 20px; height : 20px}
  .challengetype-standard .challengetype-icon { background-position : 0 0 }
  .challengetype-photo .challengetype-icon { background-position : -20px 0 }
  .challengetype-quiz .challengetype-icon { background-position : -40px 0 }
  .challengetype-quizrepeat .challengetype-icon { background-position : -160px 0 }
  .challengetype-prediction .challengetype-icon { background-position : -60px 0 }
  .challengetype-qr .challengetype-icon { background-position : -80px 0 }
  .challengetype-code .challengetype-icon { background-position : -100px 0 } /* Type not in use */
  .challengetype-answer .challengetype-icon { background-position : -120px 0 }
  .challengetype-api .challengetype-icon { background-position : -140px 0 }
  .challengetype-info .challengetype-icon { background-position : -180px 0 }
  .challengetype-poll .challengetype-icon { background-position : -200px 0 }
  .challengetype-invite .challengetype-icon { background-position : -220px 0 }    /* Type not in use */
  .challengetype-multifield .challengetype-icon { background-position : -240px 0 }
  .challengetype-confirmation .challengetype-icon { background-position : -260px 0 }
  .challengetype-video .challengetype-icon { background-position : -280px 0; width: 21px;}
  .challengetype-external .challengetype-icon { background-position : -301px 0 }

.challengetype-icon-wrap {
  padding: 10px; width: 20px; height: 20px; display : inline-block; text-align : center;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  border-radius : 20px;
}

/* ---- CARD BASES ---- */
.cardbase-outer-wrap { position : relative }
.cardbase-wrap {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  display : block;
  overflow: hidden;
}

  .cardbase-image { display : block; overflow : hidden; position : relative; }
  .cardbase-content-image { 
    width : 100%; 
    background-size : cover; 
    background-repeat : no-repeat;
    background-position : center;
  } 

@media screen and (max-width: 767px) {    /* Mobile screens */
  .cardbase-wrap {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

/* 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%; }

/* ---- OTHER ICONS ---- */
.quiz-icon {
  display : inline-block; vertical-align : middle;
  width : 66px; height : 66px;
  background-image : url(/images/core/consumer/game/challengecard/quiz_graph_sprite.png);
}
  .quiz-icon.quiz-icon-correct-big, .quiz-icon.quiz-icon-wrong-big { width : 66px; height : 66px }
  .quiz-icon.quiz-icon-correct-big {background-position : 0 0}
  .quiz-icon.quiz-icon-wrong-big {background-position : -66px 0}
  .quiz-icon.quiz-icon-correct-small, .quiz-icon.quiz-icon-wrong-small { width : 20px; height : 20px }
  .quiz-icon.quiz-icon-correct-small {background-position : -132px 0}
  .quiz-icon.quiz-icon-wrong-small {background-position : -152px 0}

.lock-status-indicator-large, .lock-status-indicator {
  background-image : url(/images/core/business/lockstatus_sprite.png);
  background-repeat : no-repeat;
  display : inline-block;
}

.lock-status-indicator-large { width : 22px; height : 22px; vertical-align : baseline }
.lock-status-indicator-large.black { background-position : 0 0 }
.lock-status-indicator-large.white { background-position : -22px 0 }

.lock-status-indicator { width : 16px; height : 16px; vertical-align : text-bottom }
.lock-status-indicator.black { background-position : 0 -22px }
.lock-status-indicator.white { background-position : -16px -22px }

/* ---- SCORES ---- */
.score-indicator, .score-indicator-large { display : inline-block; text-align : center; background: #292929; color: #fff }

.score-indicator {
  padding: 10px 2px; width: 36px; height: 20px; font-size : 0.875em;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

.score-indicator-large {
  padding: 10px 2px; width: 48px; height: 32px; font-size: 1em; line-height: 2;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}

/* ---- KPIS ---- */
.kpi-box {
  border : 1px solid #ccc; color : #ccc; display : inline-block; padding : 10px; font-size: 0.75em; line-height : 1.5;
  text-align : center; text-transform : uppercase;
}
  .kpi-box span { font-weight : bold; font-size : 2.5em; line-height : 1; display : block; color : #aaa }

/* ---- TEAM RIBBON ---- */
a.team-ribbon-wrap, .team-ribbon-wrap {position : relative;text-decoration : none;margin-left: 15px;}
.team-ribbon { position : relative; background : #b91d54; padding : 10px 20px 10px 10px; max-width : 210px; color : #fff; height : 24px; line-height:1.2em; }
.team-ribbon.withteamicon {min-height: 52px;height: auto;display: flex;align-items: center;}
.team-ribbon .square-image-wrapper {height: 52px;width: 52px;margin-right: 10px;flex-shrink: 0;}
  .team-ribbon:before, .team-ribbon:after {
    content : ""; width: 0;
    position : absolute; top : 0; bottom: 0;
    border-style: solid;
    border-color: #b91d54 transparent;
  }

  .team-ribbon:before { left: -10px; border-width: 22px 0 22px 10px }
  .team-ribbon:after { right: -10px; border-width: 22px 10px 22px 0 }
  .team-ribbon.withteamicon:before { left: -15px; border-width: 36px 0 36px 15px }
  .team-ribbon.withteamicon:after { right: -15px; border-width: 36px 15px 36px 0 }

/* ---- 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.fa input {
  padding-left: 20px;
}

.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;
}

/* ---- PROGRESS BARS ---- */
.progress-wrap {}
  .progressbar-outer { position : relative; }
  .progressbar-inner { width : 0 /* To be set via AJAX */ }

  .progressbar-text {
    position : absolute;
    top : 0; left : 5%;
    width : 90%;
    display : block;
    text-align : center;
  }

/* ---- FORCE IMAGE TO SQUARE ---- */
.square-image-wrapper { padding: 3px; display: block; }
.square-image { display: block; padding-bottom:100%; overflow:hidden; position:relative; box-sizing: content-box; }
  .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; } /* 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 }

/* ---- BLANK STATE ---- */
.blank-state-wrap { min-height : 60px; padding : 100px 20%; text-align : center; font-size : 2em; line-height : 1.5 }

@media screen and (max-width: 767px) {
  .blank-state-wrap { min-height : 0 ; width : auto; padding : 0; text-align : left; font-size : 1em; font-style : italic }
}

/* ---- 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; }
}

/* ---- 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% }
}

/* ---- SOCIAL MEDIA SHARING ---- */
.share-to-facebook, .share-to-twitter {
  background: transparent url(/images/core/consumer/game/social/share_sprite.png);
  display : inline-block;
  width : 107px; height : 35px;
}

  .share-to-facebook.active { background-position : 0 0 }
  .share-to-facebook { background-position : 0 -35px }
  .share-to-twitter.active { background-position : -107px 0 }
  .share-to-twitter { background-position : -107px -35px }

/* ---- MEDIA COMPONENTS ---- */
.media-video { width : 530px; height : 300px }

@media screen and (max-width: 530px) {    /* Tiny screens */
  .media-video { width : 300px; height : 170px }
}

/* ---- COMMENT COMPONENTS ---- */
.comment-popup { width : 700px }
.comment-wrap { display : block; margin-bottom : 10px }
.comment-bubble {
  position: relative; display : block; padding: 10px 12px; background : #fff;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

  .comment-bubble:after {
    content: ""; width: 0;
    position: absolute; top: 16px; left: -12px; bottom: auto;
    border-width: 10px 14px 10px 0;
    border-style: solid;
    border-color: transparent #fff;
  }

.comment-listbox-scrollable { max-height : 400px; overflow-y : auto }
  .comment-listbox-scrollable .comment-bubble, .comment-popup .comment-bubble { background : #f3f3f3; }
  .comment-listbox-scrollable .comment-bubble:after,  .comment-popup .comment-bubble:after { border-color: transparent #f3f3f3; }


@media screen and (max-width: 767px) {    /* Mobile screens */
  .comment-bubble { font-size : 0.875em }
}

/* ---- LEADERBOARD ---- */
.leaderboard-wrap { margin-bottom : 20px; }
  .leaderboard-rank { font-weight : bold; font-size : 2em; margin-top : 10px }
  .leaderboard-currentuser {
    padding-top : 15px; padding-bottom : 15px;
    background : #fff;
    -moz-border-radius : 68px;
    -webkit-border-radius : 68px;
    border-radius : 68px;
  }

.leaderboard-separator-wrap { margin : 52px 0 }
.leaderboard-champion {
  background-image : url(/images/core/consumer/game/score_champion.png); display : block;
  width : 42px; height : 42px; background-position : 0 0px;
}
.leaderboard-champion-overlay { position : absolute; top : 0; right : 0px; z-index: 9}

@media screen and (max-width: 767px) {    /* Mobile screens */
  .leaderboard-rank { margin : 0; font-size : 1em; padding : 10px 0 }
  .leaderboard-champion { width : 30px; height : 30px; background-position : -42px 0px; }
  .leaderboard-currentuser {
    -moz-border-radius : 20px;
    -webkit-border-radius : 20px;
    border-radius : 20px;
  }
}

/* ---- BBCODE SUPPORT CLASSES ---- */
.support-bbcode {}
.support-bbcode ul { margin-left: 30px }
.support-bbcode ul, .support-bbcode li { list-style-type: square }

/* ---- 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;
}