html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.font-calisto {
    font-family: "Calisto MT", serif;
}

.font-cambria {
    font-family: Cambria, Georgia, serif;
}


.fancy-button-green {
    background-image: linear-gradient(to right, #12684D 0%, #5ED89A 51%, #12684D 100%);
    padding: 10px 45px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 8px;
    display: inline;
    text-decoration: none;
}

.fancy-button-green:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.nav-link {
    padding: 2px 12px !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    color: white !important;
    background-color: transparent;
}

.nav-link:hover {
    background-color: #f8f9fa !important;
    color: #495057 !important;
}

.nav-link.active {
    background-color: white !important;
    color: black !important;
}

.cursor-pointer {
    cursor: pointer;
}

.toast-custom {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 12px;
    min-width: 600px;
    z-index: 1050;
}

.accordion-item {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    margin-bottom: 26px;
}

.accordion-button {
    border-radius: 12px !important;
    transition: background-color 0.3s ease;
}

    .accordion-button:hover {
        background-color: #cce6da !important;
    }

    .accordion-button:not(.collapsed) {
        background-color: #2bb374 !important;
        color: white !important;
    }


/*ANIMATIONS*/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn-animate {
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp-animate {
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
        visibility: visible;
    }

    100% {
        transform: translateX(0);
        visibility: visible;
        /* opacity will use the element's own opacity */
    }
}

.fadeInLeft-animate {
    animation: fadeInLeft 0.8s ease forwards;
    visibility: hidden;
}

@keyframes fadeInDown-toast {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.fadeInDownToast-animate {
    animation: fadeInDown-toast 0.6s ease forwards;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown-animate {
    animation: fadeInDown 0.5s ease forwards;
}

@keyframes dropdownSlideDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes dropdownSlideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-10px);
        opacity: 0;
    }
}


.dropdown-toggle::after {
    display: none !important;
}

/* When dropdown is shown */
.dropdown-menu.show {
    animation: dropdownSlideDown 0.4s ease forwards;
}

/* When dropdown is hidden */
.dropdown-menu:not(.show) {
    animation: dropdownSlideUp 0.4s ease forwards;
}

.green-link {
    color: darkgreen;
}

.green-link:hover{
    color: green;
}

#showTypeBtn:hover,
#sortDirectionBtn:hover,
#searchFilterBtn:hover,
#sortByBtn:hover,
.input-group .btn:hover {
    background-color: #198754 !important;
    color: white !important;
}


/* DATA TABLES*/
/* Remove all DataTables sorting arrows */
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before {
    display: none !important;
    content: "" !important;
    text-align:center;
}
table.dataTable thead th {
    text-align: center !important;
}

/* Only change background of the active page number */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: darkgreen !important; /* Your desired color */
    color: white !important; /* Optional: text color */
    border: none !important; /* Optional: remove border */
}

/* Add spacing above bottom pagination */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 6px;
    padding-bottom: 0px;
    text-align: center;
}