/* Header */
    #header{
        position: fixed;
        width: 100%;
        height: 60px;
        text-align: center;
        z-index: 150;
        background-color: #000;
    }

    #inner_header{
        position: absolute;
        width: 100%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }

    .logo{
        position: absolute;
        height: 90%;
        top: 5%;
        min-width: 30px;
        text-align: center;
        padding: 0 20px;
        cursor: pointer;
        z-index: 100;
        background-color: #fff;
        border-radius: 100px;
    }

    .logo img{
        height: 70%;
    }

    .logo p{
        position: relative;
        width: 100%;
        bottom: 20%;
        text-align: center;
        font-size: 1rem;
    }

    .logo p .red{
        color: #d4042d;
    }
    .logo p .blue{
        color: #001e81;
    }

    .full_screen{
        position: absolute;
        left: 4%;
        /*width: 8%;*/
        /*min-width: 30px;*/
        height: 60%;
        text-align: center;
        cursor: pointer;
        z-index: 100;
        display: none;
    }

    .settings{
        position: absolute;
        right: 4%;
        /*width: 8%;*/
        /*min-width: 30px;*/
        height: 60%;
        text-align: center;
        cursor: pointer;
        z-index: 100;
        display: none;
    }

    
/* Menu */
    #menu{
        position: absolute;
        display: none;
        width: 100%;
        height: calc(100% - 60px);
        background-color: #000;
        color: #fff;
        top: 60px;
        overflow-y: auto;
        z-index: 100;
    }

    .menu_visible{
        display: block !important;
    }

    .menu_option{
        width: 90%;
        padding: 0;
        margin: 0 5%;
        margin-bottom: 30px;
        display: inline-block;
        text-align: center;
    }
    .menu_option.hidden{
        overflow: hidden;
    }

    .menu_option.hidden .content{
        height: 0;
    }


    .menu_option h1{
        font-size: 1.2rem;
        display: inline-block;
        text-align: center;
    }

    .menu_option .amount_of_quests{
        /*display: inline-block;*/
        font-size: 1rem;
        margin-top: 6px;
    }

    .header_container{
        position: relative;
        text-align: center;
        font-size: 1.2rem;
        padding-bottom: 6px;
        border-bottom: 1px solid #fff;
    }


    .header_container h1:after{
        /*content: " ↑";*/
        font-family: "Font Awesome 5 Free"; font-weight: 900; content: " \f0d8";

    }
    .header_container h1.hidden:after{
        /*content: " ↓";*/
        font-family: "Font Awesome 5 Free"; font-weight: 900; content: " \f0d7";
    }

    .header_container .info{
        position: absolute;
        top: -4px;
        right: 0;
        border-radius: 80px;
        border: 1px solid #fff;
        padding: 4px;
        cursor: pointer;
        width: 18px;
        text-align: center;
        font-size: 1rem;
    }

    /* Language */
        #choose_language{
            text-align: center;
        }

        .language_flag{
            margin: 0 2%;
            width: 16%;
            opacity: 0.5;
            border-bottom: 1px solid transparent;
        }
        #choose_language .language_flag:hover{
            opacity: 1 !important;
        }

        .language_flag_selected{
            opacity: 1 !important;
            border-color: #fff !important;
            /*border-bottom: 1px solid #fff;*/
        }

    /* Theme */
        #choose_theme{
            text-align: center;
        }

        #choose_theme .theme_icon{
            margin: 0 2%;
            width: 14%;
            opacity: 0.5;
            padding: 2% 0;
        }
        #choose_theme .theme_icon:hover{
            opacity: 1 !important;
        }

        .theme_icon_selected{
            opacity: 1 !important;
            border-bottom: 1px solid #fff;
        }

    .range_value{
        font-size: 1.2rem;
        color: #fff;
        margin-top: 6px;
    }

    /* Menu Quests - the area with all the quests */
        #menu_quests{
            max-height: 70%;
            overflow: auto;
            box-shadow: 0 14px 8px -10px #fff;
        }

        #menu_quests.hidden{
            box-shadow: none !important;
            border: none !important;
            overflow: hidden;
        }

        #menu_quests_inner h2{
            margin: 10px auto;
            border-bottom: 1px solid black;
            width: 50%;
        }

        #menu_quests_inner h2:after{
            /*content: " ↑";*/
            font-family: "Font Awesome 5 Free"; font-weight: 900; content: " \f0d8";
        }
        #menu_quests_inner h2.hidden:after{
            /*content: " ↓";*/
            font-family: "Font Awesome 5 Free"; font-weight: 900; content: " \f0d7";
        }

        #menu_quests_inner .type{
            overflow: hidden;
        }

        #menu_quests_inner .type.hidden{
            height: 0;
        }


        .menu_quest{
            position: relative;
            width: 90%;
            height: 7%;
            min-height: 30px;
            font-size: 1rem;
            margin: 2% auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .menu_quest p{
            margin-left: 40px;
        }

        /* .menu_quest .switch div{
            margin-left: 40px;
            width: 100%;
            max-width: calc(100% - 40px - 40px - 30px);
            overflow: hidden;
            white-space: nowrap;
        } */

        .menu_quest label{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            /*width: 100%;*/
        }

        .menu_quest input{
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .switch{
            position: relative;
            height: 20px;
        }

        .switch input{ /* hide the real slider... */
            opacity: 0;
            width: 0;
            height: 0;
        }

    /* Sliders */
        .slider{
            position: absolute;
            width: 40px;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #9c9c9c;
            border-radius: 34px;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before{
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 1px;
            bottom: 1px;
            background-color: #fff;
            border-radius: 50%;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider{
            background-color: #ff9b29;
        }

        input:focus + .slider{
            box-shadow: 0 0 1px #3914af;
        }

        input:checked + .slider:before{
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(20px);
        }

    #menu_quests_inner .info{
        position: absolute; 
        right: 0px; 
        border-radius: 80px;
        border: 1px solid #fff;
        padding: 4px;
        cursor: pointer;
        width: 18px;
        text-align: center;
    }

    #menu_quests_inner .info:active{
        background-color: #fff;
        color: #000;
        font-weight: bold;
    }

/* Reset to Default Settings button */ 
    #default_settings {
        position: relative;
        width: 70%;
        height: 8vh;
        margin: auto;
        margin-bottom: 5%;
        font-size: 1rem;
        font-weight: bold;
        background-color: #c53c3c;
        border-radius: 10px;
        box-shadow: 2px 2px #dc7777;
    }

    #default_settings:active {
        background-color: #921e1e;
        box-shadow: 0px 0px #dc7777;
    }

/* Extra menu item - where Rules, About, Help is placed */
    .extra_item_container{
        width: 28%;
        max-height: 100px;
        margin: 0 2%;
        padding: 2% 0;
        font-size: 1rem;
        display: inline-block;

    }
    .extra_item_container p{
        margin-bottom: 10px;
    }

    .extra_item_container img{
        max-width: 100%;
        max-height: 60px;
    }

/* Rules */
    .bullet{
        display: block;
        margin-left: 20px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        margin-bottom: 6px;
    }

    .bullet:before{
        content: "• ";
        /*content: "• ";*/
    }

/* About */
    .about_inner_container{
        margin-bottom: 5%;
    }

    #social_icons{
        text-align: center;
    }
    #social_icons img{
        margin: 5% 5% 0% 5%;
        max-width: 128px;
        width: 28%;
    }

/* Help */
  .help_inner_container h2{
        margin-bottom: 10px;
    }

    .help_inner_container .my_p{
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .help_inner_container .my_p img{
        width: 25%;
        float: left;
    }

    .help_inner_container .my_p .small_image{
        width: 15%;
        padding: 0 5%;
    }

    .help_inner_container .my_p p{    
        width: 70%;
        margin-bottom: 0;
        margin-left: 5%;
        float: left;
        text-align: left;
    }

    .help_inner_container .setup{  
        text-align: left;
        margin-bottom: 20px;
    }  

    /* Show and hide the options in the intro screen */
        #step2 .click_to_show .content{
            display: none;
        }
        #step2 .click_to_show.visible .content{
            display: block !important;
        }

        #step2 .click_to_show:not(.visible) h2{
            margin-bottom: 20px;
            padding-bottom: 4px;
            border-bottom: 1px solid #9a9a9a;
        }

        #step2 .click_to_show:not(.visible):last-child h2{
            margin-bottom: 0;
        }

        #step2 .click_to_show h2:after{
            font-family: "Font Awesome 5 Free"; font-weight: 900; content: " \f0d7";
        }
        #step2 .click_to_show.visible h2:after{
            font-family: "Font Awesome 5 Free"; font-weight: 900; content: " \f0d8";
        }




    /* Give this class if the info should only be shown on the intro screen */
    .help_inner_container .only_show_on_intro{
        display: none;
    }  


/* Extra menu popup styling */
    .extra_container {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        font-size: 1.6rem;
        margin: auto;
        z-index: 200;
        background-color: #fff;
        font-size: 0.8rem;
        line-height: 1.3rem;
        /*padding-bottom: 6%;*/
        display: none;
    }

    .extra_container h1{
        font-size: 1.4rem;
        margin-bottom: 2%;
    }
    .extra_container h3{
        font-weight: bold;
        font-size: 1rem;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .extra_container img{
        position: relative;
        max-width: 100%;
    }
    .logo.extra_logo img{
        height: 56%;
        /*height: 60%;*/
    }

    .extra_container p{
        margin-bottom: 0.5rem;
    }


    .inner_extra_container{
        height: 100%;
        width: 100%;
        padding: 10% 5%;
        padding-top: 0;
        overflow-y: auto;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .extra_logo_header {
        position: relative;
        width: 40%;
        height: 60px;
        z-index: 150;
        left: 30%;
        margin-bottom: 5%;
    }
    .extra_logo_inner_header {
        position: absolute;
        width: 100%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .extra_logo_header .logo p{
        margin-bottom: 0 !important;
        margin-top: -4px;
    }


/* More Quest Info - The Popup */
    #more_quest_info.open{
        display: block !important;
    }

    #more_quest_info h1{
        position: relative;
        font-size: 1.4rem;
    }

    #more_quest_info .name{
        font-weight: bold;
        margin-bottom: 20px;
    }

    #more_quest_info .text{
        font-size: 1.5rem;
    }
    #more_quest_info .image{
        width: 100%;
        /*height: 50%;*/
        height: 160px;
        /*max-height: 200px; */
        margin: 5% auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgba(255, 255, 255, 0.25);
        /*background-color: #fff;*/
    }

    #more_quest_info .image img{
        width: 100%;
        background-color: #fff;
    }