:root {
    --bs-btn-disabled-bg: #024638;
}


.btn-primary {
    background-color: #024638;
    border: #024638;
    &:hover {
        background-color: #049376;
        border: #049376;
    }
}
.btn-calc {
    display: block;
    margin: 0 auto;
    width: 100%
}

button#savebtn {
    background-color: #024638;
    border: #024638;
}

@font-face {
    font-family:open sans;
    src:url(../fonts/opensans-400.woff2) format('woff2'),
        url(../fonts/opensans-400.woff) format('woff');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

#notification {
    visibility: hidden;
    position: fixed;
    z-index: 1;
    /* top: 30px; */
    width: 1100px;
}
#notification.issue {
    background-color:#F5333F!IMPORTANT;
}
#notification.show {
    visibility:visible; /* Show the notification */
    /* Add animation:Take 0.5 seconds to fade in and out the notification.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation:fadein 0.5s, fadeout 0.5s 2.5s;
    animation:fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations to fade the notification in and out */
@-webkit-keyframes fadein {
    from {
        /* top:0; */
        opacity:0;
    }
    to {
        /* top:30px; */
        opacity:1;
    }
}

@keyframes fadein {
    from {
        /* top:0; */
        opacity:0;
    }
    to {
        /* top:30px; */
        opacity:1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top:30px;
        opacity:1;
    }
    to {
        top:0;
        opacity:0;
    }
}

@keyframes fadeout {
    from {
        top:30px;
        opacity:1;
    }
    to {
        top:0;
        opacity:0;
    }
}

#currenttime .blink {
    animation:blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity:0;
    }    
}

.bg-login {
    background-color: #024638;
    background-size: cover;
}

.bg-login .bg-login-image {
    background-image:url("../images/rose-800.png");
    background-position: center;
    background-size: cover;
}
.bg-login .card .row {
    min-height:375px;
}
#loginform.user .btn-user {
    font-size:1rem;
}
#registerform #password-hint:hover {
    cursor:pointer;
}

.logo-wrapper {
    background: #ceff90;
    flex-direction: column;

    @media (min-width: 320px) {
        border-radius: 0.375rem 0.375rem 0 0;
    }
    @media (min-width: 992px) {   
        border-radius: 0.375rem 0 0 0.375rem;
    }
    .logo {
        @media (min-width: 320px) {
            max-width: 200px;
        }
        @media (min-width: 768px) {
            max-width: 300px;
        }
        @media (min-width: 992px) {
            max-width: 400px;
        }

    }
}

#loading {
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    z-index:201;
}
#loading img {
    position:absolute;
    top:20%;
    left:40%;
    border:solid 2px #333;
}

body {
    font-style:normal;
    font-variant-ligatures:normal;
    font-variant-caps:normal;
    font-variant-numeric:normal;
    font-weight:normal;
    font-stretch:normal;
    font-size:14px;
    line-height:1.5;
    font-family:open sans, Arial, Helvetica, sans-serif;
    color:#666666;
    text-align:left;
    -webkit-font-smoothing:antialiased;
    overflow-x: hidden;
}

main {
    margin:0 auto;
    width:100%;
    max-width:100%;
}

header {
    position:relative;
    text-align:center;
}

header img.img-fluid {   

    @media (min-width: 320px) {
        max-width: 200px;
    }
    @media (min-width: 768px) {
        max-width: 300px;
    }
    @media (min-width: 992px) {
        max-width: 400px;
    }
}

header #buttons {
    position:relative;
    right:0;
    top:30px;
}
header #buttons button {
    margin-left:10px;
}

footer {
    text-align:center;
}

main #container #totalvisits {
    padding:.375rem .25rem;
}

main #container #products .form-check-input {
    margin-top:0;
    border-radius:.375rem!important;
    padding:1em;
}

main #container #extrabits {
    font-size:0.6rem;
}

main #container #users .dt-length select {
    margin-right:10px;
}

.container-fluid {
    padding: 0 1.5rem;
}

.table-striped {
    --bs-table-striped-bg:#F8F9FA!important;
}

.bg-primary {
    background-color: #78be21 !important;
}

.border-primary {
    border-color: #78be21 !important;
}

#calculate, .separator {
    margin: 0 auto;
    width: calc(100% - 1rem);
}

.col-commparison {
    @media (min-width: 320px) {
        font-size: 0.8rem;
        overflow-x: auto;
    }
    @media (min-width: 1400px) {
        flex: 0 0 auto;
        width: 50%; 
    }
    @media (min-width: 1920px) {
        font-size: 0.9rem;
    }
}

/* Highlight selected rows with a tint of the primary color */
#products #papertowels tbody tr.optionselected,
#products #toiletrolls tbody tr.optionselected {
    background-color: rgba(120, 190, 33, 0.2) !important;
}

/* Ensure the highlight is maintained even with the table-striped styling */
#products .table-striped > tbody > tr.optionselected:nth-of-type(odd),
#products .table-striped > tbody > tr.optionselected:nth-of-type(even) {
    background-color: rgba(120, 190, 33, 0.2) !important;
}

/* Target all cells within selected rows to override Bootstrap's striping */
#products .table-striped > tbody > tr.optionselected:nth-of-type(odd) > *,
#products .table-striped > tbody > tr.optionselected:nth-of-type(even) > * {
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-bg-type: transparent !important;
    background-color: rgba(120, 190, 33, 0.2) !important;
}

/* Style for the checkboxes in selected rows */
#products tr.optionselected .form-check-input:checked {
    background-color: #78be21 !important;
    border-color: #78be21 !important;
}

/* Ensure the border-dark class doesn't interfere with our styling */
#products tr.optionselected .form-check-input.border-dark:checked {
    background-color: #78be21 !important;
    border-color: #78be21 !important;
}