#overlay {
    display: none;
    color: #ffffff;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
}

#overlay > .centre {
    text-align: center;
    position: fixed;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    box-sizing: border-box;
}

#overlay > button {                       /* Targets overlay close button */
    position: fixed;
    right: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 1000;
    font-size: 25px;
    margin: 0;
}

#overlay input[type=text],
#overlay input[type=password],
#overlay textarea {
    background-color: #000000;
    border: 3px solid #808080;
    border-radius: 8px;
    color: #ffffff;
    font-size: inherit;
    margin: 10px 0 10px 0;
    outline: none !important;
    padding: 10px 20px 10px 20px;
    resize: none;
    transition: border 0.5s;
    width: 200px;
}

#overlay input[type=checkbox] {
    display: none;
}

#overlay input[type=checkbox] + label {
    background: none;
    cursor: pointer;
    margin: 5px;
}

#overlay input[type=checkbox]:disabled + label {
    cursor: default;
}

#overlay input[type=checkbox] + label::before {
    content: '';
    background: #000000;
    border: 3px solid #808080;
    transition: border 0.5s;
    border-radius: 8px;
    font-size: 35px;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

#overlay input[type=checkbox]:checked + label::before {
    border-color: #31e000;
    content: '\00d7';
}

#overlay input[type=checkbox]:checked:disabled + label::before {
    border-color: #808080;
    content: '\00d7';
}

/* Prevents IE from using color from previous rule on placeholder */
#overlay input[type=text]:-ms-input-placeholder,
#overlay input[type=password]:-ms-input-placeholder,
#overlay textarea:-ms-input-placeholder {
    color: #a9a9a9;
}

#overlay input[type=text].inputAccepted,
#overlay input[type=password].inputAccepted,
#overlay textarea.inputAccepted {
    border-color: #31e000 !important;
}

#overlay input[type=text].inputRejected,
#overlay input[type=password].inputRejected,
#overlay input[type=checkbox].inputRejected + label::before,
#overlay textarea.inputRejected {
    border-color: #ff0000 !important;
}

#overlay div.inputAccepted {
    color: #ffffff;
}

#overlay div.inputRejected {
    color: #ff0000;
}

#overlay img.details,
#overlay img.logo {
    max-width: 100%; /* Make sure that large images are scaled to fit screen on small devices */
}

#overlay .row {
    display: block;
}

#overlay .row .rowContent {
    display: inline-block;
    position: relative;
}

#overlay .icon {
    display: inline-block;
}

#overlay .headline {
    font-size: 2.0em;
    margin: 10px 0 10px 0;
}

#overlay .subheadline {
    font-size: 1.5em;
}

#overlay input.username {
    width: 400px;
    text-align: center !important;
    font-size: 2em;
    font-family: TankTrouble;
}

#overlay .username {
    text-align: center;
    font-family: TankTrouble;
}

#overlay .adminLookup {
    cursor: pointer;
}

#overlay * button {
    margin: 10px 0 10px 0;
    display: inline;
}

#overlay .messageSpacingTop {
    margin-top: 10px;
}

#overlay .messageSpacingBottom {
    margin-bottom: 10px;
}

#overlay .suffix {
    display: inline;
    position: absolute;
    left: calc(100% + 20px);
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#overlay .prefix {
    display: inline;
    position: absolute;
    right: calc(100% + 20px);
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* When viewport width is 600px we assume we are on mobile (portrait) and shrink headline and username */
@media (max-width: 600px) {
    #overlay .headline{
        font-size: 1em;
        font-weight: bold;
    }

    #overlay input.username {
        width: 200px;
        font-size: 1.2em;
    }

    #overlay .username {
        font-size: 1.2em;
    }

    #overlay .suffix.collapse,
    #overlay .prefix.collapse {
        display: block;
        position: static;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

/******************** Sign Up Overlay **********************/

#overlay .signup .random {
    position: relative;
    left: -20px;
}

#overlay .signup .random:not(:active):not(.randomized):not(.done) .standard,
#overlay .signup .random:active:not(.randomized) .active,
#overlay .signup .random.cursor:not(.done) .cursor,
#overlay .signup .random.cursor:active .cursor,
#overlay .signup .random.done:not(:active) .done,
#overlay .signup .random.random0 .random0,
#overlay .signup .random.random1 .random1,
#overlay .signup .random.random2 .random2,
#overlay .signup .random.random3 .random3,
#overlay .signup .random.random4 .random4,
#overlay .signup .random.random5 .random5 {
    display: inherit;
}

#overlay .signup .random img {
    display: none;
}

#overlay .signup .random .cursor {
    display: none;
    position: absolute;
    left: 23px;
    top: 35px;
}

#overlay .signup .random:active:not(.randomized) .cursor {
    top: 37px;
}

/******************** Controls Overlay **********************/

#overlay .controls .options {
    margin: 10px 0 10px 0;
}

#overlay .controls .option {
    display: inline-block;
    cursor: pointer;
}

#overlay .controls .option.disabled {
    cursor: default;
    opacity: 0.2;
}

#overlay .controls .option.selected {
    cursor: pointer;
    opacity: 1.0;
}

#overlay .controls .option .standard,
#overlay .controls .option.down:not(:active):not(.active):not(.disabled) .down,
#overlay .controls .option:active:not(.disabled) .active,
#overlay .controls .option.active:not(.disabled) .active,
#overlay .controls .option.selected .selected {
    display: inherit;
}

#overlay .controls .option:active:not(.disabled) .standard,
#overlay .controls .option.active:not(.disabled) .standard,
#overlay .controls .option.down:not(.disabled) .standard,
#overlay .controls .option.selected .standard,
#overlay .controls .option .down,
#overlay .controls .option .active,
#overlay .controls .option .selected {
    display: none;
}

/******************** New Game Overlay **********************/

#overlay .newGame .premium {
    display: block;
    border: 3px solid #808080;
    border-radius: 8px;
    position: relative;
    padding: 40px 40px 30px;
    margin: 80px auto 20px;
    max-width: 600px;
}

#overlay .newGame .premium::before {
    content: "";
    width: 160px;
    height: 180px;
    position: absolute;
    top: -135px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../assets/images/shopItems/120Preview.png');
    background-size: 160px 180px;
}

#overlay .newGame .premiumMessage {
    margin-top: 10px;
}

#overlay .newGame .setting {
    margin-bottom: 10px;
}

#overlay .newGame .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 600px;
}

#overlay .newGame .grid .setting {
    text-align: left;
    min-width: 190px;
    margin-left: 5px;
    margin-right: 5px;
}

/******************** Garage Overlay **********************/

#overlay .garage .phaser {
    width: 100%;
    height: calc(100% - 54px); /* Make room for a button */
}

/******************** Ad Overlay **********************/
#overlay .ad #adContainer {
    overflow: hidden;
    display: inline-block;
    text-align: left;
}

/******************** Achievements Overlay **********************/
#overlay .achievements .logo {
	display: inline;
}

#overlay .achievements form {
    padding-top: 20px;
}

/******************** Virtual Shop Overlay **********************/

#overlay .virtualShop .logo {
    display: inline-block;
}

/******************** Shop Purchase Overlay **********************/

#overlay .shopPurchase .card {
    border: 3px solid #808080;
    background-color: #000000;
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 5px 10px 5px;
    margin: 10px 0 10px 0;
    transition: border 0.5s;
    width: 230px;
    height: 16px; /* Prevent collapse when unmounting stripe card */
    display: inline-block;
}

#overlay .shopPurchase .card.inputAccepted {
    border: 3px solid #31e000;
}

#overlay .shopPurchase .card.inputRejected {
    border: 3px solid #ff0000;
}

#overlay .shopPurchase button {
    width: 120px;
}

/******************** Messages overlay **********************/

#overlay .messages .message {
    background: linear-gradient(to bottom, #eeeeee, #cccccc);
    border-radius: 5px;
    color: #000000;
    margin: 20px auto 20px auto;
    padding: 3px;
    text-align: left;
    width: 594px;
    overflow-wrap: break-word;
}

#overlay .messages .message .headers {
    border-bottom: 1px solid #000000;
    margin: 5px;
    padding-bottom: 5px;
}

#overlay .messages .message .headers .timestamp {
    float: right;
}

#overlay .messages .message .body {
    margin: 5px;
    white-space: pre-wrap;
}

#overlay .messages .message.important {
    background: linear-gradient(to bottom, #427fff, #0014ab);
    color: #ffffff;
}

#overlay .messages .message.important .headers {
    border-color: #ffffff;
}

#overlay .messages .message.highlight {
    border: 4px solid #ffda00;
}

#overlay .messages textarea {
    box-sizing: border-box;
    width: 600px;
}

/******************** Messages overlay **********************/

#overlay .faq .question {
    font-weight: bold;
    text-align: left;
}

#overlay .faq .answer {
    text-align: left;
}

/* When retina, set background-images to high res versions */
@media 	(-webkit-min-device-pixel-ratio: 2),
(   min--moz-device-pixel-ratio: 2),
(     -o-min-device-pixel-ratio: 2/1),
(        min-device-pixel-ratio: 2),
(                min-resolution: 192dpi),
(                min-resolution: 2dppx) {
    #overlay .newGame .premium::before {
        background-image: url('../assets/images/shopItems/120Preview@2x.png');
    }
}