/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* Import Additional CSS Files */
@import url(_theme.css);
@import url(_layout.css);

body,html{
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    
    font-size: 16px;
    color: var(--text-color);
    background-color: var(--app-bg);
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    color: var(--header-color);
}

.pointer{
    cursor: pointer;
}
.avatar{
    height: 1em;
    width: 1em;
    min-width: 1em;
    min-height: 1em;
    max-width: 1em;
    max-height: 1em;
}

.action-btn{
    all: unset;
    font-size: 0.875rem;
    color: var(--primary-color);
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.close-btn{
    background-color: #FFFFFF!important;
    color: #000000;
    border-radius: 50%;
}

.t-cell-link{
    cursor: pointer;
    transition: var(--transition-speed);
}
.t-cell-link:hover{
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-style: dashed;
}

#filterItems{
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    flex-wrap: wrap;
}
#filterItems .pill::before{
    display: none;
}



/*********** Dashboard Elements ***********/
/*********** ****************** ***********/
.dashboard-section{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.section-title{
    color: var(--header-color);
    font-size: 1.125rem;
    font-weight: 400;
}
.dashboard-card{
    border: 1px solid var(--line-color);
}



/*********** Welcome Section ***********/
/*********** *************** ***********/
.welcome-section h1{
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--header-color);
}


/*********** Stats Section ***********/
/*********** ************* ***********/

/* Stats Card */
.stat-card{
    padding: 1rem;
    border: 1px solid var(--line-color);

    background-color: var(--card-bg);
    transition: var(--transition-speed);
}

.stat-card.success:hover{
    border-color: var(--success-color);

    background-color: var(--success-light-color);
}
.dark-theme .stat-card.success:hover{
    background-color: var(--card-bg);
}

.stat-card.danger:hover{
    border-color: var(--danger-color);

    background-color: var(--danger-light-color);
}
.dark-theme .stat-card.danger:hover{
    background-color: var(--card-bg);
}

.stat-card .stat-title{
    color: var(--stats-title-color);
    font-size: 1rem;
    font-weight: 500;

    margin-bottom: 0.25rem;

    display: inline-block;
    cursor: default;
}
.stat-card .stat-title .icon{
    font-size: 0.875rem;
}
.stat-card .stat-value{
    display: flex;
    align-items: center;
    gap: 0.5rem;

    font-size: 1.25rem;
    font-weight: 600;
}
.stat-card .value-directions{
    font-size: 0.625rem;

    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.stat-card .value-directions .icon{
    font-size: 1rem;
}



/*********** Form Elements ***********/
/*********** ************* ***********/
.input-group .input-group-text{
    background-color: var(--input-bg);
    border-color: var(--input-border-color);
    color: var(--text-color);

    --bs-border-radius: 2px;
    font-size: 0.875rem;
}
.input-group .input-group-text:first-child{
    padding-left: 0.5rem;
    padding-right: 0.25rem;
}
.input-group .input-group-text:last-child{
    padding-left: 0.25rem;
    padding-right: 0.5rem;
}
.input-group .input-group-text .icon{
    font-size: 1rem;
}

.form-control,
.form-control:active,
.form-control:focus{
    padding: 0.5rem 0.5rem;

    font-size: 0.875rem;
    font-weight: 300;
    background-color: var(--input-bg);

    border-color: var(--input-border-color);
    color: var(--text-color);
    box-shadow: none;
    transition: var(--transition-speed);

    --bs-border-radius: 2px
}
.form-control:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}
.form-control:focus{
    background-color: var(--app-bg);
    border-color: var(--input-border-color);
}
.form-control::placeholder{
    color: var(--text-color);
    opacity: 0.2;
}
.form-control::-moz-placeholder{  
    color: var(--text-color);
    opacity: 0.2;
}
.form-control::-webkit-input-placeholder{
    color: var(--text-color);
    opacity: 0.2;
}

.input-group .form-control:first-child{
    padding-right: 0.25rem;
    border-right: 0;
}
.input-group .input-group-text + .form-control{
    padding-left: 0.25rem;
    padding-right: 0.5rem;
    border-left: 0;
}
/* textarea.form-control{
    min-height: 110px;
    max-height: 270px;
    border-radius: 20px;
} */
 select.form-control{
    padding-right: 2.5rem!important;
 }
select.form-control{
    appearance: none;
    background: no-repeat right 1rem center; /* Custom icon */
    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.19153%207.09334C4.24497%207.03099%204.31017%206.97978%204.38341%206.94264C4.45665%206.9055%204.53649%206.88315%204.61837%206.87688C4.70025%206.87062%204.78257%206.88055%204.86061%206.9061C4.93865%206.93166%205.01089%206.97235%205.07319%207.02584L10.4999%2011.6767L15.9265%207.02584C16.053%206.92428%2016.2141%206.8759%2016.3756%206.89093C16.5372%206.90595%2016.6866%206.98321%2016.7922%207.10636C16.8978%207.22951%2016.9514%207.38891%2016.9416%207.55085C16.9319%207.7128%2016.8595%207.8646%2016.7399%207.97417L10.9065%2012.9742C10.7933%2013.0712%2010.649%2013.1246%2010.4999%2013.1246C10.3507%2013.1246%2010.2065%2013.0712%2010.0932%2012.9742L4.25986%207.97417C4.13418%207.86627%204.05648%207.71289%204.04382%207.54773C4.03116%207.38256%204.08459%207.21913%204.19236%207.09334%22%20fill%3D%22%2334363E%22%2F%3E%3C%2Fsvg%3E);
    background-size: 1rem; /* Adjust size of the icon */
    background-color: var(--input-bg);
}
.dark-theme select.form-control{
    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.19153%207.09334C4.24497%207.03099%204.31017%206.97978%204.38341%206.94264C4.45665%206.9055%204.53649%206.88315%204.61837%206.87688C4.70025%206.87062%204.78257%206.88055%204.86061%206.9061C4.93865%206.93166%205.01089%206.97235%205.07319%207.02584L10.4999%2011.6767L15.9265%207.02584C16.053%206.92428%2016.2141%206.8759%2016.3756%206.89093C16.5372%206.90595%2016.6866%206.98321%2016.7922%207.10636C16.8978%207.22951%2016.9514%207.38891%2016.9416%207.55085C16.9319%207.7128%2016.8595%207.8646%2016.7399%207.97417L10.9065%2012.9742C10.7933%2013.0712%2010.649%2013.1246%2010.4999%2013.1246C10.3507%2013.1246%2010.2065%2013.0712%2010.0932%2012.9742L4.25986%207.97417C4.13418%207.86627%204.05648%207.71289%204.04382%207.54773C4.03116%207.38256%204.08459%207.21913%204.19236%207.09334%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
}


/* Switches */
.switch{
    font-size: 24px;
    width: 2em;
    height: 1em;
    position: relative;

    cursor: pointer;
}
.switch,
.switch *{
    transition: 0.3s;
}
.switch input{
    opacity: 0;
    display: none;
}
.switch .switch-thumb{
    display: block;
    height: 1em;
    width: 1em;
    min-width: 1em;
    min-height: 1em;

    background-color: var(--app-bg);
    border: 1px solid var(--line-color);

    border-radius: 1000px;
    z-index: 1;
    position: relative;
}
.switch .switch-track{
    position: absolute;
    left: 0;
    right: 0;
    top: 0.16em;
    bottom: 0.16em;

    border-radius: 1000px;

    background-color: rgba(var(--text-color-rgb), 0.2);

    z-index: 0;
}
.switch input:checked ~ .switch-thumb{
    margin-left: 1em;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.switch input:checked ~ .switch-track{
    background-color: rgba(var(--primary-color-rgb), 0.4);
}






/*********** Button Elements ***********/
/*********** *************** ***********/
.btn{
    padding: 0.65rem 1rem;

    font-size: 0.875rem;
    font-weight: 300;

    outline: none;
    box-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    line-height: 100%;
    
    --bs-btn-bg: var(--input-bg);
    --bs-btn-color: var(--text-color);
    --bs-btn-border-color: var(--input-border-color);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);

    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-color: #FFFFFF;

    --bs-border-radius: 2px;

    transition: var(--transition-speed);
}
.btn:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}
.btn .icon{
    font-size: 1rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--danger-color);
    --bs-btn-border-color: var(--danger-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--danger-color);
    --bs-btn-hover-border-color: var(--danger-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--danger-color);
    --bs-btn-active-border-color: var(--danger-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--danger-color);
    --bs-btn-disabled-border-color: var(--danger-color);
}







/*********** Table Elements ***********/
/*********** ************** ***********/
/* Web Table */
.app-table{
    width: 100%;
}
.app-table thead tr{
    background-color: var(--secondary-bg);
}
.app-table thead th{
    color: var(--table-head-color);
    padding: 1rem;

    font-size: 0.75rem;
    font-weight: 500;
    transition: 0.2s;

    cursor: pointer;
}
.app-table thead th:not(:hover) .sort-icon{
    display: none;
    margin-left: 0.5rem;
}
.app-table thead th:hover{
    background-color: var(--tertiary-bg);
}
.app-table tbody td,
.app-table tbody th{
    color: var(--text-color);
    padding: 1rem;

    font-size: 0.875rem;
    font-weight: 300;
}

/* Mobile Table */
.app-mobile-table{
    width: 100%;
}
.app-mobile-table thead tr{
    background-color: var(--secondary-bg);
}
.app-mobile-table thead th{
    color: var(--table-head-color);
    padding: 1rem;

    font-size: 0.75rem;
    font-weight: 500;
}
.app-mobile-table thead th:not(:hover) .sort-icon{
    display: none;
    margin-left: 0.5rem;
}
.app-mobile-table thead th:hover{
    background-color: var(--tertiary-bg);
}
.app-mobile-table tbody td,
.app-mobile-table tbody th{
    color: var(--text-color);
    padding: 1rem;

    font-size: 0.875rem;
    font-weight: 300;
}


/* Accordion */
.accordion-item-head{
    cursor: pointer;

    background-color: var(--card-bg);
}
.accordion-item-head.open{
    background-color: var(--accordion-head-bg);
}
.accordion-item-body{
    background-color: var(--accordion-body-bg);
    border-bottom: 1px solid var(--line-2-color);
    display: none;
}
.accordion-item-head.open + .accordion-item-body{
    display: table-row;
}

.accordion-item-head.open .close,
.accordion-item-head:not(.open) .open{
    display: none;
}








.carousel{
    background: var(--card-bg);

}
.carousel-item{
    background-color: var(--card-bg);
    /* height: 320px; */
    width: 100%;
    aspect-ratio: 2;
    min-height: 250px;
    /* max-height: 350px; */
}
.carousel-item img{
    height: 100%;
    object-fit: cover;
}
.carousel-caption{
    text-align: left;

    position: absolute;
    left: 0; bottom: 0; right: 0;

    padding: 2rem 2rem 2rem;

    background-image: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.2), rgba(0,0,0,0.6));

}
.carousel-caption h5{
    font-size: 0.75rem;
    color: #FFFFFF;
    font-weight: 500;
}
.carousel-caption p{
    font-size: 0.75rem;
    color: #FFFFFF;
    font-weight: 300;
}
.carousel-indicators button{
    width: 20px!important;
    border-radius: 100px;
}
.carousel-control-prev .icon-wrapper,
.carousel-control-next .icon-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 1000px;
    font-size: 16px;
    color: #000000;
    padding: 8px;
}




/************* Pagination *************/
/* ********************************** */
.pagination{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pagination .pagination-item{
    all: unset;
    color: var(--text-color);
    font-size: 0.875rem;
    height: 20px;
    width: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;

    border-radius: 1000px;
    cursor: pointer;

    transition: 0.2s;
}
.pagination .pagination-item:not(:disabled):hover,
.pagination .pagination-item.active{
    background-color: var(--primary-color);
    border-color: var(--primary-color)!important;
    color: #FFFFFF;
}
.pagination .pagination-item.arrow-btn{
    height: 36px;
    width: 36px;
    border: 1px solid var(--line-2-color);
    border-radius: 2px;

    font-size: 1rem;
}
.pagination .pagination-item:disabled{
    background-color: var(--secondary-bg);
    cursor: not-allowed;
}





/************* Dropdowns *************/
/* ********************************* */

.dropdown-menu{
    --bs-dropdown-min-width: 13rem;
    
    --bs-dropdown-font-size: 14px;

    --bs-dropdown-color: var(--text-color);
    --bs-dropdown-bg: var(--app-bg);

    --bs-dropdown-border-radius: 6px;
    --bs-dropdown-border-color: var(--line-color);

    /* --bs-dropdown-box-shadow: var(--bs-box-shadow); */
    --bs-dropdown-link-color: var(--text-color);
    --bs-dropdown-link-hover-color: var(--dropdown-hover-text-color);
    --bs-dropdown-link-hover-bg: var(--dropdown-hover-bg-color);

    --bs-dropdown-link-active-color: var(--dropdown-hover-text-color);
    --bs-dropdown-link-active-bg: var(--dropdown-hover-bg-color);
    
    --bs-dropdown-item-padding-x: 8px;
    --bs-dropdown-item-padding-y: 10px;

    --bs-dropdown-padding-x: 0px;
    --bs-dropdown-padding-y: 0px;
    
    --bs-dropdown-header-color: var(--subtext-color);
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-item-border-radius: 4px;

    --bs-dropdown-link-hover-bg: var(--dropdown-item-hover-bg);
    --bs-dropdown-link-hover-color: var(--text-color);

    z-index: 1030;
}
.dropdown-menu ul{
    list-style: none;
    margin: 0;
    padding: 4px;
    border-bottom: 1px solid var(--line-color);
}
.dropdown-menu ul:last-child{
    border-bottom: 0px;
}
.dropdown-menu .dropdown-item{
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-speed) ;
}
.dropdown-menu .dropdown-item .icon{
    font-size: 20px;
}






/*********** MODALS ***********/
/*********** ****** ***********/

.modal-footer{
    border-top-color: var(--secondary-bg);
    background-color: var(--secondary-bg);
}

/* Event Modal  */
.event-modal{
    max-width: 440px;
    color: var(--text-color);
    font-size: 0.875rem;
}
.event-modal .modal-content{
    border: 0px;
    border-radius: 2px;
    background-color: var(--app-bg);
}
.event-modal .modal-body{
    padding: 1.5rem;
}
.event-modal .title{
    color: var(--text-color);
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 2px;
}
.event-modal .subtitle{
    color: var(--secondary-text-color);
    font-size: 0.875rem;
    margin: 0px;
}
.event-modal .description{
    padding: 1.5rem 0px;
}
.event-modal .avatar-wrapper{
    padding: 0px 0.75rem 1rem;
    display: flex;
    align-items: center;
}
.event-modal .avatar-wrapper .avatar{
    font-size: 32px;
    border: 2px solid var(--app-bg);
    border-radius: 1000px;

    margin-left: -0.75rem;
}

@media (max-width: 575px) {
    .event-modal .modal-footer .btn,
    .event-modal .modal-footer > *{
        width: 100%;
    }
}






/*********** UI Elements ***********/
/*********** *********** ***********/

/* Pills  */
.pill{
   padding: 0.25rem 0.75rem;
   font-size: 0.75rem;
   font-weight: 400;

   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;

   border: 1px solid var(--input-border-color);

   border-radius: 1000px;

   white-space: nowrap;

   color: var(--secondary-text-color);

}
.dark-theme .pill{
    border-color: currentColor !important;
    background-color: transparent !important;
}
.pill::before{
    content: "";
    display: block;
    height: 6px;
    width: 6px;
    background-color: currentColor;

    border-radius: 50%;
}
.pill.success{
    background-color: var(--success-light-color);
    color: var(--success-color);

    border-color: var(--success-light-color);
}
.pill.info{
    background-color: var(--info-light-color);
    color: var(--info-color);

    border-color: var(--info-light-color);
}