/* Reset */
:root{
  --p-color:#1c7ded;
  --p-color-btn:#ffffff;
  --s-color:#191919;
}
html, body{background:#ffffff; color:#141414;}


/* Color */
.color-black, .h-color-black:hover{color:#000000!important;}
.color-white, .h-color-white:hover{color:#ffffff!important;}
.color-dark, .h-color-dark:hover{color:#141414!important;}
.color-gray, .h-color-gray:hover{color:#777777!important;}
.color-sgray, .h-color-sgray:hover{color:#d4d4d4!important;}
.color-fgray, .h-color-fgray:hover{color:#e4e4e4!important;}
.color-p, .h-color-p:hover{color:var(--p-color)!important;}
.color-s, .h-color-s:hover{color:var(--s-color)!important;}
.color-info, .h-color-info:hover{color:#5a8dee!important;}
.color-success, .h-color-success:hover{color:#4ecc48!important;}
.color-warning, .h-color-warning:hover{color:#ecb403!important;}
.color-danger, .h-color-danger:hover{color:#f5334f!important;}

.bg-black{background:#000000!important;}
.bg-white{background:#ffffff!important;}
.bg-dark{background:#141414!important;}
.bg-gray{background:#777777!important;}
.bg-sgray{background:#d4d4d4!important;}
.bg-fgray{background:#e4e4e4!important;}
.bg-p{background:var(--p-color)!important;}
.bg-s{background:var(--s-color)!important;}
.bg-info{background:#5a8dee!important;}
.bg-success{background:#4ecc48!important;}
.bg-warning{background:#ecb403!important;}
.bg-danger{background:#f5334f!important;}

.bcolor-black{border-color:#000000!important;}
.bcolor-white{border-color:#ffffff!important;}
.bcolor-dark{border-color:#141414!important;}
.bcolor-gray{border-color:#777777!important;}
.bcolor-sgray{border-color:#d4d4d4!important;}
.bcolor-fgray{border-color:#e4e4e4!important;}
.bcolor-p{border-color:var(--p-color)!important;}
.bcolor-s{border-color:var(--s-color)!important;}
.bcolor-info{border-color:#5a8dee!important;}
.bcolor-success{border-color:#4ecc48!important;}
.bcolor-warning{border-color:#ecb403!important;}
.bcolor-danger{border-color:#f5334f!important;}


/* App Container */
.app-container{background:#f0f0f2;}

/* App Card */
.app-card{background:#ffffff; box-shadow:rgb(0 0 0 / 4%) 0px 7px 14px;}


/* Alert Popup */
.alert-popup.info > .wrapper{background:#5a8dee;}
.alert-popup.success > .wrapper{background:#4ecc48;}
.alert-popup.warning > .wrapper{background:#ecb403;}
.alert-popup.danger > .wrapper{background:#f5334f;}

/* Back To Top */
#back-to-top{background:var(--p-color); color:#ffffff;}
#back-to-top:hover{box-shadow:rgb(0 0 0 / 7%) 0px 10px 20px;}

/* Global Loader */
#global-loader{background:rgba(255,255,255,0);}


/* Button */
.btn.btn-p, .btn.btn-p:focus{color:var(--p-color-btn); background:var(--p-color);}
.btn.btn-p:hover{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.05);}
.btn.btn-p:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.10);}

.btn.btn-p-border, .btn.btn-p-border:focus{
  color:var(--p-color); background:transparent; border-color:var(--p-color);
}
.btn.btn-p-border:hover{
  color:var(--p-color-btn); background:var(--p-color); border-color:var(--p-color);
}
.btn.btn-p-border:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.05);}

.btn.btn-default, .btn.btn-default:focus{color:#141414; background:#dddddd;}
.btn.btn-default:hover{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.04);}
.btn.btn-default:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.08);}

.btn.btn-info, .btn.btn-info:focus{color:#ffffff; background:#5a8dee;}
.btn.btn-info:hover{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.04);}
.btn.btn-info:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.08);}

.btn.btn-success, .btn.btn-success:focus{color:#ffffff; background:#4ecc48;}
.btn.btn-success:hover{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.04);}
.btn.btn-success:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.08);}

.btn.btn-warning, .btn.btn-warning:focus{color:#ffffff; background:#ecb403;}
.btn.btn-warning:hover{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.04);}
.btn.btn-warning:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.08);}

.btn.btn-warning-border, .btn.btn-warning-border:focus{
  color:#ecb403; background:transparent; border-color:#ecb403;
}
.btn.btn-warning-border:hover{color:#ffffff; background:#ecb403; border-color:#ecb403;}
.btn.btn-warning-border:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.05);}

.btn.btn-danger, .btn.btn-danger:focus{color:#ffffff; background:#f5334f;}
.btn.btn-danger:hover{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.04);}
.btn.btn-danger:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.08);}

.btn.btn-ai, .btn.btn-ai:focus{color:#ffffff; background:#0f9e7b;}
.btn.btn-ai:hover{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.05);}
.btn.btn-ai:active{box-shadow:inset 0 0 0 100rem rgba(0,0,0,.10);}

.btn-icon{background:transparent; color:#141414;}
.btn-icon:hover{background:#f4f4f4; color:var(--p-color);}


/* Inputs */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel],
input[type=number], input[type=phone], input[type=submit], input[type=file], input[type=time],
input[type=color], select, textarea{
  background:#ffffff; color:#000000; border-color:#cccccc!important;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=date]:focus, 
input[type=tel]:focus, input[type=number]:focus, input[type=phone]:focus, input[type=submit]:focus, 
input[type=file]:focus, input[type=time]:focus, input[type=color]:focus,
select:focus, textarea:focus{
  border-color:var(--p-color)!important;
}

input[type=text].disabled, input[type=email].disabled, input[type=password].disabled,
input[type=date].disabled, input[type=tel].disabled, input[type=number].disabled,
input[type=phone].disabled, input[type=submit].disabled, input[type=file].disabled,
input[type=time].disabled, select.disabled, textarea.disabled,
input[type=text]:disabled, input[type=email]:disabled, input[type=password]:disabled,
input[type=date]:disabled, input[type=tel]:disabled, input[type=number]:disabled,
input[type=phone]:disabled, input[type=submit]:disabled, input[type=file]:disabled,
input[type=time]:disabled, input[type=color]:disabled, select:disabled, textarea:disabled{
  background:#f4f4f4!important; color:#555555!important;
}
select:disabled{opacity:1;}

::placeholder{color:#555555!important;}


/* Input Icon */
.input-icon > .icon-wrapper{color:#141414;}
.input-icon > .icon-wrapper:hover{color:var(--p-color);}
.input-icon .icon-popup{
	background:#ffffff; color:#141414; box-shadow:rgb(0 0 0 / 10%) 5px 5px 10px;
}
.input-icon .icon-popup > .wrapper::after{background:#ffffff;}


/* Topnav */
nav.topnav{background:#ffffff; color:#141414; box-shadow:rgb(0 0 0 / 4%) 0px 7px 14px;}
nav.topnav .sidenav-toggle .hamburger > div{background:#999999;}
nav.topnav .sidenav-toggle:hover .hamburger > div{background:var(--p-color);}
nav.topnav .option:hover > .option-icon{color:var(--p-color);}
nav.topnav .option > .option-icon .dot{background:#f5334f; border-color:#ffffff;}
nav.topnav .option > .dropdown{
  background:#ffffff; box-shadow:rgb(0 0 0 / 4%) 0px 7px 14px;
}
nav.topnav .option > .dropdown .dropdown-item:hover,
nav.topnav .option > .dropdown .lang-item:hover,
nav.topnav .option > .dropdown .currency-item:hover{background:#f5f5f5;}
nav.topnav .option > .option-icon > .text{background:rgba(0,0,0,.1); color:#141414;}
nav.topnav .option:hover > .option-icon > .text{background:var(--p-color); color:#ffffff;}

/* Sidenav */
nav.sidenav{background:var(--s-color); color:#dddddd;}
nav.sidenav .menu-set, nav.sidenav .menu-header, 
nav.sidenav .menu{border-color:rgba(255,255,255,.1);}
nav.sidenav .menu-header{background:#000000; color:#ffffff;}
nav.sidenav .menu{color:#999999;}
nav.sidenav .menu:hover{color:#ffffff;}
nav.sidenav .menu.active{color:var(--p-color);}
nav.sidenav .menu::after{background:var(--p-color);}

/* Footer */
footer.footer{background:#ffffff; box-shadow:rgb(0 0 0 / 4%) 0px 7px 14px;}


/* Avatar */
.avatar{border-color:#eeeeee;}


/* Checkbox Tag */
.checkbox-tags > .checkbox-tag > label,
.checkbox-tags > .checkbox-tag > p{background:#f0f0f0; color:#141414;}
.checkbox-tags > .checkbox-tag > input:checked + label{
	color:var(--p-color-btn); background:var(--p-color);
}


/* Icon Class Selector */
.icon-class-selector .icon{border-color:#e4e4e4; color:#cccccc;}
.icon-class-selector .icon:hover{color:var(--p-color);}
.icon-class-selector .icon.active{border-color:var(--p-color); color:var(--p-color);}
.icon-class-selector .icon.active::before{background:var(--p-color);}


/* Image Uploader */
.img-uploader{border-color:#cccccc;}
.img-uploader > .btn-wrapper{background:#ffffff;}
.img-uploader .img-block{border-color:#dddddd; color:#5a8dee; background:#fafafa;}
.img-uploader .img-block:hover{color:var(--p-color);}
.img-uploader .img-block .img-desc{background:#ffffff; border-color:#cccccc;}
.img-uploader .img-block .btn-delete{
  background:#ffffff; color:#f5334f; border-color:#dddddd;
}
.img-uploader .img-block .btn-delete:hover{
  background:#f5334f; color:#ffffff; border-color:#f5334f;
}
.img-uploader .img-block .btn-prev, .img-uploader .img-block .btn-next{
  background:#ffffff; color:#5a8dee; border-color:#dddddd;
}
.img-uploader .img-block .btn-prev:not(.disabled):hover,
.img-uploader .img-block .btn-next:not(.disabled):hover{
  background:#5a8dee; color:#ffffff; border-color:#5a8dee;
}
.img-uploader .img-block .img-container{background:#f4f4f4;}
.img-uploader.view, .img-uploader.view > .btn-wrapper{background:#f4f4f4;}


/* Mapbox Container */
.mapbox-container .options, .mapbox-container .icon-options, .mapbox-container .info,
.mapbox-container .panel > .panel-toggle, .mapbox-container .panel .panel-container{
  background:#ffffff; box-shadow:rgb(0 0 0 / 4%) 0px 7px 14px;
}
.mapbox-container .options > .option:hover{color:var(--p-color);}
.mapbox-container .options > .option.active{color:#ffffff; background:var(--p-color);}
.mapbox-container .icon-options > .icon-option{color:#000000;}
.mapbox-container .panel > .panel-toggle:hover{color:var(--p-color);}
.mapbox-container .panel.active > .panel-toggle{color:#ffffff; background:var(--p-color);}
.mapbox-container .panel > .panel-container > .header{border-color:#eeeeee;}
.mapbox-container .location-row{border-color:#eeeeee;}
.mapbox-container .location-row .option-filter{background:var(--p-color); color:#ffffff;}
.mapbox-container .location-row .option-filter.inactive{background:#dddddd; color:#555555;}
.mapbox-container .mapbox-logistic > .wrapper,
.mapbox-container .mapbox-logistic > .wrapper::after{background:#4ecc48;}
.mapbox-container .mapbox-logistic.inactive > .wrapper,
.mapbox-container .mapbox-logistic.inactive > .wrapper::after{background:#ecb403;}
.mapbox-container .mapboxgl-popup-content{background:#ffffff; color:#000000;}
.mapbox-container .mapboxgl-popup-close-button{color:#141414;}


/* Paginate */
.paginate > .page-set{background:#ffffff; box-shadow:rgb(0 0 0 / 5%) 0px 4px 8px;}
.paginate .page{border-color:#eeeeee!important;}
.paginate .page{color:#666666;}
.paginate .page:hover{background:#f4f4f4;}
.paginate .page.active{background:var(--p-color); color:var(--p-color-btn);}


/* Package Container */
.package-container .package-detail{background:#ffffff; color:#141414;}


/* Scrollbar */
::-webkit-scrollbar-track{background:#dddddd;}
::-webkit-scrollbar-thumb{background:#999999;}
::-webkit-scrollbar-thumb:hover{background:#999999;}


/* Special Editor */
.ss-editor .rdw-editor-toolbar, 
.ss-editor .rdw-editor-main{border-color:#cccccc!important;}
.ss-editor .rdw-option-wrapper, .ss-editor .rdw-dropdown-wrapper,
.ss-editor .rdw-dropdown-optionwrapper{
  background:#ffffff; border-color:#cccccc; color:#000000;
}


/* Special Filter Box */
.ss-filter-box > .wrapper{background:#ffffff; box-shadow:rgb(0 0 0 / 4%) 0px 7px 14px;}


/* Special Select Box */
.ss-select-box{
	border-color:rgba(90,141,238,.25)!important; background:rgba(90,141,238,.05)!important;
}
.ss-select-box.active{
	border-color:rgba(207,10,44,1)!important; background:rgba(207,10,44,.03)!important;
}
.ss-select-box.inactive{border-color:#e1e0ea!important; background:#ffffff!important;}
.ss-select-box.disabled{border-color:#e1e0ea!important; background:#eeeeee!important;}


/* Specia Separation */
.ss-sep-01{background:#e4e4e4;}
.ss-sep-02{background:var(--p-color);}


/* Special Tag */
.ss-tag{color:#ffffff;}
.ss-tag.bg-p{color:var(--p-color-btn);}


/* Table */
.table-wrapper{border-color:#e1e0ea!important;}
table.table th, table.table td{
  background:#ffffff; color:#141414; border-color:#e1e0ea!important;
}
table.table th{background:#f4f3f9;}
table.table td.th{background:#f4f3f9;}
table.table.sticky-tail > * > tr > th:last-child::after,
table.table.sticky-tail > * > tr > td:last-child::after{background:#e1e0ea;}
table.table > tbody > tr:not(.no-hover):hover > td{background:#f9f9f9;}
table.table > tbody > tr.has-error > td{
  background:#fdd6dc; border-left-color:#fa94a4!important;
  border-right-color:#fa94a4!important;
}
table.table > tbody > tr.has-warning > td{
  background:#f9e8b3; border-left-color:#f2c94a!important;
  border-right-color:#f2c94a!important;
}

/* Table Process */
.table-process .icon{color:#ffffff;}


/* Fix External Libraries */
.react-html5-camera-photo{background:#000000;}


/* Chat 01 */
.chat-01 .chat-panel-left > .header, .chat-01 .chat-panel-right > .header,
.chat-01 .chat-footer{border-color:#e4e4e4;}
.chat-01 .chat-person:hover{background:#f7f7f7;}
.chat-01 .chat-person.active{background:rgba(90,141,238,.18);}
.chat-01 .chat-person .dot-alert{background:#5a8dee;}
.chat-01 .chat-person > .option-float .option{color:#141414;}
.chat-01 .chat-person > .option-float .option.main{background:rgba(0,0,0,.07)!important;}
.chat-01 .chat-person > .option-float .option:hover{background:#f7f7f7;}
.chat-01 .chat-person > .option-float .dropdown{
  background:#ffffff; box-shadow:rgb(0 0 0 / 4%) 0px 7px 14px;
}
.chat-01 .message > .wrapper-gallery,
.chat-01 .message > .wrapper{background:#f1f1f1; color:#141414;}
.chat-01 .message.self > .wrapper-gallery,
.chat-01 .message.self > .wrapper{background:#5a8dee; color:#ffffff;}
.chat-01 .message > .wrapper-gallery .grid-img > .filter{background:rgba(255,255,255,.4);}
.chat-01 .message > .wrapper-gallery .grid-img > .more{color:#141414;}
.chat-01 .message .time::before{background:#f1f1f1;}
.chat-01 .message.self .time::before{background:#5a8dee;}
.chat-01 .chat-footer .chat-option{color:#141414;}
.chat-01 .chat-footer .chat-option:hover{color:var(--p-color);}


/* Global Language */
.global-lang .lang-item{background:#ffffff;}
.global-lang .dropdown{background:#ffffff; box-shadow:rgb(0 0 0 / 4%) 0px 7px 14px;}
.global-lang .dropdown .lang-item:hover{background:#f5f5f5;}


/* Log Container */
.log-continer .log-item::before{background:#e4e4e4;}
.log-continer .log-item::after{background:#e4e4e4;}


/* Progress Bar 01 */
.progress-bar-01{background:#ffffff; border-color:#dddddd;}


/* Tabs 01 */
.tabs-01 .tab{color:#bbbbbb; border-color:#e4e4e4;}
.tabs-01 .tab:hover{color:#141414;}
.tabs-01 .tab.active{color:var(--p-color);}
.tabs-01 .tab.active::after{background:var(--p-color);}

/* Tabs 02 */
.tabs-02 .tab.active{color:var(--p-color);}
.tabs-02 .tab::after{background:var(--p-color);}
.tabs-02 .swiper .buttons > .button{
  background:#ffffff; color:#191919; box-shadow:0 4px 8px 2px rgba(145,158,171,.25);
}
.tabs-02 .swiper .buttons > .button:hover{background:var(--p-color); color:#ffffff;}


/* FIXES: React Tree */
.rct-tree-container .rct-row::before{background:#000000;}
.rct-tree-container .rct-row::after{background:var(--p-color);}
.rct-tree-container .rct-text{color:#141414;}


/* FIXES: Toastify */
.Toastify__toast-container{padding:0!important;}
.Toastify__toast-container .Toastify__toast{margin-bottom:.5rem;}
:root{
  --toastify-color-info:#5a8dee!important;
  --toastify-color-success:#4ecc48!important;
  --toastify-color-warning:#ecb403!important;
  --toastify-color-error:#f5334f!important;
  --toastify-font-family:'Sarabun', sans-serif!important;
  --toastify-toast-width:300px!important;
}


/* FIXES: Material UI */
.MuiOutlinedInput-root.MuiInputBase-root{
  background:#ffffff!important; border-color:#cccccc!important;
}
.MuiOutlinedInput-root.MuiInputBase-root.Mui-focused{border-color:var(--p-color)!important;}
.MuiOutlinedInput-root.MuiInputBase-root.Mui-disabled{background:#f4f4f4!important;}
.MuiFormControl-root.MuiTextField-root input{color:#000000!important;}
.MuiFormControl-root.MuiTextField-root.Mui-disabled input{color:#555555!important;}
.MuiOutlinedInput-notchedOutline{border:0!important;}

.MuiCheckbox-root.Mui-disabled, .MuiRadio-root.Mui-disabled{color:#777777!important;}

.MuiAutocomplete-root .MuiAutocomplete-tag{
  background:#e7e7e7!important; border-color:#e7e7e7!important; color:#000000!important;
}
.MuiAutocomplete-root .MuiAutocomplete-endAdornment .MuiButtonBase-root,
.MuiAutocomplete-root .MuiSvgIcon-root{color:#aaaaaa!important;}
.MuiAutocomplete-root .MuiAutocomplete-endAdornment .MuiButtonBase-root:hover,
.MuiAutocomplete-root .MuiSvgIcon-root:hover{color:#777777!important;}

.MuiDialog-root .MuiPaper-root{background:#ffffff; color:inherit; box-shadow:none;}
.MuiDialog-root .MuiDialogContent-root{border-color:#e1e0ea;}
.MuiDialog-root .hamburger > div{background:#999999;}