:root {

    --bottom-bar-color: transparent;
    --nav-bar-height: 50px; /* Fixed height for the navbar */
    --card-background: #2a2a2a; /* Matching card background to navbar */


    /* COLORS */
    --button-color: rgb(245, 245, 245);

        /* STW BASE COLORS */
    --stw-blue-color: #054383;
    --stw-orange-color: #ec5800;
    --stw-red-color: #cf2d43;
    --stw-strong-red: #ff4040;
    --stw-white-color: #f7fffa;


    --stw-grey-color: #bac4d4;
    --stw-gray-text: #a2a9b3;
    --stw-dark-grey-color: #0c0a09;

    /* NUEVA SCALA GRISES  (MÁS OSCURO A MÁS CLARO) */


    --stw-gray-unavailable: rgba(68, 67, 67, 0.733);
    --stw-gray-1: #08090a;
    --stw-gray-1-2: #1a1b1d;
    --stw-gray-2: #62666d;
    --stw-gray-3: #8a8f98;
    --stw-gray-4: #d0d6e0;
    --stw-gray-5: #f7f8f8;


    /* END */

    --stw-green-color: #39ff13;
    --stw-dark-green-color: #339933;
    --stw-black-color: #000000;
    --stw-purple-color: #ae8ee6;
    --stw-dark-purple : #140d1b;
    --stw-yellow-color: #f5d225;
    --stw-black-gray-color: #111110;
    --stw-golden-yellow-color: #e69b00;
    --stw-vivid-orange-color: #f27f3a;
    --stw-learning-orange-color: #f6a052;
    --stw-culture-blue-color : #1a76d2;

    --stw-transparent-color: rgba(0,0,0,0);
    --stw-semitransparent-color: rgba(0, 0, 0, 0.4);
    --stw-ocean-blue-color: #394f73;

    /* REPORTING PALLETE */
    --stw-light-blue-color: #07b4f4;
    --stw-medium-light-blue-color: #046d94;

        /* Hover effects */
    --hover-color: var(--stw-gray-3);
    --dark-hover-color: #005B41;
    --hover-brightness: 1.2;


        /* GENERAL ATTRIBUTES */
    --text-color-general: var(--stw-grey-color);

        /* SIDEBAR */
    --text-color-active-blocks: var(--stw-white-color);
    --text-color-inactive-blocks: var(--stw--dark-grey-color);


        /* NAVBAR */
    --nav-bar-color: var(--stw-black-color);

        /* MODAL */
    --modal-color: rgba(216, 217, 218, 0.98);
    --modal-button-hover-color: #7c8575;
    --text-color-modal : #3A3C3B;
    --modal-hover-color : #5427D0;
    --modal-button-color: #FFF6E0;

        /* DROP-BOX */
    --dropbox-background-color: var(--modal-color);

        /* FONT */
    --font-ubuntu: 'Ubuntu', sans-serif;



    /* Font Sizes */
    --sidebar-font-size: 14px;
    --minicard-tab-font-size: 14px;
    --minicard-normal-font-size: 0.8em;
    --minicard_big-font-size: 0.85em;    /* Yellow color for hover effect */


    --icon-color-controller: invert(1);



    /* SHAPES */
    --octagon-shape: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    --octagon-shape-task-modal: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px);
    --octagon-shape-5px: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);

    --border-color: var(--stw-gray-2);

}

.dark-theme{


}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-ubuntu);
    border-color: var(--border-color) !important;

    select {
        font-size: 0.8em !important;
    }

}

body {

    background: url('../../../static/main/media/stw_background_image.png') repeat fixed;
    background-size: cover;
    background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.85);
    background-position: calc(50% + 500px) center;

    bbackground: var(--stw-dark-grey-color);
    overflow: hidden;
}



/* Dropdown Menu */
#dropdown-menu {
    z-index: 10000;
    background-color: var(--stw-black-color);
    opacity: 1;
    margin-left: 80%;
    margin-top: 20%;
    max-height: 0px;
    min-width: 100px;
}

#dropdown-menu.show {
    z-index: 10000;
    background-color: var(--stw-black-color);
    opacity: 1;
    margin-left: 80%;
    margin-top: 20%;
    max-height: 500px; /* Adjust to be tall enough for your content */
    min-width: 100px;
}



/* Responsive adjustments
@media (max-width: 500px) {

    #logo_container,
    #options-container {
        display:none
    }

}
 */

#mobile_buttons_container {

    display:none;

 }

@media (max-width: 1100px) {

    #mobile_buttons_container {
        display: flex;
    }

    #options_nav_bar,
    #console_container {
        display:none
    }

}


footer {
    background: radial-gradient(circle at 18.7% 37.8%, rgb(13, 13, 13) 0%, rgb(5, 5, 5) 90%) !important;
}


footer a:hover {
    color: rgb(185, 185, 185) !important;
}


.footer-grey {
    color: rgb(185, 185, 185);
    letter-spacing: 0.1em;
    font-size: 13px,
}

select option {
    background-color: black !important;
}

.stw-gray-text {
    color: var(--stw-gray-text) !important;
}