/* Customizing style for backgrounds and root Colors */
/* ==================================================== */
:root {
    /* Main Var */
    --primary: #dc4639; /* #0d768b #dc4639 */ --secondary: #0a4587; --success: #0d768b; --info: #0a4587; --warning: #ffc61d; --danger: #dc4639; --light: #f4f6f9; --dark: #aaaaaa; --link: #1F3BB3; --line: rgb(0 0 0 / 13%); --text : #212529; --text-bold : #000000; --text-meuted : #5a6268;

    /* Main darker Var */
    --primary-darker: #b30f00; --secondary-darker: #002b5c; --success-darker: #005668; --info-darker: #002b5c; --warning-darker: #ce9a00; --danger-darker: #b30f00; --light-darker: #e9ecef; --dark-darker: #878686; --link-darker: #0a4587; --line-darker: #ced4da; --text-darker : #212529; --text-bold-darker : #000000; --text-meuted-darker : #5a6268;
    
    /* Main darker Var */
    --primary-lighter: #f54130; /* #0d768b #dc4639 */ --secondary-lighter: #124d91; --success-lighter: #099cb9; --info-lighter: #0e5db8; --warning-lighter: #ffda6a; --danger-lighter: #dc4639; --light-lighter: #f8fafd; --dark-lighter: #c2c1c1; --link-lighter: #2049ff; --line-lighter: #dfdfdf; --text-lighter : #212529; --text-bold-lighter : #000000; --text-meuted-lighter : #5a6268;

    /* link Var */
    --link-color: #1F3BB3; --link-selected-color: var(--primary); --sidebar-link-color: #484848; --sidebar-link-selected-color: #1F3BB3; --navbar-link-color: #212121; --navbar-link-selected-color: #1F3BB3; --navbar-icon-link-color: #212121;

    /* page Var */
    --darkened-bg: #f8f8f8; --light-mode-bg: #f4f6f9; --dark-mode-bg: #f4f6f9;
    
    /* btn Var */
    /* primary btn Var */ --primary-btn: #212121; --primary-btn-selected: #212121; --primary-btn-selected-dark: var(--primary);
    /* secondary btn Var */ --secondary-btn: var(--success); --secondary-btn-selected: var(--secondary); --secondary-btn-selected-dark: #055363;
    /* success btn Var */ --success-btn: var(--secondary); --success-btn-selected: var(--primary); --success-btn-selected-dark: #073468;
    /* info btn Var */ --info-btn: var(--secondary); --info-btn-selected: var(--primary); --info-btn-selected-dark: #073468;
    /* danger btn Var */ --danger-btn: var(--primary); --danger-btn-selected: var(--success); --danger-btn-selected-dark: #aa3025;
    /* warning btn Var */ --warning-btn: #212121; --warning-btn-selected: #212121; --warning-btn-selected-dark: var(--primary); --text-muted-color: #5a6268;

    /* color Var */
    --primary-color: var(--primary); --secondary-color: var(--secondary); --info-color: var(--secondary); --success-color: var(--success); --warning-color: var(--primary); --danger-color: var(--primary);
}
/* ================================================== */


/* Genral style */
/* ==================================================== */
.bg-primary{background-color: var(--primary) !important; color: #ffffff !important;}
.bg-secondary{background-color: var(--secondary) !important; color: #ffffff !important;}
.bg-info{background-color: var(--info) !important; color: #ffffff !important;}
.bg-success{background-color: var(--success) !important; color: #ffffff !important;}
.bg-warning{background-color: var(--warning) !important; color: #000000 !important;}
.bg-danger{background-color: var(--danger) !important; color: #ffffff !important;}
.bg-light{background-color: var(--light) !important; color: #000000;}
.bg-dark{background-color: var(--dark) !important; color: #ffffff !important;}

.text-primary{color: var(--primary) !important;}
.text-secondary{color: var(--secondary) !important;}
.text-info{color: var(--info) !important;}
.text-success{color: var(--success) !important;}
.text-warning{color: var(--warning) !important;}
.text-danger{color: var(--danger) !important;}
.text-light{color: var(--light) !important;}
.text-dark{color: var(--dark) !important;}

a{color: var(--link) !important;}
a:hover{color: var(--link-lighter) !important;}
a:focus{color: var(--link-darker) !important;}

a svg{fill: var(--link) !important;}
a:hover svg{fill: var(--link-lighter) !important;}
a:focus svg{fill: var(--link-darker) !important;}


/* btn-primary */
.btn-primary{background: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important;}
.btn-primary:hover{background: var(--primary-darker) !important; border-color: var(--primary-darker) !important; color: #ffffff !important;}
.btn-primary:focus{background: var(--primary-lighter) !important; border-color: var(--primary-lighter) !important; color: #ffffff !important;}
.btn-primary.loading{background: var(--primary-darker) !important; border-color: var(--primary-darker) !important; color: #ffffff !important;}
.btn-outline-primary{background: transparent !important; border-color: var(--primary) !important; color: var(--primary) !important;}
.btn-outline-primary:hover{background: var(--primary-darker) !important; border-color: var(--primary-darker) !important; color: #ffffff !important;}
.btn-outline-primary:focus{background: var(--primary-darker) !important; border-color: var(--primary-darker) !important; color: #ffffff !important;}
.btn-outline-primary.loading{background: var(--primary-darker) !important; border-color: var(--primary-darker) !important; color: #ffffff !important;}
/* btn-primary svg */
.btn-primary svg{fill: #ffffff;}
.btn-primary:hover svg{fill: #ffffff !important;}
.btn-primary.loading svg{fill: #ffffff !important;}
.btn-outline-primary svg{fill: var(--primary) !important;}
.btn-outline-primary:hover svg{fill: #ffffff !important;}
.btn-outline-primary:focus svg{fill: #ffffff !important;}
.btn-outline-primary.loading svg{fill: #ffffff !important;}

/* btn-secondary */
.btn-secondary{background: var(--secondary) !important; border-color: var(--secondary) !important; color: #ffffff !important;}
.btn-secondary:hover{background: var(--secondary-darker) !important; border-color: var(--secondary-darker) !important; color: #ffffff !important;}
.btn-secondary:focus{background: var(--secondary-lighter) !important; border-color: var(--secondary-lighter) !important; color: #ffffff !important;}
.btn-secondary.loading{background: var(--secondary-darker) !important; border-color: var(--secondary-darker) !important; color: #ffffff !important;}
.btn-outline-secondary{background: transparent !important; border-color: var(--secondary) !important; color: var(--secondary) !important;}
.btn-outline-secondary:hover{background: var(--secondary-darker) !important; border-color: var(--secondary-darker) !important; color: #ffffff !important;}
.btn-outline-secondary:focus{background: var(--secondary-darker) !important; border-color: var(--secondary-darker) !important; color: #ffffff !important;}
.btn-outline-secondary.loading{background: var(--secondary-darker) !important; border-color: var(--secondary-darker) !important; color: #ffffff !important;}
/* btn-secondary svg */
.btn-secondary svg{fill: #ffffff;}
.btn-secondary:hover svg{fill: #ffffff !important;}
.btn-secondary.loading svg{fill: #ffffff !important;}
.btn-outline-secondary svg{fill: var(--secondary) !important;}
.btn-outline-secondary:hover svg{fill: #ffffff !important;}
.btn-outline-secondary:focus svg{fill: #ffffff !important;}
.btn-outline-secondary.loading svg{fill: #ffffff !important;}

/* btn-success */
.btn-success{background: var(--success) !important; border-color: var(--success) !important; color: #ffffff !important;}
.btn-success:hover{background: var(--success-darker) !important; border-color: var(--success-darker) !important; color: #ffffff !important;}
.btn-success:focus{background: var(--success-lighter) !important; border-color: var(--success-lighter) !important; color: #ffffff !important;}
.btn-success.loading{background: var(--success-darker) !important; border-color: var(--success-darker) !important; color: #ffffff !important;}
.btn-outline-success{background: transparent !important; border-color: var(--success) !important; color: var(--success) !important;}
.btn-outline-success:hover{background: var(--success-darker) !important; border-color: var(--success-darker) !important; color: #ffffff !important;}
.btn-outline-success:focus{background: var(--success-darker) !important; border-color: var(--success-darker) !important; color: #ffffff !important;}
.btn-outline-success.loading{background: var(--success-darker) !important; border-color: var(--success-darker) !important; color: #ffffff !important;}
/* btn-success svg */
.btn-success svg{fill: #ffffff;}
.btn-success:hover svg{fill: #ffffff !important;}
.btn-success.loading svg{fill: #ffffff !important;}
.btn-outline-success svg{fill: var(--success) !important;}
.btn-outline-success:hover svg{fill: #ffffff !important;}
.btn-outline-success:focus svg{fill: #ffffff !important;}
.btn-outline-success.loading svg{fill: #ffffff !important;}

/* btn-info */
.btn-info{background: var(--info) !important; border-color: var(--info) !important; color: #ffffff !important;}
.btn-info:hover{background: var(--info-darker) !important; border-color: var(--info-darker) !important; color: #ffffff !important;}
.btn-info:focus{background: var(--info-lighter) !important; border-color: var(--info-lighter) !important; color: #ffffff !important;}
.btn-info.loading{background: var(--info-darker) !important; border-color: var(--info-darker) !important; color: #ffffff !important;}
.btn-outline-info{background: transparent !important; border-color: var(--info) !important; color: var(--info) !important;}
.btn-outline-info:hover{background: var(--info-darker) !important; border-color: var(--info-darker) !important; color: #ffffff !important;}
.btn-outline-info:focus{background: var(--info-darker) !important; border-color: var(--info-darker) !important; color: #ffffff !important;}
.btn-outline-info.loading{background: var(--info-darker) !important; border-color: var(--info-darker) !important; color: #ffffff !important;}
/* btn-info svg */
.btn-info svg{fill: #ffffff;}
.btn-info:hover svg{fill: #ffffff !important;}
.btn-info.loading svg{fill: #ffffff !important;}
.btn-outline-info svg{fill: var(--info) !important;}
.btn-outline-info:hover svg{fill: #ffffff !important;}
.btn-outline-info:focus svg{fill: #ffffff !important;}
.btn-outline-info.loading svg{fill: #ffffff !important;}

/* btn-warning */
.btn-warning{background: var(--warning) !important; border-color: var(--warning) !important; color: #000000 !important;}
.btn-warning:hover{background: var(--warning-darker) !important; border-color: var(--warning-darker) !important; color: #000000 !important;}
.btn-warning:focus{background: var(--warning-lighter) !important; border-color: var(--warning-lighter) !important; color: #000000 !important;}
.btn-warning.loading{background: var(--warning-darker) !important; border-color: var(--warning-darker) !important; color: #000000 !important;}
.btn-outline-warning{background: transparent !important; border-color: var(--warning) !important; color: var(--warning) !important;}
.btn-outline-warning:hover{background: var(--warning-darker) !important; border-color: var(--warning-darker) !important; color: #000000 !important;}
.btn-outline-warning:focus{background: var(--warning-darker) !important; border-color: var(--warning-darker) !important; color: #000000 !important;}
.btn-outline-warning.loading{background: var(--warning-darker) !important; border-color: var(--warning-darker) !important; color: #000000 !important;}
/* btn-warning svg */
.btn-warning svg{fill: #000000;}
.btn-warning:hover svg{fill: #000000 !important;}
.btn-warning.loading svg{fill: #000000 !important;}
.btn-outline-warning svg{fill: var(--warning) !important;}
.btn-outline-warning:hover svg{fill: #000000 !important;}
.btn-outline-warning:focus svg{fill: #000000 !important;}
.btn-outline-warning.loading svg{fill: #000000 !important;}

/* btn-danger */
.btn-danger{background: var(--danger) !important; border-color: var(--danger) !important; color: #ffffff !important;}
.btn-danger:hover{background: var(--danger-darker) !important; border-color: var(--danger-darker) !important; color: #ffffff !important;}
.btn-danger:focus{background: var(--danger-lighter) !important; border-color: var(--danger-lighter) !important; color: #ffffff !important;}
.btn-danger.loading{background: var(--danger-darker) !important; border-color: var(--danger-darker) !important; color: #ffffff !important;}
.btn-outline-danger{background: transparent !important; border-color: var(--danger) !important; color: var(--danger) !important;}
.btn-outline-danger:hover{background: var(--danger-darker) !important; border-color: var(--danger-darker) !important; color: #ffffff !important;}
.btn-outline-danger:focus{background: var(--danger-darker) !important; border-color: var(--danger-darker) !important; color: #ffffff !important;}
.btn-outline-danger.loading{background: var(--danger-darker) !important; border-color: var(--danger-darker) !important; color: #ffffff !important;}
/* btn-danger btn svg */
.btn-danger svg{fill: #ffffff;}
.btn-danger:hover svg{fill: #ffffff !important;}
.btn-danger.loading svg{fill: #ffffff !important;}
.btn-outline-danger svg{fill: var(--danger) !important;}
.btn-outline-danger:hover svg{fill: #ffffff !important;}
.btn-outline-danger:focus svg{fill: #ffffff !important;}
.btn-outline-danger.loading svg{fill: #ffffff !important;}

.card .card-header h5{font-size: 16px; font-weight: 700;}
.card .card-body a{font-size: 0.812rem; font-weight: 500;}

@media (max-width: 991px) {
    .content{padding: 0px !important;}
    .content .container-fluid{padding: 1rem !important;}
}
@media (max-width: 767px) {
    .h4{font-size: 1.15rem !important;}
    .breadcrumb li{font-size: 0.8rem !important;}
}
@media (min-width: 575px) {
    .text-sm-small{font-size: .875rem!important;}
    .text-sm-medium{font-size: .925rem!important;}
}

.text-muted{color: var(--text-muted-color) !important}
.text-muted ul{margin-bottom: 0px !important;}
.text-muted ul li{padding-top: 6px !important;}

@keyframes btn-loading-animation { 0% {transform: translate(0px, 0px) rotate(-0deg);} 100% {transform: translate(0px, 0px) rotate(-180deg);}}
.btn.loading{opacity: 0.65; cursor: not-allowed; box-shadow: none; position: relative;}
.btn.loading::before{content: ""; background-image: url('../../../../img/icons/loading-icon.svg'); background-size: 18px; background-position: center; background-repeat: no-repeat; width: 18px; height: calc(100% - 12px); position: absolute; display: flex; justify-content: start; align-items: center; animation-name: btn-loading-animation; animation-duration: 0.9s; animation-direction: reverse; animation-iteration-count: infinite;}
.btn.loading i{opacity: 0 !important;}
.table.table-sm .btn::before{font-size: 12px !important;}
#change-list-filters .btn::before{padding: 4px 0px !important; opacity: 0.8;}
.btn.btn-xs{padding: 4px 8px !important; font-size: 0.852rem !important; font-weight: 400 !important;}

.alert{padding: 12px !important;}
.accent-primary .dropdown-item.active, .accent-primary .dropdown-item:active{background: var(--light-darker) !important;}
/* ================================================== */


/* Loading Animation on Submit */
/* ==================================================== */
#loading-submit{background: rgb(0 0 0 / 37.5%); position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1021;}
#loading-submit.loading-submit-show{display: block;}
@keyframes loading-submit-svg-icon-animation { 0% {transform: translate(0px, 0px) rotate(-0deg);} 100% {transform: translate(0px, 0px) rotate(-180deg);}}
#loading-submit .loading-submit-icon .svg-icon{fill:#ffffff;}
#loading-submit.loading-submit-show .loading-submit-icon .svg-icon{fill:#ffffff; animation-name: loading-submit-svg-icon-animation; animation-duration: 0.95s; animation-direction: reverse; animation-iteration-count: infinite;}
#loading-submit .loading-submit-content{color: #ffffff;}
#loading-submit .loading-submit-content .describe{line-height: 1rem; font-weight: 400;}
#loading-submit .loading-submit-content .describe .dots{padding: 0px 2px; position: relative;}
#loading-submit .loading-submit-content .describe .dots i{opacity: 0;}
@keyframes loading-submit-dots-animation { 0%   {content: ".";} 25%  {content: "..";} 50%  {content: "...";} 75%  {content: "..";} 100%  {content: ".";}}
#loading-submit.loading-submit-show .loading-submit-content .describe .dots::before{content: ""; width: max-content; display: inline-block; font-weight: 600; position: absolute; animation-name: loading-submit-dots-animation; animation-duration: 4.5s; animation-direction: reverse; animation-iteration-count: infinite;}
/* ==================================================== */


/* main-header navbar style */
/* ==================================================== */
.header-auth .navbar-nav .nav-item .nav-link.active{color: var(--link-darker) !important;}
.header-auth .navbar-nav .nav-item .nav-link.btn{background: var(--light); width: 34px !important; height: 34px !important; padding: 0px !important; border: solid 1px var(--light-darker); color: var(--secondary) !important;}
.header-auth .navbar-nav .nav-item.show .nav-link.btn, .header-auth .navbar-nav .nav-item .nav-link.btn:hover, .header-auth .navbar-nav .nav-item .nav-link.btn:focus{background: var(--light-darker) !important; color: var(--link-darker) !important;}
.header-auth .dropdown-menu-sm{min-width: 140px !important; max-width: 210px !important;}
.header-auth .navbar-nav .nav-item.dropdown .dropdown-item:focus{background: var(--light) !important; color: #000000 !important;}
.header-auth .navbar-nav .nav-item.dropdown .dropdown-item.active{background: var(--secondary) !important; color: #ffffff !important;}
/* ==================================================== */