/* ------------------------------------------------------------ */
 /* ----------------------- MAIN SETUP */

img.gifsPreloader {
  width: 0;
  height: 0;
  opacity: 0;
}

.loaderOut {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
   z-index: 10000;
   opacity: 1;
  -webkit-transition: 	all 1000ms ease;
   -moz-transition: 		all 1000ms ease;
   -ms-transition: 		all 1000ms ease;
   -o-transition: 			all 1000ms ease;
   transition: 			all 1000ms ease;
 }

 .loader {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 10000;
   width: 120px;
   height: 120px;
   margin: -76px 0 0 -76px;
   border: 16px solid #f3f3f3;
   border-radius: 50%;
   border-top: 16px solid #9de0f5;
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
 }

 @-webkit-keyframes spin {
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); }
 }

 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }

.removingLoader .loaderOut {
  opacity: 0;
}

 .imgsLoaded .loaderOut,
 .imgsLoaded .dev-noImgLoader {
   display: none;
 }

 /* ------------------------------------------------------------ */
 /* ----------------------- PHASE MANAGEMENT */


 /* ------------------------------------------------------------ */
 /* ----------------------- STEP MANAGEMENT */


 /* ------------------------------------------------------------ */
 /* ----------------------- TIME MANAGEMENT */


 /* ------------------------------------------------------------ */
 /* ----------------------- GLOBAL UI */


 /* ------------------------------------------------------------ */
 /* ----------------------- SETUP PHASE */


 /* ------------------------------------------------------------ */
 /* ----------------------- SEARCH PHASE */

@-webkit-keyframes pop-in {
 0% { opacity: 0; -webkit-transform: scale(0.5); }
 50% { opacity: 0.5; transform: scale(1.2); }
 100% { opacity: 1; -webkit-transform: scale(1); }
 }
 @-moz-keyframes pop-in {
 0% { opacity: 0; -moz-transform: scale(0.5); }
 50% { opacity: 0.5; transform: scale(1.2); }
 100% { opacity: 1; -moz-transform: scale(1); }
 }
 @keyframes pop-in {
 0% { opacity: 0; transform: scale(0.5); }
 50% { opacity: 0.5; transform: scale(1.2); }
 100% { opacity: 1; transform: scale(1); }
 }

.gamePhase-2 .item.item-gifstyle-applyOnce.gifUsed {
  display: none !important;
}

.overlayModeMask {
  /* width: 0;
  height: 0; */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: 	all 300ms ease;
  -moz-transition: 		all 300ms ease;
  -ms-transition: 		all 300ms ease;
  -o-transition: 			all 300ms ease;
  transition: 			all 300ms ease;
}

.overlayModeUIclose {
  position: absolute;
  right: 3rem;
  top: 3rem;
  width: auto;
  color: #000;
  padding: 1.6rem 2rem;
  border: 1px solid #fff;
  text-align: center;
  line-height: 1;
    display: none;
    font-size: 2rem;
}
.overlayModeUIclose:hover {
  cursor: pointer;
}

.overlayMode .gamePhase-2 .overlayModeUIclose {
  display: block;
}

.overlayMode .gamePhase-2 .overlayModeMask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
}

.overlayMode .item.found .itemSearchImg {
  display: none !important;
}

.overlayMode .gamePhase-2 .searchCanvas .item.inOverlay .itemSearchImg,
.overlayMode .gamePhase-2 .searchCanvas .item.itemType-info.inOverlay .itemImg {
  opacity: 0;
}

.itemOverlayImg  {
  display: none;
}

.overlayMode .gamePhase-2 .searchCanvas .item.inOverlaySoon .itemImg,
.overlayMode .gamePhase-2 .searchCanvas .item.itemType-info.inOverlaySoon .itemOverlayImg {
  display: block !important;
  width: 15rem;
  max-width: none;
  opacity: 0;
  -webkit-transition: 	all 300ms ease;
  -moz-transition: 		all 300ms ease;
  -ms-transition: 		all 300ms ease;
  -o-transition: 			all 300ms ease;
  transition: 			all 300ms ease;
}

.overlayMode .gamePhase-2 .searchCanvas .item.itemType-info.inOverlaySoon .itemImg {
  display: none !important;
}

.overlayMode .gamePhase-2 .searchCanvas .item.inOverlay .itemImg,
.overlayMode .gamePhase-2 .searchCanvas .item.itemType-info.inOverlay .itemOverlayImg {
  opacity: 1;
  -webkit-animation:pop-in 0.3s;
  -moz-animation:pop-in 0.3s;
  -ms-animation:pop-in 0.3s;
}

.overlayMode .gamePhase-2 .searchCanvas .item.inOverlay .itemTitle,
.overlayMode .gamePhase-2 .searchCanvas .item.inOverlay .itemShortTxt {
    display: block !important;
    color: #fff;
    transform: translateX(-50%);
}

.overlayMode .gamePhase-2 .searchCanvas .item.itemType-info.inOverlay .itemTitle,
.overlayMode .gamePhase-2 .searchCanvas .item.itemType-info.inOverlay .itemShortTxt {
    display: none !important;
}

.overlayMode .gamePhase-2 .searchCanvas .item.inOverlay {
  z-index: 1100;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -moz-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  -o-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  visibility: inherit !important;
  opacity: 1 !important;
}

.searchCanvas .item.itemType-info.found {
  visibility: visible;
  opacity: 1;
}

.overlayMode .searchCanvas .searchAssets.searchAssets-d {
  overflow: hidden;
}


.searchProgressBar {
  display: none;
}

.gameAlloc-a .searchProgressBar-a,
.gameAlloc-b .searchProgressBar-b,
.gameAlloc-c .searchProgressBar-c,
.gameAlloc-d .searchProgressBar-d {
  display: block;
}

.searchProgressBar {
  height: auto;
  background-color: rgba(0, 0, 0, 0.6);
  width: auto;
  position: relative;
  padding: 0.5rem;
  border-radius: 1rem;
}

.progressUnit {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: gray;
  float: left;
  margin-right: 0.4rem;
}

.progressUnit.progressed {
  background-color: rgb(139, 230, 106);
  -webkit-animation:pop-in 0.3s;
  -moz-animation:pop-in 0.3s;
  -ms-animation:pop-in 0.3s;
}

.progressUnit:last-child {
  margin-right: 0
}

 /* ------------------------------------------------------------ */
 /* ----------------------- COMBI PHASE */

.sanctionUnlockTxt,
 .sancUnlockOut {
   display: none;
 }

 .comboOverlay .sanctionUnlockTxt {
   display: block;
 }

 .sancUnlockOut.inSancOverlay {
   display: block;
 }

 .comboOverlayOut {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   z-index: 1100;
   display: none;
   opacity: 0;
  -webkit-transition: 	all 300ms ease;
   -moz-transition: 		all 300ms ease;
   -ms-transition: 		all 300ms ease;
   -o-transition: 			all 300ms ease;
   transition: 			all 300ms ease;
 }

 .comboOverlayModeSoon .comboOverlayOut {
   display: block;
 }

 .comboOverlayMode .comboOverlayOut {
    opacity: 1;
  }

 .comboOverlay {
     width: 100%;
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
 }

 .sancUnlockOut{
     width: 40%;
     margin: 0 auto;
     position: relative;
     padding: 3rem;
     border: 1px solid #fff;
     color: #fff;
     font-size: 2rem;
 }

 .closeComboOverlayOut {
   position: absolute;
   top: 4rem;
   right: 4rem;
   width: 4rem;
   height: 4rem;
   background-color: #fff;
   border: 1px solid #fff;
 }

 .closeComboOverlayOut:hover {
   cursor: pointer;
 }

 .closeComboOverlay {
     background-color: #fff;
   color: #000;
   text-align: center;
   position: relative;
   top: 1.3rem;
   line-height: 1;
   font-size: 1.5rem;
 }

.quitPhase-3 {
     position: absolute;
     z-index: 1000;
     width: 100%;
     top: 0;
     padding: 1rem;
 }

 .quitPhase-3In {
   position: absolute;
   left: 1rem;
 }

 .btn.btnQuitPhase-3 {
     width: 27rem !important;
     display: none !important;
 }

 .btn.btnQuitPhase-3:hover {
     cursor: ponter;
 }

 /* ------------------------------------------------------------ */
 /* ----------------------- SANC PHASE  */

.sancWaitRoomOverlay {
     top: 50%;
     position: absolute;
     width: 100%;
 }

 .sancWaitRoomOverlayOperatorTxt,
 .sancWaitRoomOverlayNotOperatorTxt  {
   width: 30%;
   padding: 3rem;
   border: 1px solid #fff;
   text-align: center;
   color: #fff;

   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
 }

 .launchSearchPhaseBtn,
 .sancWaitRoomOverlayTxts {
   margin: 0 auto;
 }

 .btnLaunchSanctioning {
   background-color: #fff;
   color: #000 !important;
 }






.sancWaitRoomOverlayOut {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}

.sancWaitRoomOverlayTxts {
  display: none;
}

.playerReadyForSanctions-a.playerReadyForSanctions-b.playerReadyForSanctions-c.playerReadyForSanctions-d .combiWaitingOut {
  display: none;
}

.playerReadyForSanctions-a.playerReadyForSanctions-b.playerReadyForSanctions-c.playerReadyForSanctions-d .sancWaitRoomOverlayOut {
  display: block;
}

.playerReadyForSanctions-a.playerReadyForSanctions-b.playerReadyForSanctions-c.playerReadyForSanctions-d.isOperator .sancWaitRoomOverlayOperatorTxt {
  display: block;
}

.playerReadyForSanctions-a.playerReadyForSanctions-b.playerReadyForSanctions-c.playerReadyForSanctions-d.isNotOperator .sancWaitRoomOverlayNotOperatorTxt {
  display: block;
}










.sanctionTotalScores {
  display: none;
}

.sanction .sanctionShortTxt,
.sanction .sanctionUI {
  display: none;
}

.socialScale,
.natureScale,
.economyScale {
  display: none;
}

.social-0 .socialScale-0,
.social-1 .socialScale-1,
.social-2 .socialScale-2,
.social-3 .socialScale-3,
.social-4 .socialScale-4,
.social-5 .socialScale-5,
.eco-0 .natureScale-0,
.eco-1 .natureScale-1,
.eco-2 .natureScale-2,
.eco-3 .natureScale-3,
.eco-4 .natureScale-4,
.eco-5 .natureScale-5,
.economy-0 .economyScale-0,
.economy-1 .economyScale-1,
.economy-2 .economyScale-2,
.economy-3 .economyScale-3,
.economy-4 .economyScale-4,
.economy-5 .economyScale-5  {
  display: block !important;
}

.contText {
    background-color: #515466;
    color: #fff;
    height: auto;
    border-radius: 8px;
    padding-bottom: 1rem;
    z-index: 6;
    width: 28%;
}

#resultPhase .contText {
  margin: 5% auto 0;
}

#resultsPhase .hudContainer {
    min-height: 140px;
    width: 70%;
    margin: 0 auto 11%;
    border-radius: 8px;
    display: flex;
}

.sancPreviewUI {
    padding-left: 1rem;
}

.draggable, .droppable {
    border-radius: 14px;
}

.sanctionStagedTxt,
.sancStagedOut {
  display: none;
}

.stagedOverlay .sanctionStagedTxt {
  display: block;
}

.sancStagedOut.inStagedOverlay {
  display: block;
}

.stagedOverlayOut {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1100;
  display: none;
  opacity: 0;
  -webkit-transition: 	all 300ms ease;
  -moz-transition: 		all 300ms ease;
  -ms-transition: 		all 300ms ease;
  -o-transition: 			all 300ms ease;
  transition: 			all 300ms ease;
}

.inStagedOverlaySoon .stagedOverlayOut {
  display: block;
}

.stagedOverlayMode .stagedOverlayOut {
  opacity: 1;
}

.stagedOverlay {
    width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.sancStagedOut{
    width: 40%;
    margin: 0 auto;
    position: relative;
    padding: 3rem;
    border: 1px solid #fff;
    color: #fff;
    font-size: 2rem;
}

.closeStagedOverlayOut {
  position: absolute;
  top: 4rem;
  right: 4rem;
  width: 4rem;
  height: 4rem;
  background-color: #fff;
  border: 1px solid #fff;
}

.closeStagedOverlayOut:hover {
  cursor: pointer;
}

.closeStagedOverlay {
    background-color: #fff;
  color: #000;
  text-align: center;
  position: relative;
  top: 1.3rem;
  line-height: 1;
  font-size: 1.5rem;
}

.quitPhase-4 {
    position: absolute;
    z-index: 1000;
    width: 100%;
    top: 0;
    padding: 1rem;
}

.quitPhase-4In {
  position: absolute;
  left: 1rem;
}

.btn.btnQuitPhase-4 {
    width: 27rem;
}

.btn.btnQuitPhase-4:hover {
    background-color: #fff;
    color: #000 !important;
    cursor: ponter;
}

 /* ------------------------------------------------------------ */
 /* ----------------------- RESULT PHASE  */

.rankings {
  display: none;
}
.ranking-1 .ranking-1,
.ranking-2 .ranking-2,
.ranking-3 .ranking-3,
.ranking-4 .ranking-4 {
  display: block;
}

 /* ------------------------------------------------------------ */
 /* ----------------------- DEV BOX */


 /* --------------------- DEV BOX END */
 /* ------------------------------------------------------------ */

/* .toolsBtn {
  display: none;
} */

.toolsBtn,
.devBox {
  z-index: 20000;
}

.dev-highlightAllItems .searchCanvas .item {
  background-color: #ff00008a;
}

.dev-highlightAllItems .btn.dev-highlightAll {
  background-color: #fff;
  color: #000 !important;
}

.dev-toggleBG .btn.dev-toggleBG {
  background-color: #fff;
  color: #000 !important;
}

.dev-advancedSettings-0  .dev-advanced {
  display: none;
}

.dev-advancedSettings-0 .dev-advancedSettings {
    position: absolute;
    bottom: 2rem;
}

.quitSearchUI {
  display: none;
}

 /***********************************************************************************/
 /*  Styling Jakob
/***********************************************************************************/

 /* --------------------- PHASE 2 */


 /* --------------------- PHASE 3 */


 /***********************************************************************************/
 /*  END Styling Jakob
/***********************************************************************************/