:root {
    --primary-color: #163aec;
    --secondary-color: #414042;
    --nav-color: #009bf6;
    --sidebar-height: 500px;
    --sidebar-bottom-radius: 30px;
    --body-background-color: #f4f6f9;
}

/* @font-face {
    font-family: 'Quicksand';
    src: url('../../fonts/quicksand/Quicksand-VariableFont_wght.ttf');
} */

/* p {
   font-family:  'Quicksand', sans-serif;
} */

body {
    background-color: var(--body-background-color) !important;
}

.ht-hidden {
    display: none;
}

.main-sidebar-curved {
    height: var(--sidebar-height) !important;
    border-bottom-right-radius: var(--sidebar-bottom-radius) !important;
}

/*
Admin LTE - Template customizations
*/



.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--nav-color);
    color: #fff;
}

.bootstrap-switch-handle-on .bootstrap-switch-primary {
    background: var(--primary-color) !important;
}

.select2-selection__choice {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.select2-selection__choice__remove {
    color: white !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
}

.btn-primary :hover {

    background-color: var(--secondary-color);
    border-color: var(--secondary-color);

}

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

.bg-primary {
    background-color: var(--primary-color) !important;
}


.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.info-box-number {
    font-size: 20px;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.open>.dropdown-toggle.btn-outline-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    /*set the color you want here*/
}

.text-primary {
    color: var(--primary-color) !important;
}

/*
*/

.badge-primary {
    color: white;
    background-color: var(--primary-color);
}

.badge-primary:hover {
    color: white;
    background-color: var(--secondary-color) !important;
}

.list-group-item {
    color: black;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.main-sidebar {
    background-color: var(--primary-color) !important;
}

.control-sidebar {
    background-color: var(--primary-color) !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

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

.card-header {
    border-bottom: none;
}

.tokenfield .token {
    padding-bottom: 26px;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background: var(--primary-color) !important;
}

.auth-cover-rounded {
    border-radius: 20px;
}



.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-image,
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-image {
    margin-right: .5rem;
    display: none;
}
/*
.form-group>.form-control {

    background-color: #ecf5f3 !important;
    border: none !important;
    ;
    border-radius: 30rem !important;
}

.input-group>.form-control {
    background-color: #ecf5f3 !important;
    border: none !important;
    ;
    border-top-left-radius: 30rem !important;
    border-bottom-left-radius: 30rem !important;
}

.input-group>.input-group-append {
    background-color: #ecf5f3 !important;
    border: none !important;
    border-top-right-radius: 30rem !important;
    border-bottom-right-radius: 30rem !important;
} */

.border-24{
    border-radius: 24px!important;
}

.border-30{
    border-radius: 30px!important;
}