@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    /*
####################################################
G L O B A L S
####################################################
*/

    html,
    body,
    header,
    .view {
        height: 100%;
        font-family: 'Roboto', sans-serif;
    }

    body {
        background-color: #000;
    }

    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 50px;
    }

    h3 {
        font-size: 40px;
    }

    h4 {
        font-size: 30px;
    }

    p {
        font-size: 20px;
    }

    a {
        cursor: pointer;
        color: white;
    }

    li {
        cursor: pointer;
    }

    a:hover {
        color: gray;
        text-decoration: none;
    }

    .padding {
        width: 100%;
        height: 12.5%;
    }

    /* Hide mouse cursor class (see hideInactiveMouse.js) if inactive */
    /* .inactive {
       cursor:none;
      } */


    #isPlayingGif img,
    #isCracklingGif img {
        width: 70px;
    }

    .menuItems {
        min-height: 115px;
        padding-right: 20px;
    }


    .share img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }


    #shareModal .col-md-4 {
        padding: 30px 0 40px 0;
    }

    #shareURL {
        padding: 20px;
        background-color: white;
        color: black;
        word-break: break-all;
    }

    .nav-tabs {
        padding-top: 20px;
    }


    .overlayBar {
        position: absolute;
        bottom: 0%;
        left: 0%;
        background-color: #000;
        opacity: .7;
        width: 100%;
        padding: 5px;
        color: #999;
        font-size: 60px;
    }

    .overlayBar img {
        width: 75px;
    }

    .overlayBar .row {
        padding: 0 20px;
    }

    #meridian {
        padding: 10px;
        font-size: 70%;
    }


    /* Text Overlay
    ==================
    */
    #textOverlayBackground {
        position: absolute;
        top: 0%;
        left: 0%;
        padding: 20px;
        width: 100%;
        background-color: black;
        opacity: 0.5;
        color: white;
        /* text-overflow: ellipsis; */
        /* word-break: break-all; */
    }

    #isMusicPlaying,
    #fireplaceName,
    #textOverlayClip,
    #location {
        width: 375px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #29b5a8;
    }

    #textOverlayInput-0,
    #textOverlayInput-1,
    #textOverlayInput-2 {
        font-size: 44px;
        height: 74px;

    }

    #textOverlayInput-3,
    #textOverlayInput-4 {
        font-size: 34px;
    }

    .textOverlay img {
        width: 200px;
        padding-bottom: 10px;

    }


    #successGif img {
        width: 100px;
        padding-bottom: 20px;
    }

    #successTitle {
        padding-top: 20px;
    }





    /* Fireplace buttons to select diff fireplaces */
    .thumbWrapper {
        background-color: transparent;
        color: #fff;
        border: none;
        min-height: 300px;
    }

    .thumbWrapper:hover {
        color: #29b5a8;
        border: 1px solid #29b5a8;
        cursor: pointer;
    }



    textarea {
        width: 100%;
        height: 102px;
        padding: 12px 20px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        background-color: #f8f8f8;
        font-size: 24px;
        resize: none;
    }


    #helpAndAboutModal .tab-content a {
        text-decoration: underline;
    }







    /* -----------------------
  Form 
----------------------- */

    .form-control {
        border-radius: 0;
    }

    .form-control:focus {
        box-shadow: none;
    }

    .form-group {
        position: relative;
        margin-bottom: 25px;
    }

    .form-group>label {
        font-size: 21px;
        color: #a1a2a3;
        transform-origin: 0 0;
        transform: scale(1.4);
        pointer-events: none;
        position: relative;
        z-index: 5;
        padding-bottom: 15px;
    }

    .form-group>input {
        width: 100%;
    }

    .form-group>label {
        transition: transform 0.4s;
        transform-origin: 0 0;
        transform: scale(1.4) translateY(20px);
    }

    .form-group.not-empty>label {
        transform: none;
    }

    /*------------------------------
      Form
  ------------------------------*/
    .form-control {
        border: 0;
        border-bottom: 1px solid #a1a2a3;
    }

    .form-control,
    .form-control:focus,
    .form-control:focus:hover {
        color: #29b5a8;
        background: none;
        outline: none;
    }

    .form-control:focus,
    .form-control:focus:hover {
        border-bottom: 1px solid #29b5a8;
    }





    #loading {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        color: #999;
        text-shadow: 2px 2px #fff;
        font-size: 100px;
    }

    #page {
        padding-top: 100px;
        color: #fff;
    }

    /* Style for buttons to get val of fireplaces for dynamic change, see JS */

    .share .btn {
        padding: 10px;
    }



    #changeVideo-disabled {
        background-color: #000;
        color: white;
        opacity: .3;
    }

    #changeVideo-disabled:hover {
        color: white;
        opacity: .8;
    }

    /* Fireplace Video */

    .fireplace {
        position: fixed;
        right: 0;
        bottom: 0;
        max-width: 100%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 0;
    }

    #changeVideo {
        background-color: transparent;
        border: none;
        color: #fff;
    }

    #changeVideo:hover {
        color: #29b5a8;
    }

    .checkmark__circle {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        stroke-width: 2;
        stroke-miterlimit: 10;
        stroke: #7ac142;
        fill: none;
        animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    }

    /* Animated checkmark */

    .checkmark {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        display: block;
        stroke-width: 2;
        stroke: #7ac142;
        stroke-miterlimit: 10;
        margin: 10% auto;
        box-shadow: inset 0px 0px 0px #7ac142;
        animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    }

    .checkmark__check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    }

    @keyframes stroke {
        100% {
            stroke-dashoffset: 0;
        }
    }

    @keyframes scale {

        0%,
        100% {
            transform: none;
        }

        50% {
            transform: scale3d(1.1, 1.1, 1);
        }
    }

    @keyframes fill {
        100% {
            box-shadow: inset 0px 0px 0px 30px #7ac142;
        }
    }

    /* Styles for <audio> player */

    audio {
        /* filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%); */
        /* background-color: #29b5a8; */
        background-color: #29b5a8;
        width: 100%;
        /* height: 120px; */
    }

    audio::-webkit-media-controls-panel {
        /* background-color: #29b5a8; */
        background-color: #29b5a8;
    }

    #maintenance {
        color: red;
    }