/* phone/other portrait - disapproved */
@media screen and (max-width:715px) and (min-width:0) and (min-height:560px) and (max-height:1375px) {
    main{
        display:none;
    }
    .circle-div{
    display:none;
}
    #video-feed {
        display:none;
    }
    .disclaimer{
        display:block;
    }
    #player-container,
    #team1-container,#team2-container{
        display:none !important;
    }
     #restart,#exit,#tracker,#camera-ic,.insbtn,#instruction-ic{
        display:none;
    }
    #date-container{
        float:unset;
        bottom:2rem;
        left:0;
        position:fixed;
    }
    #thumb-container,#thumb-container2{
        display:none !important;
    }

}
/* tablet portrait - disapproved */
@media screen and (min-width:720px) and (max-width:1024px) and (min-height:1010px) and (max-height:1376px) {
    main{
        display:none;
    }
    .disclaimer{
        display:block;
    }
    #player-container,
    #team1-container,#team2-container{
        display:none !important;
    }
     #restart,#exit,#tracker,#camera-ic,.insbtn,#instruction-ic{
        display:none;
    }
    #date-container{
        float:unset;
        bottom:2rem;
        left:0;
        position:fixed;
    }
    #thumb-container,#thumb-container2{
        display:none !important;
    }
    .circle-div{
    display:none;
}
    #video-feed {
        display:none;
    }

}

/* mobile phone landscape (general) - approved  */
@media screen and (min-width:640px) and (max-width:960px) and (min-height:300px) and (max-height:460px) {
.circle-div{
    height:175px;
    width:175px;
    /* transform:translate(-50%,-65%) !important; */
}
.start-btn{
    bottom:-87%;
    border:2px solid green;
}
#choice-win-container{
    gap:1rem !important;
}
#choice-win-container > .choice{
    border-radius: 50% !important;
    width:125px !important;
    height:125px !important;
    padding:0 .5rem !important;
    font-size: 16pt !important;
    
}
#tools-container{
    /* background:rgb(205, 18, 18); */
top:5.5rem !important;
}
.camera-flip{
    height:30px;
    width:30px;
    bottom:0;
    top:unset;
    }
#video-feed {
transform:scale(1.55);
}
    .choice{
    font-size:30pt;
}
  
#tracker-title,#stats-title{
    font-size:18pt;
    text-align: left;
}

#cmd1-h2,
#cmd2-h2,
#cmd3-h2{
    margin-top:.75rem;
    font-size: 11pt;
}

#question-h2{
    font-size: 18pt;
}
#tools-container{
    /* background:rgb(205, 18, 18); */
    position:fixed;
    right:0;
    top:4.5rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right:2.5px;
}
.instructions>em {
    font-size:9pt !important;
}
#tools-container>img{
    height:25px;
    width:25px;
}
#instructions-title{
    font-size:21pt;
    margin-bottom:1rem;
}
#restart:hover,#exit:hover,#tracker:hover{
    cursor:pointer;
    transform: scale(.9);
}
#restart,#exit,#tracker,#instruction-ic,#camera-ic,.insbtn{
    transition: .25s;
    height:30px;
    width:30px;
    left:5px;
    bottom:1rem;
}
.instructions{
    font-size:11pt;
}
.instructions>b {
    font-size:12pt;
}
.player-init{
    font-size:11pt !important;
    letter-spacing: 3px;
    padding:unset;
    /* height:40px; */
}
#player-container{
    height:45px;
    transform:scale(.96);
    gap:5px;
    bottom:-4.75px;
}
.team-list-title{
    font-size:21pt;
}
.team-action-list-item{
    font-size:12pt;
}
/* .team-col{
    align-items: start;
} */
#tracker-list-stats-container>li>div>p{
    font-size:11pt !important;
}
#tracker-list-container>li>div>p{
    font-size: 11pt;
}
.green-text{
    font-size:9pt !important;
}
.time-font{
    font-size: 9pt !important;
}
#tracker-container{
    width:88%;
}
#tracker-list-container{
    min-height:75px !important;
    overflow-y:scroll !important;
}
#input-container > div > input{
    font-size:14pt;
}
#video-feed{
    width:175px;
}
#thumb-container2>img,
#thumb-container>img{
    width:45px;
    border-radius: 8px;
}
#thumb-turnover{
    height:34px;
    width:34px !important;
    border-radius: 50% !important;
}

#input-container{
    padding:unset;
    align-items: center;
    height:185dvh !important;
}

.ball-1,.ball-2{
    height:50px !important;
    width:50px !important;
}

/* #basketball-img{
} */
 #input-instruction-container{
    height:66%;
    top:75px;
    border-bottom: none !important;
 }
 
.input-instruction,
.bull-type>li{
    font-size:11pt;
}
.bull-type>li{
    margin-top:1rem !important;
}

.scroll-body{
    overflow:scroll !important;
    overflow-y:scroll !important;
}


#team1,#team2{
    width:110px;
}
#hoop1{
transform:rotate(-90deg) scale(.87);
left:5.75%;
}
#hoop2{
    transform:rotate(90deg) scale(.87);
    right:5.75%;
}
#score-goal{
    font-size:9pt;
}
#max-score{
     height:75px;
     width:75px !important;
}
.team-list-container{
    justify-content: center;
}

#instructions-container{
    bottom:unset;
    top:0;
    width:75%;
    height:100% !important;
}
/* .scoreboard-col > img{
    height:15px;
    width:15px;
} */
 #scoreboard-container{
    width:230px;
 }
.scoreboard-col > h3{
    font-size:18pt;
}

#input-container>div>input{
    font-size:14pt;
    padding:.25rem;
    width:66%;
}
#date-container > p{
        font-size:11pt;
    }
    #title>h1{
        font-size:21pt;
    }
    .input-title{
    font-size:11pt;
}
}
/* tablet landscape - approved */
@media screen and (min-height:685px) and (max-height:1024px) and (min-width:1010px) and (max-width:1376px) {
    .circle-div{
        height:250px !important;
        width:250px !important;
        transform:translate(-50%,-50%) !important;
    }
    #thumb-container2>img,
    #thumb-container>img{
        width:60px;
        border-radius: 8px;
    }
    #thumb-turnover{
    height:55px;
    width:55px !important;
    border-radius: 50% !important;
}
    #hoop1{
        transform:rotate(-90deg);
        left:9% !important;
    }
    #hoop2{
        transform:rotate(90deg);
        right:9% !important;
    }
    .camera-flip{
        height:30px;
        width:30px;
        bottom:0;
        top:unset;
    }
    #video-feed {
    transform:scale(1) !important;
    }

    .ball-1,.ball-2{
        height:82px !important;
        width:82px !important;
    }
}

/* surface duo - landscape */
@media screen and (min-width:700px) and (max-width:740px) and (min-height:500px) and (max-height:560px) {
    
    .choice{
    font-size:30pt;
}
  
#tracker-title,#stats-title{
    font-size:18pt;
    text-align: left;
}

#cmd1-h2,
#cmd2-h2,
#cmd3-h2{
    margin-top:.75rem;
    font-size: 11pt;
}

#question-h2{
    font-size: 18pt;
}
#tools-container{
    /* background:rgb(205, 18, 18); */
    position:fixed;
    right:0;
    top:4.5rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right:2.5px;
}
#tools-container>img{
    height:25px;
    width:25px;
}
#instructions-title{
    font-size:21pt;
    margin-bottom:1rem;
}
#restart:hover,#exit:hover,#tracker:hover{
    cursor:pointer;
    transform: scale(.9);
}
#restart,#exit,#tracker,#instruction-ic,#camera-ic,.insbtn{
    transition: .25s;
    height:30px;
    width:30px;
    left:5px;
    bottom:1rem;
}
.instructions{
    font-size:11pt;
}
.instructions>b {
    font-size:12pt;
}
.player-init{
    font-size:11pt !important;
    letter-spacing: 3px;
    padding:unset;
    /* height:40px; */
}
#player-container{
    height:50px;
    transform:scale(.96);
    gap:5px;
    bottom:-4.75px;
}
.team-list-title{
    font-size:21pt;
}
.team-action-list-item{
    font-size:12pt;
}
/* .team-col{
    align-items: start;
} */
#tracker-list-stats-container>li>div>p{
    font-size:11pt !important;
}
#tracker-list-container>li>div>p{
    font-size: 11pt;
}
.green-text{
    font-size:9pt !important;
}
.time-font{
    font-size: 9pt !important;
}
#tracker-container{
    width:88%;
}
#tracker-list-container{
    min-height:75px !important;
    overflow-y:scroll !important;
}
#input-container > div > input{
    font-size:14pt;
}
#video-feed{
    width:175px;
}
#thumb-container2>img,
#thumb-container>img{
    width:45px;
    border-radius: 8px;
}
#thumb-turnover{
    height:45px;
    width:45px !important;
    border-radius: 50% !important;
}
#input-container{
    padding:unset;
    align-items: center;
    height:185dvh !important;
}

.ball-1,.ball-2{
    height:50px !important;
    width:50px !important;
}

/* #basketball-img{
} */
 #input-instruction-container{
    height:66%;
    top:75px;
    border-bottom: none !important;
 }
 
.input-instruction,
.bull-type>li{
    font-size:11pt;
}
.bull-type>li{
    margin-top:1rem !important;
}

/* .scroll-body{
    overflow:scroll !important;
    overflow-y:scroll !important;
} */


#team1,#team2{
    width:110px;
}
#hoop1{
transform:rotate(-90deg) scale(.9);
left:5.75%;
}
#hoop2{
    transform:rotate(90deg) scale(.9);
    right:5.75%;
}
#score-goal{
    font-size:9pt;
}
#max-score{
     height:75px;
     width:75px !important;
}
.team-list-container{
    justify-content: center;
}

#instructions-container{
    bottom:unset;
    top:0;
    width:75%;
    height:100% !important;
}
/* .scoreboard-col > img{
    height:15px;
    width:15px;
} */
 #scoreboard-container{
    width:230px;
 }
.scoreboard-col > h3{
    font-size:18pt;
}

#input-container>div>input{
    font-size:14pt;
    padding:.25rem;
    width:66%;
}
#date-container > p{
        font-size:11pt;
    }
    #title>h1{
        font-size:21pt;
    }
    .input-title{
    font-size:11pt;
}
}