/* Colors and Design*/

body {
    background-color: #9e9e9e;
    color: black;
}

.checklist-row:nth-child(odd) {
    background-color: white;
}

.checklist-row:nth-child(even) {
    background-color: #f5f5f5;
}

.primary {
    background-color: white;
    color: black;
}

.primary-variant {
    background-color: #fafafa;
    color: black;
}

.warning {
    background-color: #f44336;
    color: white;
}

.warning-text {
    color: #f44336!important;
}

.header {
    background-color: #ffc107!important;
    color: black!important;
}

.secondary {
    background-color: #ddd;
    color: black;
}

.secondary:disabled {
    opacity:1;
}

.tooltip {
    background-color: #4CAF50;
    color: white;
}

.header-variant {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

/* Tables */
.table tbody tr:hover {
    background-color: #ffeb3b;

}

tr:nth-child(even) {
    background-color: white!important;
    color: black;
}

tr:nth-child(odd) {
    background-color: #f1f1f1!important;
    color: black;
}

.table {
    border: 1px solid #ccc !important;
}

.table thead tr, .bn-table thead tr {
    background-color: black!important;
    color: white;
}

tr {
    border-bottom: 1px solid #ddd;
}

.main-header {
    background-color: #f44336;
    color: white;
}

.tutorial-header {
    font-size: 12px;
}

.financial-header {
    background-color: #f44336;
    color: white;
    padding: 5px;
}

.modal-table th {
    background-color: #ffeb3b;
    color: black !important;
    font-size: 12px;
    border: 1px solid #ddd;
}

.modal-table td {
    color: #f44336;
    font-size: 14px;
    border: 1px solid #ddd;
    width: 100%;
}

.modal-table tr:nth-child(odd) {
    background-color: seashell!important;
    color: black!important;
}

/* User Input / Forms */

textarea {
    background-color: white;
    border-bottom: white;
    color: black;
}

input {
    background-color: white;
    color: black;
}

::-webkit-input-placeholder { /* Edge */
    color: darkgray;
}

:-ms-input-placeholder { /* Internet Explorer */
    color: darkgray;
}

::placeholder {
    color: darkgray;
}

.button:hover {
    color: #000 !important;
    background-color: #ccc !important
}

.button-main {
    background-color: #454545;

    color: white;
}

.button-action {
    background-color: #4285F4;
    border: 3px solid #3b7ae0;
    color: white;
    /* Add transition for smooth pulsing effect */
    transition: box-shadow 0.5s ease-in-out;
    /* Initial box-shadow for subtle glow */
    box-shadow: 0 0 5px #3b7ae0;
    /* Apply the animation */
    animation: pulseAnimation 2s infinite;
}

.button-action:hover {
    color: white !important;
    background-color: #619ecc !important;
    border: 3px solid #669ac1 !important;
}


/* Keyframes for pulsing effect */
@keyframes pulseAnimation {
    0% {
        box-shadow: 0 0 5px #3b7ae0;
    }

    50% {
        box-shadow: 0 0 15px #3b7ae0; /* Increase the spread for the pulse */
    }

    100% {
        box-shadow: 0 0 5px #3b7ae0;
    }
}


.button-advance {
    background-color: #388E3C !important;
    color: white !important;
    
}

.messagelink {
    color: #f1fef2 !important;
}

#OtherMessages p:nth-child(even) .messagelink {
    background-color: #3a9c40 !important; /* Slightly lighter green for even .messagelink */
}

#OtherMessages p:nth-child(odd) .messagelink {
    background-color: #2f8334 !important; /* Slightly lighter green */

}


.button-advance:hover {
    background-color: #2a692d !important;
    color: white !important;
}

.button-retreat {
    background-color: #f44336;
    color: white;
}

.button-retreat:hover {
    color: white !important;
    background-color: #711717 !important
}



.border-bottom {
    border: 1px solid #A9A9A9;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
}

.border-top {
    border: 1px solid #A9A9A9;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}

.border {
    border: 1px solid #A9A9A9;
    border-radius: 32px;
}

.warning-border {
    border: 1px solid #f44336;
}

.submission-alert {
    background-color: magenta;
    color: white;
}

.toggle {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}

.switch {
    background-color: black;
    color: white;
    padding: 3px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50;
    cursor: pointer; /* Cursor on hover */
    height: 25px;
    border-radius: 50%;
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50;
    cursor: pointer; /* Cursor on hover */
    height: 25px;
    border-radius: 50%;
}

.progress-container {
    background-color: #d3d3d3;
}

.progress-bar {
    background-color: #4CAF50;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

#darkmodeMobileToggle, #darkmodeDesktopToggle {
    background: linear-gradient(to bottom right, #1c88d4, #7441d1);
    cursor: pointer;
    transition: background 0.5s ease-in-out;
    color: white;
}

#darkmodeMobileToggle, #darkmodeDesktopToggle:hover {
    background: linear-gradient(to bottom right, #1fa2ff, #a16eff);
}


tr.secondary-variant {
    background-color: #ffeb3b !important;
    color: black;
}