* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@property --crimson-red {
    syntax: "<color>";
    inherits: false;
    initial-value: #B22222;
}

body,
html {
    height: 100%;
    font-family: "Roboto Condensed";
    font-size: 18px;
}

.lang-select {
}

.cont {
    display: flex;
    height: 100vh;
}

#sidebar {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: white;
    width: 350px; /* Initial width of the sidebar */
    min-width: 300px; /* Minimum width to allow resizing */
    position: relative;
    overflow-y: auto;
    background: linear-gradient(0deg, rgb(21, 74, 189) 0.1%, rgb(26, 138, 211) 51.5%, rgb(72, 177, 234) 100.2%);
}

    #sidebar #sidebar-header {
        position: relative;
        background: linear-gradient(to top, #dfe9f3 0%, white 100%);
    }

        #sidebar #sidebar-header #sidebar-header-sitename {
            margin: 0;
            font-size: 1.1rem;
            color: navy;
        }

        #sidebar #sidebar-header img {
            height: 30px;
        }

    #sidebar #sidebar-close-btn {
        display: none;
    }

#sidebar-open-btn {
    display: none;
}

.menu {
    list-style: none;
    padding: 0;
}

    .menu ul {
        list-style: none;
    }

    .menu li {
    }

        .menu li a {
            text-decoration: none;
            display: block;
        }

            .menu li a i {
                color: lightgray;
            }

            .menu li a:hover {
                background-color: #2366b5;
            }

.content {
    flex: 4;
    background-color: rgb(249 249 249);
    overflow-y: auto;
}

#profile-buttons {
}

    #profile-buttons a {
        text-decoration: none;
    }

main {
    max-width: 1140px;
}

/* Login Social Buttons */
:root {
    --color-1: #dd4b39;
    --color-2: #0d6efd;
    --color-3: #400090;
    --color-4: #ff0000;
    --color-5: #0077ff;
}

.btn-outline-custom {
    background-color: transparent;
    transition: all 0.1s ease;
}

    .btn-outline-custom:hover {
        color: #fff;
    }

.btn-outline-custom-1 {
    color: var(--color-1);
    border-color: var(--color-1);
}

    .btn-outline-custom-1:hover {
        background-color: var(--color-1);
        border-color: var(--color-1);
    }

.btn-outline-custom-2 {
    color: var(--color-2);
    border-color: var(--color-2);
}

    .btn-outline-custom-2:hover {
        background-color: var(--color-2);
        border-color: var(--color-2);
    }

.btn-outline-custom-3 {
    color: var(--color-3);
    border-color: var(--color-3);
}

    .btn-outline-custom-3:hover {
        background-color: var(--color-3);
        border-color: var(--color-3);
    }

.btn-outline-custom-4 {
    color: var(--color-4);
    border-color: var(--color-4);
}

    .btn-outline-custom-4:hover {
        background-color: var(--color-4);
        border-color: var(--color-4);
    }

.btn-outline-custom-5 {
    color: var(--color-5);
    border-color: var(--color-5);
}

    .btn-outline-custom-5:hover {
        background-color: var(--color-5);
        border-color: var(--color-5);
    }

@media (max-width: 767.9px) {
    .cont {
        height: 100dvh;
    }

    #sidebar-header-mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgb(249 249 249);
        z-index: 998;
    }

        #sidebar-header-mobile img {
            height: 40px;
        }

        #sidebar-header-mobile h1 {
            font-size: 1rem;
            margin: 0;
        }

    #sidebar {
        width: 100dvw;
        position: fixed;
        left: calc(0dvw);
        top: 0;
        height: 100dvh;
        overflow-y: auto;
        transition: left .3s ease-in-out, right .3s ease-in-out;
        z-index: 999;
    }

        #sidebar #sidebar-close-btn {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
        }

        #sidebar.sidebar-closed {
            left: calc(-100dvw) !important;
        }

    #sidebar-open-btn {
        display: block;
        position: fixed;
        z-index: 1000;
        right: 1rem;
        top: 1rem;
    }

    .content {
        padding-top: 5rem;
    }
}

.required {
    background-image: radial-gradient(gray 15%, transparent 16%);
    background-size: 2em 2em;
    background-position: top right;
    background-repeat: no-repeat;
}

#rainbow-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(192,0,255,1) 10%, rgba(0,5,255,1) 20%, rgba(0,255,93,1) 30%, rgba(138,255,0,1) 40%, rgba(255,0,0,1) 50%, rgba(138,255,0,1) 60%, rgba(0,255,93,1) 70%, rgba(0,5,255,1) 80%, rgba(192,0,255,1) 90%, rgba(255,0,0,1) 100%);
    background-size: 600% 100%;
    animation: rainbow-animation 3s linear infinite;
    z-index: 9999;
    display: none;
}

@keyframes rainbow-animation {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.grecaptcha-badge {
    right: -300px !important;
}

.alert ul {
    margin-bottom: 0;
}

.modal-celebration-icon {
    font-size: 5rem;
}

.modal-content {
    border-radius: 18px;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 0;
}

    #particles-js,
    #particles-js canvas {
        pointer-events: none;
        border-radius: 18px;
    }