div.answersheet_main, table.answersheet {
    width:98%;
     text-align: center;
     border-spacing: 0;
     border-collapse: collapse;
    border: 2px solid black;
    padding-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
 }

 .menu_play {
    color: #fff;
    text-align: right;
    font-size: 20px;
    text-decoration: none;
    margin-left: 1vw;
}

a.menu_play:hover {
    color: #4ca56b;
}

.play_menu {
    color: inherit;
    text-decoration: inherit;
    z-index: 3;
}

.play_menu:hover {
    color: #fff;
    text-decoration: inherit;
    cursor: pointer;
}

.rank {
    color: #000;
    text-align: center;
    vertical-align: middle;
    height:50px;
    text-decoration: none;
}

.rank_right {
    text-align: right;
    max-width: 10ch;
}
 
.rank_left {
    text-align: left;
    width: 300px;
}

#scores1, .scores1 {
    background-color: #d0d8d2;
    text-align: center;
}

#scores2, .scores2 {
    background-color: #a4d6b0;
    text-align: center;
}

#scores_header, .scores_header {
    background-color: #69a97c;
    border-bottom: 2px solid #a7ada9;
    text-align: center;
}

#scores_close {
    top: 0;
    position: absolute;
    right: 0;
    padding-right: 5px;
    padding-left: 5px;
    background-color: aliceblue;
    border: 1px solid black;
    cursor: pointer;
}

#score_reload {
    display: block;
    text-align: left;
    padding-left: 2%;
}

.scores_input, .scores_input_small {
    background-color: inherit;
    border: none;
    text-align: center;
    color: #000;
    vertical-align: text-bottom;
}

.scores_input_small {
    width:60px;
    font-size: inherit;
}

.scores_input:hover, .scores_input_small:hover {
background-color: #eee;
}

.score_edit {
    max-height:15px;
    z-index: 2;
    margin-left:-20px;
    display: none;
}

.total_edit {
    max-height:15px;
    display: none;
}

.update_box {
    background-color: #69a97c;
    border-bottom: 2px solid #000;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width:100%;
}

.score_edit:hover, .total_edit:hover, .gradingimg {
    cursor: pointer;
}

.black_green {
    color: #000;
    text-decoration: none;
}

.black_green:hover {
    color: #4ca56b;
    text-decoration: none;
}

#san-button {
    padding: 10px 20px;
    background:#4ca56b;
    border: 0;
    color: #FFF;
    display:inline-block;
    cursor: pointer;
    -webkit-appearance: none;
      border-radius: 0;
    }
    
    #san-button:disabled {
    padding: 10px 20px;
    background: #B9D8BA;
    border: 0;
    color: #FFF;
    display:inline-block;
    cursor: no-drop;
    -webkit-appearance: none;
      border-radius: 0;
    }
    
    #san-button:focus {
    padding: 10px 20px;
    background: #B9D8BA;
    border: 0;
    color: #eee;
    display:inline-block;
    cursor: default;
    -webkit-appearance: none;
      border-radius: 0;
    }

#san-button_white {
    padding: 5px 20px;
    background: #FFF;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

#san-button_white:active  {     
    background-color:4ca56b;    
}

.teamname {
    font-family: 'obelixpro';
    font-size: 2.3vw;
    padding-top: 80px;
}

.instructions {
    font-size: 1.4vw;
    font-weight: 600;
}

.answerform {
    font-size: 1.7vw;
    font-weight: 600;
    z-index: 100;
}

input[type=text] {
    font-size: inherit;
 }

 input[type=password] {
    font-size: inherit;
 }

 select {
    font-size: inherit;
 }

 #timer {
    pointer-events: none;
    font-family: 'komika';
    font-size: 2.0vw;
    color:#fff;
    white-space: nowrap;
    position: fixed;
    top: 16vh;
    width: 100% !important;
    left: calc(-50vw + 50%);
    z-index: 2;
 }

 .tooltip_main {
    position: relative;
    display: inline-block;
 }
 
 .tooltip_main_hover {
    display: none;
    padding: 10px;
 }
 
 .tooltip_main:hover .tooltip_main_hover {
    background: #d0d8d2;
    border-radius: 3px;
    bottom: -60px;
    display: inline;
    left: 0;
    position: absolute;
    width:20vw;
    z-index: 3;
 }
 
 .tooltip_main:hover .tooltip_main_hover:before {
    display: block;
    content: "";
    position: absolute;
    top: -5px;
    width: 0; 
   height: 0; 
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   
   border-bottom: 5px solid #d0d8d2;
}

.error {
    font-size: 30px;
    font-weight: 700;
}

.body_main {
    margin-left: auto;
    margin-right: auto;
    min-height: 70vh;
    width: 100%;
    text-align: center;
}

#havebet {
    max-height:28px;
    vertical-align:middle;
  }

#newbet {
    animation: blinker  3s linear infinite, rotation 8s infinite linear;
    max-height:28px;
    vertical-align:middle;
  }

  .force_centered {
    white-space: nowrap;
    width: 100% !important;
    left: calc(-50vw + 50%);
    z-index: -1;
}

#answerform {
    position: relative;
}

.vteam {
    height: 22px;
    vertical-align: bottom;
}

.vteam_input {
    margin-left: 19.47px;
}

.tocemail:hover {
    cursor: pointer;
    filter: invert(100%);
}

input {
    font-family: 'Calibri';
}
  
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  @keyframes blinker {  
    20% { opacity: 0.4; }
  }

@media (min-width: 699px) {

    #main {
        display:block;
        position: inherit;

      }

    #twitch-embed2 {
        /*display: none;*/
        display: block;
        padding-top: 2vh;
    }


}

@media (min-width: 900px) {

    .menu_text {
        margin-left:0vw;
    }
    #main {
        display:block;
        padding-top: 2vh;
      }

    #twitch-embed2 {
        display: flex;
        position: initial;
        padding-top: 0vh;
    }

}


@media (min-width: 1150px) {

    #main {
        display:inline-flex;
        padding-top: 2vh;
      }


    #twitch-embed2, #answerform {
        position: initial;
        display: flex;
        padding-top: 0vh;
    }



}

@font-face {
    font-family: 'komika';
    src: url('fonts/komika/komikax_-webfont.woff2') format('woff2'),
    url('fonts/komika/komikax_-webfont.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'obelixpro';
    src: url('fonts/obelixpro/obelixpro-cyr-webfont.woff2') format('woff2'),
    url('fonts/obelixpro/obelixpro-cyr-webfont.woff') format('woff');
    font-display: swap;
}