/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████          HEX COLOUR CODES        ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/

/*
Hex Colour Codes

Hover colours:
White: #fff
Blue:  #7acbf5;
Pink:  #eaacb8;

Background colours: 
Dark Grey:    #2d2d2d;
Lighter Grey: #7e7e7e;
Light Grey:   #bbb;
*/

/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████          NAVIGATION MENU         ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
    .NavContainer{
        width: 60px;
        max-width: 60px;
        height: 100%;  
        min-height: 100%;       

        background-color: #2d2d2d;  

        /* IMPORTANT: */
        padding-top: 55px; 
        z-index: 2;
        position: fixed;
        top: 0;
        left: 0;    

        display: none;
    }   

    .NavWrapper{
        height: 100%;  

        border-style: none;
        color: white;
        overflow-y: hidden;
        overflow-x: hidden; 

        scrollbar-color: #9f9f9f #2d2d2d;
        scrollbar-width: thin;      

        background-color: #7accf500;
    }   

    .NavDiv{
        width: 50px;
        height: 50px;   

        margin-left: 5px;
        margin-bottom: 5px;
    }

    /* of the links*/
    a.NavHome,
    a.NavManuals,
    a.NavPartTrainer,
    a.NavGallery,
    a.NavLog,
    a.NavJellyfin{
        /*top-right-bottom-left*/
        padding: 16px 5px 16px 10px;

        /*Top Left - Top Right - Bottom Right - Bottom Left*/
        border-radius: 5px 0 0 5px;
    }

    a.NavHome:hover,
    a.NavManuals:hover,
    a.NavPartTrainer:hover,
    a.NavGallery:hover,
    a.NavLog:hover,
    a.NavJellyfin:hover{
        background-color: #7acbf5;
    }

    /* on :hover => Display applicable .Hide div*/
    a.NavHome:hover + .HideHome{
        display: block;
    }
    a.NavManuals:hover + .HideManuals{
        display: block;
    }
    a.NavPartTrainer:hover + .HidePartTrainer{
        display: block;
    }
    a.NavGallery:hover + .HideGallery{
        display: block;
    }
    a.NavLog:hover + .HideLog{
        display: block;
    }
    a.NavJellyfin:hover + .HideJellyfin{
        display: block;
    }

    /* .Hide div's  */
    .HideHome,
    .HideManuals,
    .HidePartTrainer,
    .HideGallery,
    .HideLog,
    .HideJellyfin{
        display: none;
        position: absolute;
        left: 55px;
        z-index: 2;
        font-size: 45px;
        color: white;
        background-color: #7acbf5;
        width: max-content;

        height: 51px;

        /*top-right-bottom-left*/
        padding: 0 10px 0 5px;

        /*Top Left - Top Right - Bottom Right - Bottom Left*/
        border-radius: 0 5px 5px 0;
    }

    /* .Hide div's height positioning*/
    .HideHome{
        top: 60px;
    }
    .HideManuals{
        top: 115px;
    }
    .HidePartTrainer{
        top: 170px; 
    }
    /*
    .HideGallery{
        top: 225px;
    }
    */
    .HideLog{
        top: 225px;
        /*top: 280px => Unhide if HideGallery is in use again*/
    }
    .HideJellyfin{
        top: 280px;
        /*top: 335px; => Unhide if HideGallery is in use again*/
    }

    /* Icon Size & Adjustment */
    img.HomeIcon,
    img.BookIcon,
    img.ImageIcon,
    img.CodeIcon,
    img.JellyfinICon{
        max-width: 35px;

        /*X - Y*/
        transform: translate(-2px, 13px);
    }

    img.TestIcon{
        max-width: 35px;

        /*X - Y*/
        transform: translate(0px, 13px);
    }


/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████    TOP BAR - MENUTOGGLE & LOGO   ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
    /* Menu Toggle div (Top Left, contains hamburger button & swagaviation logo) */
    .TopBar{
        width: 55px;
        height: 55px;
        background-color: #2d2d2d;

        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;

        display: flex;
        flex-direction: row;
    }

    /* MenuToggle Button */
    button.MenuToggle,
    button.MenuToggleActive{
        cursor: pointer;

        color: white;  

        background-color: #7ACBF5;

        width: 40px;
        height: 40px;

        margin: 10px;

        border-radius: 5px;
        border-style: none;
    }
    button.MenuToggleActive{
        background-color: #eaacb8;  
    }
    button.MenuToggle:hover{
        background-color: #eaacb8;  
    }
    button.MenuToggleActive:hover{
        background-color: #7ACBF5;        
    }

    /* Hamburger  */
    .hamburger{
        width: 28px;
        height: 5px;
        background-color: rgb(255, 255, 255);
        margin: 4px 0;
        border-radius: 5px;
        margin-left: 0px;
    }

    /* Swagaviation Logo */ 
    img.MenuSwagLogo{
        width: auto;
        height: 55px;
        margin-left: 15px;
        display: none;
    }


/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████             MAIN MENU            ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
    /* Main div containing the left hand side menu */
    .MenuContainer{
        width: 250px;
        max-width: 250px;
        height: 100%;  
        min-height: 100%;   

        background-color: #2d2d2d;

        /* IMPORTANT: */
        padding-top: 55px; 
        z-index: 2;
        position: fixed;
        top: 0;
        left: 0;

        font-size: 80%;

        display: none;
    }

    .MenuWrapper{
        height: 100%;  

        border-style: none;
        color: white;
        overflow-y: scroll;
        overflow-x: hidden;

        scrollbar-color: #9f9f9f #2d2d2d;
        scrollbar-width: thin;    
    }

    .Menu{
        height: min-content;
    }


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████         MENU TEXT & LINKS        ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
    /* Swagaviation Pages Links: */

    h1.SwagAviationTitle{
        margin-bottom: 5px;
        font-size: 225%;
    }
    h1.SwagAviationLinks{
        margin-top: 0px;
    }

    a.MenuLinkBlue:link,
    a.MenuLinkPink:link,
    a.MenuLinkWhite:link{
        padding: 0.5%;
        cursor: pointer;
        text-decoration: none;
    }

    a.MenuLinkBlue:link{color: #7ACBF5;}
    a.MenuLinkBlue:visited{color: #7ACBF5;}
    a.MenuLinkBlue:hover {color: white;}

    a.MenuLinkPink:link{color: #EAACB8;}
    a.MenuLinkPink:visited{color: #EAACB8;}
    a.MenuLinkPink:hover {color: white;}

    a.MenuLinkWhite:link{color: white;}
    a.MenuLinkWhite:visited{color: white;}
    a.MenuLinkWhite:hover {color: rgb(221, 221, 221);}




    /* Normal Page Links: */
    h1.MenuTitle{
        margin-bottom: 5px;
        font-size: 200%;
    }
    h2.MenuContent{
        margin-top: 0px;
        font-size: 160%;
    }

    .MenuLinkDiv{
        /*Top Left - Top Right - Bottom Right - Bottom Left*/
        border-radius: 0 5px 5px 0;
        padding-left: 5%;
        min-width: 95%;
        max-width: 95%;
    }
    .MenuLinkDiv:hover{
        background-color: #7e7e7e;
    }

    a.MenuLinks:link {color:white; text-decoration: none;}
    a.MenuLinks:visited {color:white; text-decoration: none;}
    a.MenuLinks:hover {color: white; text-decoration: none;}

    a.MenuLinksDarker:link {color:rgba(255, 255, 255, 0.63); text-decoration: none;}
    a.MenuLinksDarker:visited {color:rgba(255, 255, 255, 0.63); text-decoration: none;}
    a.MenuLinksDarker:hover {color: white; text-decoration: none;}



    /* Links inside of the DropDown Menus */
    .MenuLinkDropDownDiv{
        border-radius: 10px;
        min-width: calc(100% - 2 * 10px);
        max-width: calc(100% - 2 * 10px);
        padding: 2px;
        font-size: 165%;

        /*top-right-bottom-left*/
        margin: 0px 10px 0px 10px;
    }
    .MenuLinkDropDownDiv:hover{
        background-color: #7ACBF5;
    }

    /* Links inside of the Embedded DropDown Menus */
    .MenuLinkDropDownEmbedDiv{
        border-radius: 10px;
        min-width: 100%;
        max-width: 100%;
        padding: 2px;
    }
    .MenuLinkDropDownEmbedDiv:hover{
        background-color: #7ACBF5;
    }

/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████          MENU BUTTONS            ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
    .DropdownButton,
    .DropdownButtonEmbed,
    .DropdownButtonEmbedRed,
    .DropdownButtonEmbedGrey{
        font-family:'Sofia Sans', Times New Roman; 
        color: rgb(255, 255, 255);
        margin-left: 2%;
        margin-right: 2%;
        border-radius: 25px 25px 0px 0px;

        background-color: #2d2d2d;
        cursor: pointer;
        /*top-right-bottom-left*/
        padding: 14px 18px 14px 18px;
        width: 96%;
        min-width: 96%;
        border: none;
        text-align: left;
        font-size: 200%;
    }
    .DropdownButtonEmbed{
        font-size: 185%;
        background-color: #bbbaaa00;
        border-radius: 25px;
    }

    .DropdownButtonEmbedGrey{
        border-radius: 25px;
        background-color: #4d4d4d;
        cursor: auto;
        margin-bottom: 5px;
    }

    .DropdownButton:after,
    .DropdownButtonEmbed:after{
        /* IMPORTANT */
        content: '\2228';
        float: right;

        /* Adjustments Okay */    
        color: rgb(255, 255, 255);
        margin-left: 5px;
    }
    .DropdownButton:hover,
    .DropdownButtonEmbed:hover{
        background-color: #7ACBF5;
        border-radius: 25px;
    }
    .DropdownButtonEmbedRed:hover{
        background-color: #dc2323;
    }
    .DropdownButtonActive{
        background-color: #7e7e7e;
    }
    .DropdownButtonActive:hover{
        background-color: #EAACB8;
        border-radius: 25px 25px 0px 0px ;
    }
    /*
    .DropdownButtonActive:hover ~ .DropdownContent{background-color: #EAACB8;}
    .DropdownButtonActive:hover #slider{ background-color: #ffffff;}
    */
    .DropdownButtonEmbedActive{
        background-color: #bbb;
        border-radius: 25px 25px 0px 0px ;
    }
    .DropdownButtonEmbedActive:hover{
        background-color: #EAACB8;
        border-radius: 25px 25px 0px 0px ;
    }


    .DropdownButtonActive:after,
    .DropdownButtonEmbedActive:after{
        content: "\2227";
    }

    .DropdownContent,
    .DropdownContentEmbed{
        font-family:'Sofia Sans', Times New Roman;
        padding: 0px;
        max-height: 0;

        width: 96%;
        max-width: 96%;
        /*top-right-bottom-left*/
        margin: 0% 2% 5px 2%;

        border-radius: 0px 0px 25px 25px;

        max-height: 0;
        background-color: #7e7e7e;
        font-size: 100%;
        text-align: left;

        /* CRITICAL */
        overflow: hidden;
    }
    .DropdownContentEmbed{
        font-size: 175%;
        background-color: #bbb;
        border-radius: 0px 0px 25px 25px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .DropdownContentEmbed_BottomPadding{
        padding-bottom: 15px;
    }


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████           MENU BUTTON            ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.MenuButton{
    font-family:'Sofia Sans', Times New Roman;
    color: rgb(255, 255, 255);
    border-style: none;
    background-color: #ff000000;
    border-radius: 15px;
    font-size: 100%;
    text-align: left;
    width: 100%;
    cursor: pointer;
}
    .MenuButton:hover{
        background-color: #7ACBF5;
    }
    .MenuButtonRed:hover{
        background-color: #dc2323;
    }
    .MenuButtonGrey:Hover{
        background-color: #7e7e7e;
        cursor: default;
    }


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████           RANDOM SWITCH          ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
    .SwitchContainer{
        display: grid;
        place-items: center;

        grid-template-rows: auto 0 auto 0;
        row-gap: 5px;
    }    
    .SwitchText{
        font-size: 175%;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 55px;
        height: 30px;
    }
    /* Hide default HTML checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #EAACB8;
      -webkit-transition: .4s;
      transition: .4s;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 6px;
      bottom: 6px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
    input:checked + .slider {
      background-color: #7ACBF5;
    }
    input:focus + .slider {
      box-shadow: 0 0 1px #7ACBF5;
    }
    input:checked + .slider:before {
      -webkit-transform: translateX(23px);
      -ms-transform: translateX(23px);
      transform: translateX(23px);
    }
    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }
    .slider.round:before {
      border-radius: 50%;
    }


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████     MENU LOGOS  & VERSION INFO   ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
    .MenuLogos{
        width: 100%;
        max-width: 96%;
        
        position: absolute;
        bottom: 0;
    
        border-top-style: solid;
        background-color: #2d2d2d;
    }
    .MenuLogosWrapper{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        height: 100px;

        width: 100%;
        max-height: 100%;
    }
    .MenuLogosItem{
        flex: 45%, 55%;
        max-width: 45%, 55%;

        display: grid;
        place-items: center;
    }
    
    .MenuLink1,
    img.MenuAccLogo{
        max-width: 100%;
        padding: 10px;
    }
    .MenuLink2,
    img.MenuVistaLogo{
        max-width: 100%;
        padding: 10px;
    }

    .MenuInfo{
        flex: 100%;
        max-width: 100%;
        height: auto;
        font-size: 120%;
        border-top-style: solid;
        padding: 2px;
        text-align: center;
    }


/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████    RESPONSIVE LAYOUTS - MOBILE   ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
@media (max-width: 600px){

/* Menu Toggle div (Top Left, contains hamburger button & swagaviation logo) */
.TopBar{
    width: 100%;
    height: 55px;
}

.Main{
    top: 60px;
}

/* Menu Toggle Button */
button.MenuToggle,
button.MenuToggleActive{
    margin: 7px;

    position: absolute;
    right: 0;
    }


/* Swagaviation Logo */ 
img.MenuSwagLogo{
    margin-left: 5px;
    display: block;
}


    .MenuContainer{
        display: none;
    }
    .NavContainer{
        display: none;
    }


/* Main div containing the left hand side menu */
.MenuContainer{
    /* IMPORTANT: */
    padding-top: 55px; 
}

    /* Normal Page Links: */
    h1.MenuTitle{
        margin-bottom: 5px;
        font-size: 225%;
    }
    h2.MenuContent{
        margin-top: 0px;
        font-size: 185%;
    }

    .MenuLinkDiv{
        border-radius: 0;
        padding-left: 0%;
        min-width: 100%;
        max-width: 100%;
    }



        img.MenuAccLogo{
            max-width: 45%;
        }
        img.MenuVistaLogo{
            max-width: 55%;
        }

        .MenuInfo{
            font-size: 150%;
        }
}

@media (max-width: 500px){
    img.MenuAccLogo{
        max-width: 55%;;
    }
    img.MenuVistaLogo{
        max-width: 65%;
    }
}

@media (max-width: 450px){
    img.MenuAccLogo{
        max-width: 60%;
    }
    img.MenuVistaLogo{
        max-width: 70%;
    }
}

@media (max-width: 400px){
    img.MenuAccLogo{
        max-width: 65%;
    }
    img.MenuVistaLogo{
        max-width: 75%;
    }
}

@media (max-width: 375px){
    img.MenuAccLogo{
        max-width: 70%;
    }
    img.MenuVistaLogo{
        max-width: 80%;
    }
}

@media (max-width: 320px){
    img.MenuAccLogo{
        max-width: 80%;
    }
    img.MenuVistaLogo{
        max-width: 90%;
    }
}