/* FONT IMPORT */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --header-height: 3rem;

    /* SIDE NAVIGATION WIDTH VARIABLES */
    --sidebar-width-expand: 18.75rem;
    --sidebar-width-collapse: 5.3rem;

    /* VARIABLES */
    --parksmart-header-color: #454545;
    --parksmart-white-color: #F5F5F5;
    --text-color: #333;
}

.accordion-button {
    color: #000000;
    font-weight: 500;
    padding: 1rem 1.125rem;
}

.accordion-button i {
    margin-right: 0.5rem;
}

.accordion-button:not(.collapsed) {
    color: #B92025;
    font-weight: 500;
}

.accordion-button:focus {
    box-shadow: none;
}

body {

    padding: 0rem;
    margin: 0rem;
    background-color: #F0F0F0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text-color);
    --bs-border-color: var(--bs-primary);
}

#btn-check-carpool-outlined:checked + .btn {
    color: var(--bs-btn-active-color);
    background-color: #67AE46;
    border-color: #67AE46;
}

#btn-check-easypark-outlined:checked + .btn {
    color: var(--bs-btn-active-color);
    background-color: #F68C47;
    border-color: #F68C47;
}

#btn-check-enforcement-outlined:checked + .btn {
    color: var(--bs-btn-active-color);
    background-color: #67469C;
    border-color: #67469C;
}

#btn-check-validated-outlined:checked + .btn {
    color: var(--bs-btn-active-color);
    background-color: #0050b5;
    border-color: #0050b5;
}



#carpool-reports :hover{
    color: #67AE46;
}

#carpool-reports > .nav-link.active{
    color: #67AE46;
    background-color: #e1efda;
    border-right: 3px solid #67AE46;
}

#collapseEnforcement .nav-item :hover, #collapseEnforcement .nav-link > i :hover {
    color:#67469C;
}

#collapseEnforcement .nav-link.active {
    color: #67469C;
    background-color: #e2d8ee;
    border-right: 3px solid #67469C;
}

.enforcement {
    color: #67469C;
}

.enforcement-bg {
    background-color: #67469C;
}

.enforcement-bg:hover {
    background-color: #67469C;
    border: 1px solid #67469C;
}

.enforcement-btn, .enforcement-btn:hover, .enforcement-btn:first-child:active {
    background-color: #67469C;
    border: 1px solid #67469C;
    color: #F0F0F0;
}

.enforcement-icon{
    height: 26px;
}

#enforcement-menu-btn:not(.collapsed) {
    color: #67469C;
}

#enforcement-pagination .page.active,
#enforcement-pagination .page:hover,
#enforcement-pagination .next_page:hover,
#enforcement-pagination.last:hover,
#enforcement-pagination .next:hover,
#enforcement-pagination .first:hover,
#enforcement-pagination .prev:hover {
    background-color: #67469C;
}

.enforcement-settings-nav-tab > .nav-link.active{
    color: #67469C!important;
    background-color: #e2d8ee!important;
    border-bottom: 1px solid #67469C;
}

.enforcement-settings-nav-tab > .nav-link:hover{
    color: #67469C!important;
    border-bottom: 1px solid #67469C;
}

.fade-in {
    scale: 0;
    opacity: 0;
    animation: 0.5s 1 forwards fadeInAni;
}

footer {
    position: absolute;
    bottom: 0;
    padding-bottom: 0.5rem;
}

footer > small {
    font-size: 0.9rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(213, 53, 58, 0.25);
}

#hamburger {
    padding: 0px;
    margin: 0rem 1rem 0rem 0.5rem;
    color: var(--parksmart-white-color);
}

header {
    height: var(--header-height);
    padding: 0.5rem 10px;
    box-shadow: 0px -1px 0px 0px rgba(224, 224, 224, 0.70) inset;
    background-color: var(--parksmart-header-color);
}

#header-user-menu {
    margin-right: 2rem;
    border-radius: 0px;
}

.hidden {
    display: none;
}

#mobile-pay-reports :hover{
    color: #F68C47;
}

#mobile-pay-reports > .nav-link.active{
    color: #F68C47;
    background-color: #fde8da;
    border-right: 3px solid #F68C47;
}

.notifications {
    min-width: 380px;
    max-height: 250px;
    overflow: auto;
}

#notification-btn, #header-user-menu-btn {
    border: none;
    color: var(--parksmart-white-color)
}

#pipeSeperator {
    margin: 0 5px;
    color: var(--parksmart-white-color);
}

.sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    gap: 1px;
    min-width: var(--sidebar-width-collapse);
    min-height: 100%;
    padding: 0px 0px 16px 0px;
    border-radius: var(--none, 0px);
    background: #FFFFFF;
    transition: 0.7s;
    top: var(--header-height);

    overflow-x: hidden;
}

.sidebar-inner {
    width: var(--sidebar-width-expand);
}

#status-badge {
    background-color: green;
    color: green;
}

#validated-reports :hover{
    color: #0050b5;
}

#validated-reports > .nav-link.active{
    color: #0050b5;
    background-color: #ccdcf0;
    border-right: 3px solid #0050b5;
}











/* SIDE NAVIGATION BAR */





.nav-link {
    color: #333;
    padding-left: 1.4rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-item .row {
    --bs-gutter-x: 0rem;
    max-height: 3rem;
}

.nav-item :hover, .nav-link > i :hover {
    color: #B92025
}

.sidebar .nav-link.active {
    color: #c1393e;
    background-color: #FDE9E9;
    border-right: 3px solid #B92025;

}

.sidebar .accordion-collapse {
    background-color: var(--sidebar-bg-secondary);
}

.sidebar nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav {
    --bs-link-color: var(--bs-primary);
}

.main-menu-btn:not(.collapsed)::after {
    background-image: none;
}

.collapse-bar .accordion-button:not(.collapsed)::after, .collapse-bar .accordion-button::after {
    background-image: none;
}

.collapse-bar .nav-link, .collapse-bar #collapseCarpool .nav-link {
    color: var(--text-color);
    transition: 0.7s;
}

/* BACKOFFICER MENU */


/* CARPOOL MENU */
#carpool-menu-btn:not(.collapsed) {
    color: #67AE46;
}

#collapseCarpool .nav-item :hover, #collapseCarpool .nav-link > i :hover {
    color: #67AE46;
}

#collapseCarpool .nav-link.active {
    color: #67AE46;
    background-color: #e1efda;
    border-right: 3px solid #67AE46;
}

.carpool {
    color: #67AE46;
}

.carpool-bg {
    background-color: #67AE46;
}

.carpool-bg:hover {
    background-color: #67AE46;
    border: 1px solid #67AE46;
}

.carpool-btn, .carpool-btn:hover, .carpool-btn:first-child:active {
    background-color: #67AE46;
    border: 1px solid #67AE46;
    color: #F0F0F0;
}

#carpool-pagination .page.active,
#carpool-pagination .page:hover,
#carpool-pagination .next_page:hover,
#carpool-pagination.last:hover,
#carpool-pagination .next:hover,
#carpool-pagination .first:hover,
#carpool-pagination .prev:hover {
    background-color: #67AE46;
}

/* MOBILEPAY MENU */
#mobile-menu-btn:not(.collapsed) {
    color: #F68C47;
}

#collapseMobilePay .nav-item :hover, #collapseMobilePay .nav-link > i :hover {
    color: #F68C47;
}

#collapseMobilePay .nav-link.active {
    color: #F68C47;
    background-color: #fde8da;
    border-right: 3px solid #F68C47;
}

.mobilepay, .mobilepay:hover {
    color: #F68C47;
}

.mobilepay-bg {
    background-color: #F68C47;
}

.mobilepay-bg:hover {
    background-color: #F68C47;
    border: 1px solid #F68C47;
}

.mobilepay-btn, .mobilepay-btn:hover, .mobilepay-btn:first-child:active {
    background-color: #F68C47;
    border: 1px solid #F68C47;
    color: #F0F0F0;
    /* padding-bottom: 16px;
    padding-top: 16px; */
}

#mobilepay-pagination .page.active,
#mobilepay-pagination .page:hover,
#mobilepay-pagination .next_page:hover,
#mobilepay-pagination.last:hover,
#mobilepay-pagination .next:hover,
#mobilepay-pagination .first:hover,
#mobilepay-pagination .prev:hover {
    background-color: #F68C47;
}

/* VALIDATED MENU */
#validated-menu-btn:not(.collapsed) {
    color: #0050b5;
}

#collapseValidated .nav-item :hover, #collapseValidated .nav-link > i :hover {
    color: #0050b5;
}

#collapseValidated .nav-link.active {
    color: #0050b5;
    background-color: #ccdcf0;
    border-right: 3px solid #0050b5;
}

.validated, .validated:hover {
    color: #0050b5;
}

.validated-bg {
    background-color: #0050b5;
}

.validated-bg:hover {
    background-color: #0050b5;
    border: 1px solid #0050b5;
}

.validated-btn, .validated-btn:hover, .validated-btn:first-child:active {
    background-color: #0050b5;
    border: 1px solid #0050b5;
    color: #F0F0F0;
}

#validated-pagination .page.active,
#validated-pagination .page:hover,
#validated-pagination .next_page:hover,
#validated-pagination.last:hover,
#validated-pagination .next:hover,
#validated-pagination .first:hover,
#validated-pagination .prev:hover {
    background-color: #0050b5;
}

/* BREADCRUM COMPONENT */
.breadcrumb {
    border-radius: 0px;
    padding: 12px 24px 12px 24px;
    margin-top: 0px;
    display: flex;
    justify-content: space-between;
    --bs-breadcrumb-divider: ">";
}

.bredcrumb-container {
    align-self: center;
}

.breadcrumb-heading {
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
    padding: 6px 0px;
    margin: 0px;
}

.breadcrumb-nav {
    display: flex;
    font-weight: 400;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.breadcrumb-item {
    color: rgba(0, 0, 0, 0.45);
}

.breadcrumb-item.active {
    font-weight: 400;
}

.breadcrumb-button {
    align-self: center;

}

.breadcrumb-button > a {
    padding: 10px 20px;
}

/* CONTAINERS*/
.container-main {
    flex: 1;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.info-container {
    width: 45rem;
    margin: 0rem 1rem;
}

.action-btn {
    padding: 0.5rem;
}


/* TABLE */
.account-feature {
    border-radius: 100px;
    padding: 4px 6px;
    margin: 0px 5px;
    color: #c1393e;
    background-color: #FDE9E9;
}

.account-feature > img {
    width: 20px;
}

.address {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 600px;
}

.table-link {
    color: #C1393E !important;
}

.show-information {
    color: #454545 !important;
}

.discount-applied {
    background-color: #0BB783;
    padding: 5px 6px;
    border-radius: 15px;
}

.discount-not-applied {
    background-color: #B70B0BB0;
    padding: 5px 7px;
    border-radius: 15px;
}

/* PAGINATION */
.pagination-container {
    display: flex;
    justify-content: space-between;
    margin-left: 1rem;
    margin-right: 1rem;
    align-items: center;
}

.pagination {
    margin: 16px 0px 0px 0px;
    text-align: center;
}

.page, .next_page, .last.next, .first, .prev {
    padding: 2px 6px;
}

.pagination-per-page > span {
    font-size: medium;
    font-weight: 600;
}

/* ACCOUNT FEATURE COMPONENT IN FORMS*/
.checkbox-container {
    display: flex;
    flex-direction: column;
}




/* FORMS */
textarea {
    height: 142px !important;
}

.requiredField {
    color: #B92025;
}

.form-floating .form-control:not(:placeholder-shown) {
    padding-bottom: 0.4rem;
}

.form-floating > .form-select {
    padding-top: 1.9rem;
}

.form-bg {
    background-color: #f7f7f7;
}

/* TOOLS COMPONENT */
#nav-tab > .nav-link {
    width: auto;
}

.nav-tabs .nav-link.active {
    color: #c1393e;
    background-color: #FDE9E9;
}

.nav-tabs .nav-link:hover {
    color: #c1393e;
}

/* ALERT */
.close {
    margin-top: 7px;
}

/* CARD */
.carpool-card-border-bottom {
    border-top: 1px solid #5d5d5d2c;
    border-left: 1px solid #5d5d5d2c;
    border-right: 1px solid #5d5d5d2c;
    border-bottom: 2px solid #67AE46;
}

.card-bottom-border {
    border-top: 1px solid #5d5d5d2c;
    border-left: 1px solid #5d5d5d2c;
    border-right: 1px solid #5d5d5d2c;
}


.containt-header {
    color: var(--sidebar-text-active);
    background-color: var(--sidebar-bg-active);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
}

/* .input-group-icon {
  padding-inline: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--bs-border-radius);
} */


.ui-timepicker-standard .ui-state-hover {
    transition: 0.3s;
    background-color: var(--bs-primary);
    color: var(--bs-primary-text);
}


.ripple::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation: ripple 1.2s infinite ease-in-out;
    animation: ripple 1.2s infinite ease-in-out;
    border: 1px solid currentColor;
    content: "";
}

.login-card {
    max-width: 464px;
}


.icn-size{
    font-size: 1.2em !important;
}



@keyframes ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

@keyframes fadeInAni {
    from {
        opacity: 0;
        scale: 0;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}


@media only screen and (min-width: 576px) {
    .position-sm-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }

    .sidebar {
        height: calc(100vh - var(--header-height));
        width: var(--sidebar-width-expand);
    }

    .collapse-bar {
        width: var(--sidebar-width-collapse);
    }

    .collapse-bar .sidebar-text {
        display: none;
    }

    .sidebar .sidebar-inner {
        width: var(--sidebar-width-expand);
    }

    .collapse-bar .sidebar-inner {
        width: 100%;
    }

    /* .container-main {
      width: calc(100% - var(--sidebar-width-expand));
    } */
}

.left-card {
    width: 40%;
    background: linear-gradient(
            180deg,
            rgba(var(--bs-primary-rgb), 0.3) 0%,
            rgba(252, 176, 69, 0) 100%
    );
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 500px;
}

@media only screen and (max-width: 576px) {
    .left-card {
        position: absolute;
        width: 100%;
        max-width: 100%;
    }

    .left-card h5 {
        display: none;
    }
}

.card-bottom-border {
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 1);
}


.sidebar-text.show {
    scale: 1;
    opacity: 1;
}

.sidebar-text.hide {
    scale: 0;
    opacity: 0;
}

/* .seisson-message,
.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  --bs-alert-link-color: inherit;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin: var(--bs-alert-margin);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
} */

.seisson-message span {
    background: none no-repeat scroll center center rgba(0, 0, 0, 0);
    display: inline-block;
    height: 26px;
    margin: 0 5px 0 -40px;
    vertical-align: middle;
    width: 28px;
}

.seisson-message p {
    font: 14px "Open Sans", sans-serif;
    padding: 10px 0 0;
}

.seisson-message.error {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.seisson-message.error span,
.alert.alert-danger:before {
    background-image: url("../assets/error.png");
    content: " ";
}

/* .seisson-message.success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
} */

.seisson-message.success span {
    background-image: url("../assets/success.png");
    height: 28px;
}

.seisson-message.alert {
    background: none repeat scroll 0 0 #fbfdcb;
    border-left: 5px solid #ffd072;
}

.seisson-message.alert span {
    background-image: url("../assets/alert.png");
    margin-top: -5px;
}

.seisson-message close-error {
    color: #5d5d5d;
    font: bold 16px arial;
    position: absolute;
    right: 4px;
    text-align: center;
    top: 14px;
    width: 20px;
}

.seisson-message.alert .close-error {
    top: 9px;
}

.alert {
    padding-left: 20px;
    margin: 1rem;
    opacity: 1 !important;
}

.alert .close {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: rgb(93, 93, 93);
    font: bold 16px arial;
    position: absolute;
    right: 4px;
    text-align: center;
    top: 9px;
    width: 20px;
}

Session error message end .alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.error-message {
    color: #B92025
}

.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.border-2 {
    border-width: 3px !important;
    margin-top: 5px !important;
}

/* BREADCRUMB START */

/* BREADCRUMB END */

.row > * {

    padding-left: 0.9px;

}

.p-sm-3 {
    padding: 0.7rem !important;
}

.card {
    margin-left: 0.5rem;
    margin-top: 0.9rem;
    margin-right: 0.5rem;
}


/* .form-select:not(.bootstrap-select){
  padding: 1rem 2.25rem 1rem 0.75rem;
} */


/* TABLE START */
.table > thead {
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    vertical-align: bottom;
    background-color: #f7f7f7;
}

tr {
    border-color: #cccccc;
}


/* TABLE END */

/* .my-2 { /* change in main box margin
  margin-top: 0.3rem !important;
  margin-bottom: 0.3rem !important;
} */

/* MULTISELECT UNDER TOOLS */
.multiselect-container {
    display: flex;
    flex-direction: row;
}

.left-box-container, .right-box-container {
    width: 30%;
}

.multiselect-buttons {
    display: flex;
    flex-direction: column;
    width: 10%;
}

.multiselect-buttons :hover {
    color: #c1393e;
}

#multiselect, #multiselect_to {
    min-height: 200px;
    color: #333;
}

#btn-back-to-top {
    bottom: 20px;
    right: 20px;
    scale: 0;
    opacity: 0;
    transition: 0.3s;
    z-index: 10;
    padding: 5px 10px;
    border: none;
}

.link-primary {
    color: #0057cc !important;
}

.filter-option-inner-inner {
    max-width: 700px;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    footer {
        margin-bottom: -30px;
    }

    .mobileViewConfirmationLogo {
        width: 100%;
        height: 100%;
    }
}