/** Load fonts from google fonts **/
.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  


  .merienda-regular {
    font-family: "Merienda", cursive;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }

  



/** Create constant colors 
@property --primary-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #449ed2;
}
*/


@property --accent-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #869b7a;
}

@property --white-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffff;
}

@property --clear-white-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffff;
}

@property --black-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #343434;
}

@property --dark-gray-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #6E6E6E;
}

@property --gray-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #7c7c7c;
}

@property --light-gray-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #BEBEBE;
}

@property --red-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #E45A77;
}

@property --green-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #48F54E;
}

@property --cyan-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #00FFFF;
}

@property --yellow-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #f5d400;
}

@property --orange-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #ff7700;
}





body {
    --sb-track-color: #f7fff7;
    --sb-thumb-color:  var(--primary-color);
    --sb-size: 7px;
  }

body::-webkit-scrollbar {
width: var(--sb-size)
}

body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 3px;
}

body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: var(--sb-thumb-color)
                        var(--sb-track-color);
    }
}

p[contenteditable="true"]:focus {
    outline: none;
    border: none;
}











body{
    margin: 0px;
    padding: 0px;
    font-family: "Inter", sans-serif;;
}


a{
    text-decoration: none;
    color: #000;
}


.no-focus:focus {
    outline: none;
    border: 1px solid black;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    border-radius: 0.5rem;
  }
  


/** create class for color property */
.color-primary{
    color: var(--primary-color);
}
.color-accent{
    color: var(--accent-color);
}
.color-black{
    color: var(--black-color);
}
.color-gray{
    color: var(--gray-color);
}
.color-light-gray{
    color: var(--light-gray-color);
}
.color-dark-gray{
    color: var(--dark-gray-color);
}
.color-white{
    color: var(--white-color);
}
.color-red{
    color: var(--red-color);
}
.color-yellow{
    color: var(--yellow-color);
}
.color-cyan{
    color: var(--cyan-color);
}
.color-orange{
    color: var(--orange-color);
}
.color-green{
    color: var(--green-color);
}



/** create class for background color */
.bgcolor-primary{
    background-color: var(--primary-color);
}
.bgcolor-accent{
    background-color: var(--accent-color);
}
.bgcolor-black{
    background-color: var(--black-color);
}
.bgcolor-dark-gray{
    background-color: var(--dark-gray-color);
}
.bgcolor-gray{
    background-color: var(--gray-color);
}
.bgcolor-light-gray{
    background-color: var(--light-gray-color);
}
.bgcolor-white{
    background-color: var(--white-color);
}
.bgcolor-clear-white{
    background-color: var(--clear-white-color);
}
.bgcolor-red{
    background-color: var(--red-color);
}
.bgcolor-yellow{
    background-color: var(--yellow-color);
}
.bgcolor-cyan{
    background-color: var(--cyan-color);
}
.bgcolor-green{
    background-color: var(--green-color);
}
.bgcolor-red{
    background-color: var(--red-color);
}
.bgcolor-orange{
    background-color: var(--orange-color);
}



.border-color-primary{
    border-color: var(--primary-color);
}




/** BUTTONS HOVER COLORS **/
.bgprimary-hover:hover{
    background-color: var(--primary-color);
    color: var(--clear-white-color);
    box-shadow: 0px 10px 15px -3px rgb(0, 0, 0, 0.1);
}

.bgred-hover:hover{
    background-color: var(--red-color);
    color: var(--clear-white-color);
    box-shadow: 0px 10px 15px -3px rgb(0, 0, 0, 0.1);
}





/** Box shadow */
.boxshadow{
    box-shadow: 0px 10px 15px -3px rgb(0, 0, 0, 0.1);
}
.boxshadow-md{
    box-shadow: 0px 31px 39px -7px rgba(0,0,0,0.1);
}




#guest-page-bg{
    background-image: url("../../storage/app_assets/login_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}


.input-field-light{
    background-color: rgba(0, 0, 0, 0);
    border-radius: 8px;
    color: var(--white-color);
}
.input-field-dark{
    border-radius: 8px;
    color: var(--white-black);
}

#main {
    transition: margin-left 0.3s;
} 


.input-control{
    border: 1px solid var(--gray-color);
    color: var(--black-color);
    border-radius: 8px;
    font-size: 0.8rem;
}


.sticky-position{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

.selected_field_arrow{
    rotate: 90deg;
}





.sidebar-primary {
    --sb-track-color: #f7fff7;
    --sb-size: 7px;
  }

.sidebar-primary::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);;
}

.sidebar-primary::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
}

.sidebar-primary::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
}
.sidebar-primary:hover::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar) {
    .sidebar-primary {
        scrollbar-color: var(--sb-thumb-color)
                        var(--sb-track-color);
    }
}





.default-side-bar-sm {
    --sb-size: 4px;
    --sb-hover-size: 4px;
    --sb-thumb-color:  var(--gray-color);
}

.default-side-bar-sm::-webkit-scrollbar {
    width: var(--sb-size)
}
.default-side-bar-sm:hover::-webkit-scrollbar {
    width: var(--sb-hover-size);
}

.default-side-bar-sm::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
}


.default-side-bar-sm::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
}
.default-side-bar-sm:hover::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}


@supports not selector(::-webkit-scrollbar) {
    .default-side-bar-sm {
        scrollbar-color: var(--sb-thumb-color)
                        var(--sb-track-color);
    }
}



.selectize-dropdown .option:hover {
    background-color: var(--primary-color); 
    color: #ffffff; /* Text color when hovering */
}
.selectize-dropdown .option {
    color: #000000; /* Text color of options */
    background-color: rgb(255, 255, 255);
}










.selectize-input {
    background-color: #ffffff !important;
    border: none;
    border-radius: 14px;
}

.selectize-input.focus {
    border-color: #3498db !important;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3) !important;
}

.selectize-input {
    background-image: none !important;
}



.scrollbar-theme {
    --sb-track-color: #e2e2e2;
    --sb-thumb-color: var(--primary-color);
    --sb-size: 8px;
}

.scrollbar-theme::-webkit-scrollbar {
    width: var(--sb-size);
}

.scrollbar-theme::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
}

.scrollbar-theme::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar) {
    .scrollbar-theme {
        scrollbar-color: var(--sb-thumb-color)
                        var(--sb-track-color);
    }
}


.form-modal{
    max-height:60vh;
    overflow-y: scroll;
    overflow-x: hidden;
    --sb-track-color: #f7fff7;
    --sb-thumb-color:  var(--primary-color);
    --sb-size: 7px;
    padding-right: 8px;
}

.form-modal::-webkit-scrollbar {
width: var(--sb-size)
}

.form-modal::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 3px;
}

.form-modal::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar) {
    .form-modal {
        scrollbar-color: var(--sb-thumb-color)
                        var(--sb-track-color);
    }
}



.border-bg-primary{
    border-color: --var(--primary-color);
}

.dt-left {
    text-align: left !important;  /* Align text to the left */
    vertical-align: middle !important; /* Align content vertically in the middle */
    font-size: 0.8rem 
}

table.dataTable {
    border-collapse: collapse; /* Ensure borders are properly merged */
    width: 100%;
    border: 1px solid #ddd; /* Outer border */
}

table.dataTable th,
table.dataTable td {
    border: 1px solid #ddd; /* Cell borders */
    padding: 8px; /* Spacing inside cells */
}



/** Statuses */
.status-success{
    background-color: #198754;
}

.status-warning{
    background-color: #ffb132;
}

.status-danger{
    background-color: #E45A77;
}

.status-info{
    background-color: #00FFFF;
}

.status-draft{
    background-color: #ffb132;
}