/* Variables - Start */

:root {
    --circle-size-1: 44px;
    --circle-size-2: 36px;

    --acsent-color-1: #00356B;
    --acsent-color-2: #387580;
    --active-color: #42a49f;
    --box-shadow-1: 0.3vh 0.3vh 1vh rgba(0, 0, 0, 0.3);
    --border-1: 2px rgba(165, 225, 255, 0.3) solid;
    --border-color-1: rgb(152, 196, 235);
    --bg-color: rgba(180, 240, 255, 0.2);
    --text-shadow-1: 1px 1px 5px rgba(40, 105, 133, 0.3);
    --text-shadow-2: 1px 1px 8px rgba(143, 221, 255, 0.8);
  }

/* Variables - Ended */


/* Animations - Start */

@keyframes circle {
    from {
        border-radius: 0;
        margin: 0 0;
    } to {
        width: var(--circle-size-2);
        height: var(--circle-size-2);
        border-radius: 50%;
        margin: auto;
    }
}

.fade-in {display: flex; animation: fade-in 1s ease;}

/* Animations - End */

body {

    font-family: "Roboto", sans-serif;

    height: 100dvh;
    width: 100dvw;

    margin: 0;
    padding: 0;

    background-size: cover;
    background-repeat: no-repeat;

    background-image:  url('images/organization_background_image.jpg');
    -webkit-backdrop-filter: brightness(0.6);
    backdrop-filter: brightness(0.6);

    box-shadow: inset 0 0 3vh rgba(255, 255, 255, 0.5);

}

/* Font Size - Start */

.fs-1 {
    font-size: 5px;
}

.fs-2 {
    font-size: 10px;
}

.fs-3 {
    font-size: 15px;
}

.fs-4 {
    font-size: 20px;
}

.fs-5 {
    font-size: 25px;
}

.fs-6 {
    font-size: 30px;
}

.fs-7 {
    font-size: 35px;
}

.fs-8 {
    font-size: 40px;
}

.fs-9 {
    font-size: 45px;
}

.fs-10 {
    font-size: 50px
}

.fs-12 {
    font-size: 62.5px;
}

.fs-15 {
    font-size: 75px
}


.fs-20 {
    font-size: 100px;
}

.bold {
    font-weight: bold;
}

.noselect {
    -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 */
}

/* Font Size - Ended */

div#bg {

    position: absolute;

    width: calc(100vw - 4.6vh);
    height: calc(100vh - 4.6vh);

    top: 2.3vh;
    left: 2.3vh;

    background-size: cover;
    background-image: url('images/organization_background_image.jpg');
    filter: saturate(1.3);
    -webkit-backdrop-filter: saturate(0.5);
    border-radius: calc(1vw + 1vh);
    box-shadow: inset 0px 0px 1.5vh rgb(0, 0, 0, 0.7);

    padding: 2vh;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

}

div#login-box {

    width: 350px;

    background-color: var(--bg-color);
    border: var(--border-1);
    border-radius: 16px;   
    box-shadow: 0.3vh 0.3vh 1vh rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(1.2vh);
    -webkit-backdrop-filter: blur(1.2vh);

    display: flex;
    flex-direction: column;

}

div#school-brand1 {
    
    display: flex;
    flex-direction: column;

}

div#logo {
    
    width: 124.5px;
    height: 124.5px;

    margin: 35px auto 10px auto;

    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-tap-highlight-color: transparent;

}

div.sq0 {

    width: calc(var(--circle-size-1) * 2);
    height: calc(var(--circle-size-1) * 2);

    display: grid;
    grid-template-columns: auto auto;

    transform: rotate(45deg);

    transition: 26s ease;

}

span.sq {

    box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.6);

    display: block;

    transition: all 0.5s ease;

}

.sq1 {background-color: #f9b115;}
.sq2 {background-color: #b64b30;}
.sq3 {background-color: #044cf3;}
.sq4 {background-color: #f20d20;}

div#logo:hover > .sq0 {transform: rotate(20.125turn);}

span.qsis {

    color: var(--acsent-color-1);
    font-weight: 600;
    font-family: "Poppins", sans-serif;

    margin: 0 auto;

}

div#login-form {

    display: flex;
    flex-direction: column;

}

label.input-hint {

    margin: 10px 0 4px 22px;

    display: flex;
    justify-content: start;
    align-items: center;

    -webkit-tap-highlight-color: transparent;

}

a.input-hint {

    font-size: 20px;

    width: fit-content;
    
    margin: 12px 0 7px 22px;

    display: flex;
    justify-content: start;
    align-items: center;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

}

span.fg-pw {

    font-weight: 100;
    font-family: "Roboto", sans-serif;

    color: #387580;
    text-shadow: var(--text-shadow-1);
    font-weight: 550;

    transition: all 0.3s ease;

}

a.input-hint:hover .fg-pw {

    color: aliceblue;

}

span.input-hint {
    
    color: var(--acsent-color-2);
    font-family: "Roboto", sans-serif;
    text-shadow: var(--text-shadow-1);

    margin-left: 6px;

}

span.symbol {color: var(--acsent-color-2)}

span.symbol, span.symbol2 {font-family: 'Material Symbols Outlined';}

div.input-div {

    font-family: "Roboto", sans-serif;
    font-weight: 300;

    width: 88%;
    height: 10%;

    margin: 0 auto;

    background-color: #ffffff4d;
    border-radius: 12px;
    border: 0.13vh var(--border-color-1) solid;

    outline: 0;

    box-sizing: border-box;

    display: flex;

    transition: background-color 0.3s ease;

}

#pw-label {margin-top: 20px;}

input#id-fleid, input#pw-fleid {

    color: var(--acsent-color-1);

    width: 100%;

    font-family: "Roboto", sans-serif;
    font-weight: 300;

    background-color: transparent;
    border: none;

    padding: 12px;

    outline: 0;

}

span#view-pw {

    position: static;

    margin: auto 0;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

}

input#submit {

    color: var(--acsent-color-2);
    font-weight: 550;

    width: 88%;
    height: 55px;

    margin: 0 auto;
    margin-bottom: 20px;

    background-color: #ffffff4d;
    border-radius: 12px;
    border: 0.13vh var(--border-color-1) solid;

    padding: 0;

    outline: 0;

    transition: background-color 0.3s ease, color 0.3s ease;

    cursor: pointer;
    -webkit-tap-highlight-color: var(--acsent-color-2);

}

div.input-div:hover, label#pw-label:hover + div#password, label#id-label:hover + div#id {

    background-color: #f0f8ff99;

}

input#submit:hover {

    color: aliceblue;

    background-color: var(--acsent-color-2);

}











/* QSIS Main Section Start */

div#sidebar {

    display: flex;
    flex-direction: row;

}

nav#vert {

    position: relative;

    width: 16.5vw;
    height: 90dvh;

    background-color: var(--bg-color);
    border: var(--border-1);
    border-radius: 2vh;
    box-shadow: var(--box-shadow-1);

    padding-bottom: 10px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow: scroll;
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    
}

div#school-brand2 {

    width: 80%;

    margin: 3vh auto 0 auto;

    border-bottom: 2px var(--acsent-color-2) solid;

    padding-bottom: 2.4dvh;

    display: flex;
    justify-content: center;
    align-items: center;

}

img#logo2 {

    width: calc(2vh + 2vw);
    height: calc(2vh + 2vw);

    margin: 0 calc(1vh + 1vw) 0 20px;

    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);

    transform: rotate(45deg);

    transition: transform 25s ease;

}

span.qsis2 {

    font-family: "Poppins";
    font-weight: 600;
    font-size: calc(2vw + 1vh);
    text-align: center;
    color: var(--acsent-color-1);

}

ul#list-1 {

    height: 100%;

    margin: 20px 0 0 calc(0.5vh + 0.7vw);
    
    padding: 0;

}

li.nav-item-1 {

    width: fit-content;

    margin-bottom: 1vh;

    color: var(--acsent-color-2);
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: calc(0.65vw + 0.65vh);
    text-shadow: var(--text-shadow-1);

    border-bottom: 0.3vh transparent solid;

    display: flex;
    align-items: center;

    cursor: pointer;

    transition: transform 0.3s ease, border-bottom 0.21s ease, color 0.2s linear;

    -webkit-tap-highlight-color: transparent;

    white-space: nowrap;

}

li.nav-item-1:hover {

    border-bottom: 0.3vh var(--acsent-color-2) solid;

    transform: translateX(1.5vh);

}

li.nav-item-1:active {color: var(--active-color); border-bottom: 0.3vh var(--active-color) solid; text-shadow: var(--text-shadow-2); transition: 0.1s ease;}

li.nav-item-1:active span.symbol2 {color: var(--active-color)}

span.symbol2 {color: var(--acsent-color-2); font-size: 3.8vh; margin-right: 12px; transition: 0.1s ease;}

#bottom {position: absolute; width: auto; bottom: 8px;}

div#content {background-color: transparent;}

div.blur {

    border-radius: 2vh;
    backdrop-filter: blur(1.2vh);
    -webkit-backdrop-filter: blur(1.2vh);

}

div.tabs {

    width: 79vw;
    height: 90dvh;

    margin-left: 1vw;

    background-color: var(--bg-color);
    border: var(--border-1);
    border-radius: 2vh;
    box-shadow: var(--box-shadow-1);

    padding: 2vh;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

}

h1.tabs-title {

    color: var(--acsent-color-1);
    font-size: 48px;

    height: fit-content;
    width: 85%;

    margin: 20px 0 0 10px;

    border-bottom: 0.4vh #00356B solid;

    padding-bottom: 8px;

}

h2.tabs-heading1 {

    color: var(--acsent-color-2);
    font-weight: 300;
    font-size: 35px;
    text-shadow: var(--text-shadow-1);

}

/* Tab 1 - Start */

div#box1 {

    margin: 10px 0 0 10px;

    display: flex;
    flex-direction: column;

}

/* Tab 1 - Ended */

/* Universal Responsive for QSIS Main - Start */

@media screen and (max-width: 1580px) {

    nav#vert {width: 22vw;}

    div#school-brand2 {

        margin-top: 1vh;
    
        padding-bottom: 0.2vh;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
    }

    img#logo2 {

        width: 70px;
        height: 70px;

        margin: 15px auto;

    }    

    span.qsis2 {

        font-family: "Poppins";
        font-size: 32px;

    }

    ul#list-1 {margin: 15px 0 0 0; padding: 10px 0 0px calc(0.15vh + 1.05vw); box-sizing: border-box; overflow: scroll; -ms-overflow-style: none;  scrollbar-width: none;}

    span.symbol2 {font-size: calc(0.9vw + 2.4vh); margin-right: 10px;}

    li.nav-item-1 {

        width: fit-content;

        font-size: calc(0.8vw + 0.9vh);

        margin-bottom: 8px;


    }

    li.nav-item-1:hover {transform: translateX(1.3vh);}

    #bottom {position: unset; margin-top: 45px;}

    div#content {background-color: transparent;}

    div.tabs {

        width: 72vw;
        height: 90dvh;

    }

}

/* Universal Responsive for QSIS Main - Ended */

/* QSIS Main Section Ended */











/* iPad Landsacpe Responsive CSS Section Start */

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

    div#bg {

        height: calc(100dvh - 5dvh);

    }

    div.tabs {width: 75.5%; margin-left: 1.5%;}

    h1.tabs-title {font-size: 35px;}

}

/* iPad Landsacpe Responsive CSS Section Ended */

/* iPad Portrait Responsive CSS Section Start */

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

    div#bg {

        width: calc(100dvw - 4dvh);
        height: calc(100dvh - 4dvh);
    
        top: 2dvh;
        left: 2dvh;

        overflow: hidden;

    }

    ul#list-1 {margin: 15px 0 0 0; padding-left: calc(0.15vh + 1.15vw);}

    nav#vert {width: calc(5vh + 21vw);}

    div.tabs {width: 68.5%; margin-left: 3%;}

    li.nav-item-1 {font-size: calc(0.7vw + 0.9vh);}

    li.nav-item-1:hover {border-bottom: 0.185vh var(--acsent-color-2) solid; transform: translateX(0.8vh);}

    #bottom {position: absolute; bottom: 8px;}

    h1.tabs-title {font-size: 35px;}

}

/* iPad Portrait Responsive CSS section Ended */
/* Mobile Portrait Responsive CSS section Start */

@media only screen and (max-width: 768px) and (orientation: portrait) {

    body {overflow: hidden;}

    div#bg {

        width: calc(100vw - 3.7dvh);
        height: calc(100dvh - 3.7dvh);

        top: 1.85dvh;
        left: 1.85dvh;

        padding-left: 15px;

        overflow: hidden;

    }

    div#login-box {

        max-width: 80%;

    }

    span.qsis2 {
        
        display: none;

    }

    div#horizontal {width: 70%;}

    img#logo2 {width: 38px; height: 38px; margin-bottom: 20px;}

    div#main {margin-right: 0;}

    nav#vert {width: calc(7vh + 4.5vw);}
    
    div.tabs {width: 90.5%; margin-left: 5%;}

    ul#list-1 {width: fit-content; margin: 12px auto 0 auto; overflow: scroll;}

    li.nav-item-1 {font-size: 0; border: unset; margin-bottom: 20px;}

    li.nav-item-1:hover {border: unset; transform: unset;}

    span.symbol2 {font-size: 35px; transition: 0.4s ease; border: 2.5px transparent solid; border-radius: 4px; transition: 0.4s ease;}

    span.symbol2:hover {color: var(--active-color); border: 2.5px var(--active-color) solid; border-radius: 10px;}

    #bottom {position: unset; margin-top: 50px; border-top: 2px var(--acsent-color-2) solid; padding-top: 15px; box-sizing: border-box;}

    h1.tabs-title {font-size: 30px;}

}

/* Mobile Portrait Responsive CSS section Ended */
/* Mobile Landscape Responsive CSS section Start */

@media only screen and (max-height: 605px) and (orientation: landscape) {

    body {overflow: hidden;}

    div#bg {

        width: calc(100vw - 4.2dvh);
        height: calc(100dvh - 4.2dvh);

        top: 2.1dvh;
        left: 2.1dvh;

        padding: 0 0 0 10px;

        overflow: hidden;

    }

    div#login-box {

        width: 60%;
        max-height: 80%;

        display: flex;
        flex-direction: row;
        justify-content: center;

    }

    div#school-brand1 {margin-left: 15px; display: flex; flex-direction: column; justify-content: center;}

    div#logo {margin: 0 20px 0 20px; transform: scale(95%);}

    span.qsis {font-size: 38px;}

    div.input-div {

        height: 16%;

    }

    div#login-form {width: 80%; margin: 0 0 0 auto;}

    label.input-hint, label#pw-label {

        font-size: 23px;

        margin: 10px 0 0 22px;

    }

    a.input-hint {font-size: 18px;}

    input#submit {font-size: 18px; height: 16%; margin-bottom: 5px;}

    img#logo2 {width: 55px; height: 55px; margin-bottom: 15px;}

    span.qsis2 {font-size: 25px;}

    li.nav-item-1 {font-size: 13px;}

}