/* --------------------------------------------- */
/* ------- RESET CSS --------------------------- */
/* --------------------------------------------- */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video, article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
        font-size: 15px; /* Base font size*/

    }

    html *{
        font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    }
    html, body { 
        height: 100%;
    }
    body {
        line-height: 1;
        color: white;
        line-height: 1;
        background-color: #F1F2F7;
    }
    a {
        text-decoration: unset; /* Removes underline */
        color: unset; /* Resets color to inherit from parent */
        background-color: unset; /* Resets background color */
        font-weight: unset; /* Resets font weight */
        font-size: unset; /* Resets font size */
    }
    span{
        color: white;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
        q:before, q:after {
        content: '';
        content: none;
    }
    table { /*Table content and size*/
        border-collapse:collapse;
        color: #171717;
        font-family: monospace;
        width:100%;
        text-align: left;
        border-spacing: 0rem;
    } 
    th {
        position: relative;
        color: white;
    }
    select {
        width: 100%;
        height: 2.5rem;
        border-radius: 0.4rem;
        border-color: #478495;
        background-color: rgb(116 135 141 / 11%);
    }
    input, select {
        padding: 0.3rem;
        box-sizing: border-box;
        border: 0.1rem solid #5D5D5D;
        color: white;
        background-color: rgb(255 255 255 / 5%);
        border-radius: 0.3rem;
        border-color: rgb(255 255 255 / 8%);
        width: 100%;
        font-size: 1rem;
        height: 2.2rem;
    }
    textarea {
        padding: 0.3rem;
        box-sizing: border-box;
        border: 0.1rem solid #5D5D5D;
        color: white;
        background-color: rgb(255 255 255 / 5%);
        border-radius: 0.3rem;
        border-color: rgb(255 255 255 / 8%);
        width: 100%;
        font-size: 1rem;
        min-height: 1.5rem; /* Prevent tiny empty textarea */
        resize: none;
        overflow: hidden;
    }
    select option {
        margin: 40px;
        background-color: rgba(33, 33, 33, 1);
        color: #fff;
    }
    img {/*Makes all images undragable / unselectable*/
        user-drag: none; 
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    a {
        color: inherit; /* Use the color of the parent element */
        text-decoration: none; /* Remove underline */
        padding: 0px;
        margin: 0px;
    }
    input:focus, textarea:focus, select:focus{
        outline: none;
    }
    input[type="checkbox"] {
        accent-color: #008cff;
    }












/* --------------------------------------------- */
/* ------- COLOR PALLETE ----------------------- */
/* --------------------------------------------- */

    :root {
    	--GreyDark: #000000; 
        --GreyLight: #0a0a0a;
        --BoxType1: rgb(0 3 8 / 64%);
        --NavigationBackground: rgb(4 7 16);
        --NavigationBackground2: rgb(9 15 24);
        --nav_app_title: #FFFFFF;
        --PageName: #FFFFFF;
        --NavText: #707070;
        --NavHover: #FFFFFF;
        --NavDropSelected: #FFFFFF;

        --Text1: #FFFFFF;
        --Text2: #8C8C8C;
        --Text3: #8C8C8C;

        /* Green */
        --Green1: #4FB84A;
        --Green2: #265625;
        --Green3:  #0d260d;

        /* Blue */
        --Blue1: #4A88B8;
        --Blue2: #2b5379;
        --Blue3: #182839;

        /* Red */
        --Red1: #d64545;
        --Red2: rgb(110, 29, 29);
        --Red3: rgb(70, 13, 13);

        /* Orange */
        --Orange1: #e66e32;
        --Orange2: #b23d1c;
        --Orange3: #3e130c;

        /* Theme */
        --Theme1: #42bfd3;
        --Theme2: #12445d;
        --Theme3: #1a313d;
        --Theme4:  rgb(77 109 123);
        --Theme5:  rgb(28 38 45 / 78%); 

        --Radious1: 0.25rem; /* Buttons */
        --Radious2: 0.25rem; /* Other */
        --Radious3: 0.25rem; /* Other */
        --Radious4: 0.4rem; /* Main Box */
    }
















/* --------------------------------------------- */
/* ------- TEXT -------------------------------- */
/* --------------------------------------------- */
    html * {
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; 
    }
    h1 { /*Page Title*/
        font-size: 1rem;
    }
    h2 { /* Sub txt */ 
        color: white;
    }
    h3 { /* Module Title */
        font-size: 1rem;
        line-height: 1rem;;
        color: white;
    }
    h4 { /* Popup Title */ 
        color: white;
    }
    h5 { /* Form Text */ 
        color: white;
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }
    h6 { /* Small Text */ 
        color: white;
        font-size: 0.8rem
    }
    p { /* Standard Text */
        font-size: 0.9rem;
        color: var(--Text2);
        line-height: 1.2rem;;
    }
    span {
        font-size: 0.9rem;
    }














/* --------------------------------------------- */
/* ------- BUTTONS ----------------------------- */
/* --------------------------------------------- */

    /*button on hover style*/
    .clickable1 {
        transition: filter 0.2s ease;
    }
    .clickable1:hover{
        filter: brightness(1.5);
        cursor: pointer;
    }


    /*Module Button*/
    .btn_1{
        height: 1.5rem;
        width: 4rem;
        background-color: var(--Theme4);
        border-radius:  var(--Radious1);
        padding: 0.1rem;
        border-width: 0.1rem ;
        color: white;
        display: inline-block;
    }


    /*Module Button*/
    .btn_square_1 {
        height: 1.5rem;
        width: 1.5rem;
        background-color: var(--Theme4);
        border-radius:  var(--Radious1);
        padding: 0.1rem;
        border-width: 0.1rem ;
        color: white;
        display: inline-block;
    }




    /*Module drop down Button*/
    .btn_2 {
        align-items: center; /* Vertically center */
        position: relative;
        height: 1.5rem;
        width: 4rem;
        background-color: var(--Theme4);
        border-radius:  var(--Radious1);
        padding: 0.1rem;
        border-width: 0.1rem ;
        color: white;
        display: inline-flex;
    }
        
    .btn_2::after {
        content: ""; /* Empty content for pseudo-element */
        position: absolute; /* Position the icon */
        top: 50%; /* Center vertically */
        right: 0.3rem; /* Adjust as needed */
        transform: translateY(-50%); /* Center vertically */
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid white; /* Adjust color as needed */
    }
    
    .btn_2:hover::after {
        border-top-color: var(--Theme1); /* Adjust color for hover state */
    }
    .btn_2_txt{
        padding-left: 0.3em;
    }
    .btn_2_reverse::after{
        border-top: 0px solid white; /* Adjust color as needed */
        border-bottom: 5px solid white; /* Flipped arrow */
    }
    .dropdown_content {
        cursor: pointer;
        display: none;
        position: absolute;
        z-index: 2;
        background-color: white;
        color: white;
    }
    .dropdown_content li:hover {
        background-color: #ffff;
    }
    .dropdown:hover .dropdown_content {
        display: block;
    }
    .dropdown_content li {
        display: block;
        padding: 0.65em;
    }
    .dropdown_content li:hover {
        background-color: var(--Theme4); 
    }





/* --------- Cancel Buttons ---------------------------*/
    .cancel_btn { /*Delete btn style*/
        opacity: 0.5;
        aspect-ratio: 1;
        position: relative;
        height: 2rem;
        top: 0.55rem;
        color: white;
    }
    .cancel_btn:hover { /*Delete btn style hover*/
        opacity: 1;
        cursor: pointer;
    }










/* -----------------------------------------------------------*/
/* ------------------- SCROLL BAR ----------------------------*/
/* -----------------------------------------------------------*/

    /* width */
    ::-webkit-scrollbar {
        width: 0.4rem;
    }
    /* Track */
    ::-webkit-scrollbar-track {
        background: #2d2d2d; 
    }
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #f1f1f1; 
    }
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #f1f1f1; 
    }