html, body { height: 100%; min-height: 100%;}
body{  font-family: "DM Sans", sans-serif; }

:root{
    --white: #fff;
    --black: #000;
    --dark-grey: #3d3d3d;  /* 61 61 61*/
    --light-grey: #666;  /* 102 102 102*/
    --blue: #0E8EE2;
}

a:hover{ color: var(--dark-grey);}
h5{ color: #424242;}

.btn-blue{background: linear-gradient(92deg, #3d3d3d -5.08%, #000 103.97%); color: var(--white); border: 1px solid rgb(0 0 0 / 80%) !important;}
  
.btn-blue:after { background: linear-gradient(92deg, #000 -5.08%, #3d3d3d 103.97%); content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -10; transition: 0.5s;}

.btn-black{background: linear-gradient(90deg, #676767 0%, #212121 100%); color: var(--white);}
.btn-black:after { background: linear-gradient(90deg, #212121 0%, #676767 100%); content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -10; transition: 0.5s;}

.btn-sm{ padding: 8px 20px;}
.btn-lg{ padding: 12px 20px;}
.w-110{ width: 110px;}

.blue-box{background: rgba(102, 102, 102, 0.05);}

.btn{border-radius: 5px; font-size: 16px; font-weight: 600; border: 0; position: relative;  z-index: 10;}
.btn:after{border-radius: 5px;}
.btn:hover:after { opacity: 1;}

.btn-black:hover, .btn-blue:hover{ color: #fff;}
.btn-alter{  border: 1px solid rgba(154, 162, 172, 0.80); color: #4A4A4A; }
.btn-alter:hover{ border-color:#000000; color: #000000;}
.only-icon{ padding: 10px;}

.btn:disabled, .btn.disabled, fieldset:disabled .btn{color: #989898;}

img{ max-width: 100%;}

main{ background: #EBEBEB; padding: 20px;}

.form-group { margin-bottom: 20px; position: relative;}

.scenery-bg{ background: url(../img/bg.png) no-repeat center #EBEBEB; height: inherit; display: flex;}

.auth-box{background: black; width: 25%; height: 100%; padding: 25px; border-radius: 0 60px 60px 0; display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; justify-content: center; color: #BDBDBD; position: relative; overflow: auto; text-align: center;}

.auth-box:after{content: ''; background: url(../img/blue-orange-design.png); position: absolute; inset: 0; opacity: .025; background-size: cover; filter: grayscale(1); z-index: 0;}

.white{ color: var(--white);}

h1{ font-size: 36px; line-height: normal; z-index: 1; margin-bottom: 16px; font-weight: 600;}

.auth-right{ width: 75%; height: 100%; display: flex; justify-content: center; align-items: center;}

.wh-box{max-width: 600px; width: 100%; font-size: 16px; background: var(--white); padding: 30px; border-radius: 15px; box-shadow: 0px 4px 2px 0px #E1E1E1; padding: 60px 80px;}
.wh-box h2{ margin: 0 0 3rem 0; text-align: center;  color: #212121; font-size: 30px; font-weight: 600; line-height: normal;}
.wh-box label{ color: #212121;  font-size: 16px; font-weight: 600;}

.btn-auth{ width: 100%; padding: 18px 40px; border-radius: 8px;  font-size: 20px; font-weight: 600;}
.btn-auth::after{ border-radius: 8px;}
.btn-auth:hover{ color: var(--white); }

.wh-box .link{color: #424242; text-align: center; text-decoration: none;}
.wh-box .link:hover{ text-decoration: underline;} 

.wh-box img{max-width: 60%; margin-left: auto; margin-right: auto; display: block;}

.form-label{color:#212121; font-weight: 600; margin-bottom: 0.2rem;}
.form-control{border-radius: 5px; border: 1px solid #D1D1D1; background-color: #FFF; color: #424242; font-size: 16px; font-weight: 400; padding: 12px 15px; min-height: 54px;}
.form-control.form-sm{padding: 8px 15px; min-height: auto;}
input[type="color"].form-control.form-sm { min-height: 42px; padding: 8px;}
.form-control:disabled, input:read-only, input:read-only:focus{ background-color: #EAEAEA;}

.form-control:focus{border-color: #a3a3a3; box-shadow: 0 0 0 0.25rem rgba(61, 61, 61, 0.25);}

/* nav  */

.app-nav{ border-radius: 15px; background: #FFF;  padding: 12px; justify-content: space-between; margin-bottom: 20px;}
.app-left {gap: 35px;}
.logo-box{ max-width: 170px; cursor: pointer; }
.auth-right .iconed-field i{ right: 0; height: 100%; padding: 12px; color: #424242;}
.iconed-field{position: relative;}
.iconed-field i{ position: absolute;}
.iconed-field.search i{ right: 0; height: 100%; padding: 10px;}

.app-left .search .form-control{ font-size: 14px; padding: 8px 15px; min-height: auto; width:390px ;}

.app-right{ gap: 10px;}

.profile{ cursor: pointer; text-decoration: none; display: flex; gap: 16px; color: #212121; align-items: center; line-height: normal; }
.profile figure{ width: 35px; height: 35px; border-radius: 50px; overflow: hidden; margin:0;}
.profile img { width: 100%; height: 100%; object-fit: cover;}
.profile span { display: block; color: #898989; font-size: 14px;}
.profile .drop-cap{ width: 35px; height: 35px; border-radius: 50%; font-size: 16px; color: #fff; text-align: center; line-height: normal; padding: 8px; font-weight: 800;}

.user-prof{ position: relative; padding-right: 10px;}
.user-prof .dropdown-menu{ left: auto; right: 0; background: #FFF; min-width: 160px; margin-top: 13px; border-radius: 0 0 10px 10px; padding: 0; border: 0; overflow: hidden;}
.user-prof .dropdown-menu ul{ list-style-type: none; margin: 0; padding: 0px;}
.user-prof .dropdown-menu a{display: block; padding: 6px 15px; clear: both; line-height: 1.42857143; color: #292D32; white-space: nowrap; text-decoration: none; font-size: 14px;}
.user-prof .dropdown-menu a:hover{ background: #616161; color: #fff;}

body.fixed #sidebar-wrapper{ position: fixed; top: 0; bottom: 0; left: auto; padding-top: 20px; } 
body.fixed #page-content-wrapper{margin-left: 260px;}

#sidebar-wrapper{ flex:0 0 260px; position: relative;  z-index: 100;}

.side-wrap .list-group:hover::-webkit-scrollbar-thumb {background:rgba(51, 50, 50, 0.219);}
.side-wrap .list-group::-webkit-scrollbar { width:0px; }
.side-wrap .list-group::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
.side-wrap .list-group::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }

.side-wrap .list-group{border-radius: 15px; background-image:  linear-gradient(92deg, rgba(0, 0, 0, 0.96) -5.08%, rgb(61 61 61 / 96%) 103.97%), url(../img/blue-orange-design.png); background-repeat: no-repeat; background-size: cover; background-position: 50%; position: relative;  overflow-y: scroll; height: 98.5%;}


.list-group{}
.list-group ul{ list-style: none; margin: 0; padding: 20px;}
.list-group ul li{ position: relative;}
.list-group ul li a{font-size: 16px; position: relative; display: flex; color: var(--white); text-decoration: none;  align-items: center; border-radius: 8px; padding: 15px; line-height: normal; transition: 0.5s; z-index: 10;}

.list-group ul li a:after{ background: linear-gradient(92deg, #fff -5.08%, #f5f5f5 103.97%); content: ""; display: block; height: 100%; border-radius: 8px; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -10; transition: 0.5s; }

.list-group ul li a:hover{color: #c0c0c0;}
.list-group ul li a i{font-size: 30px; margin-right: 10px;}

.list-group ul li.active>a{background: linear-gradient(92deg, #f5f5f5 -5.08%, #ffffff 103.97%); color: var(--black);}
.list-group ul li.active>a:hover:after{opacity: 1;}

.list-group ul ul{ padding-left: 100px;}
.list-group ul ul li{ padding: 5px 0;}
.list-group ul ul li a{ padding-left: 25px; color: #444; font-size: 15px; font-weight: 400; line-height: normal; transition: 0.25s ease-out;}
.list-group ul ul li:hover a{ padding-left: 28px;}
.list-group ul ul li a:before{content: "\e900"; font-family: 'icomoon' !important; position: absolute; left: 0; font-size: 20px;}

.small-title{color: var(--black); font-size: 30px; font-weight: 600; margin: 0;}

h3{color: #424242; font-size: 24px; font-weight: 600;}

.app-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 10px;}

.app-toolbar-end{ display: flex; align-items: center; justify-content: end; gap: 10px;}

.main-content{ padding-left: 15px; transition: .25s; min-height: 1000px;}

.dashgrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0;}
.dashgrid li a{border-radius: 15px; padding: 15px; color: #fff; position: relative; display: flex; align-items: center; line-height: normal; z-index: 10; overflow: hidden; text-decoration: none;}
.dashgrid li a:after{content: ""; display: block; height: 100%; border-radius: 15px; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -10; transition: 0.5s; }

.dashgrid li:hover:after{opacity: 1;}

.dashgrid li .icon{ width: 50px; height: 50px; padding: 8px; border-radius: 50px; display: flex; justify-content: center; align-items: center; margin-right: 10px; position: relative;  }
.dashgrid li .icon:after{ position: absolute; content: ''; background: #fff; inset: 0; border-radius: 50px; z-index: -1; transform: scale(1); transition: .25s;  transform-origin: 5px center;}
.dashgrid li .icon i{ font-size: 35px; transition: .25s; transform: scale(1); }
.dashgrid li:hover .icon i{ transform: scale(1.5);}
.dashgrid li:hover .icon:after{transform: scale(15); opacity: .97;}


.dashgrid li aside b{ display: block; font-size: 24px; font-weight: 700;}

.package a{ background: linear-gradient(180deg, #0053A3 0%, #003466 100%);}
.package i,
.package a:hover{color: #003466;}
/* .package:hover{filter: drop-shadow(0 40px 30px rgba(0, 53, 102, 0.20))}  */
.package a:after{background: linear-gradient(180deg, #003466 0%, #0053A3 100%);}

.estates a{ background: linear-gradient(180deg, #FF8E00 0%, #D87800 100%);}
.estates i,
.estates a:hover{color: #FF8E01;}
.estates a:after{background: linear-gradient(180deg, #D87800 0%, #FF8E00 100%);}


.facades a{ background: linear-gradient(180deg, #FF5E17 0%, #E74700 100%);}
.facades i,
.facades a:hover{color: #E74700;}
.facades a:after{background: linear-gradient(180deg, #E74700 0%, #FF5E17 100%);}

.floor-plans a{ background: linear-gradient(180deg, #006DD8 0%, #065CB0 100%);}
.floor-plans i,
.floor-plans a:hover{color: #003F7D;}
.floor-plans a:after{background: linear-gradient(180deg, #065CB0 0%, #006DD8 100%);}

.wholesale-groups a{background: linear-gradient(180deg, #F0CD00 0%, #BDA200 100%);}
.wholesale-groups i,
.wholesale-groups a:hover{color: #BDA200;}
.wholesale-groups a:after{background: linear-gradient(180deg, #BDA200 0%, #F0CD00 100%);}

.clients a{background: linear-gradient(180deg, #786FA6 0%, #574B90 100%);}
.clients i,
.clients a:hover{color: #3B2C86;}
.clients a:after{background: linear-gradient(180deg, #574B90 0%, #786FA6 100%); }

.staff a{background: linear-gradient(180deg, #CF6A87 0%, #C34568 100%);}
.staff i,
.staff a:hover{color: #B53256;}
.staff a:after{background: linear-gradient(180deg, #C34568 0%, #CF6A87 100%); }

.upgrades a{background: linear-gradient(180deg, #596174 0%, #303A52 100%);}
.upgrades i,
.upgrades a:hover{color: #2E3751;}
.upgrades a:after{background: linear-gradient(180deg, #303A52 0%, #596174 100%); }

.design-guidelines a{background: linear-gradient(180deg, #64CDDB 0%, #31BDD0 100%);}
.design-guidelines i,
.design-guidelines a:hover{color: #25A4B6;}
.design-guidelines a:after{background: linear-gradient(180deg, #31BDD0 0%, #64CDDB 100%); }

.price-lists a{background: linear-gradient(180deg, #EB8686 0%, #DB4444 100%);}
.price-lists i,
.price-lists a:hover{color: #DB4444;}
.price-lists a:after{background: linear-gradient(180deg, #DB4444 0%, #EB8686 100%); }

.card{border-radius: 15px; background: #FFF; border-color: #fff; /*min-height: inherit;*/}
.normal-table { border-radius: 15px;}
.normal-table.table{ margin: 0;}
.normal-table.table > thead > tr > th { background: rgba(61, 61, 61, 0.05); padding: 10px; color: rgba(0, 0, 0, 0.60); font-weight: 600;}
.normal-table.table > tbody > tr > td { border-color:#EBF5FF; color: #424242; padding: 10px; line-height: normal;}
.normal-table.table-bordered > :not(caption) > *{ border-color:#f5f5f5;}
.normal-table.table > tbody > tr > td a{ color: #424242; text-decoration: none;}
.normal-table.table > tbody > tr > td:first-child a{ text-decoration: underline;}
.table-hover>tbody>tr:hover { background: #f5f5f5;}
.normal-table.table > :not(caption) > * > *{ box-shadow: none;}

.table-box{ border: 1px solid #EBF5FF; border-top: 0 !important; border-radius: 15px; overflow: hidden;}

.m-288{ min-height: 288px;}
/* .m-750{min-height: 750px;} */


footer{ text-align: center; color: #4A4A4A; padding: 40px 0 10px 0;}

.grow-1{ flex-grow: 1;}

/* back to top */
.go-top { position:fixed; bottom: 5%; right: 0%; display:none;-webkit-font-smoothing: antialiased; z-index: 10;}
.go-top a{background: #ebebeb; padding:14px; cursor: pointer; color: #5a5a5a; display: block; text-decoration: none; transition: .25s;}
.go-top a:hover {background: #5a5a5a; color: #ebebeb;}


.repater{ display: flex; gap: 1.5rem; margin-bottom: 15px; }
.repater .col-lg-4{ width: 32%;}
.col-lg-8 .repater .col-lg-4{ width: 48.5%;}
.bor-box{border: 1px solid #D1D1D1; border-radius: 5px;}
.ad-flus{ list-style: none; padding: 0; margin: 5px; height: 297px; overflow-y: scroll;}
.ad-flus li{ padding: 5px 8px; border-radius: 5px; color: #424242; cursor: pointer;} 
.ad-flus li:hover{ background: #F9F9F9; color: #003466;}

.ad-flus:hover::-webkit-scrollbar-thumb {background:#424242;} 
.ad-flus::-webkit-scrollbar { width:4px; }
.ad-flus::-webkit-scrollbar-track { background:#EDEDED; border-radius:50px; }
.ad-flus::-webkit-scrollbar-thumb { background:rgba(51, 50, 50, 0.219); border-radius:50px; }

/* custom check box */

.cst-check input{ display: none !important;}
.cst-check span{height: 22px; width: 22px; display: inline-block; position: relative; background: #E8E8E8; border-radius: 3px; vertical-align: middle;}
.cst-check span:before{content: "\e925"; position: absolute; line-height: normal; left: 2px; top: 2px; opacity: 0; color: #fff; font-family: 'icomoon'; font-size: 16px;}
.cst-check input:checked + span{ background: linear-gradient(180deg, rgba(102, 102, 102, 0.96) 0%, rgba(61, 61, 61, 0.96) 59.38%, rgba(0, 0, 0, 0.96) 100%); border-color: rgba(0, 0, 0, 0.96);}
.cst-check input:checked + span:before{ opacity: 1;}
.cst-check input:disabled + span{ opacity: .55;}

/* custom radio button */

.cst-radio{ vertical-align: middle;}
.cst-radio input{ display: none;}
.cst-radio span{height: 18px; width: 18px; display: inline-block; position: relative; border-radius: 50px; border: 1px solid rgba(154, 162, 172, 0.80); position: relative; vertical-align: middle;}
.cst-radio span:before{ background: linear-gradient(0deg, #3d3d3d -5.08%, #666 103.97%); width: 8px; height: 8px; border-radius: 50px; content: ''; position: absolute; opacity: 0; margin: calc(50% - 4px); left: 0;}
.cst-radio input:checked + span{ border-color: var(--black) ;}
.cst-radio input:checked + span:before{ opacity: 1;}

.cst-radio input:disabled + span{ opacity: .55;}

.cst-radio span.radio-lg { width: 24px; height: 24px;}
.cst-radio span.radio-lg:before{ width: 12px; height: 12px; margin: calc(50% - 6px);}
.cst-radio span.dark{ border-color: #232323;}


.mh-550{ min-height: 550px;}
.mh-800{ min-height: 800px;}

.formula-table.table > thead > tr > th{ background: #F9F9F9; color: #003466;}
.formula-table.table > thead > tr > th,
.formula-table.table > tbody > tr > td{ font-size: 14px; border: 0;}
.formula-table.table > tbody > tr > td {color:#424242;}

.formula-table-box{height: 100vh; overflow-y: scroll;}
.formula-table-box:hover::-webkit-scrollbar-thumb {background:#424242;}
.formula-table-box::-webkit-scrollbar { width:4px; }
.formula-table-box::-webkit-scrollbar-track { background:#EDEDED; border-radius:50px; }
.formula-table-box::-webkit-scrollbar-thumb { background:rgba(51, 50, 50, 0.219); border-radius:50px; }

.text-blue{ color: var(--dark-grey);}
.blue-stroke{border-color:rgba(14, 142, 226, 0.10); opacity: 1;}

.info-font{ font-size: 14px; color: #777;}

/* tab */
.brand-tabs{ border-bottom: 1px solid #EEE; display: flex;}
.brand-tabs li{border-left: 1px solid #EEE;}
.brand-tabs li:first-child{ border: 0;}
.brand-tabs li a{color: #b9b8b8; font-weight: 400; line-height: normal;  padding: 20px 0; position: relative; display: flex; align-items: center; justify-content: center;}
.nav-link:hover, .nav-link:focus{ color: var(--dark-grey);}
.brand-tabs li a::after{ content: ''; position: absolute; border-bottom: 4px solid transparent; left: 0; bottom: -1px; right: 0; border-radius: 10px 10px 0 0;}
.brand-tabs .nav-link.active::after{ border-color: #cbcbcb;}
.brand-tabs .nav-link.active, .brand-tabs .nav-item.show .nav-link{ color: var(--dark-grey); background: rgba(61, 61, 61, 0.05);}

.brand-tabs li .badge.badge-circle{ padding: .45rem .2rem; min-width: 1.75em; height: 1.5rem; background: #D9D9D9;}
.brand-tabs li .active .badge.badge-circle{ background: var(--dark-grey);}

/* table date */

.all-db-table table.dataTable thead th { border-bottom:0; background-color: #FBFBFC; }
.all-db-table table.dataTable tr:nth-of-type(even)>* { background-color: #FBFBFC; }

table.dataTable thead th, table.dataTable tfoot th{ font-weight: 600 !important;}

table.dataTable > thead > tr > th, table.dataTable > thead > tr > td{ border-color: #EBF5FF !important;}

div.dt-container.dt-empty-footer tbody>tr:last-child>*{border-bottom:0 !important;}

.all-db-table .table > :not(caption) > * > *{ padding-top: 1rem; padding-bottom: 1rem;}

/* .all-db-table table.dataTable tr:hover { background-color: #FFF6F0 !important;} */

.all-db-table tbody tr td{border-color:transparent;}

div.dt-container .dt-paging .dt-paging-button:hover{background: #222 !important; border-color: #222 !important; }

.table-responsive div.dt-container .dt-paging .dt-paging-button.current, .table-responsive div.dt-container .dt-paging .dt-paging-button.current:hover{background: #3d3d3d !important; border-color: #3d3d3d !important; color: #fff !important}


div.dt-container .dt-paging .dt-paging-button{border-radius: 25px !important; color: #8A92A6 !important; font-size: 15px; font-weight: 400; padding: .4em !important; min-width: 38px !important;}

div.dt-container div.dt-layout-cell{padding: 10px 0 !important;}

div.dt-container select.dt-input{border-radius: 5px; border: 0; background: #FFF; color: var(--light-grey); font-size: 14px;  padding: 8px 10px !important;  margin-right: 15px; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); width: 80px; background-repeat: no-repeat; background-position: 82% 12px; background-size: 14px;}

div.dt-container .dt-paging .dt-paging-button.previous:hover, div.dt-container .dt-paging .dt-paging-button.next:hover, .all-db-table div.dt-container .dt-paging .dt-paging-button.disabled, .all-db-table div.dt-container .dt-paging .dt-paging-button.disabled:hover, .all-db-table div.dt-container .dt-paging .dt-paging-button.disabled:active{ font-weight: 600 !important; background: transparent !important; border-color: transparent !important; color: rgba(0, 0, 0, 0.5) !important;}

div.dt-container .dt-paging .dt-paging-button.previous{ margin-left: 0; margin-right: 10px; font-weight: 600 !important;}
div.dt-container .dt-paging .dt-paging-button.next{ margin-left: 10px; margin-right: 0px; font-weight: 600 !important;}

div.dt-container .dt-search input{ border: 0 !important; padding: 6px 10px !important; margin: 0;  border-radius: 5px !important; background-color: #fff !important;}
div.dt-container .dt-search input:focus-visible{ outline: none;}

.tab-content div.dt-container .dt-search input,
.tab-content div.dt-container select.dt-input{ border: 1px solid #ececec !important;}
.tab-content .dtb-footer{border: 1px solid #ececec; }

.dtb-footer{padding: 10px 20px; border-radius: 15px; background: #FFF; border-color: #fff;}
.dtb-footer .dt-info{color:#898989 !important; font-size: 14px;}


/* dt dropdown*/
.dt-button-collection { position: absolute; left: 0; top: 100% !important; margin: 0; margin-top: 5px; padding: 0; border-radius: 3px; z-index: 9000; min-width: 180px;  text-align: left; list-style: none; border: 1px solid rgba(154, 162, 172, 0.80); background: #FFF; box-shadow: 0px 4px 10px 0px rgba(138, 142, 148, 0.15);}
.dt-button-collection button { border: none; color: #4A4A4A; padding: 8px 16px; word-wrap: break-word; white-space: normal; font-weight: 400; line-height: 1.42857143; background: transparent; display: block; width: 100%;text-align: left; font-size: 14px;}

.dtb-footer{ display: flex; align-items: center; margin-top: 1.5rem; justify-content: space-between;}
.dtb-header{display: flex; gap: 10px; margin-bottom: 1.5rem; justify-content: space-between;} 


.dt-search {position: relative; float: right;}
div.dt-container .dt-search input{ padding-right: 48px !important;}
.dt-search i{ position: absolute; height: 100%; top: 0; left: auto; right: 0; line-height: normal; padding: 6px 12px; cursor: pointer;}

.action-box{display: flex; gap: 10px; justify-content: center;}
.action-box .btn {border-radius: 5px; color: #212121 !important; font-size: 22px; padding: 0;}
.action-box .btn:hover{ color: #424242 !important; }

.action-box .btn.btn-white{ background: #fff; color: #27292C;  border: 1px solid rgba(154, 162, 172, 0.80);}

/* all badge */
.badge{border-radius: 5px; color: #FFF; font-size: 13px; font-weight: 400;}
.new-lead{background: #F7B600;}
.not-interested{background: #3B8AFF;}
.follow-up{background: #00D959;}
.draft{background: #676767;}
.sent{background: #FF5F00;}
.accepted{background: #3DC13C;}
.declined{background: #DB6300;}
.expired{background: #F00;}
.badge.success {background: green;}
.pending{background: #FF4949;}
.manufactured{background: #1255C9;}
.ordered{background: #153AE7;}
.manufacturing{background: #452FB4;}
.admin{background: #FF6C00;}
.installation{background: #20851F;}
.deactivate{background: #9D9D9D;}
.require-variation{background: #FF9F59;}
.pick-up{background: #F27712;}
.paid-in-full{background: #FFCB14;}

.font-18{ font-size: 18px;}

.modal-header, .modal-body, .modal-footer { padding: 20px 25px; border: 0;}
.modal-header .btn-close {background-color: #F1F1F1; background-size: 14px;}

.tag.btn{ padding: 12px 60px 12px 15px ; position: relative; display: flex; align-items: center; background: #efefef; font-size: 14px;}

.no-btn-bg .tag.btn{ background: transparent; padding: 5px;}


.tag.btn .file-name{ display: flex; align-items: center; text-align: left;}
.tag.btn .del{ border-radius: 50px; padding: 0.25rem; line-height: normal; position: absolute; left: auto; right: 10px; font-size: 20px; transition: .25s;}
.tag.btn .del:hover{background: var(--bs-red); color: var(--white);}

.up-thumb-box{margin: 0; height: 250px; position: relative; overflow: hidden; border-radius: 5px;}
.up-thumb-box img{ object-fit: cover; width: 100%; height: 100%;}
.up-thumb-box .del{ border-radius: 50px; padding: 0.25rem; line-height: normal; position: absolute; left: auto; right: 0px; font-size: 20px; transition: .25s; background: #fff; margin: 20px; cursor: pointer;}
.up-thumb-box .del:hover{background: var(--bs-red); color: var(--white);}

.fixed-footer { position: fixed; right: 25px; bottom: 0; left: auto; z-index: 10; padding: 20px 50px;background: #fff; width: calc(100% - 325px); border-radius: 15px;}

.w-400{ width: 400px;}

.scroll{overflow-y: scroll;}
.scroll:hover::-webkit-scrollbar-thumb {background:#424242;}
.scroll::-webkit-scrollbar { width:4px; }
.scroll::-webkit-scrollbar-track { background:#EDEDED; border-radius:50px; }
.scroll::-webkit-scrollbar-thumb { background:rgba(51, 50, 50, 0.219); border-radius:50px; }

/* .fl-wrap-sm{ flex-wrap: wrap;} */

.spl-checker{ display: flex; align-items: center;}

.profile-photo { height: 50px; width: 50px; border-radius: 50px; overflow: hidden;}
.profile-photo img { height: 100%; width: 100%; object-fit: cover;}

.page-error{ height: inherit; background: url(../img/bg.png) no-repeat center #EBEBEB; align-items: center; display: flex; justify-content: center;}
.page-error .logo-part { max-width: 300px; margin: 0 auto 30px auto;}
.page-error .card{ max-width: 1000px; width: 100%;  box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15);}

.contract-btn{ display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap;}
.contract-btn .text-lg-end.mt-4{ margin-top: 0 !important;}

.blue-pop-box{border:1px solid #acd8f4; background: #f5fbff; border-radius: 10px;}

@media (min-width: 768px) {
    body.sb-sidenav-toggled #page-content-wrapper .main-content{ padding-left: 0;}
    body.sb-sidenav-toggled #wrapper #page-content-wrapper { margin-left: 0rem; } 
    body.sb-sidenav-toggled.fixed #wrapper #sidebar-wrapper { margin-left: -280px;}
}
@media (max-width: 1350px) {
    .fl-wrap-xl{ flex-wrap: wrap;}
    .fl-wrap-xl .form-control.me-3,
    .spl-checker{ margin: 0 0 15px 0 !important;}
    .spl-checker{ width: 100%;}
}

@media (max-width: 1275px) {
    .fixed-footer{}
}

@media (max-width: 1275px) {
    .app-left .search .form-control{width: 250px;}
}

@media (max-width: 1150px) {
    .app-left .search .form-control{width: 180px;}
}

@media (max-width: 1060px) {
    .app-nav{flex-wrap: wrap; gap: 15px;}
    .app-left{flex: 1 0 auto;}
    .app-left .iconed-field.search{flex: 1;}
    .app-left .search .form-control{width: 100%;}
    .small-title{font-size: 20px;}
}

@media (max-width: 991px) {
    .mob-gap{ gap: 15px 0;}
}

@media (max-width: 767px) {
    .app-nav{ gap: 20px 0;}
    .app-left{ gap: 20px;}
    .app-left .search{ width: 100%;}
    .app-left .search .form-control{ width: 100%;}
    .app-right{ flex-wrap: wrap; gap: 8px;}
    .app-right .btn-blue, .app-right .btn-black{width: auto;}
    .user-prof{ padding: 0; margin-top: 15px; width: 100%;}
    .user-prof .dropdown-menu{ left: 0; right: auto; width: 100%;}
    .app-toolbar{ flex-wrap: wrap;}
    .main-content{ padding: 0;} 
    .page-title{ width: 100%;}

    .small-title{font-size: 24px; margin-bottom: 10px;}
    .card{ margin-bottom: 25px;}
    [class*="col-"]:last-child .card{ margin-bottom: 0;}
    .btn-sm{ padding-left: 10px; padding-right: 10px;}
    body.fixed #page-content-wrapper{ margin-left: 0;}
    body.fixed #sidebar-wrapper{ left: 0;}
    body.sb-sidenav-toggled .main-content{ padding-left: 15px;}
    body.fixed #sidebar-wrapper { position: unset;}
    main{ padding: 10px;} 
    #sidebar-wrapper{margin-left: -16.25rem;}
    .auth-box{ display: none;}
    .auth-right{ width: auto; margin: 0 10px;}
    .wh-box{ padding: 40px;}
    footer{ padding: 15px 0;}
    .small-title{ margin-bottom: 0;}
    .app-toolbar{ gap: 20px;}
    .w-400{ width: auto;}
    .mob-gap{ gap: 10px 0;}
    .fixed-footer{width: 100%; right: 0; text-align: center;}
    .repater{ gap: .75rem; flex-wrap: wrap; margin-bottom: 20px;}
    .repater .col-lg-4,
    .repater .col-lg-2{ width: 100%;}

}

@media (max-width: 600px) {
    .app-left{flex-wrap: wrap; flex: auto;}
    .app-left .iconed-field.search { flex: auto;}
}

@media (max-width: 420px) {
    /* .card{ overflow: scroll;} */
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}