/** Create constant colors */
@property --primary-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #54C0E8;
}
@property --accent-color{
    syntax: "<color>";
    inherits: false;
    initial-value: #EFF5FF;
}

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

@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: #B4B4B8;
}

@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);
}




/** 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)
}

.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;
}