/* @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&display=swap'); */
@font-face {
   font-display: optional;
   font-family: 'Open Sans';
   src: url('../fonts/OpenSans-Light.eot');
   src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSans-Light.woff2') format('woff2'),
       url('../fonts/OpenSans-Light.woff') format('woff'),
       url('../fonts/OpenSans-Light.ttf') format('truetype'),
       url('../fonts/OpenSans-Light.svg#OpenSans-Light') format('svg');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-display: optional;
   font-family: 'Open Sans';
   src: url('../fonts/OpenSans-Regular.eot');
   src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSans-Regular.woff2') format('woff2'),
       url('../fonts/OpenSans-Regular.woff') format('woff'),
       url('../fonts/OpenSans-Regular.ttf') format('truetype'),
       url('../fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-display: optional;
   font-family: 'Open Sans';
   src: url('../fonts/OpenSans-Medium.eot');
   src: url('../fonts/OpenSans-Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSans-Medium.woff2') format('woff2'),
       url('../fonts/OpenSans-Medium.woff') format('woff'),
       url('../fonts/OpenSans-Medium.ttf') format('truetype'),
       url('../fonts/OpenSans-Medium.svg#OpenSans-Medium') format('svg');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-display: optional;
   font-family: 'Open Sans';
   src: url('../fonts/OpenSans-SemiBold.eot');
   src: url('../fonts/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
       url('../fonts/OpenSans-SemiBold.woff') format('woff'),
       url('../fonts/OpenSans-SemiBold.ttf') format('truetype'),
       url('../fonts/OpenSans-SemiBold.svg#OpenSans-SemiBold') format('svg');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-display: optional;
   font-family: 'Open Sans';
   src: url('../fonts/OpenSans-Bold.eot');
   src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSans-Bold.woff2') format('woff2'),
       url('../fonts/OpenSans-Bold.woff') format('woff'),
       url('../fonts/OpenSans-Bold.ttf') format('truetype'),
       url('../fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

:root {
   --bs-blue: #0d6efd;
   --bs-indigo: #6610f2;
   --bs-purple: #6f42c1;
   --bs-pink: #ea4c89;
   --bs-red: #dc3545;
   --bs-orange: #fd7e14;
   --bs-yellow: #ffc107;
   --bs-green: #198754;
   --bs-teal: #33d685;
   --bs-cyan: #0dcaf0;
   --bs-black: #000;
   --bs-white: #fff;
   --bs-gray: #6e7985;
   --bs-gray-dark: #313c47;
   --bs-gray-100: #f8f9fc;
   --bs-gray-200: #f3f5f9;
   --bs-gray-300: #e2e5ec;
   --bs-gray-400: #ccd2da;
   --bs-gray-500: #9ea7b1;
   --bs-gray-600: #6e7985;
   --bs-gray-700: #41505f;
   --bs-gray-800: #313c47;
   --bs-gray-900: #212830;
   --bs-primary: #506fd9;
   --bs-secondary: #6e7985;
   --bs-success: #0cb785;
   --bs-info: #0dcaf0;
   --bs-warning: #ffc107;
   --bs-danger: #dc3545;
   --bs-light: #f8f9fc;
   --bs-dark: #212830;
   --bs-primary-rgb: 218, 221, 226;
   --bs-secondary-rgb: 110, 121, 133;
   --bs-success-rgb: 12, 183, 133;
   --bs-info-rgb: 13, 202, 240;
   --bs-warning-rgb: 255, 193, 7;
   --bs-danger-rgb: 220, 53, 69;
   --bs-light-rgb: 248, 249, 252;
   --bs-dark-rgb: 33, 40, 48;
   --bs-white-rgb: 255, 255, 255;
   --bs-black-rgb: 0, 0, 0;
   --bs-body-color-rgb: 65, 80, 95;
   --bs-body-bg-rgb: 251, 252, 254;
   --bs-font-open-sans: 'Open Sans', sans-serif;
   --bs-font-archivo: "Archivo",sans-serif;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
   --bs-body-font-family: 'Open Sans', sans-serif;
   --bs-body-font-size: 0.875rem;
   --bs-body-color: #41505f;
   --bs-body-bg: #fbfcfe;
   --bs-border-width: 1px;
   --bs-border-style: solid;
   --bs-border-color: #e2e5ec;
   --bs-link-color: #506fd9;
   --bs-link-hover-color: #4059ae;
   --bs-code-color: #ea4c89;
   --bs-highlight-bg: #fff3cd
}
/* ***************************************************** */
*,*::before,*::after {
   box-sizing: border-box
}
@media(prefers-reduced-motion: no-preference) {
   :root {
       scroll-behavior: smooth
   }
}
hr {
   margin: 1rem 0;
   color: inherit;
   border: 0;
   border-top: 1px solid;
   opacity: .25
}
small,.small {
   font-size: 0.875em
}
sub,sup {
   position: relative;
   font-size: 0.75em;
   line-height: 0;
   vertical-align: baseline
}
sub {
   bottom: -0.25em
}
sup {
   top: -0.5em
}
a {
   color: var(--bs-link-color);
   text-decoration: none
}
a:hover {
   color: var(--bs-link-hover-color)
}
a:not([href]):not([class]),a:not([href]):not([class]):hover {
   color: inherit;
   text-decoration: none
}
label {
   display: inline-block
}
button {
   border-radius: 0
}
button:focus:not(:focus-visible) {
   outline: 0
}
input,button,select,optgroup,textarea {
   margin: 0;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit
}
button,select {
   text-transform: none
}
[role=button] {
   cursor: pointer
}
select {
   word-wrap: normal
}
select:disabled {
   opacity: 1
}
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
   display: none !important
}
button,[type=button],[type=reset],[type=submit] {
   -webkit-appearance: button
}
button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled) {
   cursor: pointer
}
::-moz-focus-inner {
   padding: 0;
   border-style: none
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font-weight: normal;
   vertical-align: baseline;
}
img { 
   height: auto;
   vertical-align: bottom;
   max-width: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
   display: block;
}
ol,ul {
   list-style: none;
}
blockquote,q {
   quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
   content: "";
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
body {
   font-family: 'Archivo', sans-serif;
   font-family: 'Open Sans', sans-serif;
   background-color: #f9fcff;
   color: #6e7985;
}
input::-webkit-input-placeholder {
   color: #a9afb5;
}
input:-ms-input-placeholder {
   color: #a9afb5;
}
input::placeholder {
   color: #a9afb5;
}
h1,h2,h3,h4,h5,h6 {
   color: #212830;
}
strong, b {
   font-weight: 700 !important;
}
.collapsed {
   display: none;
}
/* ***************************************************** */

/* start row & col */
.row {
   margin-top: -16px;
   margin-left: -8px;
   margin-right: -8px;
}
.row::after {
 content: "";
 clear: both;
 display: table;
}
[class*="col-"] {
 float: left;
 padding-left: 8px;
 padding-right: 8px;
 margin-top: 16px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* end row & col */

/* start sidebar */
.sidebar {
   box-shadow: 3px 0 5px -6px rgba(0,0,0,0.7), -18px 0 0px -14px rgba(0,0,0,0.7);
   left: 0;
   width: 250px;
   position: fixed;
   top: 0;
   background-color: #4a4542;
   z-index: 1000;
   transition: all 0.3s;
   height: 100vh;
   opacity: 1;
   visibility: visible;
}
.sidebar-hide {
   left: -250px;
   opacity: 0;
   visibility: hidden;
}
#navigations::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px #6e798580;
  background-color: #F5F5F5;
}
#navigations::-webkit-scrollbar {
  width: 3px;
  background-color: #F5F5F5;
}
#navigations::-webkit-scrollbar-thumb {
  background-color: #6e798580;
}
.logo {
   height: auto;
   width: 150px;
}
.sidebar-header {
   padding: 0 20px;
   height: 72px;
   display: flex;
   align-items: center;
   position: relative;
   z-index: 700;
   border-bottom: 1px solid;
   border-color: rgba(255,255,255,.12);
}
.sidebar-header a {
   font-size: 22px;
   font-family: 'Archivo', sans-serif;
   font-weight: 600;
   display: inline-block;
   line-height: 1;
   color: #fff;
   letter-spacing: -0.5px;
   position: relative;
}
.sidebar-subheader {
    font-size: 12px;
    position: absolute;
    right: 75px;
    bottom: 24px;
}
.navigations {
   height: 100%;
}
.navigations:hover {
   overflow: auto;
}
.sidebar-menu {
   border-bottom: 1px solid;
   border-color: rgba(255,255,255,.12);
}
.sub-menu {
   padding-bottom: 20px;
   opacity: 0; 
   visibility: hidden;
   display: none;
}
.sub {
   opacity: 1; 
   visibility: visible;
   display: block;
}
.nav-label {
   display: block;
}
.nav-item>.nav-item-title {
   color: #ffffff;
   display: flex;
   padding: 14px 20px;
   position: relative;
   z-index: 700;
   border-bottom: 1px solid;
   border-color: rgba(255,255,255,.12);
   text-transform: uppercase;
   align-items: center;
   cursor: pointer;
   font-size: 12px;
   font-family: "Archivo",sans-serif;
   letter-spacing: .7px;
}
.nav-label span.nav-item-title::after {
   position: absolute;
   content: '';
   border-top: 1px solid;
   border-right: 1px solid;
   width: 5px;
   height: 5px;
   opacity: 1;
   transform: rotate(45deg);
   right: 20px;
   top: 21px;
   color: #fff;
}
.nav-item.level-0>.submenu {
   background-color: #524d49;
   box-shadow: 0 0 3px #000;
   left: 100%;
   min-height: calc(7.5rem + 2rem + 100%);
   position: absolute;
   top: 0;
   transform: translateX(-100%);
   transition-duration: .3s;
   transition-property: transform,visibility;
   transition-timing-function: ease-in-out;
   visibility: hidden;
   z-index: 697;
}
[class*='level-']:not(.level-0) a:hover {
   background-color: #403934;
}
.nav-item.level-0:hover>.submenu {
   transform: translateX(0);
   visibility: visible;
   z-index: 698;
}
.nav-item.level-0>.nav-item-title, .sidebar-footer .nav-item a {
   transition: background-color .1s linear;
}
.nav-item.level-0:hover>.nav-item-title, .sidebar-footer .nav-item:hover a, .nav-item.level-0.active>.nav-item-title, .sidebar-footer .nav-item.active a, .sidebar-footer .nav-item.active a {
   background-color: #524d49;
}
.nav-item-icon {
   width: 18px;
   height: 20px;
   display: block;
   margin-right: 11px;
   line-height: 1;
   font-size: 20px;
   opacity: .85;
   background-image: url(../img/dashboard-icon.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}
.nav-item a span {
   line-height: 20px;
}
.nav-item-icon.dashboard {
   background-image: url(../img/dashboard-icon.svg);
}
.nav-item-icon.customers {
   background-image: url(../img/customers-icon.svg);
   background-size: 17px;
}
.nav-item-icon.orders {
   background-image: url(../img/orders-icon.svg);
}
.nav-item-icon.crawler {
   background-image: url(../img/crawler-icon.svg);
}
.nav-item-icon.access-management {
   background-image: url(../img/access-control.svg);
   background-size: 22px;
   background-position: 3px center;
   width: 20px;
   height: 20px;
}
.nav-item-icon.data-mapper {
   background-image: url(../img/data-mapper-icon.svg);
   background-size: 16px;
}
.nav-item-icon.sales-channel {
   background-image: url(../img/sales-channel-icon.svg);
   background-size: 17px;
}
.nav-item-icon.api {
   background-image: url(../img/api-icon.svg);
   background-size: 17px;
}
.nav-item-icon.setting {
   background-image: url(../img/setting-icon-white.svg);
}
.header-logo::after, .sidebar-logo::after {
   content: "";
   position: absolute;
   bottom: 3.5px;
   right: -8px;
   width: 6px;
   height: 6px;
   border-radius: 100%;
   background-color: #506fd9;
}
.submenu-title {
   color: #fff;
   display: block;
   font-size: 22px;
   font-weight: 600;
   line-height: 32px;
   min-height: 72px;
   padding: 20px 24px;
   margin-bottom: 10px;
}
.submenu .column {
   display: table-cell;
}
.close-submenu {
   padding: 2.4rem 2.8rem;
   position: absolute;
   right: 0;
   top: 0;
}
.level-1 {
   margin-left: 12px;
   margin-right: 12px;
}
.submenu li {
   min-width: 17rem;
   display: block;
}
.submenu .parent {
   margin-bottom: 25px;
}
.submenu .parent .submenu-group-title {
   color: #a79d95;
   display: block;
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 8px;
   padding: 10px 12px;
   pointer-events: none;
   line-height: normal;
}
.submenu .inner-submenu {
   min-width: 253px;
   min-height: 100%;
}
.submenu a {
   color: #fcfcfc;
   transition: background-color .1s linear;
}
.inner-submenu a {
   font-size: 15px;
   font-weight: 400;
   line-height: 18px;
}
[class*='level-']:not(.level-0) a {
   display: block;
   padding: 10px 12px;
}
.sidebar:before {
   background-color: #07163a;
   bottom: 0;
   content: '';
   left: 0;
   position: fixed;
   top: 0;
   width: 250px;
   z-index: 699;
}
.sidebar-footer {
   position: sticky;
   bottom: 0;
   z-index: 700;
}
.sidebar-footer .nav-item>.nav-item-title {
   border: 0;
   font-size: 12px;
   border-top: 1px solid rgba(255,255,255,.12);
   background-color: #373331;
}
/* end sidebar css */

/* start header css */
.header {
   left: 250px;
   height: 72px;
   position: fixed;
   top: 0;
   right: 0;
   z-index: 800;
   border-bottom: 1px solid #f3f5f9;
   background-color: #fff;
   display: flex;
   align-items: center;
   transition: all 0.3s;
   box-shadow: 0 1px 1px rgba(33,40,48,.01), 0 4px 4px rgba(33,40,48,.01), 0 16px 16px rgba(33,40,48,.01);
   padding: 0 22px;
}
.header-full {
   left: 0;
}
.toggle-btn img {
   height: 20px;
   cursor: pointer;
}
.toggle-btn {
   margin-right: 22px;
}
.header-right-info{
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
.notification-dropdown {
   position: relative;
   padding: 5px 16px 0 0;
}
.notification-dropdown .noti-img {
   height: 18px;
}
.notification-count {
   background-color: #dc3545;
   border-radius: 100%;
   padding: 6px 0px 0px 4px;
   line-height: 0;
   display: inline-block;
   width: 14px;
   height: 14px;
   color: #ffffff;
   font-size: 9px;
   font-weight: 600;
   position: relative;
   top: -12px;
   right: 11px;
}
.notification-details {
   display: none;
}

.logout-btn .logout {
   color: #6e7985;
   display: block;
   font-size: 14px;
   font-weight: 400;
   line-height: 21px;
   padding: 0 0 0 9px;
}
.logout-icon {
   height: 17px;
}
.logout-btn {
   display: flex;
   align-items: center;
   margin: 10px 0 0 0;
   border-top: 1px solid #f3f5f9;
   padding: 13px 0 0 0;
}

.header-full, .main-content-full {
   left: 0;
}
/* end header css */

/* start breadcrumb */
.breadcrumb {
   margin-bottom: 5px;
   display: flex;
   flex-wrap: wrap;
}
.breadcrumb .breadcrumb-item {
   padding-left: 22px;
   position: relative;
   display: inline-block;
   font-size: 13px;
   line-height: 19.5px;
   font-weight: 400;
   color: rgb(110, 121, 133);
}
.breadcrumb .breadcrumb-item:first-child {
   padding: 0;
}
.breadcrumb .breadcrumb-item a {
   color: rgb(80, 111, 217);
}
.breadcrumb-item:not(:first-child):before {
   position: absolute;
   content: '';
   border-top: 1px solid;
   border-right: 1px solid;
   width: 6px;
   height: 6px;
   transform: rotate(45deg);
   left: 7px;
   top: 7px;
}
/* end breadcrumb */
/* ***************************************************** */

/* start arrow */
.arrow {
   border: solid black;
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 3px;
}
.arrow-right {
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
}
.arrow-left {
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
}
.arrow-up {
   transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
}
.arrow-down {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
}
/* end arrow */

.border--box {
   width: 100%;
   height: 38px;
   border: 1px solid #dadde2!important;
   border-radius: 4px!important;
   padding: 7px 10px!important;
   font-size: 14px!important;
   color: #212830!important;
}
.img-fluid {
   max-width: 100%;
   height: auto
}
.img-thumbnail {
   padding: .25rem;
   background-color: #fbfcfe;
   border: 1px solid var(--bs-border-color);
   border-radius: .25rem;
   max-width: 100%;
   height: auto
}
.badge-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 100%
}
.text-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
}

/* start select */
.form-select {
   display: block;
   width: 100%;
   padding: 7px 10px;
   background-color: #fff;
   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='%23313c47' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 6px center;
   background-size: 16px 12px;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   appearance: none;
   width: 100%;
   height: 38px;
   border: 1px solid #dadde2;
   border-radius: 4px;
   font-size: 14px;
   color: #212830;
   line-height: 20px;
}
.form-select:focus {
   border-color: #a8b7ec;
   outline: 0;
   box-shadow: 0 0 0 .25rem rgba(80,111,217,.25)
}
/* end select */

/* start table */
table {
   caption-side: bottom;
   border-collapse: collapse;
   width: 100%;
}
thead, tbody, tfoot, tr, td, th {
   border-color: inherit;
   border-style: solid;
   border-width: 0;
}
.table>thead {
   vertical-align: bottom;
}
.table>tbody {
   vertical-align: inherit;
}
.table>tfoot {
   vertical-align: bottom;
}
.table:not(.table-borderless)>:not(:first-child) {
   border-top-width: 1.5px;
   border-top-color: #ccd2da;
}
.table>:not(caption)>*>* {
   padding: 0.5rem 0.5rem;
   background-color: transparent;
   border-bottom-width: 1px;
   box-shadow: inset 0 0 0 9999px transparent;
}
.table-one thead th, .table-one tbody td, .table-one tfoot td {
   padding-left: 0;
   padding-right: 0;
}
/* table thead th, table tbody td {
   padding-left: 0;
   padding-right: 0;
} */
table tbody tr:hover {
   background-color: #f0f3fe;
}
table.nohover tbody tr:hover {
   background-color: transparent;
}
.table thead th, table tbody td, table tfoot td {
   text-align: left;
   vertical-align: middle;
}
/* table thead th:last-child, table tbody td:last-child {
   text-align: right;
} */
table tbody td, .table thead th, .table tfoot td {
   border-color: #f3f5f9;
   font-size: 14px;
   line-height: 21px;
   color: #6e7985;
}
.table thead th, .table tfoot td {
   font-weight: 600;
   font-size: .8125rem;
}
table thead th, table tfoot td {
   border-color: rgb(226, 229, 236);
   color: #212830;
}
.table-2 tbody td, .table-2 th {
   border-color: #f3f5f9;
   font-size: 14px;
   line-height: 21px;
   color: #6e7985;
   padding-left: 0;
   padding-right: 0;
}
.table-2 tbody tr:hover {
   background-color: transparent;
}
.table-2 tr:first-child > * {
   padding-top: 0;
}
.table-2 tbody tr:last-child > *, .item-ordered tbody tr:last-child > * {
   border-bottom: 0;
   padding-bottom: 0;
} 
.table-2 th {
   font-weight: 500;
}
/* end table */

/* start card box */
.card {
   position: relative;
   display: flex;
   flex-direction: column;
   word-wrap: break-word;
   background-clip: border-box;
}
.card-box {
   height: 100%;
   border-width: 0;
   border-radius: 6px;
   box-shadow: 0 1px 2px rgba(204,210,218,.07), 0 2px 4px rgba(204,210,218,.07), 0 4px 8px rgba(204,210,218,.07), 0 8px 16px rgba(204,210,218,.07), 0 16px 32px rgba(204,210,218,.07), 0 32px 64px rgba(204,210,218,.07);
   background-color: #fff;
}
.card-header {
   border-bottom: 1px solid;
   border-color: #e7e8ea;
   background-color: rgba(0,0,0,0);
   padding: 15px;
   display: flex;
   align-items: center;
}
.work-order-view .card-header {
   padding: 12px;
}
.card-header .card-title {
   font-weight: 600;
   font-size: 15px;
   color: #212830;
   margin-bottom: 0;
   line-height: 1.4;
}
.card-nav-link {
   width: 16px;
   height: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: .6;
}
.card-body {
   padding: 15px;
   flex: 1 1 auto;
   position: relative;
}
.row-2 .card-body, .tab .row-2 .card-body p {
   font-size: 14px;
   line-height: 21px;
}
/* end card box */

/* start search block */
.form-search {
   visibility: hidden;
   display: flex;
   align-items: center;
   border: 1px solid rgba(0,0,0,0);
   border-radius: 6px;
   padding: 3px 10px;
   transition: all .15s;
   box-shadow: none;
   background-color: #f3f5f9;
   width: 320px;
   margin-right: auto;
   color: #212830;
}
.form-control-input {
   display: block;
   width: 100%;
   padding: 6px 8px 6px 3px;
   font-weight: 400;
   line-height: 1.5;
   color: #6e7985;
   background-clip: padding-box;
   border: 1px solid #ccd2da;
   appearance: none;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   border-radius: 0;
   border-width: 0;
   background-color: rgba(0,0,0,0);
   box-sizing: border-box;
   font-size: 15px;
   outline: 0 !important;
}
.search-icon {
   width: 18px;
   height: 18px;
   display: block;
   background-image: url(../img/search-icon.svg);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   cursor: pointer;
}
/* end search block */

/* start notification icon */
.notification {
   width: 18px;
   text-align: center;
   position: relative;
}
.dropdown {
   margin-left: 22px;
   position: relative;
}
.app-navbar img {
   width: 20px;
}
.animate-ping-wrapper {
   width: 12px;
   height: 12px;
   display: flex;
   position: absolute;
   top: 2px;
   right: -4px;
}
.animate-ping {
   display: inline-flex;
   width: 100%;
   height: 100%;
   animation: ping 1s cubic-bezier(0,0,.2,1) infinite;
   border-radius: 100%;
   background-color: #e7bcbc;
   opacity: .75;
   position: absolute;
   top: -3px;
   right: 3px;
}
.animate-ping_bg {
   position: relative;
   width: 6px;
   height: 6px;
   display: inline-flex;
   border-radius: 100%;
   background-color: #e65252;
}
@keyframes ping {
   75%,to {
       transform: scale(2);
       opacity: 0
   }
}
/* end notification icon */

/* start avatar */
.avatar {
   width: 34px;
   height: 34px;
   border-radius: 100%;
   display: block;
   position: relative;
}
.avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
   display: block;
}
.avatar.online::after, .avatar.offline::after {
   content: "";
   position: absolute;
   bottom: 0;
   right: 5px;
   width: 6px;
   height: 6px;
   border-radius: 100%;
   box-shadow: 0 0 0 1.5px #fbfcfe;
}
.avatar.online::after {
   background-color: #0cb785;
}
.avatar.offline::after {
   background-color: #ccd2da;
}
.dropdown-profile .dropdown-menu {
   position: absolute;
   width: 230px;
   right: 0;
   background-color: #ffffff;
   padding: 20px 20px 15px;
   border-radius: 6px;
   box-shadow: -2px 2px 4px 2px rgb(0 0 0 / 8%);
   display: none;
   opacity: 0;
   visibility: hidden;
   top: auto;
}
.dropdown-menu.show {
   opacity: 1;
   visibility: visible;    
   display: block;
}
.avatar-xl {
   width: 61px;
   height: 61px;
}
.nav-btn a {
   display: flex;
   align-items: center;
   padding: 8px 8px;
   color: #41505f;
   border-radius: 4px;
   transition: all .25s;
}
.nav-btn a i {
   width: 20px;
   height: auto;
   display: inline-flex;
   align-items: center;
   margin-right: 8px;
}
.avatar-xl.online::after, .avatar-xl.offline::after {
   width: 8px;
   height: 8px;
   right: 7px;
   bottom: 2px;
}
.nav-btn {
   margin: 0 -8px;
}
.nav-btn a:hover {
   background-color: #f3f5f9;
   color: #212830;
}
.dropdown-link {
   cursor: pointer;
}
/* end avatar */

/* start tabs */

.tab .tab-item p {
   font-size: 13px;
   line-height: 19px;
}
.tab .tab-item {
   display: none;
}
.tab .tab-item.active {
   display: block;
}
.tabs {
   display: flex;
   column-gap: 25px;
   border-bottom: 1px solid;
   border-color: rgb(226, 229, 236);
   margin-bottom: 25px;
}
.tabs li.tabs-item {
   font-weight: 400;
   font-size: 15px;
   color: #6e7985;
   margin-bottom: 0;
   line-height: 1.4;
   padding: 6px 0;
   position: relative;
   cursor: pointer;
}
.tabs li.tabs-item.active:after {
   position: absolute;
   content: '';
   width: 100%;
   height: 1px;
   background-color: #506fd9;
   bottom: -1px;
   left: 0;
   right: 0;
}
.tab .card-body {
   padding: 0;
}
.tab .item:last-child {
   border: 0;
}
p {
   font-size: 14px;
   line-height: 21px;
}
.card-body .item .item-text {
   flex: 1 1 40%;
}
.card-body .item .item-field {
   flex: 1 1 60%;
}
.tabs li.active {
   color: #212830;
   font-weight: 500;
}
.tab .tab-item .item:first-child {
   padding-top: 0;
}
/* end tabs */

/* start filter dropdown */

.filter-block .filter-item {
   flex: 1 1 33%;
}
.filter-block .filter-item.delete-block {
   flex: 1 1 22px;
   text-align: center;
   width: 100%;
   min-width: 20px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}
.filter-item.delete-block img {
   max-width: 100%;
   width: 18px;
   opacity: 0.6;
}
/* end filter dropdown */

/* start popup */
.popup {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 1000;
   width: 100%;
   height: 100%;
   display: none;
}
.popup.show {
   display: block;
}
.popup-content {
   max-width: 800px;
   position: absolute;
   left: 0;
   right: 0;
   margin-inline: auto;
   top: 50%;
   transform: translateY(-50%);
   border-radius: 4px;
   width: 95%;
}
.popup .heading-2 {
   font-size: 15px;
   padding-bottom: 11px;
   border: 0;
   border-bottom: 1px dashed #acacac;
   margin-bottom: 12px;
   line-height: 18px;
   font-weight: 700;
}
.product-item-wrapper {
   display: flex;
   width: 100%;
}
.popup .close-btn {
   position: absolute;
   right: 10px;
   top: 20px;
   width: 20px;
   height: 20px;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
}
.log-data {
   flex: 1 1 50%;
   width: 50%;
   overflow: auto;
   max-height: 400px;
   font-size: 13px;
   word-wrap: break-word;
}
.log-title {
   padding: 12px;
   text-align: center;
   width: 100%;
   background-color: #ccc;
   font-weight: 700;
   margin-bottom: 13px;
}
.popup-inner {
   background: rgba(0,0,0,0.8);
   width: 100%;
   height: 100%;
}
.popup .same-product-item {
   padding: 10px 0;
   align-items: center;
   border-bottom: 1px solid #ccc;
   cursor: initial;
}
.popup .close-btn img {
   width: 20px;
}
/* end popup */

/* start pagination */
.pagination-wrapper {
   padding-top: 12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.pagination-text {
   font-size: 14px;
   line-height: 21px;
   font-weight: 500;
   color: #6e7985;
}
.pagination {
   display: flex;
   gap: 7px;
   align-items: center;
   justify-content: flex-end;
}
.pagination li {
   display: inline-block;
}
.pagination li.prev>*, .pagination li.next>*, .pagination li a {
   border: 1px solid rgb(226, 229, 236);
   font-size: 14px;
   line-height: 21px;
   font-weight: 400;
   padding: 4px 12px;
   color: #8493a2;
   font-family: 'Open Sans', sans-serif;
   transition: 0.2s;
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   text-align: center;
   border-radius: 4px;
}
.pagination li.active a {
   background-color: #506fd9;
   color: #ffffff;
   border-color: #506fd9;
}
.pagination .previous a:hover, .pagination .next a:hover, .pagination li a:hover {
   background-color: #506fd9;
   color: #ffffff;
   border: 1px solid #506fd9;
}
/* end pagination */

/* start btn */
.btn {
   background-color: transparent;
   border-radius: 4px;
   border: 1px solid;
   border-color: transparent;
   color: #212830;
   cursor: pointer;
   display: inline-block;
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
   margin: 0;
   padding: 0.406rem 0.75rem;
   text-align: center;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   vertical-align: middle;
}
.btn-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-left: 0;
   padding-right: 0;
   width: 36px;
   height: 36px;
}
.btn-with-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: transparent;
   border-radius: 4px;
   border: 1px solid;
   border-color: transparent;
   color: #000;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
   margin: 0;
   padding: 0.406rem 0.75rem;
   text-align: center;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-size: 13px;
   background-position: 9px center;
   padding-left: 30px;
}
.btn-with-icon.bwi-link {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   padding-right: 0;
}
.btn:hover {
   color: #212830;
   border-color: transparent;
   background-color: transparent;
}
.btn-primary {
   color: #fff !important;
   background-color: #eb5202 !important;
   border-color: #eb5202 !important;
}
.btn-primary:hover {
   color: #fff!important;
   background-color: #cd3e0b!important;
   border-color: #cd3e0b!important;
}
.btn-blue {
   color: #fff!important;
   background-color: #506fd9 !important;
   border-color: #506fd9!important;
}
.btn-blue:hover {
   color: #fff!important;
   background-color: #445eb8!important;
   border-color: #4059ae!important;
}
.btn-secondary {
   color: #fff!important;
   background-color: #6e7985!important;
   border-color: #6e7985!important;
}
.btn-secondary:hover {
   color: #fff!important;
   background-color: #848d97!important;
   border-color: #7d8691!important;
}
.btn-success {
   color: #fff!important;
   background-color: #0cb785!important;
   border-color: #0cb785!important;
}
.btn-success:hover {
   color: #fff!important;
   background-color: #30c297!important;
   border-color: #24be91!important;
}
.btn-pale-green {
   color: #fff!important;
   background-color: #659a77 !important;
}
.btn-pale-green:hover {
   color: #fff!important;
   background-color: #598066 !important;
}
.btn-pale-red {
   color: #fff!important;
   background-color: #9a5151 !important;
}
.btn-info {
   color: #fff!important;
   background-color: #0dcaf0!important;
   border-color: #0dcaf0!important;
}
.btn-info:hover {
   color: #fff!important;
   background-color: #31d2f2!important;
   border-color: #25cff2!important;
}
.btn-warning {
   color: #000!important;
   background-color: #ffc107!important;
   border-color: #ffc107!important;
}
.btn-warning:hover {
   color: #000!important;
   background-color: #ffca2c!important;
   border-color: #ffc720!important;
}
.btn-danger {
   color: #fff!important;
   background-color: #dc3545!important;
   border-color: #dc3545!important;
}
.btn-danger:hover {
   color: #fff!important;
   background-color: #bb2d3b!important;
   border-color: #b02a37!important;
}
.btn-light {
   color: #000!important;
   background-color: #f8f9fc!important;
   border-color: #f8f9fc!important;
}
.btn-light:hover {
   color: #000!important;
   background-color: #d3d4d6!important;
   border-color: #c6c7ca!important;
}
.btn-dark {
   color: #fff!important;
   background-color: #212830!important;
   border-color: #212830!important;
}
.btn-dark:hover {
   color: #fff!important;
   background-color: #42484f!important;
   border-color: #373e45!important;
}
.btn-white {
   border: 1px solid #ccd2da!important;
   background-color: #fff!important;
}
.btn-white:hover,.btn-white:focus {
   border-color: #bdc5cf!important;
   background-color: #f8f9fc!important;
}
.btn-outline-white {
   border: 1px solid rgba(255,255,255,.75)!important;
   color: rgba(255,255,255,.75)!important;
}
.btn-outline-white:hover {
   border-color: #fff!important;
   color: #fff!important;
}
.btn-outline-primary {
   color: #506fd9!important;
   border-color: #506fd9!important;
   background-color: transparent!important;
}
.btn-outline-primary:hover {
   color: #fff!important;
   border-color: #506fd9!important;
   background-color: #506fd9!important;
}
.btn-outline-secondary {
   color: #6e7985!important;
   border-color: #6e7985!important;
   background-color: transparent!important;
}
.btn-outline-secondary:hover {
   color: #fff!important;
   border-color: #6e7985!important;
   background-color: #6e7985!important;
}
.btn-outline-success {
   color: #0cb785!important;
   border-color: #0cb785!important;
   background-color: transparent!important;
}
.btn-outline-success:hover {
   color: #000!important;
   border-color: #0cb785!important;
   background-color: #0cb785!important;
}
.btn-outline-green {
   color: #0b8964!important;
   border-color: #0b8964!important;
   background-color: transparent!important;
}
.btn-outline-green:hover {
   color: #fff!important;
   border-color: #0b8964!important;
   background-color: #0b8964!important;
}
.btn-outline-info {
   color: #0dcaf0!important;
   border-color: #0dcaf0!important;
   background-color: transparent!important;
}
.btn-outline-info:hover {
   color: #000!important;
   border-color: #0dcaf0!important;
   background-color: #0dcaf0!important;
}
.btn-outline-warning {
   color: #ffc107!important;
   border-color: #ffc107!important;
   background-color: transparent!important;
}
.btn-outline-warning:hover {
   color: #000!important;
   border-color: #ffc107!important;
   background-color: #ffc107!important;
}
.btn-outline-danger {
   color: #dc3545!important;
   border-color: #dc3545!important;
   background-color: transparent!important;
}
.btn-outline-danger:hover {
   color: #fff!important;
   border-color: #dc3545!important;
   background-color: #dc3545!important;
}
.btn-outline-light {
   color: #f8f9fc!important;
   border-color: #f8f9fc!important;
   background-color: transparent!important;
}
.btn-outline-light:hover {
   color: #000!important;
   border-color: #f8f9fc!important;
   background-color: #f8f9fc!important;
}
.btn-outline-dark {
   color: #212830!important;
   border-color: #212830!important;
   background-color: transparent!important;
}
.btn-outline-dark:hover {
   color: #fff!important;
   border-color: #212830!important;
   background-color: #212830!important;
}
.btn-link {
   font-weight: 400;
   color: var(--bs-link-color);
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
   text-decoration: none;
}
.btn-text-link {
   color: #506fd9 !important;
   font-size: 14px;
}
.btn-text-link:hover {
   text-decoration: underline;
}
.btn-link:hover, .btn-link:active {
   color: var(--bs-link-hover-color);
   border-color: transparent;
}
.btn-link:disabled {
   color: #6e7985;
   border-color: transparent;
}
.btn-link:focus-visible {
   color: var(--bs-btn-color)
}
.status-btn {
   padding: 2px 3px;
   border-radius: 1px;
   font-size: 12px;
   text-transform: uppercase;
   max-width: 70px;
   width: 100%;
   display: inline-block;
   text-align: center;
   color: #212830;
   font-weight: bold;
   line-height: 17px;
}
.status-btn.active {
   background: #d0e5a9 none repeat scroll 0 0;
   border: 1px solid #5b8116;
   color: #185b00;
}
.status-btn.inactive {
   background: #f9d4d4 none repeat scroll 0 0;
   border: 1px solid #ed4f2e;
   color: #e22626;
}
.btn-with-icon.add-btn-black, .btn-with-icon.add-btn-white {
   background-image: url(img/add-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 13px;
   background-position: 8px center;
}
.btn-with-icon.add-btn-white {
   background-image: url(img/add-icon-white.svg);
}
.btn-with-icon.create-btn-black, .btn-with-icon.create-btn-white {
   background-image: url(img/create-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 10px center;
   padding-left: 35px;
}
.btn-with-icon.create-btn-white {
   background-image: url(img/create-icon-white.svg);
}
.btn-with-icon.update-btn-black, .btn-with-icon.update-btn-white {
   background-image: url(img/update-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 8px center;
   padding-left: 32px;
}
.btn-with-icon.update-btn-white {
   background-image: url(img/update-icon-white.svg);
}
.btn-with-icon.delete-btn-black, .btn-with-icon.delete-btn-white {
   background-image: url(img/delete-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 8px center;
   padding-left: 32px;
}
.btn-with-icon.delete-btn-white {
   background-image: url(img/delete-icon-white.svg);
}
.btn-with-icon.search-btn-black, .btn-with-icon.search-btn-white {
   background-image: url(img/search-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 8px center;
   padding-left: 32px;
}
.btn-with-icon.search-btn-white {
   background-image: url(img/search-icon-white.svg);
}
.btn-with-icon.export-btn-black, .btn-with-icon.export-btn-white {
   background-image: url(img/export-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 8px center;
   padding-left: 32px;
}
.btn-with-icon.export-btn-white {
   background-image: url(img/export-icon-white.svg);
}
.btn-with-icon.refresh-btn-black, .btn-with-icon.refresh-btn-white {
   background-image: url(img/refresh-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 15px;
   background-position: 8px center;
}
.btn-with-icon.refresh-btn-white {
   background-image: url(img/refresh-icon-white.svg);
}
.btn-with-icon.submit-btn-black, .btn-with-icon.submit-btn-white {
   background-image: url(img/submit-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 8px center;
   padding-left: 32px;
}
.btn-with-icon.submit-btn-white {
   background-image: url(img/submit-icon-white.svg);
}
.btn-with-icon.back-btn-black, .btn-with-icon.back-btn-white {
   background-image: url(img/back-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 14px;
   background-position: 8px center;
   padding-left: 30px;
}
.btn-with-icon.back-btn-white {
   background-image: url(img/back-icon-white.svg);
}
.btn-with-icon.edit-btn-black, .btn-with-icon.edit-btn-white, .btn-with-icon.edit-btn-blue {
   background-image: url(img/edit-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 8px center;
   padding-left: 32px;
}
.btn-with-icon.edit-btn-white {
   background-image: url(img/edit-icon-white.svg);
}
.btn-with-icon.edit-btn-blue {
   background-image: url(img/edit-icon-blue.svg);
}
.btn-with-icon.save-btn-black, .btn-with-icon.save-btn-white {
   background-image: url(img/save-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 14px;
   background-position: 9px center;
   padding-left: 33px;
}
.btn-with-icon.save-btn-white {
   background-image: url(img/save-icon-white.svg);
}
.btn-with-icon.logout-btn-black, .btn-with-icon.logout-btn-white {
   background-image: url(img/logout-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 15px;
   background-position: 6px center;
}
.btn-with-icon.logout-btn-white {
   background-image: url(img/logout-icon-white.svg);
}
.btn-with-icon.user-btn-black, .btn-with-icon.user-btn-white {
   background-image: url(img/user-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 14px;
   background-position: 8px center;
}
.btn-with-icon.user-btn-white {
   background-image: url(img/user-icon-white.svg);
}
/* end btn */

/* start color */
.blue-clr {
   color: #506fd9 !important;
}
.black-clr {
   color: #000 !important;
}
.white-clr {
   color: #fff !important;
}
.gray-clr {
   color: #6e7985 !important;
}
.red-clr {
   color: #dc3545 !important;
}
/* end color */

/* start close btn */
.btn-close {
   box-sizing: content-box;
   width: 1em;
   height: 1em;
   padding: 2px;
   color: #000;
   background: rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
   border: 0;
   border-radius: .25rem;
   opacity: .5;
   display: block;
   background-size: 13px;
}
.btn-close:hover {
   color: #000;
   text-decoration: none;
   opacity: .75
}
.btn-close:focus {
   outline: 0;
   box-shadow: 0 0 0 .25rem rgba(80,111,217,.25);
   opacity: 1
}
.btn-close:disabled,.btn-close.disabled {
   pointer-events: none;
   user-select: none;
   opacity: .25
}
.btn-close-white {
   filter: invert(1) grayscale(100%) brightness(200%)
}
/* end close btn */

/* start padding */
.p-0 {
   padding: 0 !important;
}
.p-10 {
   padding: 10px !important;
}
.p-15 {
   padding: 15px !important;
}
.p-20 {
   padding: 20px !important;
}
.p-25 {
   padding: 25px !important;
}
.pl-0 {
   padding-left: 0 !important;
}
.pl-10 {
   padding-left: 10px !important;
}
.pl-15 {
   padding-left: 15px !important;
}
.pl-20 {
   padding-left: 20px !important;
}
.pl-25 {
   padding-left: 25px !important;
}
.pr-0 {
   padding-right: 0 !important;
}
.pr-10 {
   padding-right: 10px !important;
}
.pr-15 {
   padding-right: 15px !important;
}
.pr-20 {
   padding-right: 20px !important;
}
.pr-25 {
   padding-right: 25px !important;
}
.pt-0 {
   padding-top: 0 !important;
}
.pt-5 {
   padding-top: 5px !important;
}
.pt-10 {
   padding-top: 10px !important;
}
.pt-15 {
   padding-top: 15px !important;
}
.pt-20 {
   padding-top: 20px !important;
}
.pt-25 {
   padding-top: 25px !important;
}
.pb-0 {
   padding-bottom: 0 !important;
}
.pb-5 {
   padding-bottom: 5px !important;
}
.pb-8 {
   padding-bottom: 8px !important;
}
.pb-10 {
   padding-bottom: 10px !important;
}
.pb-12 {
   padding-bottom: 12px !important;
}
.pb-15 {
   padding-bottom: 15px !important;
}
.pb-20 {
   padding-bottom: 20px !important;
}
.pb-25 {
   padding-bottom: 25px !important;
}
.px-0 {
   padding-left: 0 !important;
   padding-right: 0 !important;
}
.px-3 {
   padding-left: 3px !important;
   padding-right: 3px !important;
}
.px-10 {
   padding-left: 10px !important;
   padding-right: 10px !important;
}
.px-15 {
   padding-left: 15px !important;
   padding-right: 15px !important;
}
.px-20 {
   padding-left: 20px !important;
   padding-right: 20px !important;
}
.px-25 {
   padding-left: 25px !important;
   padding-right: 25px !important;
}
.py-0 {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
}
.py-5 {
   padding-top: 5px !important;
   padding-bottom: 5px !important;
}
.py-10 {
   padding-top: 10px !important;
   padding-bottom: 10px !important;
}
.py-15 {
   padding-top: 15px !important;
   padding-bottom: 15px !important;
}
.py-20 {
   padding-top: 20px !important;
   padding-bottom: 20px !important;
}
.py-25 {
   padding-top: 25px !important;
   padding-bottom: 25px !important;
}
.px-auto {
   padding-left: auto !important;
   padding-right: auto !important
}
.py-auto {
   padding-top: auto !important;
   padding-bottom: auto !important
}
/* end padding */

/* start margin */
.m-0 {
   margin: 0 !important;
}
.m-5 {
   margin: 5px !important;
}
.m-10 {
   margin: 10px !important;
}
.m-15 {
   margin: 15px !important;
}
.m-20 {
   margin: 20px !important;
}
.m-25 {
   margin: 25px !important;
}
.ml-auto {
   margin-left: auto !important;
}
.ml-0 {
   margin-left: 0 !important;
}
.ml-5 {
   margin-left: 5px !important;
}
.ml-10 {
   margin-left: 10px !important;
}
.ml-15 {
   margin-left: 15px !important;
}
.ml-20 {
   margin-left: 20px !important;
}
.ml-25 {
   margin-left: 25px !important;
}
.mr-auto {
   margin-right: auto !important;
}
.mr-0 {
   margin-right: 0 !important;
}
.mr-5 {
   margin-right: 5px !important;
}
.mr-10 {
   margin-right: 10px !important;
}
.mr-15 {
   margin-right: 15px !important;
}
.mr-20 {
   margin-right: 20px !important;
}
.mr-25 {
   margin-right: 25px !important;
}
.mt-0 {
   margin-top: 0 !important;
}
.mt-2 {
   margin-top: 2px !important;
}
.mt-5 {
   margin-top: 5px !important;
}
.mt-10 {
   margin-top: 10px !important;
}
.mt-15 {
   margin-top: 15px !important;
}
.mt-20 {
   margin-top: 20px !important;
}
.mt-25 {
   margin-top: 25px !important;
}
.mt-30 {
   margin-top: 30px !important;
}
.mt-50 {
   margin-top: 50px !important;
}
.mb-0 {
   margin-bottom: 0 !important;
}
.mb-4 {
   margin-bottom: 4px !important;
}
.mb-5 {
   margin-bottom: 5px !important;
}
.mb-10 {
   margin-bottom: 10px !important;
}
.mb-15 {
   margin-bottom: 15px !important;
}
.mb-16 {
   margin-bottom: 16px !important;
}
.mb-20 {
   margin-bottom: 20px !important;
}
.mb-25 {
   margin-bottom: 25px !important;
}
.mx-0 {
   margin-left: 0 !important;
   margin-right: 0 !important;
}
.mx-10 {
   margin-left: 10px !important;
   margin-right: 10px !important;
}
.mx-15 {
   margin-left: 15px !important;
   margin-right: 15px !important;
}
.mx-20 {
   margin-left: 20px !important;
   margin-right: 20px !important;
}
.mx-25 {
   margin-left: 25px !important;
   margin-right: 25px !important;
}
.my-0 {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}
.my-10 {
   margin-top: 10px !important;
   margin-bottom: 10px !important;
}
.my-15 {
   margin-top: 15px !important;
   margin-bottom: 15px !important;
}
.my-20 {
   margin-top: 20px !important;
   margin-bottom: 20px !important;
}
.my-25 {
   margin-top: 25px !important;
   margin-bottom: 25px !important;
}
.mx-auto {
   margin-left: auto !important;
   margin-right: auto !important
}
.my-auto {
   margin-top: auto !important;
   margin-bottom: auto !important
}
/* end margin */

/* start gap */
.gap-5 {
   gap: 5px !important;
}
.gap-10 {
   gap: 10px !important;
}
.gap-15 {
   gap: 15px !important;
}
.gap-20 {
   gap: 20px !important;
}
.gap-25 {
   gap: 25px !important;
}
/* end gap */

/* start font size */
.fs-32 {
   font-size: 32px !important
}
.fs-28 {
   font-size: 28px !important
}
.fs-24 {
   font-size: 24px !important
}
.fs-21 {
   font-size: 21px !important
}
.fs-18 {
   font-size: 18px !important
}
.fs-16 {
   font-size: 16px !important
}
.fs-15 {
   font-size: 15px !important
}
.fs-14 {
   font-size: 14px !important
}
.fs-13 {
   font-size: 13px !important
}
.fs-12 {
   font-size: 12px !important
}
.fs-10 {
   font-size: 10px !important
}
/* end font size */

/* start font style */
.fst-italic {
   font-style: italic !important
}
.fst-normal {
   font-style: normal !important
}
/* end font style */

/* start font weight */
.fw-100 {
   font-weight: 100 !important
}
.fw-200 {
   font-weight: 200 !important
}
.fw-300 {
   font-weight: 300 !important
}
.fw-400 {
   font-weight: 400 !important
}
.fw-500 {
   font-weight: 500 !important
}
.fw-600 {
   font-weight: 600 !important
}
.fw-700 {
   font-weight: 700 !important
}
.fw-800 {
   font-weight: 800 !important
}
.fw-900 {
   font-weight: 900 !important
}
/* end font weight */

/* start letter spacing */
.ls-1 {
   letter-spacing: 1px
}
.ls-2 {
   letter-spacing: 2px
}
.ls-3 {
   letter-spacing: 3px
}
.ls-4 {
   letter-spacing: 4px
}
.ls--1 {
   letter-spacing: -1px
}
.ls--2 {
   letter-spacing: -2px
}
/* end letter spacing */

/* start line height */
.lh-1 {
   line-height: 1 !important
}
.lh-sm {
   line-height: 1.25 !important
}
.lh-base {
   line-height: 1.5 !important
}
.lh-lg {
   line-height: 2 !important
}
.lh-18 {
   line-height: 18px !important;
}
.lh-20 {
   line-height: 18px !important;
}
/* end line height */

/* start test align */
.text-start {
   text-align: left !important
}
.text-end {
   text-align: right !important
}
.text-center {
   text-align: center !important
}
/* end test align */

/* start text decoration */
.text-decoration-none {
   text-decoration: none !important
}
.text-decoration-underline {
   text-decoration: underline !important
}
.text-decoration-line-through {
   text-decoration: line-through !important
}
/* end text decoration */

/* start text transform */
.text-lowercase {
   text-transform: lowercase !important
}
.text-uppercase {
   text-transform: uppercase !important
}
.text-capitalize {
   text-transform: capitalize !important
}
/* end text transform */

/* start text wrap */
.text-wrap {
   white-space: normal !important
}
.text-nowrap {
   white-space: nowrap !important
}
.text-break {
   word-wrap: break-word !important;
   word-break: break-word !important
}
/* end text wrap */

/* start link color*/
.link-primary {
   color: #506fd9 !important
}
.link-primary:hover,.link-primary:focus {
   color: #4059ae !important
}
.link-secondary {
   color: #6e7985 !important
}
.link-secondary:hover,.link-secondary:focus {
   color: #8b949d !important
}
.link-success {
   color: #0cb785 !important
}
.link-success:hover,.link-success:focus {
   color: #3dc59d !important
}
.link-info {
   color: #0dcaf0 !important
}
.link-info:hover,.link-info:focus {
   color: #3dd5f3 !important
}
.link-warning {
   color: #ffc107 !important
}
.link-warning:hover,.link-warning:focus {
   color: #ffcd39 !important
}
.link-danger {
   color: #dc3545 !important
}
.link-danger:hover,.link-danger:focus {
   color: #b02a37 !important
}
.link-light {
   color: #f8f9fc !important
}
.link-light:hover,.link-light:focus {
   color: #f9fafd !important
}
.link-dark {
   color: #212830 !important
}
.link-dark:hover,.link-dark:focus {
   color: #1a2026 !important
}
.no-bg {
   background-color: transparent !important;
}
/* end link color*/

/* start text color */
.text-primary {
   color: #506fd9 !important;
}
.text-secondary {
   color: rgba(110, 121, 133) !important;
}
.text-success {
   color: rgba(12, 183, 133) !important;
}
.text-info {
   color: rgba(13, 202, 240) !important;
}
.text-warning {
   color: rgba(255, 193, 7) !important;
}
.text-danger {
   color: rgba(220, 53, 69) !important;
}
.text-light {
   color: rgba(248, 249, 252) !important;
}
.text-dark {
   color: rgba(33, 40, 48) !important;
}
.text-black {
   color: rgba(0, 0, 0) !important;
}
.text-white {
   color: rgba(255, 255, 255) !important;
}
.text-body {
   color: rgba(65, 80, 95) !important;
}
/* end text color */

/* start bg color */
.bg-primary {
   background-color: #506fd9 !important;
}
.bg-secondary {
   background-color: rgba(110, 121, 133) !important;
}
.bg-success {
   background-color: rgba(12, 183, 133) !important;
}
.bg-info {
   color: rgba(13, 202, 240) !important;
}
.bg-warning {
   background-color: rgba(255, 193, 7) !important;
}
.bg-danger {
   background-color: rgba(220, 53, 69) !important;
}
.bg-light {
   background-color: rgba(248, 249, 252) !important;
}
.bg-dark {
   background-color: rgba(33, 40, 48) !important;
}
.bg-black {
   background-color: rgba(0, 0, 0) !important;
}
.bg-white {
   background-color: rgba(255, 255, 255) !important;
}
.bg-body {
   background-color: rgba(65, 80, 95) !important;
}
.bg-orange {
   background-color: #eb5202 !important;
}
/* end bg color */

/* start flex property */
.flex-auto {
   flex: 1 0 0%;
}
.flex-fill {
   flex: 1 1 auto !important
}
.flex-20 {
   flex: 1 1 20% !important;
}
.flex-33 {
   flex: 1 1 33.33% !important;
}
.flex-40 {
   flex: 1 1 40% !important;
}
.flex-50 {
   flex: 1 1 50% !important;
}
.flex-60 {
   flex: 1 1 60% !important;
}
.flex-66 {
   flex: 1 1 66.66% !important;
}
.flex-75 {
   flex: 1 1 75% !important;
}
.flex-100 {
   flex: 1 1 100% !important;
}
.flex-row {
   flex-direction: row !important
}
.flex-column {
   flex-direction: column !important
}
.flex-row-reverse {
   flex-direction: row-reverse !important
}
.flex-column-reverse {
   flex-direction: column-reverse !important
}
.flex-wrap {
   flex-wrap: wrap !important
}
.flex-nowrap {
   flex-wrap: nowrap !important
}
.flex-wrap-reverse {
   flex-wrap: wrap-reverse !important
}
.justify-content-start {
   justify-content: flex-start !important
}
.justify-content-end {
   justify-content: flex-end !important
}
.justify-content-center {
   justify-content: center !important
}
.justify-content-between {
   justify-content: space-between !important
}
.justify-content-around {
   justify-content: space-around !important
}
.justify-content-evenly {
   justify-content: space-evenly !important
}
.align-items-start {
   align-items: flex-start !important
}
.align-items-end {
   align-items: flex-end !important
}
.align-items-center {
   align-items: center !important
}
.align-items-baseline {
   align-items: baseline !important
}
.align-items-stretch {
   align-items: stretch !important
}
.align-content-start {
   align-content: flex-start !important
}
.align-content-end {
   align-content: flex-end !important
}
.align-content-center {
   align-content: center !important
}
.align-content-between {
   align-content: space-between !important
}
.align-content-around {
   align-content: space-around !important
}
/* end flex property */

/* start font display */
.display-1 {
   font-size: 36px;
   font-weight: 400;
   line-height: 1.2;
   color: #212830;
}
.display-2 {
   font-size: 24px;
   font-weight: 400;
   line-height: 1.2;
   color: #212830;
}
.display-3 {
   font-size: 20px;
   font-weight: 500;
   line-height: 1.4;
   color: #212830;
}
.display-4 {
   font-size: 15px;
   font-weight: 500;
   line-height: 1.4;
   color: #212830;
}
.display-5 {
   font-size: 13px;
   line-height: 23px;
   font-weight: 400;
   color: #212830;
}
.display-6 {
   font-size: 12px;
   line-height: 1.2;
   font-weight: 400;
   color: #212830;
}
/* end font display */

/* start display */
.d-inline {
   display: inline !important
}
.d-inline-block {
   display: inline-block !important
}
.d-block {
   display: block !important
}
.d-grid {
   display: grid !important
}
.d-table {
   display: table !important
}
.d-table-row {
   display: table-row !important
}
.d-table-cell {
   display: table-cell !important
}
.d-flex {
   display: flex !important
}
.d-inline-flex {
   display: inline-flex !important
}
.d-none {
   display: none !important
}
/* end display */

/* start box shadow */
.shadow {
   box-shadow: 0 .5rem 1rem rgba(33,40,48,.15) !important
}
.shadow-sm {
   box-shadow: 0 .125rem .25rem rgba(33,40,48,.075) !important
}
.shadow-lg {
   box-shadow: 0 1rem 3rem rgba(33,40,48,.175) !important
}
.shadow-none {
   box-shadow: none !important
}
/* end box shadow */

/* start position */
.position-static {
   position: static !important
}
.position-relative {
   position: relative !important
}
.position-absolute {
   position: absolute !important
}
.position-fixed {
   position: fixed !important
}
.position-sticky {
   position: sticky !important
}
/* end position */

/* start position place */
.top-0 {
   top: 0 !important
}
.top-50 {
   top: 50% !important
}
.top-100 {
   top: 100% !important
}
.bottom-0 {
   bottom: 0 !important
}
.bottom-50 {
   bottom: 50% !important
}
.bottom-100 {
   bottom: 100% !important
}
.start-0 {
   left: 0 !important
}
.start-50 {
   left: 50% !important
}
.start-100 {
   left: 100% !important
}
.end-0 {
   right: 0 !important
}
.end-50 {
   right: 50% !important
}
.end-100 {
   right: 100% !important
}
/* end position place */

/* start border */
.border {
   border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-0 {
   border: 0 !important
}
.border-top-0 {
   border-top: 0 !important
}
.border-end-0 {
   border-right: 0 !important
}
.border-bottom-0 {
   border-bottom: 0 !important
}
.border-start-0 {
   border-left: 0 !important
}
.border-primary {
   --bs-border-opacity: 1;
   border-color: rgba(var(218, 221, 226), var(--bs-border-opacity)) !important
}
.border-secondary {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important
}
.border-success {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important
}
.border-info {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important
}
.border-warning {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important
}
.border-danger {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important
}
.border-light {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important
}
.border-dark {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important
}
.border-white {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important
}
.border-1 {
   border-width: 1px
}
.border-2 {
   border-width: 2px
}
.border-3 {
   border-width: 3px
}
/* end border */

/* start width */
.w-25 {
   width: 25% !important
}
.w-33 {
   width: 33.33% !important
}
.w-50 {
   width: 50% !important
}
.w-66 {
   width: 66.66% !important
}
.w-75 {
   width: 75% !important
}
.w-100 {
   width: 100% !important
}
.w-auto {
   width: auto !important
}
.mw-100 {
   max-width: 100% !important
}
.mw-500 {
   max-width: 500px !important
}
.vw-100 {
   width: 100vw !important
}
.min-vw-100 {
   min-width: 100vw !important
}
/* end width */

/* start height */
.h-auto {
   height: auto !important
}
.mh-100 {
   max-height: 100% !important
}
.vh-100 {
   height: 100vh !important
}
.min-vh-100 {
   min-height: 100vh !important
}
.h-18 {
   height: 18px !important;
}
/* end height */

/* start vertical align */
.align-baseline {
   vertical-align: baseline !important
}
.align-top {
   vertical-align: top !important
}
.align-middle {
   vertical-align: middle !important
}
.align-bottom {
   vertical-align: bottom !important
}
.align-text-bottom {
   vertical-align: text-bottom !important
}
.align-text-top {
   vertical-align: text-top !important
}
/* start vertical align */

/* start vertical align */
.float-start {
   float: left !important
}
.float-end {
   float: right !important
}
.float-none {
   float: none !important
}
/* end vertical align */

/* start vertical align */
.opacity-0 {
   opacity: 0 !important
}
.opacity-25 {
   opacity: .25 !important
}
.opacity-50 {
   opacity: .5 !important
}
.opacity-75 {
   opacity: .75 !important
}
.opacity-100 {
   opacity: 1 !important
}
/* end vertical align */

/* start overflow */
.overflow-auto {
   overflow: auto !important
}
.overflow-hidden {
   overflow: hidden !important
}
.overflow-visible {
   overflow: visible !important
}
.overflow-scroll {
   overflow: scroll !important
}
/* end overflow */

/* start order */
.order-0 {
   order: 0 !important
}
.order-1 {
   order: 1 !important
}
.order-2 {
   order: 2 !important
}
.order-3 {
   order: 3 !important
}
.order-4 {
   order: 4 !important
}
.order-5 {
   order: 5 !important
}
.order-last {
   order: 6 !important
}
/* end order */

/* start border radius */
.rounded {
   border-radius: 100% !important
}
.rounded-circle {
   border-radius: 50% !important
}
.rounded-0 {
   border-radius: 0 !important
}
.rounded-s {
   border-radius: 2px !important
}
.rounded-n {
   border-radius: 4px !important
}
.rounded-l {
   border-radius: 10px !important
}
.rounded-xl {
   border-radius: 50px !important
}
/* end border radius */

/* start point events */
.pe-none {
   pointer-events: none !important
}
.pe-auto {
   pointer-events: auto !important
}
/* end point events */

/* start visibility */
.visible {
   visibility: visible !important
}
.invisible {
   visibility: hidden !important
}
/* start visibility */

/* start action buttons */
.action-btn {
   width: 28px;
   height: 28px;
   border: 0;
   border-radius: 100%;
   font-size: 0;
   margin-right: 5px;
   cursor: pointer;
   background-position: center;
   background-repeat: no-repeat;
   transition: 0.3s all;
   display: inline-block;
   vertical-align: middle;
}
.bg-green {
   background-color: #CEEEE2;
}
.bg-red {
   background-color: #fbd6d6;
}
.bg-blue {
   background-color: #c2e0f9;
}
.view {
   background-image: url(../img/view_icon.svg);
   background-size: 22px;
}
.edit {
   background-image: url(../img/edit_icon.svg);
   background-size: 16px;
}
.restore {
   background-image: url(../img/restore_icon.svg);
   background-size: 16px;
}
.play {
   background-image: url(../img/play_icon.svg);
   background-size: 16px;
}
.delete {
   background-image: url(../img/delete_icon.svg);
   background-size: 16px;
}
.warning-icon {
   background-image: url(../img/warning.svg);
   margin: 0;
   background-size: 65px;
   width: 65px;
   height: 56px;
   background-color: transparent;
   background-repeat: no-repeat;
}
.action-btn:hover {
   background-color: #fff;
}
/* end action buttons */

/* start toast msg */
.toast-msg-wrapper {
   padding: 50px;
}
.toast-msg {
   max-width: 100% !important;
   padding: 8px 12px 8px 12px !important;
   display: flex !important;
   align-items: center !important;
   border-radius: 0 !important;
   gap: 10px !important;
   justify-content: space-between !important;
   margin-bottom: 15px !important;
   margin-top: 15px !important;
}
.toast-msg.success {
   background: #e5efe6 !important;
   color: #20711c !important;
}
.toast-msg.error {
   background: #fae5e5 !important;
   color: #e0312d !important;
}
.toast-msg.info {
   background: #b3e7f5;
}
.toast-msg.warning {
   background: #fdf0d6;
   color: #c07600;
}
.toast-icon {
   line-height: 30px !important;
   width: 22px !important;
   display: flex;
}
.toast-content {
   width: calc(100% - 22px) !important;
   padding-left: 12px !important;
}
.toast-icon img {
   width: 100% !important;
}
.toast-title {
   font-size: 22px !important;
   margin-bottom: 2px !important;
   display: block !important;
   font-weight: 500 !important;
}
.toast-text {
   font-size: 14px !important;
   margin-bottom: 0 !important;
   line-height: 20px;
}
.toast-btn {
   width: 18px !important;
   height: 18px !important;
   display: block !important;
   cursor: pointer;
}
.toast-btn img {
   height: 100% !important;
   vertical-align: initial;
}
.toast-mg-left {
   display: flex !important;
   align-items: center !important;
   line-height: normal !important;
}
/* end toast msg */

/* start form */
.form-block .row {
   margin-left: -7.5px;
   margin-right: -7.5px;
   margin-top: -8px;
   display: flex;
   flex-wrap: wrap;
}
.form-block .col {
   width: 50%;
   float: left;
   padding-left: 7.5px;
   padding-right: 7.5px;
   margin-top: 8px;
}
.form-block textarea {
   height: 120px;
}
.form-block .title-2 {
   margin-bottom: 15px;
}
.form-block label {
   font-size: 13px;
   line-height: 19px;
   margin-bottom: 5px;
   display: inline-block;
}
.form-block .btn-wrapper {
   margin-top: 10px;
   text-align: right;
}
/* end form */

/* start text with input */
.text-with-input {
   padding: 15px;
}
.text-with-input .item {
   display: flex;
   align-items: center;
   border-bottom: 1px solid #e7e8ea;
   padding: 12px 0;
   gap: 10px;
}
.text-with-input .item:first-child {
   padding-top: 0;
}
.text-with-input .item:last-child {
   padding-bottom: 0;
   border-bottom: 0;
}
.text-with-input .item .item-text {
   flex: 1 1 40%;
}
.text-with-input .item .item-field {
   flex: 1 1 60%;
}
.twi-subtitle {
   font-size: 15px;
   font-weight: 500;
   line-height: 1.4;
   color: #212830;
}
.twi-para {
   font-size: 13px;
   line-height: 19px;
   margin-top: 2px;
}
/* end text with input */

/* start checkbox */
input[type=checkbox] {
   position: relative;
   border: 1.5px solid #506fd9;
   border-radius: 2px;
   background: none;
   cursor: pointer;
   line-height: 0;
   margin: 2px 0 0 0;
   outline: 0;
   padding: 0 !important;
   vertical-align: text-top;
   height: 15px;
   width: 15px;
   -webkit-appearance: none;
   opacity: .7;
}
input[type=checkbox]:hover {
   opacity: 1;
}
 input[type=checkbox]:checked {
   background-color: #506fd9;
   opacity: 1;
}
input[type=checkbox]:before {
   content: '';
   position: absolute;
   right: 50%;
   top: 50%;
   width: 4px;
   height: 8px;
   border: solid #ffffff;
   border-width: 0 2px 2px 0;
   margin: -1px 0px 0 -1px;
   transform: rotate(45deg) translate(-50%, -50%);
   z-index: 2;
}
/* end checkbox */

/* start fancy table */
.fancy-table .table tr th:first-child, .fancy-table .table tr td:first-child {
   width: 32px;
}
.fancy-table .table thead th {
   font-weight: 600;
   font-size: .8125rem;
   color: #000;
}
.fancy-table .title-block {
   display: flex;
   gap: 12px;
}
.fancy-table .title-block-img {
   width: 70px;
   height: 70px;
   position: relative;
   padding-bottom: 70px;
}
.fancy-table .title-block-img img {
   width: auto;
   height: 100%;
   position: absolute;
   margin-inline: auto;
   left: 0;
   right: 0;
   top: 0;
}
.fancy-table .title-block-img {
   width: 70px;
   height: 70px;
   position: relative;
   padding-bottom: 70px;
}
.fancy-table .title-block-img img {
   width: auto;
   height: 100%;
   position: absolute;
   margin-inline: auto;
   left: 0;
   right: 0;
   top: 0;
}
.fancy-table .block-title {
   font-weight: 600;
   margin-bottom: 2px;
}
.fancy-table .sku-block {
   display: flex;
   align-items: center;
   font-size: 12px;
   text-transform: uppercase;
   line-height: 18px;
}
.fancy-table .sku-title {
   text-transform: uppercase;
   font-weight: 600;
   padding-right: 3px;
}
.fancy-table select.only-text {
   border: 0;
   padding: 0;
   outline: 0;
   appearance: none;
   -webkit-appearance: none;
   background: none;
   cursor: pointer;
}
.fancy-table tr:last-child td {
   border: 0;
}
.fancy-table tr th {
   background-color: rgba(248, 249, 252);
}
.fancy-order-total table .fancy-big-total>* {
   font-size: 18px !important;
   padding: 12px 8px !important;
   font-weight: 700;
}
.fancy-order-total tr>* {
   padding: 8px !important;
}
.fancy-order-total tr th {
   text-align: right;
   width: 75%;
}
.fancy-order-total tr td {
   text-align: right;
   width: 25%;
}
.fancy-table select.only-text:hover {
   text-decoration: underline;
}
.fancy-order-total tr:hover {
   background-color: #f0f3fe !important;
}

/* end fancy table */

/* start upload section css */
.upload-section .form-group label {
   color: inherit;
   font-size: 14px;
}
.upload-section>ul>li {
   flex: 1 1 calc(50% - 110px);
}
.upload-section>ul>li:last-child {
   flex: 1 1 200px;
}
.upload-section>ul>li .btn-wrapper {
   display: flex;
   gap: 10px;
}
.upload-section>ul>li input.btn {
   margin-left: 10px;
   cursor: pointer;
   background: #f3f5f9;
   color: #6e7985;
   font-size: 13px;
   background-image: url(img/export-icon-black.svg);
   background-repeat: no-repeat;
   background-size: 14px;
   background-position: 8px center;
   padding: 3px;
   padding-left: 18px;
}
/* end upload section css */

/* start text dropdown */
.text-dropdown {
   font-size: 14px;
   line-height: 20px;
   color: #6e7985;
   width: auto;
   display: inline-block;
   position: relative;
}
.text-dropdown-title {
   display: inline-block;
   cursor: pointer;
}
.text-dropdown-content {
   display: none;
   position: absolute;
   min-width: 150px;
   z-index: 1;
   height: auto;
}
.text-dropdown-content ul {
   padding: 8px;
}
.text-dropdown-content ul li {
   display: block;
   padding: 6px 8px;
   text-decoration: none;
   cursor: pointer;
   background-color: transparent;
   color: #6e7985;
}
.text-dropdown-content ul li:hover {
   background-color: rgba(248, 249, 252);
}
.text-dropdown:hover .text-dropdown-content {
   display: block;
}
.text-dropdown-content.up {
   bottom: 20px;
}
.text-dropdown-content.left {
   top: 0;
   transform: translateX(-100%);
}
.text-dropdown-content.right {
   top: 0;
   transform: translateX(100%);
}
/* end text dropdown */

/* start column blocks */
.column-blocks .row {
   margin-left: -7.5px;
   margin-right: -7.5px;
   margin-top: -8px;
   display: flex;
   flex-wrap: wrap;
}
.column-blocks .col {
   width: 25%;
   float: left;
   padding-left: 7.5px;
   padding-right: 7.5px;
   margin-top: 8px;
}
.column-blocks label {
   font-size: 13px;
   line-height: 19px;
   margin-bottom: 5px;
   display: inline-block;
}
/* end column blocks */

/* ***************************************************** */
/* start main content css */

.main-content {
   margin-left: 250px;
   margin-top: 72px;
   padding: 22px;
   transition: all 0.3s;
   position: relative;
   min-height: calc(100vh - 72px);
}
.main-content-full {
   margin-left: 0;
}
.main-top .main-heading {
   line-height: 21px;
}
.reload-icon {
   height: 14px;
}
.pointer {
   cursor: pointer !important;
}
input[type=file]::file-selector-button {
   border-radius: 4px;
   color: #000;
   background-color: transparent;
   border-color: transparent;
   cursor: pointer;
   padding: 6px 10px;
   font-size: 14px;
   outline: 0 !important;
   box-shadow: none;
   border: 0;
}
.title, .title-2 {
   color: #212830;
   font-size: 21px;
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: normal;
}
.title-2 {
   font-size: 20px;
}
.column-block {
   display: flex;
   align-items: center;
   border-bottom: 1px solid #e7e8ea;
   padding: 12px 15px;
   gap: 10px;
}
.down-arrow {
   position: relative;
}
.down-arrow.active::after {
   transform: translateY(-50%) rotate(180deg);
}
.down-arrow::after, .up-arrow::after, .left-arrow::after, .right-arrow::after    {
   position: absolute;
   content: '';
   top: 50%;
   width: 14px;
   height: 14px;
   transform: translateY(-50%);
   right: 18px;
   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='%23313c47' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 16px 12px;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   appearance: none;
}
.help-block {
   font-size: 11px !important;
   color: #dc3545 !important;
   font-weight: 500 !important;
}
.help-block:empty {
   padding: 0 !important;
}

.form-group .required {
   color: #dc3545;
   display: inline-block;
   margin-left: 2px;
   line-height: 10px;
   font-size: 14px;
}
.page-header {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
}
.page-nav {
   margin-left: auto;
}
table.table tr {
   cursor: pointer;
}
.row-2 {
   display: flex;
   flex-wrap: wrap;
}
input[readonly] {
   pointer-events: none;
   color: #919191 !important;
}
span.required {
   color: #dc3545;
   display: inline-block;
   margin-left: 2px;
   line-height: 10px;
   font-size: 11px;
}
.label {
   font-size: 13px;
   line-height: 19px;
   display: inline-block;
}
input[disabled], input[readonly] {
   color: #9e9e9e !important;
   cursor: auto;
   background-color: #fafafa;
}
.tree-main .tree {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 .tree-main .tree ul {
   margin: 0;
   padding: 0;
   list-style: none;
   margin-left: .5em;
   position: relative;
 }
 .tree-main .tree ul ul {
   margin-left: .5em;
 }
 .tree-main .tree ul:before {
   content: "";
   display: block;
   width: 0;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 14px;
   border-left: 1px dashed;
 }
 .tree-main .tree ul li:before {
   content: "";
   display: block;
   width: 7px;
   height: 0;
   border-top: 1px dashed;
   margin-top: -1px;
   position: absolute;
   top: 1em;
   left: 14px;
 }
 .tree-main .tree ul li:last-child:before {
   background: #fff;
   height: auto;
   top: 1em;
   bottom: 0;
 }
 .tree-main .tree li {
   margin: 0;
   padding: 0 26px;
   line-height: 20px;
   position: relative;
}
 .tree-main .tree li .expand {
   display: block;
 }
 .tree-main .tree li .collapse {
   display: none;
 }
 .tree-main .tree li a {
   text-decoration: none;
   color: #369;
 }
 .tree-main .tree li button {
   text-decoration: none;
   color: #369;
   border: none;
   background: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   outline: 0;
 }
 .tree-main .tree li button:active {
   text-decoration: none;
   color: #369;
   border: none;
   background: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   outline: 0;
 }
 .tree-main .tree li button:focus {
   text-decoration: none;
   color: #369;
   border: none;
   background: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   outline: 0;
 }
 .tree-main .indicator {
   margin-right: 3px;
   width: 12px;
   height: 12px;
   position: relative;
   background-image: url(../img/add-icon.svg);
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   top: 0px;
   cursor: pointer;
}
.tree-main span {
   font-size: 15px;
   line-height: 14px;
   position: relative;
   top: -2px;
}
.tree-block {
   display: inline-flex;
   align-items: center;
   line-height: 24px;
}
.tree-main .indicator.bi-folder-minus {
   background-image: url(../img/min-icon.svg);
}
.tree-main {
   max-height: 400px;
   min-height: 400px;
   overflow: auto;
   max-width: 100%;
}
.tree-main .form-group label {
   display: flex;
   align-items: center;
   gap: 5px;
}
.tree-main input[type=checkbox] {
   height: 11px;
   width: 11px;
   margin: 0;
}
.tree-main input[type=checkbox]:before {
   width: 4px;
   height: 7px;
   border-width: 0 2px 2px 0;
   margin: 0px -1px 0 -1px;
}
.tree-main> .tree {
   margin-left: -26px;
   margin-right: -26px;
}
.tree-main .tree  li.no-tree {
   padding-left: 41px;
}
.tree-main .tree ul li.no-tree:before {
   width: 22px;
}
.collapse-all-btn, .expand-all-btn {
   font-weight: 500;
   border-bottom: 1px dotted blue;
   margin-bottom: 8px;
   display: inline-block;
}
.view-mapped-btn {
   font-weight: 500;
   font-size: 11px;
   border-bottom: 1px dotted blue;;
   display: inline-block;
}
.action-popup {
   gap: 25px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px 15px;
   text-align: center;
}
.action-popup .action-btn {
   margin: 0;
   background-size: 26px;
   width: 60px;
   height: 60px;
   border: 2px solid #dc3545;
   background-color: transparent;
}
.action-popup .page-nav {
   margin: 0;
}

.switch {
   display: inline-block;
   position: relative;
   width: 37px;
   height: 22px;
   border-radius: 20px;
   background: #e3e3e3;
   border: 1px solid #aaa6a0;
   transition: background 0.28s cubic-bezier(.4,0,.2,1);
   vertical-align: middle;
   cursor: pointer;
   font-size: 14px;
   line-height: 28px;
   color: #6d90a9;
   font-weight: 600;
   padding: 0 8px;
   text-align: right
}

.switch::before {
   content: '';
   position: absolute;
   top: -1px;
   left: 0px;
   width: 22px;
   height: 22px;
   background: #fff;
   border-radius: 100%;
   border: 1px solid #aaa6a0;
   transition: left 0.28s cubic-bezier(.4,0,.2,1),background 0.28s cubic-bezier(.4,0,.2,1),box-shadow 0.28s cubic-bezier(.4,0,.2,1)
}

.switch:active::before {
   box-shadow: 0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(128,128,128,.1)
}

.toggle-no+.switch {
   background: #79a22e;
   text-align: left
}

.toggle-no+.switch::before {
   left: 15px;
   background: #fff
}

.toggle-no+.switch:active::before {
   box-shadow: 0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(0,150,136,.2)
}
.page-loader {
   background-image: url(../img/loading-gif.gif);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 30px;
   position: relative
}

.page-loader:after {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgb(186 186 186 / 20%);
   z-index: 1
}
.main-page-loader {
   position: relative
}
.main-page-loader:after {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgb(109 107 107 / 20%);
   background-image: url(../img/loading-gif.gif);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 30px;
   z-index: 1
}
thead {
   background-color: #b5c1c124;
}
.btn-edit {
   max-width: 45px;
   padding: 3px 3px;
   border-radius: 4px;
}
/** block dt 5**/
.block-with-dt-5 .twi-successful, .block-with-dt-5 .twi-error {
   color: #6e7985;
}
.block-with-dt-5 .dt-block {
   margin: 10px 0 0;
}
.block-with-dt-5 .dt-block>* {
   font-size: 14px;
}
.block-with-dt-5 .dt-block {
   margin: 10px 0 0;
   background-color: var(--bs-gray-200);
   padding: 10px;
   border-radius: 4px;
}
.block-with-dt-5 .dt-block b {
   min-width: 134px;
   display: inline-block;
}
.basic-details-card li {
   font-weight: 600;
   font-size: 14px;
   padding: 6px 10px 6px;
   display: flex;
   align-items: center;
}
.basic-details-card li * {
   font-size: 13px;
   line-height: 23px;
   font-weight: 400;
   color: #212830;
}
.basic-details-card li:nth-child(odd) {
   background: #f5f6f6;
}
.basic-details-card li .title {
   max-width: 130px;
   width: 100%;
   color: #707070;
}
.basic-details-card li .value {
   font-weight: 600;
   color: #000;
}
.ul-table-item-data {
   border-top: 1px solid #e7e8ea;
   padding: 15px 0 0;
   margin-top: 15px;
}
.ul-table-item-data ul li {
   font-size: 15px;
   padding: 8px 10px;
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #dddddd;
}
.ul-table .ul-table-item-data ul {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border: 1px solid #e7e8ea;
   border-radius: 4px;
}
.ul-table .ul-table-item-data ul li * {
   font-size: 15px;
}
.ul-table .ul-table-item-data ul li .title {
   max-width: 53%;
   width: 100%;
}
.issue-with-item .title {
   font-size: 15px;
   padding: 8px 10px;
   border-bottom: 1px solid #e7e8ea;
}
.issue-with-item .text {
   padding: 12px 15px 15px;
   font-size: 15px;
}
.ul-table-item-data .card-body {
   padding: 0;
}
.download-icon {
   background-image: url(../img/download_icon.svg);
   background-size: 15px;
}
.inventory-search-icon {
   background-image: url(../img/inventory_lookup.svg);
   background-size: 15px;
}
.tick-icon {
   height: 26px;
   background-repeat: no-repeat;
   background-image: url(../img/tick_icon.svg);
   background-size: 12px;
   background-position: center;
   margin: 0;
}
.ul-table-item-data {
   border-top: 0;
   padding: 0;
   margin-top: 15px;
}
.ul-table-item-data:first-child {
   margin: 0;
}
.ul-table-item-data ul li:nth-child(odd) {
   border-right: 1px solid #dddddd;
}
.ul-table-item-data ul li:last-child {
   border-bottom: 0;
}
.ul-table-item-data .col-4 {
   width: calc(50% - 45px);
}
.ul-table-item-data .col-2 {
   width: 45px;
}
.ul-table-item-data .action-btn:hover {
   background-color: #f3f5f9 !important;
}

.ul-table .ul-table-item-data ul li .title {
   max-width: 100%;
   width: 100%;
}
.ul-table-wrapper .issue-with-item .text {
   padding: 8px 0;
   font-size: 15px;
}
.ul-table-wrapper .issue-with-item .title {
   padding: 0 0 8px;
}
.ul-table-wrapper .ul-table .ul-table-item-data ul li div:first-child {
   width: 280px !important;
}
.ul-table-wrapper .ul-table .ul-table-item-data ul li div:last-child {
   width: calc(100% - 280px);
   color: #000;
}
.ul-table-wrapper .ul-table .text {
   padding-bottom: 10px;
}
.ul-table-wrapper .ul-table-item-data ul li {
   display: flex;
   flex: 0 0 50%;
}
.ul-table-wrapper .ul-table-item-data ul li:last-child {
   border: 0;
   flex: 0 0 100%;
}
.ul-table-wrapper .ul-table .ul-table-item-data ul {
   display: flex;
   flex-wrap: wrap;
   background-color: #b5c1c124;
}
.ul-table-wrapper .ul-table-item-data ul li {
   padding: 0;
}
.ul-table-wrapper .ul-table .ul-table-item-data ul li div:first-child, .ul-table-wrapper .ul-table .ul-table-item-data ul li div:last-child {
   padding: 8px 10px;
}
.ul-table-wrapper .ul-table .ul-table-item-data ul li div:first-child {
   border-right: 1px solid #e7e8ea;
   font-weight: 400;
   color: #727070;
}
.status-with-comment .col-6:first-child {
   padding-right: 25px;
}
.status-with-comment .col-6:last-child {
   padding-left: 25px;
}
.status-block h6, .comment-block h6 {
   margin-bottom: 6px;
}
.status-block, .comment-block {
   margin-bottom: 10px;
}
.comment-block textarea {
   width: 100%;
   max-height: 100px;
   border: 1px solid #dadde2;
   border-radius: 4px;
}
.custom-input {
   font-size: 14px;
   cursor: pointer;
}
.custom-input input {
   margin-right: 5px;
}
.status-with-comment .action {
   margin-top: 15px;
}
.status-with-comment-info ul {
   display: flex;
   margin: 0 -12px;
   padding: 14px 0;
   flex-wrap: wrap;
   position: relative;
}
.status-with-comment-info ul span {
   font-size: 14px;
   line-height: 18px;
}
.status-with-comment-info ul li {
   padding: 0 12px;
   line-height: 18px;
}
.status-with-comment-info ul li:last-child {
   border-right: 0;
   flex: 0 0 100%;
   margin: 4px 0 0;
}
.status-with-comment-info ul span.bold {
   font-weight: 600;
   color: #4e4e4e;
}
.status-with-comment-info .notification-preference .bold {
   font-weight: 600;
   color: #4e4e4e;
}
.status-with-comment-info ul li:nth-child(3) {
   border-right: 0;
}
.status-with-comment-info ul li:last-child span {
   color: #595959;
   font-weight: 430;
}
.hide-customer-field, .hide-notification-field {
   display:none;
}
.hide-customer-value, .hide-notification-value {
   display:none;
}
.customer-info-card .customer-info-field {
   height: 28px;
   font-size: 12px !important;
}
.customer-info-card select {
   padding: 0 5px !important;
}
.grey-title {
   color: #707070;
}
.service-status-btn {
   padding: 2px 8px;
   border-radius: 5px;
   font-size: 12px;
   text-transform: uppercase;
   width: fit-content;
   display: inline-block;
   text-align: center;
   color: #212830;
   font-weight: bold;
   line-height: 17px;
}
.status-dot-green {
   display: inline-block;
   width: 8px;
   height: 8px;
   margin-right: 6px;
   border-radius: 50%;
   background-color: #185b00;
   position: relative;
   top: -1px;
}
.status-dot-red {
   display: inline-block;
   width: 8px;
   height: 8px;
   margin-right: 6px;
   border-radius: 50%;
   background-color: #e22626;
   position: relative;
   top: -1px;
}
.service-status-btn.status-green {
   background: #d0e5a9 none repeat scroll 0 0;
   border: 1px solid #5b8116;
   color: #185b00;
}
.service-status-btn.status-blue {
   background: #E5F7FE none repeat scroll 0 0;
   border: 1px solid #006bb4;
   color: #006bb4;
}
.service-status-btn.status-red {
   background: #ffe3e3 none repeat scroll 0 0;
   border: 1px solid #e22626;
   color: #e22626;
}
.service-status-btn.status-orange {
   background: #ffe5c7de none repeat scroll 0 0;
   border: 1px solid #e25004;
   color: #e25004;
}
.service-status-btn.status-gray {
   background: #e5e4e4 none repeat scroll 0 0;
   border: 1px solid #5b5959;
   color: #5b5959;
}
.service-status-btn.status-violet {
   background: #e8e0f6 none repeat scroll 0 0;
   border: 1px solid #590ddf;
   color: #590ddf;
}
.wo-summary-flex {
   display: flex;
}
.hide-customer-value + .row {
   width: 100%;
}
.btn.btn-condensed {
   padding: 5px 10px;
   font-size: 12px;
}
.btn.btn-semi-condensed {
    padding: 1px 6px;
    font-size: 12px;
}
.btn.btn-x-condensed {
   padding: 3px 7px;
   font-size: 10px;
}

/* Inventory Lookup Popup - Start */
.inventory-lookup-details {
   display: none;
}
.active .inventory-lookup-details {
   display: flex;
}
/* Inventory Lookup Popup - End */
/*estimate*/

.estimate-popup .card-header {
   padding: 12px 30px 12px 30px;
   justify-content: center;
}
.inventory-lookup span {
   text-decoration: underline;
   color: #637a99;
   font-size: 15px;
   text-decoration: underline;
   cursor: pointer;
   transition: 0.2s all;
}
.inventory-lookup span:hover {
   color: #3a4656;
}
.estimate-popup table {
   border: 1px solid #D2D2D2;
}
.estimate-popup table tbody td, .estimate-popup .table thead th, .estimate-popup .table tfoot td {
   font-weight: 400;
   font-size: 15px;
   color: #000;
   padding: 8px 14px;
}
.estimate-popup .table thead th, .estimate-popup .table tfoot td {
   background-color: #F3F3F3;
}
.estimate-popup table tbody td {
   color: #6e6e6e;
   border-color: #E7E8EA;
}
.estimate-popup tfoot tr td, .estimate-popup tfoot {
   border: 0 !important;
}
.estimate-popup.popup .close-btn {
   top: 17px;
   right: 12px;
}
.estimate-popup .btn-close {
   width: 18px;
   height: 18px;
}
.estimate-popup table tbody #temp-row td {
   padding: 12px 14px;
}
.estimate-popup .bold {
   font-weight: 600 !important;
   color: #000;
}
.estimate-popup .card-body {
   padding: 15px 20px 20px;
   height: calc(100% - 53px);
   overflow: auto;
}
.estimate-popup table tbody tr:hover {
   background-color: inherit;
}
.estimate-popup .table-wrapper {
   display: grid;
   grid-template-columns: 1fr 375px;
   align-items: flex-start;
   gap: 20px;
}
.estimate-popup .popup-content {
   max-width: 1450px;
   overflow: hidden;
   height: initial;
}
table.summary th {
   text-align: center;
}
.value-with-input {
   display: grid;
   grid-template-columns: 10px 1fr;
   align-items: center;
   gap: 5px;
}
.value-with-input input {
   width: 100%;
   border: 1px solid #D3D3D3;
   border-radius: 3px;
   padding: 2px 8px;
   font-size: 14px;
   min-height: 27px;
   line-height: 20px;
}
.estimate-popup table tbody .value-input-wrapper td {
   padding-top: 5px;
   padding-bottom: 5px;
}
.item-details-row {
   display: grid;
   grid-template-columns: 20% 48% 17% 14% 14% 12%;
   width: 100%;
   border: 0;
}
.estimate-popup tbody, .estimate-popup .table thead th {
   border: 0 !important;
}
.estimate-popup table.table tr {
   cursor: pointer;
}
.estimate-popup table tbody tr:last-child td {
   border: 0;
}
.estimate-popup .popup-content .card-box {
   border-radius: 4px;
}
.estimate-popup .table tfoot td:first-child {
   width: 80%;
}
.estimate-popup .table tfoot td:last-child {
   width: 20%;
}
.estimate-popup table.item-details-table tbody td:first-child, .estimate-popup .table.item-details-table thead th:first-child, .estimate-popup .table.item-details-table tfoot td:first-child {
   padding-left: 14px;
   padding-right: 5px;
}
.estimate-popup table.item-details-table tbody td:last-child, .estimate-popup .table.item-details-table thead th:last-child, .estimate-popup .table.item-details-table tfoot td:last-child {
   padding-left: 5px;
   padding-right: 14px;
}
.estimate-popup .table.item-details-table tfoot td:last-child {
   padding-left: 0;
}
.estimate-popup table.item-details-table tbody td, .estimate-popup .table.item-details-table thead th, .estimate-popup .table.item-details-table tfoot td {
   padding-left: 5px;
   padding-right: 5px;
}
.estimate-popup table.item-details-table tbody td {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}
.popup-estimate-overlay {
   position: relative;
}
.inventory-lookup {
   text-align: center;
   margin-bottom: 20px;
}
.inventory-lookup-details {
   position: absolute;
   left: 0;
   right: 0;
   top: 55px;
   height: -webkit-fill-available;
   z-index: 9;
   display: none;
}
.inventory-lookup-details-main {
   max-width: 1000px;
   margin-inline: auto;
   background: #F5F9FC;
   padding: 20px;
   box-shadow: 0 0 18px 5px rgba(0,0,0,0.1);
   border: 1px solid #e4f3fd;
   border-radius: 4px;
   height: calc(100% - 20px);
   overflow: hidden;
   position: relative;
}
.popup-estimate-overlay:after {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
   background: rgba(255,255,255,0.7);
   z-index: 1;
}
.inventory-search {
   display: flex;
}
.inventory-search .input-field {
   width: calc(100% - 48px);
   margin-right: 10px;
}
.inventory-search .action {
   margin: 0;
   width: 86px;
   height: 38px;
   display: flex;
   gap: 10px;
}
.inventory-search .input-field input {
   border: 1px solid #dadada;
   border-radius: 3px;
   padding: 6px 10px;
   font-size: 15px;
   line-height: 24px;
   width: 100%;
}
.inventory-search .action .btn {
   width: 38px;
   height: 100%;
   border-radius: 3px;
   padding: 0;
   background-image: url(../img/search-icon-white.svg);
   background-size: 20px;
   background-repeat: no-repeat;
   background-position: center;
   background-color: #eb5201;
   font-size: 0;
}
.inventory-search-data {
   margin-top: 8px;
   border-radius: 3px;
   overflow: auto;
   max-height: calc(100% - 44px);
   height: auto;
}

.inventory-search-data .item-details-row {
   grid-template-columns: 4% 16% 38% 11% 10% 12% 9%;
}
.inventory-search-data input[type=checkbox]:before {
   border-color: transparent;
   border-style: solid;
   width: 4px;
   height: 9px;
   border-width: 0 1px 1px 0;
   margin: -1px -1px 0 0;
}
.inventory-search-data input[type=checkbox]:checked:before {
   border-color: #fff;
}
.inventory-search-data input[type="checkbox"] {
   border-radius: 3px;
}
.estimate-popup .inventory-search-data .table.item-details-table thead th {
   padding-top: 8px;
   padding-bottom: 10px;
}
.estimate-popup .inventory-search-data .table.item-details-table thead th input[type="checkbox"] {
   margin-top: 4px;
}
.estimate-popup .inventory-search-data .table.item-details-table thead th {
   border-bottom: 1px solid #dfdfdf !important;
}
.estimate-popup .inventory-search-data .table.item-details-table tfoot td {
   padding: 0;
}
.estimate-popup .inventory-search-data .table.item-details-table tfoot td a {
   background: #eb5202;
   color: #fff;
   width: 100%;
   display: block;
   padding: 9px 10px;
}
.inventory-search-data  tfoot td a span {
   padding-left: 17px;
   background-image: url(../img/add-icon-white.svg);
   background-position: left center;
   background-repeat: no-repeat;
   background-size: 10px;
   color: #fff;
   text-decoration: none;
   font-size: 14px;
}
.inventory-search .action .btn.inventory-close {
   width: 38px;
   background-image: url(../img/close-icon-white.svg);
   background-size: 15px;
}
.estimate-popup .inventory-search-data table.item-details-table tbody td {
   background-color: #fff;
}
.estimate-popup .inventory-search-data table tbody td, .estimate-popup .inventory-search-data .table thead th, .estimate-popup .inventory-search-data .table tfoot td {
   font-size: 14px;
}
.estimate-popup .inventory-search-data .table.item-details-table tfoot td a:hover, .inventory-search .action .btn:hover {
   background-color: #d54900;
}

.estimate-popup .inventory-search-data table thead {
   position: sticky;
   top: 0;
   z-index: 1;
}
.estimate-popup .inventory-search-data table tfoot {
   position: sticky;
   bottom: 0;
}
.estimate-popup ::-webkit-scrollbar {
   width: 6px
}
.estimate-popup ::-webkit-scrollbar-track {
   background-color: transparent;
   -webkit-border-radius: 10px;
   border-radius: 10px
}
.estimate-popup ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #ccc
}
.qty-box {
   display: flex;
   justify-content: center
}
.qty-box .quantity-btn {
   display: block;
   outline: 0;
   width: 28px;
   height: 28px;
   border: 1px solid #ccc;
   background: no-repeat;
   border-right: 0;
   cursor: pointer;
   font-size: 0;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   background-color: #f3f3f3;
}
.qty-box .quantity-btn.plus {
   background-image: url(../img/add-icon-black.svg);
   background-size: 10px;
}
.qty-box input {
   border: 1px solid #ccc;
   font-size: 15px;
   padding: 4px;
   height: 28px;
   text-align: center;
   width: 40px
}
.qty-box .quantity-btn.plus {
   border-right: 1px solid #ccc;
   border-left: 0
}
.qty-box .quantity-btn.min:before {
   position: absolute;
   content: '';
   width: 8px;
   height: 2px;
   background: #000;
   left: 0;
   right: 0;
   top: 13px;
   left: 9px;
}
.estimate-popup {
   display: none;
}
.view-estimate-popup .item-details-row {
   display: grid;
   grid-template-columns: 25% 54% 16% 15% 15%;
   width: 100%;
   border: 0;
}
.estimate-popup .btn-wrapper {
   text-align: right;
   margin-top: 20px;
}

.estimate-popup table.summary td:first-child {
   width: 50%;
}
.estimate-popup table.summary td:last-child {
   width: 50%;
}
.estimate-popup.view-estimate-popup .table tfoot td {
   width: initial;
}
.estimate-popup.view-estimate-popup .table.item-details-table tfoot td:last-child {
   padding-left: 5px;
}
.view-estimate-popup .item-details-row {
   grid-template-columns: 20% 38% 12% 15% 15%;
}
.inventory-lookup-details-main {
   width: 96%;
}
.inventory-search-wrapper .add-inventory {
   display: none;
}
.inventory-search-data tfoot td a span:hover {
   color: #fff;
}
.popup-content-wrapper {
   position: relative;
}
.estimate-popup.view-estimate-popup .btn-wrapper {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
}
#temp-item-row td {
   padding: 10px 15px;
}
input.unit-price-input, input.margin-input {
   width: 90%;
   border: 1px solid #D3D3D3;
   border-radius: 3px;
   padding: 2px 6px;
}
.summary-wrapper table.summary {
   margin: 0;
}
.value-with-input span {
   line-height: 28px;
}
.estimate-popup table td .help-block {
   line-height: 12px;
   padding-top: 3px;
   font-size: 10px !important;
}
.estimate-popup table {
   margin: 0;
}
.wo-summary-row h6 {
   width: 200px;
   font-size: 13px;
}
.wo-summary > * {
   padding-bottom: 0;
   margin-bottom: 6px;
}
.field-condensed {
   height: 30px;
   padding: 4px 8px !important;
   font-size: 12px !important;
}
.field-x-condensed {
   height: 26px;
   font-size: 12px !important;
   padding: 4px 5px !important;
   width: 125px;
   border: 1.5px solid #b2b2b2 !important;
}
.field-x-condensed::placeholder {
   font-size: 10px;
   padding: 33px 0px !important;
}
.field-xx-condensed {
   height: 26px;
   font-size: 12px !important;
   padding: 0px 5px !important;
   width: 80px;
   border: 1.5px solid #b2b2b2 !important;
}
.field-xx-condensed::placeholder {
   font-size: 10px;
   padding: 10px 0px !important;
}
.update-status-dropdown {
   display: grid;
   grid-template-columns: 1fr 102px;
   width: calc(100% - 200px);
}
.update-allocation-dropdown {
   display: grid;
   grid-template-columns: 1fr 200px;
}
.value.add-estimate-btn {
   display: flex;
   justify-content: space-between;
}
.update-assign-user-wrapper .update-status-dropdown {
   grid-template-columns: 1fr 130px;
}
.update-service-status-wrapper .update-status-dropdown {
   grid-template-columns: 1fr 102px;
}
.bold-text {
   font-weight: 600;
   font-size: 13px;
   color: #000;
}
.fluid-btn {
   width: auto;
   border-radius: 4px;
   background-position: 8px center;
   padding: 2px 6px 2px 29px;
   cursor: pointer;
   font-size: 13px !important;
   border: 1px solid #000;
   height: 28px;
   font-weight: 500;
   background-repeat: no-repeat;
   transition: 0.3s all;
   display: inline-block;
   vertical-align: middle;
   line-height: 20px;
}
.fluid-btn:hover {
   background-color: #f3f5f900 !important;
}
.fluid-green {
   color: #317D16 !important;
   border: 1px solid #A5C66A !important;
   background-color: #E5EFD3 !important;
}
.fluid-blue {
   color: #2e6fa7 !important;
   border: 1px solid #8bbeeb !important;
   background-color: #c2e0f9 !important;
}
.fluid-orange {
   color: #eb5202 !important;
   border: 1px solid #eb5202 !important;
   background-color: #ffe8dde3 !important;
}
.fluid-semi-condensed {
   padding: 0px 8px 0px 30px;
   height: 24px;
   width: auto;
   font-size: 11px !important;
   line-height: 21px;
}
.fluid-condensed {
   padding: 0px 3px 0px 27px;
   height: 24px;
   width: 90px;
   font-size: 11px !important;
}
.dollar-icon {
   background-image: url(../img/dollar_icon.svg);
   background-size: 15px;
}
.send-icon {
   background-image: url(../img/send_icon.svg);
   background-size: 15px;
}
.clock-icon {
   background-image: url(../img/clock_icon.svg);
   background-size: 14px;
}
.no-icon {
   padding: 2px 6px 2px 6px;
}
.status-color-card {
   display: grid;
   grid-template-columns: 1fr auto;
   column-gap: 10px;
   align-items: baseline;
}
.status-color-card .service-status-btn {
   padding: 9px 10px;
   line-height: 16px;
}
.basic-details-card.dynamic-variables-card {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2px;
}
.basic-details-card.dynamic-variables-card .title {
   width: 40%;
   max-width: initial;
}
.basic-details-card.dynamic-variables-card .value {
   width: 60%;
   padding-left: 12px;
   border-left: 1px solid #d8d8d8;
   font-style: italic;
   background-color: #fbfbfb;
   font-weight: 400;
}
.basic-details-card.dynamic-variables-card li * {
   font-size: 15px;
   padding: 5px 10px;
}
.basic-details-card.dynamic-variables-card li {
   padding: 0;
   background: #f5f6f6;
   border: 1px solid #d8d8d8;
}

/* Search box - start */
.search-box-wrapper {
   max-width: 380px;
   width: 100%;
}
.search-box {
   display: flex;
   width: 100%;
   gap: 8px;
}
.search-box>.input-field {
   width: calc(100% - 68px);
}
.search-box>.action {
   display: initial;
   margin: 0;
   width: 34px;
   height: 34px;
}
.search-box>.action .btn {
   width: 100%;
   height: 100%;
   border-radius: 3px;
   padding: 0;
   background-image: url(../img/search-icon-white.svg);
   background-size: 18px;
   background-repeat: no-repeat;
   background-position: center;
   background-color: #506fd9;
   font-size: 0;
}
.search-box>.action.scan-btn .btn {
   background-image: url(../img/scan-icon-white.svg);
   background-size: 25px;
}
.search-box>.action .btn:hover {
   background-color: #445eb8;
}
.search-box>.input-field input {
   width: 100%;
   height: 34px;
   border: 1px solid #d9d9d9;
   border-radius: 3px;
   padding: 6px 10px;
   font-size: 14px;
   line-height: 24px;
}
.search-box-wrapper .search-result thead {
   background-color: #b5c1c124;
}
.search-box-wrapper table th:first-child, table td:first-child {
   padding-left: 14px;
}
.scan-popup .popup-content {
   max-width: 1000px;
}
.scan-popup .popup-content .card-box {
   border-radius: 4px;
}
.scan-popup .card-header {
   padding: 12px 30px 12px 30px;
   justify-content: center;
}
.scan-popup .popup .close-btn {
   top: 16px;
   right: 12px;
}
.scan-popup .btn-close {
   width: 18px;
   height: 18px;
}
.scan-popup #file-uploader {
   border: 1px solid #d9d9d9;
   border-radius: 3px;
   padding: 5px 5px;
   font-size: 15px;
   line-height: 24px;
   width: 100%;
}
.scan-popup input[type=file]::file-selector-button {
 margin-right: 10px;
 border: none;
 background: #506fd9;
 padding: 6px 15px;
 border-radius: 3px;
 color: #fff;
 cursor: pointer;
 transition: background .2s ease-in-out;
}
.scan-popup input[type=file]::file-selector-button:hover {
 background: #0d45a5;
}
.scan-popup .btn-block {
   text-align: center;
   margin-top: 15px;
   display: flex;
   justify-content: center;
   gap: 10px;
}
.scan-popup #ocr-img {
   font-size: 14px;
   margin: 12px 0 0;
}
.scan-popup #result {
   margin-top: 12px;
}
.scan-popup #result span {
   margin-bottom: 5px;
   display: inline-block;
}
.scan-popup #scanned_result {
   font-size: 15px;
}
.search-box-wrapper .search-result {
   display: none;
}
/* Search box - end */

/* Ajax loader - start */
.inventory-lookup-details-main.ajax-loader:after {
   position: absolute;
   content: '';
   left: 0;
   right: 0;
   background-color: rgba(0,0,0,0.2);
   width: 100%;
   height: 100%;
   top: 0;
   background-image: url(../img/loading-gif.gif);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 30px;
   z-index: 9;
}
/* Ajax loader - end */
.inventory-search .input-field input:focus-visible {
   outline: 0;
   border: 1px solid #506fd9;
}
.table.wo-search-table {
   margin-bottom: 0;
}
.search-box-wrapper .search-result {
   position: absolute;
   top: 60px;
   background-color: #fff;
   transition: all 0.3s;
   border: 1px solid #d1d1d1;
   width: auto;
   box-shadow: 0 0 16px 5px rgba(0,0,0,0.1);
}
.main.search-fade {
   opacity: 0.4;
}
.search-box-wrapper .search-result .wo-search-error {
   font-size: 15px;
   color: #000;
   text-align: center;
   padding: 10px;
}
.search-input-loader {
   position: absolute;
   right: 2px;
   top: 2px;
   width: 30px;
   height: 30px;
   background-color: #fff;
   background-image: url(../img/loading-gif.gif);
   background-size: 18px;
   background-repeat: no-repeat;
   background-position: center;
   display: none;
}
.search-result-point {
   position: absolute;
   top: -12px;
   width: 16px;
   height: 16px;
   background-image: url(../img/box-indicator.svg);
}
.caution-icon {
   background-image: url(../img/sync_error_icon.svg);
   width: 16px;
   height: 16px;
   display: inline-block;
   background-size: contain;
   background-repeat: no-repeat;
   margin-left: 10px;
   position: relative;
   top: 2px;
}
.spire-sync-error-msg {
   font-size: 13px;
   color: #B30703;
   background: #ffeeee;
   border-radius: 4px;
   font-weight: 600;
   border: 0;
   padding: 6px 10px;
}
.spire-sync-error-msg.compact {
   padding: 3px 10px;
}
.spire-sync-error-msg a {
   font-size: 13px;
   color: #B30703;
   background: #ffeeee;
   font-weight: 700;
   border: 0;
   border-bottom: 1px dashed;
   line-height: 14px;
    display: inline-block;
}
/* Sync error message - start */
.spire-sync-error-msg.dotted {
   border: 1px dotted;
}
.spire-sync-error-msg.dashed {
   border: 1px dashed;
}
.spire-sync-error-msg.no-border {
   border: 0;
}
.spire-sync-error-msg.red, .spire-sync-error-msg.red a {
   border-color: #B30703;
   color: #B30703;
   background: #ffeeee;
}
.spire-sync-error-msg.green, .spire-sync-error-msg.green a {
   background: #d0e5a9 none repeat scroll 0 0;
   border-color: #5b8116;
   color: #185b00;
}
.spire-sync-error-msg.blue, .spire-sync-error-msg.blue a {
   background: #c2e0f9 none repeat scroll 0 0;
   border-color: #2e6fa7;
   color: #2e6fa7;
}
.spire-sync-error-msg.gray, .spire-sync-error-msg.gray a {
   background: #e5e4e4 none repeat scroll 0 0;
   border-color: #5b5959;
   color: #5b5959;
}
/* Sync error message - end */
.sync-icon {
   background-image: url(../img/sync_icon.svg);
}

/* Admin tooltip - start */
.admin-tooltip {
   position: absolute;
   min-width: 160px;
   display: none;
   padding: 3px 2px 3px;
   border-radius: 4px;
}
.admin-tooltip:before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   z-index: 2;
   border: calc(15px / 2) solid transparent;
   left: 12px;
   top: 100%;
   margin-inline: auto;
   text-align: center;
   right: 0;
   width: 0;
   height: 0;
}
.admin-tooltip:after {
   position: absolute;
   content: '';
   width: 0;
   height: 0;
   bottom: -7px;
   left: 12px;
   right: 0;
   margin-inline: auto;
   content: "";
   position: absolute;
   display: block;
   z-index: 1;
   border: calc(13px / 2 + 2px) solid transparent;
   bottom: -7px;
   left: 12px;
   top: 100%;
}
.admin-msg-tooltip {
   left: -69px;
   text-align: center;
   bottom: 28px;
   font-size: 13px;
   font-weight: 600;
   color: #e12626;
   border: 1px solid #b40000;
   background: #f9e1e1;
}
.admin-msg-tooltip:before {
   border-top-color: #f9e1e2;
}
.admin-msg-tooltip:after {
   border-top-color: #b40000;
}
.admin-labor-tooltip {
   left: -69px;
   text-align: center;
   bottom: 32px;
   font-weight: 400;
   font-size: 13px;
   color: #6e6e6e;
   border: 1px solid #acaaaa;
   background: #F3F3F3;
}
.admin-labor-tooltip:before {
   border-top-color: #F3F3F3;
}
.admin-labor-tooltip:after {
   border-top-color: #acaaaa;
}
/* Admin tooltip - End */

.caution-icon-wrapper {
   display: inline-block;
   position: relative;
}
.caution-icon-wrapper.show .admin-msg-tooltip {
   display: block;
}
.labor-popup-container {
   position: relative;
}
.labor-popup-container.show .admin-labor-tooltip {
   display: block;
}
.labor-tooltip-field {
   padding-top: 4px;
   padding-left: 4px;
   padding-right: 4px;
   gap: 6px;
}
.labor-tooltip-msg {
   padding-left: 6px;
   padding-right: 6px;
}
.labor-tooltip-msg span {
   text-align: left;
   font-size: 10px;
   font-weight: 600;
}
.diagnostic_completed_status {
   font-size: 12px;
   width: 25px;
}
.send-quote-popup .popup-content {
   max-width: 800px;
}
.send-quote-popup .notification-pref-table-wrapper .table th {
   text-align: center;
}
.send-quote-popup .estimate-popup table.summary td:last-child {
   width: 30%;
}
.send-quote-popup table.summary td:first-child {
   width: 60%;
}
.confirm-estimate-popup .card-body {
   padding: 30px 20px;
}
.notes-quote-summary .table-wrapper {
   padding-left: 0;
}
.notes-quote-summary table {
   border: 1px solid #D2D2D2;
}
.notes-quote-summary table {
   margin: 0;
}
.notes-quote-summary table.table tr {
   cursor: pointer;
}
.notes-quote-summary table tbody td, .notes-quote-summary .table thead th, .notes-quote-summary .table tfoot td {
   font-weight: 400;
   font-size: 15px;
   color: #000;
   padding: 8px 14px;
}
.notes-quote-summary .table thead th, .notes-quote-summary .table tfoot td {
   background-color: #F3F3F3;
}
.notes-quote-summary tbody, .notes-quote-summary .table thead th {
   border: 0 !important;
}
.notes-quote-summary table tbody td {
   color: #6e6e6e;
   border-color: #E7E8EA;
}
.notes-quote-summary table.summary td:first-child {
   width: 50%;
}
.notes-quote-summary table.summary td:last-child {
   width: 50%;
   text-align: right;
}
.notes-quote-summary .bold {
   font-weight: 600 !important;
   color: #000;
}
.notes-quote-summary tfoot tr td, .notes-quote-summary tfoot {
   border: 0 !important;
}
.notes-quote-summary table.summary td:first-child {
   width: 50%;
}
.notes-quote-summary .table thead th {
   text-align: center;
}
.status-with-comment-info {
   max-height: 490px;
   overflow-y: auto;
   overflow-x: hidden;
}
.status-with-comment-info ul:last-child {
   border: none;
}
ul.note-table-item {
   margin: 0 !important;
   border-bottom: 1px solid #e7e8ea;
}
ul.note-table-item:first-child, ul.note-table-item:last-child {
   padding-left: 0;
}
ul.note-table-item li:first-child, ul.note-table-item li:last-child {
   padding-left: 0;
}
.diagnostic-btn-wrapper .switch-btn {
   border: 1px solid #d9d9d9;
   border-radius: 3px;
   padding: 8px 7px;
}
.diagnostic-btn-wrapper .diagnostic-completed-wrapper {
   flex-grow: 1;
}
.diagnostic-btn-wrapper .twi-subtitle {
   font-size: 12px;
   line-height: 18px;
   flex-grow: 1;
}

.diagnostic-btn-wrapper .switch {
   height: 18px;
   width: 34px;
}
.diagnostic-btn-wrapper .switch::before {
   height: 18px;
   width: 18px;
}
.diagnostic-btn-wrapper button#save-estimate-btn {
   padding: 8px 10px;
}
.diagnostic-btn-wrapper .btn-wrapper {
   margin-left: 10px;
}
.ps-note {
   margin-top: 15px;
   background: #f5f6f6;
}
.ps-note-first {
   padding: 6px 8px 5px;
   display: inline-block;
   line-height: 18px;
}
.ps-note-second {
   padding: 6px 8px 8px;
   border-radius: 4px;
   font-size: 14px;
   font-weight: 400;
   width: auto;
   display: inline-block;
   line-height: 18px;
   color: #686868;
   font-weight: 500;
}
.grid-text-with-input .text-with-input {
   display: flex;
   gap: 10px;
   padding: 0;
}
.grid-text-with-input .text-with-input .item {
   border-bottom: 0;
   gap: 10px;
   flex-wrap: wrap;
   flex: 1;
   padding: 0;
}
.grid-text-with-input .text-with-input:last-child {
   border-bottom: 1px solid #e7e8ea;
   margin-top: 15px;
   padding-bottom: 15px;
}
.grid-text-with-input .text-with-input .item:first-child {
   padding-top: 0;
}
.grid-text-with-input .text-with-input .item .item-text {
   flex: 1 1 40%;
   text-align: center;
}

.status-with-comment-info .notification-preference {
   display: flex;
   width: 100%;
}
.status-with-comment-info .notification-preference ul {
   display: grid;
   grid-template-columns: 1fr 100px 94px 84px;
   align-items: center;
}
.status-with-comment-info .notification-preference ul li:last-child {
   flex: 0 0 40%;
}
.wrong-icon,.right-icon {
   width: 16px;
   height: 16px;
   display: inline-block;
   background-size: contain;
   background-repeat: no-repeat;
   margin-left: 10px;
   position: relative;
   top: 2px;
}
.wrong-icon {
   background-image: url(../img/wrong-icon.svg);
}
.right-icon {
   background-image: url(../img/right-icon.svg);
}
.pipe-line {
   border-right: 1px solid #ccc !important;
}
.status-with-comment-info .notification-preference ul li:last-child {
   margin: 0;
}
.status-with-comment-info ul li:first-child {
   border-right: 0;
}
ul.note-content-item:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 12px;
   right: 4px;
   width: 97%;
   border-bottom: 1px solid #e7e8ea;
}
ul.note-content-item:last-child:after {
   content: none;
}

/*Ready for pickup*/
.ready-for-pickup-wrapper {
   padding: 15px;
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}
.ready-for-pickup-wrapper .block-wrapper {
   flex: 0 0 calc(50% - 8px);
   padding: 15px;
   background-color: #F8FCFF;
   border: 1px solid #C8DAE8;
   border-radius: 6px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.ready-for-pickup-wrapper .fieldset-block {
   flex: 0 0 calc(50% - 8px);
}
.ready-for-pickup-wrapper .fieldset-block:first-child {
   flex: 1 1 100%;
   margin-bottom: 14px;
}
.ready-for-pickup-wrapper .fieldset-block .h6 {
   font-size: 15px;
   font-weight: 500;
   line-height: 1.4;
   color: #212830;
}
.ready-for-pickup-wrapper textarea.form-control {
   min-height: 238px;
}

.item-pickup-wrapper input {
   width: 300px;
   border: 1px solid #d9d9d9;
   border-radius: 3px;
   padding: 6px 10px;
   font-size: 14px;
   line-height: 24px;
   height: 36px;
   margin-right: 8px;
}

.item-pickup-box a.btn {
   height: 36px;
}
.warranty_customer {
   display: none;
   font-size: 12px;
}
.warranty_approval_wrapper {
   display: none;
   border: 1px dotted black;
   padding: 0px 8px;
}

.warranty_work_wrapper {
   display: flex;
   align-items: center;
   margin-left: auto;
   margin-right: 3px;
}

.warranty_work_wrapper .title {
   font-size: 14px;
   line-height: 23px;
   margin-right: 12px;
}

.warranty_work_wrapper .switch-btn-text {
   font-size: 13px;
   line-height: 23px;
   font-weight: 400;
   color: #212830;
}
.wo_pickup_response {
   margin: 0;
   color: #0e850e;
   font-weight: 500;
   display: flex;
   align-items: center;
   height: 100%;
   margin-left: 20px;
}
.wo_pickup_response.error {
   color: #c02723;
}
.item-delivery-selection-popup form {
   display: grid;
   align-items: center;
   grid-template-columns: 1fr 50px;
   gap: 10px;
}
.item_details_field {
   display:none;
}
.ul-table .ul-table-item-data ul .item_details_text {
   width: calc(100% - 280px);
   display: flex;
   align-items: center;
   padding: 5px 10px;
}
.ul-table-item-data .item_details_field {
   padding: 0 !important;
}
.ul-table-wrapper .ul-table .ul-table-item-data ul li div .form-group {
   padding: 5px 10px !important;
   width: 100% !important;
   border: 0;
}
.item_details_field .form-group input.btn {
   margin-left: 10px;
   cursor: pointer;
   background: #fff;
   color: #6e7985;
   font-size: 13px;
   padding: 3px;
   padding-left: 18px;
   padding: 6px !important;
   margin: 0;
   font-size: 13px !important;
 border: 1px solid #000000;
}
.item_details_field input[type="file"]::file-selector-button {
 padding: 0.2em 0.4em;
 border-radius: 0.2em;
 background-color: hsl(240deg 7% 62% / 39%);
 transition: 1s;
 font-size: 13px
}
.copyright-text {
   border-left: 1px solid #b1b1b1;
   padding-left: 12px;
}
.footer-copyright {
   position: absolute;
   left: 0;
   right: 0;
   width: 100%;
   bottom: 0;
   margin-right: 22px;
   padding: 22px;
}
.page-content-area {
   padding-bottom: 88px;
}
.note-table-item li.not_last {
   padding-left: 12px !important;
   display: initial !important;
   flex: initial !important;
   margin: 0 !important;
}
.note-table-item li.not_last span.customer {
   color: inherit !important;
   font-weight: 400 !important;
}
.note-table-item li.not_last span.bold {
   color: #4e4e4e !important;
   font-weight: 600 !important;
}
#add-estimate-form .table-wrapper {
   grid-template-columns: 1fr 340px;
}
#add-estimate-form .item-details-row {
   grid-template-columns: 20% 39% 14% 11% 11% 11% 11% 8%;
}
#add-estimate-form .table.item-details-table tfoot td:last-child {
   padding-left: 56px;
}
/* Responsive start */
@media only screen and (max-width: 1200px) {
   .estimate-popup .table-wrapper {
       grid-template-columns: 1fr 300px;
   }   
   .add-estimate-popup .table-wrapper .item-details-row {
       grid-template-columns: 22% 43% 20% 14% 14% 12%;
   } 
   .estimate-popup.add-estimate-popup .table.item-details-table thead th {
       line-height: 18px;
       padding-top: 10px;
       padding-bottom: 10px;
   }
}
@media only screen and (max-width: 1130px) {
   .estimate-popup .table-wrapper {
       grid-template-columns: 1fr 250px;
   }
}
@media only screen and (max-width: 1023px) {
   .estimate-popup .table-wrapper {
       grid-template-columns: 1fr;
   }
}
@media only screen and (max-width: 991px) {
   .inventory-search-data .item-details-row {
       grid-template-columns: 5% 16% 34% 11% 10% 12% 12%;
   }
}
@media only screen and (max-width: 767px) {
   .add-estimate-popup .table-wrapper .item-details-row {
       grid-template-columns: 140px 320px 130px 110px 110px 100px;
   }
   .estimate-popup.add-estimate-popup .table tfoot .item-row-foot {
       display: grid;
       grid-template-columns: 700px 210px;
   }
   .estimate-popup.add-estimate-popup .table tfoot .item-row-foot td:last-child {
       padding-left: 5px;
   }
   .estimate-popup.add-estimate-popup table.item-details-table tfoot td {
       width: 100%;
   }
   .add-estimate-popup table.item-details-table {
       width: 910px;
   }
   .view-estimate-popup table.item-details-table {
       width: 683px;
   }
   .view-estimate-popup .item-details-row {
       grid-template-columns: 140px 260px 70px 105px 106px;
   }
   .add-estimate-popup .item-details-table-wrapper, .view-estimate-popup .item-details-table-wrapper {
       width: 100%;
       overflow-x: auto;
       padding-bottom: 2px;
   }
   .item-details-table-wrapper::-webkit-scrollbar, .inventory-search-data::-webkit-scrollbar {
       height: 6px;
   }
   .inventory-search-data .item-details-row {
       grid-template-columns: 38px 125px 240px 100px 95px 110px 108px;
   }
   .add-estimate-popup .inventory-search-data table.item-details-table {
       width: 816px;
   }
   .estimate-popup .inventory-search-data table tfoot {
       display: none !important;;
   }
   .inventory-search-wrapper .add-inventory .btn span {
       padding-left: 17px;
       background-image: url(../img/add-icon-white.svg);
       background-position: left center;
       background-repeat: no-repeat;
       background-size: 10px;
       color: #fff;
       text-decoration: none;
       font-size: 14px;
   }
   .inventory-search-wrapper .add-inventory {
       display: block;
       margin-top: 18px;
   }
   .inventory-search-wrapper .add-inventory .btn {
       width: 100%;
       background: #eb5201;
       color: #fff;
   }
}