/* global css candidates */

body {
  height:100lvh!important;
}

body.iOS {
  height:101lvh!important;
}

#gameCanvas {
  width:100%;
  height:100dvh!important;
  display:block;
  image-rendering: pixelated ;

  max-height: -webkit-fill-available;
}

select {
    text-overflow: clip;
    width: 100%;
    max-width:100%!important;
}

.clickable {
    cursor: pointer;
}


.highlight {
  color:#ffe400;  
}

#year-guess:disabled {
  background:#AAAAAA;
    box-shadow:none;
}

.remove-song
{
  background-color:#150639;
  padding:4px;
  margin-bottom:4px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#player-list {
    padding: 10px;
    max-width: 600px;
    border: 8px solid #1af7ff;
    box-shadow: inset 4px 4px 0px 0px #000000;
}

#player-controls {
  display:flex;
  flex-wrap:wrap;
}


#score-table {
    margin-bottom:0px;
}
#score-table td {
    border: 0px;
    font-family: "ModeNine", Monaco, monospace;
    color: #ffffff;
    border-top: 0px !important;
    vertical-align: middle !important;
    padding: 0.25rem;

}

.ui-dialog {
    max-width:100%!important;
}

.input-sans {
    font-family:"ModeNine", Monaco, monospace !important;

}

.info-box {
    background-color: RGBA(0,0,0,0.2);
    padding:8px;
    font-family: "ModeNine", Monaco, monospace;
    color:#FFFFFF;
    margin-top:12px;
    margin-bottom:12px;
    font-size:1.1em;
    text-align: center;
  }

  .ui-dialog-title
  {
    text-align: center;
  }
  
  .tiny-title {
    font-family: 'Edit Undo Line BRK';
    color: #1af7ff;
    font-size: 1.5em;
    text-align: right;
  }

  .button-separator
  {
    border-left: 4px solid #1af7ff;
    box-shadow: inset 4px 4px 0px 0px #000000;
    margin-right:12px;
    margin-top: 4px;
    margin-bottom:4px;
  }

  .ui-dialog-buttonset
  {
    flex-wrap:wrap;
    display:flex;
    justify-content:space-around;
    float:initial!important;
    padding: .3em .3em .3em .3em!important;

  }

  .muted {
    color:#cfcfcf;

  }

  
#songs {
  padding:8px;
  font-family: "ModeNine", Monaco, monospace;
  color:#FFFD34;
  margin-top:12px;
  margin-bottom:12px;
  font-size:1.1em;
  text-align:left;
}

.creator-song-row {
  background-color: RGBA(0,0,0,0.2);
}

.broken-song {
  background-color: RGBA(135,35,25,.75)!important;
}


.freetext-input {
  font-family:"ModeNine", Monaco, monospace !important;
  width: 100%;
  font-size:1.1em;
  margin-bottom: 8px;
}


.freetext-input:disabled {
    background:#AAAAAA;
    box-shadow:none;
}


/* Youtube Overlay*/
.overlay-video {
  display: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  -ms-transition: opacity 600ms ease-in;
  transition: opacity 600ms ease-in;
  -ms-transition: opacity .6s;
  transition: opacity .6s;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .7);
  z-index: 999999;
}

.o1 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
  -ms-transition: opacity 600ms ease-out;
  transition: opacity 600ms ease-out;
  -ms-transition: opacity .6s;
  transition: opacity .6s;
}

.videoWrapperExt {
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 982px;
  padding: 0 20px;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoWrapper .close {
 background-image:url(/img/icons/close.png);
  position: absolute;
  top: -50px;
  right: 0px;
  cursor: pointer;
  z-index: 9999;
  height: 40px;
  width: 40px;
  background-size: 40px;
  opacity:1;
  @media (max-width: 767px) and (orientation: landscape) {
    display: none;
  }
}