/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#header{
    position: absolute;
    z-index: 10;
    width: 100vw;
}

html{
    overflow-y:auto !important;
}

/* menu */

.game-list{
    flex-grow: 1;
    flex-shrink: 1;
}

.game-list-inner{
    /*max-height: 400px;*/
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 20px;
    outline: solid lightgrey 1px;
}

.menu-inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 70%;
}

.game-list li:nth-child(odd) {
    background-color: #f5f5f5;
}

.game-list li:nth-child(even){
    background-color: #e0e0e0;
}

.game-start-button.disabled{
    background-color: #969696 !important;
}

/* popup */
#load-game-overlay{
    width: 100vw;
    height: 100vh;
    background-color: #00000088;
    z-index: 30;
}

#load-game-popup{
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/***/

.container-outer{
    padding-top:7%;
}

#main-container{
    height:calc(100vh - 60px);   
}

#game-container{
    height: 100%;
    width: 100%;
}

#game{
    position:absolute;
    background-color: #ffffff; 
    width:100%;
    height:100%;
}

.instruction-icon{
    position: relative;
    max-height: 1.25rem;
    height: 1.25rem;
    width: 2rem;
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    display: inline-block;
    overflow: visible;
}

.instruction-icon img{
    min-height: 2rem;
    width: 2rem;
    position: absolute;
    top: -15%;
}

#instruction-para{
    line-height:2.5rem;
}

.top-neg50{
    top:-50% !important;
}



.is-outline{
    outline: solid 1px lightgrey;
}

.bg-yellow{
    background-color:#FEBE10 !important;
}

.bg-green{
    background-color: #3FA860 !important;
}

.bg-grey{
    background-color:#969696;
}

.bg-lightgrey{
    background-color: #cccccc;
}


.bg-red{
    background-color: #D71344 !important;
}

.bg-orange{
    background-color: #F57E25 !important;
}

.text-green{
    color: #3FA860 !important;
}

.text-red{
    color: #D71344 !important;
}

.text-blue{
    color: #69cdcd !important;
}

.text-darkblue{
    color:#486ea8 !important;
}

.is-absolute{
    position:absolute;
}

.square-aspect{
    aspect-ratio:1;
}

.non-game-screen{
    position:absolute;
    background-color: #3FA860;
    width:100%;
    height:100%;
}

.transfer-icon{
    height:100px;
}

.fullheight{
    height:100%;
}

.width-auto{
    width:auto !important;
}

.width-50{
    width:50% !important;
}

.height-10{
    height:10%;
}

.height-30{
    height:30%;
}


.height-50{
    height:50%;
}

.height-70{
    height:70%;
}

.height-50vh{
    height:50vh;
}

.fullwidth{
    width:100% !important;
}

.width-80{
    width:80%;
}

.flex-dir-col{
    flex-direction:column;
}

.translateY-25{
    transform: translateY(25%);
}

.translateY-minus15{
    transform: translateY(-15%);
}

.key-span{
    background-color: #474C55;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-weight: 700;
    color: white;
    border-radius: 4px;
    margin-left:5px;
    margin-right:5px;
}


.rounded{
    border-radius:12px;
}

.full-rounded{
    border-radius: 100px;
}

.continue-button{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 60%;
    background-color: #B1D577;
    border: none;
    color: white;
    font-size: larger;
    font-weight: 700;
    cursor:pointer;
}

.continue-button.disabled{
    background-color: #666666;
    color:#777777;
    cursor:not-allowed;
}

#instruction-header{
    padding-left:1.5rem !important;
    padding-right:1.5rem !important;
}

.span-heading{
    font-weight: 900;
    font-size: xx-large;
    
}

.text-green{
    color: #3FA860;
}

.text-orange{
    color: #F57E25;
}

.span-subheading{
    color: black;
    font-size: x-large;
}

.vcenter {
    display: flex;
    align-items: center;
  }

  .hcenter {
    display: flex;
    justify-content: center;
  }

  .hleft{
    display: flex;
    justify-content: left;
  }

  .hright{
    display: flex;
    justify-content: right;
  }

.center-bg{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; 
}

.cover-bg{
    background-size:cover;
}

.contain-bg{
    background-size:contain;
}

/* Balloon */

.instruction-button{
    padding: 5px 10px 5px 10px;
    position: relative;
}
.span-balloon-score{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 30px;
    color: white;
    font-weight: 700;
}

#balloon{
    width:100%;
    height:100%;
    background-image:url('../assets/balloon.png');

}

#balloon.is-burst{
    background-image:url('../assets/bang.png');
}

.balloon-transition{
    transition-property: transform;
    transition-timing-function: ease-out;
    transition-duration: 1s;
}

/* flashcards */
#flash-answer{
    width:100%;
    height:40px;
    text-align: center;
}

#flash-container{
    background-image:url('../assets/placeholderCross.png');
    width:100%;
    max-width:300px;
    aspect-ratio:1;
}
/* backtask */
.backtask-answer{
    width: 28px;
    height: 28px;
    display: inline-block;
    border-radius: 30px;
    margin: 2px;
    text-align: center;
}
.backtask-correct{
    background-color:#3FA860;
    color:white;
}

.backtask-incorrect{
    background-color:#D71344;
    color:white;
}

.backtask-missed{
    background-color:#5c616a;
    color:white;
}

/* digit seq flashcards*/

input#digit-sequence-input  {
    height: 100px;
    font-size: 60pt;
    text-align: center;
    border-bottom: 2px solid black;
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
}

#digits-correct-marker{
    width:100%;
    height:120px;
    margin-top:20px;
}


input#digit-sequence-input.correct{
    color: #3FA860 !important;
    border-bottom: 2px solid #3FA860;
}

input#digit-sequence-input.incorrect{
    color: #D71344 !important;
    border-bottom: 2px solid #D71344;
}


#flash-center.big-text{
    font-size: 120pt !important;
    font-weight:700;
}


/* button press */
#buttonpress-timer{
    height: 60px;
    display: flex;
    border-radius: 200px;
}

#buttonpress-timer-icon{
    height: 100%;
    aspect-ratio: 1;
    border-radius:300px;
}

#go-message{
    width: 100%;
    font-size: 62pt;
    font-weight: 700;
    text-align: center;
}

#buttonpress-container{
    justify-content: space-around;
    height:80%;
}

#space-indicator{
    border-radius: 16px;
    width: 100%;
    height: 80px;
    transform: translateY(0px);
    box-shadow: 0px 10px darkgrey;
    transition: transform 0.05s, box-shadow 0.05s;
}

#space-indicator.down{
    transform: translateY(10px);
    box-shadow: 0px 0px darkgrey;
}

/*easy vs hard*/
#task-space-counter-outer{
    height: 400px;
    border: solid 5px #FEBE10;
    background-color:#474C55;
    border-radius:6px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width:40%;
}

#task-space-counter-inner{
    border-radius:3px;
    background-color: #3FA860;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    transition-property: height;
    transition-timing-function: ease-in;
    transition-duration: 0.1s;
}

#choice-container{
    width: 100%;
    height: 100%;
}

#game-result-container{
    height:100%;
}

#timer-container{
    width:100px;
}

#timer-icon{
    width:100%;
    height: auto;
    aspect-ratio:1;
    border-radius: 300px;
}

#choice-time-box{
    background-color: #474C55cc;
    color: white;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    bottom: 120px;
    width: 60%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#task-instruction{
    height: 100%;
    padding-top: 70px;
    padding-bottom: 70px;
    position:relative;
}


.big-round-button{
    cursor:pointer;
    user-select:none;
    border-radius: 300px;
    width: 200px;
    height: 200px;
    border: none;
    text-align: center;
    color: white;
    font-size: large;
    transform: translateY(0px);
    box-shadow: 0px 10px darkgrey;
    transition: transform 0.1s, box-shadow 0.1s;
}

.big-round-button:active{
    transform: translateY(10px);
    box-shadow: 0px 0px darkgrey;
}



.difficulty-span{
    font-weight:700;
    font-size:large;
}

.prize-span{
    font-weight:500;
    font-size:larger;
}

#money-earned{
    pointer-events: none;
}

#money-indicator-container{
    height:80px;
}

.money-indicator{
    margin-right:10px;
    width:80px;
    height:80px;
    background-image:url('../assets/money.png');
}

/* Money Transfer */

.transfer-input{
    height:100px;

}

.transfer-input:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

.transfer-image{
    height:100%;
    background-image: url('../assets/transfer.png');
}

.profile-green{
    height:100px;
    background-image: url('../assets/profile_green.png');
}

.profile-grey{
    height:100px;
    background-image: url('../assets/profile_grey.png');
}

.person-icons-columns{
    min-height:150px;
}

.fairness-span{
    height:30px;
}

#transfer-container{
    height:90vh;
    width:100vw;
}

.money-owned{
    z-index:3;
}

.money-held-contianer{
    position:relative;
}

.money-held-container span{
    position:relative;
    z-index:2;
}
#transfer-line{
    position:absolute;
    margin-left: 10px;
    height: 26px;
    z-index: 1;
}

.transfer-dots{
    height:100%;
    position: absolute;
    background-image: url('../assets/transferDot_green.png');
    background-size: contain;
    background-position-x: 0px;
    width:100%;
    clip-path: inset(0% 100% 0% 0%);
    transition-duration: 2.0s;
    transition-delay: 0.25s;
    transition-timing-function: ease-out;
    z-index:2;
}

.transfer-dots.grey{
    background-image: url('../assets/transferDot_grey.png');
    width:100%;
    z-index:1;
    clip-path: none;
}

.transfer-2{
    clip-path: inset(0% 0% 0% 0%);
}

.transfer-3{
    clip-path: inset(0% 0% 0% 100%);
}


.notransition{
    transition-duration: 0s !important;
}

.ui-slider-handle {
width:50px;
height:50px;
}

.transaction-card{
    position: absolute;
    background-color: white;
    border: solid black 2px;
    z-index:6;
    width: 60vw;
    height: 60vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#message{
    transition-property: width;
    transition-duration: 200ms;
    width: 120%;
    position: relative;
    left: -10%;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.fairness-dot{
    width:30px;
    height:30px;
    border:solid 5px black;
    border-radius:30px;
    background-color: white;
    cursor:pointer;
}

.progress-dot{
    width:20px;
    height:20px;
    background-color: grey;
    border-radius: 20px;
}

.fairness-dot.selected{
    background-color:#454d52;
}


/* Towers */



.tower{
    background-image: url('../assets/tower.png');
    aspect-ratio: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom:16%;
}

#goal-container{
    padding-left:30%;
    padding-right:30%;
}

.disk{
    width: 70%;
    height: 15%;
    border-radius: 100px;
    max-height: 15%;
}

.preview-tower .disk{
    transform: scale(0.6);
}

/* Cards */
.gains-losses-bar-outer{
    border: solid black 1px;
    padding: 0px;
    margin: 0.75rem;
}

.gains-losses-bar{
    width:0%;
    height:100%;
    transition-property: width;
    transition-timing-function: ease-out;
    transition-duration: 1s;
}

#money-earned-columns{
    /*min-height:20%;*/
}
#current-card-columns{
    min-height:40%;
}

#deck-select-columns{
    min-height:30%;
}
.deck{
    background-image: url('../assets/cards/card_back.png');
    aspect-ratio: 1;
}

#result-text{
    transform: translateX(-50%);
}

/* Magnitudes */


.dot{
    position:absolute;
    width:20px;
    height:20px;
    border-radius:30px;
    transform: translate(-50%, -50%);
}

.dots-container{
    position:relative;
    width:400px;
    height:400px;
    outline: 1px solid black;
}
.answer{
    user-select: none;
    cursor:pointer;
}

.fraction{
    aspect-ratio:0.75;
    padding:5%;
    min-width:200px;
}

.fraction hr{
    padding-top: 3px;
    padding-bottom: 3px;
}

#viewer-answers .answer{
    cursor:default;
}

#viewer-answers .fraction {
    min-width:unset;
    height:180px;
}

#viewer-answers .dots-container {
    height: 180px;
    aspect-ratio: 1;
    width: unset;
}


/* Sequence */
.sequence-item{
    width:100%;
    aspect-ratio:1;
}

.sequence-answer{
    position:relative;
    width:100%;
    aspect-ratio:1;
    width:60%;
}

/* answer viewer */
.answer-viewer-container{
    outline: solid 1px lightgrey;
    user-select: none;
}
.answer-viewer-col{
    min-height:200px;
    padding-bottom:20px;
}

#viewer-right{
    background-image:url('../assets/nav_right.png');
    transform:scale(0.5);
}

#viewer-left{
    background-image:url('../assets/nav_left.png');
    transform:scale(0.5);
}

.cross-icon{
    background-image:url('../assets/cross.png');
    width:50px;
    height:50px;
}

.tick-icon{
    background-image:url('../assets/tick.png');
    width:50px;
    height:50px;
}

.icon-stick-right{
    position: relative;
    left: calc(100% - 50px);
}

.icon-seq{
    position:absolute;
    left: calc(100% - 25px);
    top:0%;
}

.icon-translateX-neg-50{
    transform:translate(-50%)
}

.icon-translateX-neg-100{
    transform:translate(-100%)
}

/* Expressions */
.expression-container{
}

@media screen and (max-width: 1000px) {
    #story-span{
        font-size:13pt !important;
    }
  }

#story-span{
    overflow-x: hidden;
    overflow-y: auto;
}

/* Shapes */
.answer-button {
    cursor:pointer;
}
.answer-button.outline-hover:hover{
    outline: 2px solid green;
}

/*answers*/
.answer-correct{
    outline: 2px solid #3FA860;
}

.answer-incorrect{
    outline: 2px solid #D71344;
}

/* Z indexes */

.z-plus{
    z-index:1;
}

.z-minus{
    z-index:-1;
}

/* Anims */

@keyframes fadein {
    0%{
    opacity:0;
    }
    100% {
      opacity: 1;
      z-index: 1;
    }
  }

  @keyframes fadeout {
    0%{
        opacity:1;
    }
    100% {
      opacity: 0;
      z-index: -1;
    }
  }

  @keyframes growin {
    0%{
        opacity:0;
        transform: scale(0.2);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      z-index: 1;
    }
  }

  @keyframes growout {
    0%{
        opacity:1;
        transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
      z-index: -1;
    }
  }

  @keyframes shrinkout {
    0%{
        opacity:1;
        transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      z-index: -1;
    }
  }

  

/*
.anim-in, .anim-out{
    transition-duration: 1000ms;
}

.anim-grow{
    opacity:0;
    transform: scale(0.3);
}

.anim-grow.anim-in{
    opacity:1 !important;
    transform: scale(1) !important;
}

.anim-grow.anim-out{
    opacity:0 !important;
    transform: scale(0.3) !important;
}

.anim-fade{
    opacity:0;
}

.anim-fade.anim-in{
    opacity:1 !important;
}

.anim-fade.anim-out{
    opacity: 0 !important;
}

.anim-speed-slow{
    transition-duration: 2000ms;
}

.anim-speed-medium{
    transition-duration: 1000ms;
}

.anim-speed-fast{
    transition-duration: 250ms;
}

.anim-speed-x-fast{
    transition-duration: 50ms;
}

.anim-delay-200{
    transition-delay: 200ms;   
}*/