:root {
    --gradient-color-top: #f1f0eb;
    --gradient-color-bottom: #ffffff;
    --title-font-color: rgb(28 28 37 / 90%);

    --label-font-color: rgb(37 37 53 / 90%);
    --label-font-color-dark: rgba(25, 25, 36, 0.9);
    --label-font-color-light: rgba(44, 44, 59, 0.9);
    --muted-font-color: rgba(37, 37, 53, 0.685);

    --nav-font-color:#151518;

    --widget-background-color: rgb(0 0 0 / 0%);
    --widget-font-color: rgba(244, 244, 245, .6);
    --widget-border-color: rgb(0 0 0 / 33%);
    --widget-controls-color: #030304;
    
    --widget-footer-color: rgb(39 38 38 / 90%);
    --widget-footer-color-darker: rgb(39 38 38);/*rename and apply //for selectelements*/

    --button-default-color: rgb(39 38 38 / 90%);
    --button-default-color-darker: rgb(39 38 38);/*rename and apply //for selectelements*/

    --input-background-color: #fdfcf5;
    --input-focus-background-color: #f0efe7;
    --input-font-color: rgb(37 37 53 / 70%);
    --input-focus-font-color: rgba(30, 30, 43, 0.7);

    --alert-background-color: #030304cf;
}
.text-light,
.text-light time{
    color: #f8f9fa !important;
}
body, .modal .modal-content {
    background: radial-gradient(farthest-side ellipse at 10% 0, var(--gradient-color-top) 20%, var(--gradient-color-bottom));
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: Open Sans, sans-serif;
    color: var(--label-font-color);
}
.card{
        background: radial-gradient(farthest-side ellipse at 10% 0, var(--gradient-color-top) 20%, var(--gradient-color-bottom));

}

pre, .widget>header+.widget-body .using-grid{
    background: unset !important;
}
.modal .modal-content .modal-body p, .modal .close{
    color: var(--label-font-color);
}

.modal .modal-content .modal-footer{
    border-top: solid 1px var(--widget-border-color);
}
.modal .modal-content .modal-header{
    border-bottom: solid 1px var(--widget-border-color);
}

.btn-default:not(.dropdown-toggle), 
.login-form .form-group .input-group-prepend .input-group-text{
    background-color: var(--button-default-color);
    color: var(--input-background-color) !important;
}
.btn-default:hover{
    background-color: var(--button-default-color-darker);
    color: var(--input-focus-background-color);
}
.widget>header .dropdown-toggle, /*to force overwrite instead of using !important*/
.btn-group .dropdown-toggle,
/*.info-bag .btn-add,*/.product-info .info-bag .btn-star{
    /*background: radial-gradient(farthest-side ellipse at 10% 0, var(--gradient-color-top) 20%, var(--gradient-color-bottom));
    */
    background-color: var(--widget-background-color);
    color: var(--label-font-color);
    border: solid 1px var(--widget-border-color);
}

.accordion .card-header a, .accordion .card-header a:hover, .accordion .card-header a:active {
    background-color: var(--widget-background-color);
    color: var(--label-font-color);
}
.accordion .card-body{
    background-color: var(--widget-background-color);/*wip*/
}
/*.accordion .card{
    border: solid 1px var(--widget-border-color);
}*/


.product-info .info-bag .btn-star:hover{
    background-color: var(--button-default-color);
    color: var(--input-focus-background-color);
}
.page-title,
.page-title small,
.sidebar-nav-title,
.widget>header,
.product-page-title,
.product-card .card-title,
.product-description.description-desktop h3{
    color: var(--title-font-color);
}
.widget,
.event, .activities .event,
.navbar-form .input-group .form-control,
.product-info
{
    color: var(--nav-font-color);
    /*box-shadow: 0 25px 20px -20px rgba(0, 0, 0, .1), 0 0 15px rgba(0, 0, 0, .06);
    */border: solid 1px var(--widget-border-color);
    background-color: var(--widget-background-color);
}


.widget>header .dropdown-menu/*, 
#compose-btn*/{
    border: solid 1px var(--widget-border-color);
    background-color: rgba(244, 244, 245, .9019607843);
    color: var(--label-font-color);
}


.accordion .card-header a{
    color: #fff;
}
.accordion .card-header, 
.bootstrap-select .dropdown-menu>li>a.active,
.bootstrap-select .dropdown-menu>li>a.active:hover,
.bootstrap-select .dropdown-menu>li>a.active:focus,

#map-years-mapael .map-controls .nav-item .nav-link,
.zoomIn, .zoomOut,
.pagination li .btn,
/*.tabbable .nav-tabs .nav-item .nav-link.active,*/
.nav-tabs .nav-item .nav-link.active,
.nav-tabs>.nav-item .nav-link.active:focus{
    color: #fff;
    text-decoration: none;
    background-color: var(--button-default-color);
    outline: 0;
}
.pagination li .btn{
    border-color: var(--button-default-color-darker);
}
.widget>header .dropdown-menu .dropdown-item:hover{
    background-color: var(--button-default-color-darker);
}
.bg-default{
    background-color: var(--button-default-color) !important;
}

textarea.form-control{
    color: var(--nav-font-color) !important;
    border: solid 1px rgb(0 0 0 / 33%) !important;
    background-color: var(--widget-background-color) !important;
}
textarea.form-control:focus{
    /*color: var(--nav-font-color) !important;*/
    border: solid 1px rgba(0, 0, 0, 0.123) !important;
    /*background-color: var(--widget-background-color) !important;*/
}
.activities .event footer,
.widget>footer{
    background: var(--widget-footer-color) !important;
}
.navbar-form .input-group .input-group-text{
    background: var(--button-default-color) !important;
}
.navbar-form .input-group .form-control:focus{
    color: var(--label-font-color-dark);
    background-color: rgba(0, 0, 0, 0.075);

}
input::placeholder {
    color: var(--label-font-color-light) !important;
  }
.sidebar-nav li a {
    color: var(--nav-font-color);
}
.sidebar{
    box-shadow: 0 25px 20px -20px rgba(0, 0, 0, .1), 0 0 15px rgba(0, 0, 0, .06);
}
.form-control,
input[type=search], input.search{
    background-color: var(--input-background-color);
    border: none;
    color: var(--label-font-color);
    box-shadow: none;
}
.form-control:focus, .form-control:active,
.navbar-form .input-group .form-control:focus {
    /*background-color: rgba(0, 0, 0, 0.075)!important;*/
    background-color: var(--widget-background-color) !important;
    color: var(--label-font-color-dark);
    
    border-bottom: solid 1px var(--widget-border-color);
}
.widget-controls>a{
    color: var(--widget-controls-color);
}
.widget-controls>a:hover{
    color: var(--widget-controls-color);
}

.label,label,.legendLabel,
blockquote,
.alert,
.table,
.breadcrumb>.active, 
.breadcrumb, 
.activities .event p,
.logo>a, 
.logo>b, 
.widget>header .dropdown-menu .dropdown-item,
.widget>header h1, 
.widget>header h2, 
.widget>header h3, 
.widget>header h4, 
.widget>header h5, 
.widget>header h6,
.widget>header+.widget-body .description, 
.widget>header+.widget-body.p-0 .description,
.widget .widget-body:not(
    .widget>footer *, 
    .bg-primary, .bg-primary *,
    .bg-success, .bg-success *,
    .bg-info, .bg-info *,
    .bg-warning, .bg-warning *,
    .bg-danger, .bg-danger * ),
.widget-login-info,
.help-block,
.navbar-dashboard .navbar-nav>li>a,
.page-controls .navbar-nav .nav-link .fa, .page-controls .navbar-nav .nav-link .la,
.login-page .page-footer,
.widget>header+.widget-body, .widget>header+.widget-body.p-0,
.widget>header+.widget-body p:last-child, .widget>header+.widget-body.p-0 p:last-child

.widget>header+.widget-body h1, 
.widget>header+.widget-body h2, 
.widget>header+.widget-body h3, 
.widget>header+.widget-body h4, 
.widget>header+.widget-body h5, 
.widget>header+.widget-body h6, 
.widget>header+.widget-body.p-0 h1, 
.widget>header+.widget-body.p-0 h2, 
.widget>header+.widget-body.p-0 h3, 
.widget>header+.widget-body.p-0 h4, 
.widget>header+.widget-body.p-0 h5, 
.widget>header+.widget-body.p-0 h6,
.widget>header+.widget-body .fs-mini, 
.widget>header+.widget-body.p-0 .fs-mini,
.widget>header+.widget-body .statistics, 
.widget>header+.widget-body.p-0 .statistics,

.mapael .stats,

h1 small,
h1 .small,
h2 small,
h2 .small,
h3 small,
h3 .small,
h4 small,
h4 .small,
h5 small,
h5 .small,
h6 small,
h6 .small,
.h1 small,
.h1 .small,
.h2 small,
.h2 .small,
.h3 small,
.h3 .small,
.h4 small,
.h4 .small,
.h5 small,
.h5 .small,
.h6 small,
.h6 .small,
.price,
.product-grid .product-filters .product-filter label,

.btn-outline-default, 
.btn-outline-inverse,

#events-calendar a, .calendar .week_days,

.table-sm>thead>tr>th, 
.table-sm>thead>tr>td, 
.table-sm>tbody>tr>th, 
.table-sm>tbody>tr>td, 
.table-sm>tfoot>tr>th, 
.table-sm>tfoot>tr>td,

.widget > header + .widget-body p:last-child, 
.widget > header + .widget-body.p-0 p:last-child,

.email-folders h6, .table-emails .unread,
.widget-email-count,
.sidebar-nav>.active>a .icon .fi,
.icon-list-item>a,
.nav-tabs>.nav-item>.nav-link
{
    color: var(--label-font-color);
}

.nav-email-folders>li>.nav-link
{
    color: var(--label-font-color);
    border: solid var(--widget-border-color);
    border-width: 0 0 1px 1px;
    border-radius: 0;
}
.nav-email-folders .nav-item:hover{
    background-color: #2b2b2d07 !important;
}
.nav-email-folders .nav-item.active{
    background-color: var(--button-default-color);
}
/*#compose-btn{
    background-color: var(--button-default-color);
}*/


.text-light:not(.status){
    color: var(--label-font-color-light) !important;
}



/*
(text-white issue color correction)
this template forces some elements texts to be white by 
using a text-wite class instead of a rule that follows template's style pattern
this makes it's reusability harder. So the section bellow just corrects those visuals.
FOR IMPLEMENTATION:
REMOVE THIS SECTION AND text-white classes of the respective elements that don't
 need to be white.
*/
/*
.text-white-50, .text-white:not(
                                .widget>footer *, 
                                .widget-image,
                                .post-user *,
                                .bg-primary, .bg-primary *,
                                .bg-success, .bg-success *,
                                .bg-info, .bg-info *,
                                .bg-warning, .bg-warning *,
                                .bg-danger, .bg-danger * ,
                                .bg-default, .bg-default *,
                               ) 
{
    color: var(--label-font-color) !important;
}*/
.widget-controls .text-white-50,
.widget-controls .text-white,
.table .text-white-50,
.table .text-white,
.list-group-item.text-ellipsis.text-white.text-center,
.theme-helper-spinner.text-white .la{
    color: var(--label-font-color) !important;
}
/*end text-white incident section*/










.text-muted{
    color: var(--muted-font-color) !important;
}
.text-theme-color{
    color: var(--label-font-color) !important;
}
.sidebar-nav>.active>a, .sidebar-nav>.active>a:hover,
.sidebar-nav>li ul>li.active>a,
.navbar-dashboard .navbar-nav>li>a:hover, .navbar-dashboard .navbar-nav>li>a:focus,
.sidebar-nav>li ul>li.active>a,
.widget .widget-body .lead
{
    color: var(--label-font-color-dark);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05);
}
.navbar-dashboard .navbar-header .alert{
    background-color: var(--alert-background-color);
}
.navbar .nav-item.divider{
    /*background: linear-gradient(rgb(0 0 0), rgb(70 70 70 / 50%), rgb(0 0 0 / 0%));*/
    background-color: var(--widget-border-color);
}
code {
    font-size: 85%;
    background-color: var(--alert-background-color);
    color: var(--gradient-color-top);
    padding: 2px;
    border-radius: .3rem;
}

.abc-checkbox label::before {
    background-color: #ffffff;
    border: solid 1px var(--widget-border-color);
}
.abc-checkbox label::after{
    color: var(--label-font-color);
}
.theme-helper .theme-helper-content{
    background: rgb(255 255 255);
}
.theme-helper .theme-helper-spinner{
    background-color: #fff;
    border: solid var(--widget-border-color);
    border-width: 1px 0 1px 1px;
    margin-top: -1px;
    box-shadow: -3px 0 8px -1px rgb(0 0 0 / 15%);
}
.tab-content{
    background-color: unset;
}
.dropzone{
    background: unset;
}