@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-Bold.eot');
    src: url('../fonts/SofiaPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/SofiaPro-Bold.woff2') format('woff2'),
    url('../fonts/SofiaPro-Bold.woff') format('woff'),
    url('../fonts/SofiaPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-Medium.eot');
    src: url('../fonts/SofiaPro-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/SofiaPro-Medium.woff2') format('woff2'),
    url('../fonts/SofiaPro-Medium.woff') format('woff'),
    url('../fonts/SofiaPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


:root {
    /*
  --green_bg_primary: #00adce;
  --secondary_colour: #053d4e; 
  --lightblue_bg_primary: #00adce; 
  --lightblue_bg_secondary: #053d4e; 
  --darkgray_bg_primary: #182127;  
  --darkgray_bg_secondary: #7f9da5;*/
    --white_bg: #ffffff;
    --primary_colour: #00adce;
    --secondary_colour: #053d4e;

}

.green_bg {
    background-color: var(--primary_colour) !important;
}

.orange_bg {
    background-color: var(--secondary_colour) !important;
}

/*
.lightblue_bg{background-color: var(--lightblue_bg_primary) !important; }
.darkblue_bg{background-color: var(--lightblue_bg_secondary) !important; }
.darkgray_bg{background-color: var(--darkgray_bg_primary) !important; }
.lightgray_bg{background-color: var(--darkgray_bg_secondary) !important; }
.white_bg{background-color: var(--white_bg) !important; }
 */


input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    background: transparent !important;
}

input:-moz-autofill, input:-moz-autofill:hover, input:-moz-autofill:focus, input:-moz-autofill:active {
    background: transparent !important;
}

input:-ms-autofill, input:-ms-autofill:hover, input:-ms-autofill:focus, input:-ms-autofill:active {
    background: transparent !important;
}

.no-icon::-webkit-inner-spin-button, .no-icon::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.no-icon::-moz-inner-spin-button, .no-icon::-moz-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.no-icon::-ms-inner-spin-button, .no-icon::-ms-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.lightblue_bg {
    background-color: #00a2c1 !important;
}


* {
    outline: none !important;
}

body {
    height: 100vh;
    background-color: var(--white_bg);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #1F2B34;
    font-weight: 400;
    overflow-y: hidden;
}

.sofia, .font2 {
    font-family: 'Sofia Pro', Arial, serif;
}

.font1 {
    font-family: 'Montserrat', sans-serif;
}

h1, h2 {
    font-size: 34px;
    font-family: 'Sofia Pro', Arial, serif;
}

h3 {
    font-size: 24px;
    font-family: 'Sofia Pro', Arial, serif;
}

a, button {
    text-decoration: none !important;
    cursor: pointer;
}

a:hover {
    color: var(--primary_colour);
}

.arrow-bttn2:hover, .arrow-bttn:hover {
    text-decoration: underline !important;
}

.f-12 {
    font-size: 12px;
}

.f-14 {
    font-size: 14px;
}

.f-15 {
    font-size: 15px;
}

.f-16 {
    font-size: 16px;
}

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

.f-20 {
    font-size: 20px;
}

.f-22 {
    font-size: 22px;
}

.f-24 {
    font-size: 24px;
}

.f-26 {
    font-size: 26px;
}

.f-28 {
    font-size: 28px;
}

.bold {
    font-weight: bold;
}

.login-main {
    background-image: url(../images/logo-pattern.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-white {
    background: #fff;
    border-radius: 10px; /* box-shadow: 0px 0px 11px 0px rgb(0 0 0 / 15%); */
    border: 1px solid #7F9DA5;
}

.bttn1, .bttn2 {
    transition: all 0.2s ease-in-out;
}

.bttn1 {
    background-color: var(--primary_colour);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 11px 0;
    border-radius: 5px;
    border: 1px solid var(--primary_colour);
}

.theme1 .bttn1:hover {
    box-shadow: 0px 12px 23px #41b78033;
}

.theme2 .bttn1:hover {
    box-shadow: 0px 12px 23px #00adce24;
}

.theme3 .bttn1:hover {
    box-shadow: 0px 12px 23px #18212721;
}

.theme1 .bttn2:hover {
    box-shadow: 0px 12px 23px #f78d1e26;
}

.theme2 .bttn2:hover {
    box-shadow: 0px 12px 23px #053d4e21;
}

.theme3 .bttn2:hover {
    box-shadow: 0px 12px 23px #18212721;
}

.theme2 .order-bttn .bttn2:hover {
    box-shadow: 0px 12px 23px #053d4e21;
}

.theme1 ul.green-theme, .theme2 ul.blue-theme, .theme3 ul.gray-theme {
    border-color: var(--primary_colour);
    background: #f2f6f7;
}

a.sm-bttn {
    font-size: 13px;
    padding: 7px 0;
}

.w-400 {
    font-weight: 400;
}

.w-500 {
    font-weight: 500;
}

.w-600 {
    font-weight: 600;
}

.w-700 {
    font-weight: 700;
}

.w-800 {
    font-weight: 800;
}

.green {
    color: var(--primary_colour);
}

.gray {
    color: #7F9DA5 !important;
}

.white {
    color: #fff !important;
}

.black {
    color: #1F2B34 !important;
}

.light-blue {
    color: #00ADCE !important;
}

.orange {
    color: var(--secondary_colour) !important;
}

/* .ct-box ul.active {box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 40%);} */
ul {
    list-style: none;
}

::-webkit-scrollbar {
    width: 0;
}

::-moz-scrollbar {
    width: 0;
}

::-ms-scrollbar {
    width: 0;
}

::-o-scrollbar {
    width: 0;
}

::scrollbar {
    width: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}


.login-box {
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0px 0px 40px 12px rgb(0 0 0 / 12%);
}

.form-design1 input, .form-design1 textarea {
    border: 1px solid #5C7080;
    display: block;
    width: 100%;
    font-size: 14px;
    color: #1F2B34;
    height: 40px;
    padding: 5px 15px;
    position: relative;
    z-index: 10;
    resize: none;
    background: transparent;
    border-radius: 0px;
}

.form-filed {
    position: relative;
    margin-bottom: 15px;
}

.form-design1 label.label {
    display: inline-block;
    margin: 0 auto;
    top: 12px;
    left: 0;
    transition: all 0.2s ease-in-out;
    z-index: 4;
    margin-left: 15px;
    padding: 0px 7px;
    position: absolute;
    color: #7F9DA5;
    font-size: 15px;
}

.form-design1 input:focus + label.label, .form-design1 input:valid + label.label, .form-design1 textarea:focus + label.label, .form-design1 textarea:valid + label.label {
    top: -10px;
    color: var(--primary_colour);
    font-weight: 500;
    margin-left: 20px;
    font-size: 13px;
    background: #fff;
    z-index: 12;
}

.form-design1 input:focus + label.label small, .form-design1 input:valid + label.label small {
    display: none;
}

.form-design1 input:focus, .form-design1 textarea:focus {
    border-color: var(--primary_colour);
}

.form-design1 select {
    border: 1px solid #5c7080;
    border-radius: 0;
    width: 100%;
    height: 40px;
    padding-left: 20px;
    font-size: 14px;
    appearance: none;
    background-image: url(../images/arrow-bottom01.svg);
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.form-design1 select:focus {
    border-color: var(--primary_colour) !important;
}


.form-design1 select + label.label {
    padding-left: 9px;
    margin-left: 21px;
    z-index: 3;
    background: #fff;
    top: -10px;
    color: var(--primary_colour);
    font-weight: 500;
    font-size: 13px;
}

.form-design1 textarea {
    height: auto;
}

.has-info-icon {
    background-image: url(../images/info-icon.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 12px top 9px !important;
}

textarea.has-info {
    background-position: 97.50% 15px !important;
}

.owner-name-filed a.user-icon {
    position: absolute;
    right: 5px;
    top: 8px;
}

.checkbox-design2 .radio-col:last-child i,
.checkbox-design2 .radio-col:last-child em {
    margin-left: -10px;
}

.checkbox-design2 .radio-col:first-child i,
.checkbox-design2 .radio-col:first-child em {
    margin-left: -10px;
}


.or-text {
    border-top: 1px solid #7F9DA5;
    margin: 30px 0 10px 0;
}

.or-text label {
    background: #fff;
    position: relative;
    top: -10px;
    padding: 0 12px;
}

a.google-bttn {
    border: 2px solid var(--primary_colour);
    border-radius: 0px;
    padding: 11px 20px;
}

.signup-text {
    border-top: 1px solid #7F9DA5;
}

.sign-step-nav {
    list-style: none;
}

.sign-step-nav li {
    position: relative;
}

.sign-step-nav li.active {
    color: var(--primary_colour);
}

.sign-step-nav > li:not(:last-child):after {
    content: "";
    width: 12px;
    height: 3px;
    background: #b9cbd0;
    display: block;
    position: absolute;
    right: -24px;
    top: 13px;
}

.ct-box {
    background: #fff;
    padding: 1px 10px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.color-theme {
    position: fixed;
    right: -153px;
    top: 70px;
    z-index: 9999;
    transition: right 0.2s ease-in-out;
    border: 1px solid #d2d2d2;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.ct-box ul {
    list-style: none;
    display: flex;
    border: 1px solid rgb(127 157 165 / 30%);
    padding: 10px 7px;
    margin: 7px 0;
    font-weight: 600;
    cursor: pointer;
}

.ct-box ul li {
    width: 55px;
}

.ct-box ul li span {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 100px;
    vertical-align: bottom;
    margin-right: 6px;
    font-size: 14px;
    position: relative;
}

.ct-box ul li a.active1 span:after {
    content: "";
    height: 5px;
    width: 10px;
    border: 2px solid #fff;
    display: inline-block;
    border-width: 0px 0px 2px 2px;
    transform: rotate(-45deg);
    position: absolute;
    margin: 5px 0 0 4px;
}

.color-theme a.icon {
    background: #fff;
    display: block;
    width: 38px;
    height: 38px;
    text-align: center;
    line-height: 43px;
    margin: 0;
    position: absolute;
    left: -37px;
    top: 30px;
    border-radius: 5px 0px 0px 5px;
    border: 1px solid #d2d2d2;
    border-right: 0;
}

.color-theme a.icon i,
.color-theme a.icon em {
    font-size: 20px;
    color: var(--primary_colour);
    -webkit-animation: rotation 10s infinite linear;
    -moz-animation: rotation 8s infinite linear;
    -ms-animation: rotation 8s infinite linear;
    animation: rotation 8s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

.color-theme.open {
    right: 0;
}

.color-theme a.icon:hover i,
.color-theme.open a.icon i,
.color-theme a.icon:hover em,
.color-theme.open a.icon em {
    animation-play-state: paused;
}

.ct-box ul li a {
    color: #053d4e;
}


.dashboard-topbar {
    padding: 20px 25px;
    z-index: 999;
}

a.bttn2, .btn-primary {
    background-color: var(--secondary_colour);
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    padding: 9px 15px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid var(--secondary_colour);
}

.dashboard-content {
    padding-top: 80px;
}

.sidebar {
    width: 275px;
    background: #1F2B34;
    transition: width 0.1s cubic-bezier(0.4, 0, 1, 1);
}

.db-right {
    flex: 1;
    padding: 30px;
    overflow-y: scroll;
}

.new-product-box {
    color: #fff;
    margin: -30px;
}

.new-product-box img.product-chart {
    position: absolute;
    top: -20px;
    right: -50px;
    opacity: 0.5;
}

.np-inner {
    padding: 25px 60px 35px;
}

.expand-bttn a {
    background: #00bbd6;
    padding: 9px 55px 6px;
    display: inline-block;
    position: relative;
    z-index: 4;
    top: -42px;
}

.expand-bttn a:before, .expand-bttn a:after {
    content: "";
    position: absolute;
    display: block;
    width: 35px;
    height: 100%;
    top: 0;
    left: -20px;
    z-index: -1;
    background: #00bbd6;
    transform: skew(-20deg, 0);
    border-top-left-radius: 5px;
}

.expand-bttn a:after {
    right: -20px;
    left: auto;
    transform: skew(20deg);
    border-top-right-radius: 5px;
}

.expand-bttn a span:before {
    content: "-";
    position: relative;
    left: -30px;
}

.new-product-box .np-row {
    border-top: 7px solid var(--lightblue_bg_primary);
}

.expand-bttn a.expand {
    background: #00adce;
    top: 0;
}

.expand-bttn a.expand:before {
    transform: skew(20deg, 0);
    background: #00adce;
    border-radius: 0px 0px 0px 5px;
}

.expand-bttn a.expand:after {
    transform: skew(-20deg, 0);
    background: #00adce;
    border-radius: 0px 0px 5px 0px;
}

.new-product-box:after {
    content: "";
    height: 100%;
    width: 310px;
    background: url(../images/product-chart-icon.svg) no-repeat center left;
    background-size: 320px;
    position: absolute;
    top: -10px;
    right: -10px;
    opacity: 0.4;
    transition: all 0.6s ease;
}

.new-product-box.box-show:after {
    opacity: 0;
}

.arrow-bttn2 {
    padding: 0 20px 2px 0;
    background: url(../images/right-arrow.svg) no-repeat right center;
}

.new-product-box.box-show {
    margin-bottom: 10px;
}

.table-design1 th, .table-design1 tr, .table-design1 td {
    border: 0 !important;
    vertical-align: middle;
}

.table-design1 th {
    font-weight: 500;
}

.table-design1 tbody tr:nth-child(odd) {
    background: #F2F6F7;
}

.color-dots {
    width: 16px;
    height: 16px;
    border-radius: 100px;
    display: inline-block;
    vertical-align: middle;
}

.green-dots {
    background: #00adce;
}

.open-orders-table tr td:first-child, .open-orders-table tr th:first-child {
    text-align: center;
}

.action-icons {
    list-style: none;
    gap: 2px;
}

.action-icons a img:hover {
    opacity: 0.5;
}

.orange-dots {
    background: #053d4e;
}

.red-dots {
    background: #E32458;
}

.checkbox label {
    position: relative;
    cursor: pointer;
    margin: 0;
    height: 20px;
    width: 20px;
}

.checkbox input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.checkbox label:before {
    content: '';
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid #707070;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
    cursor: pointer;
}

.checkbox input:checked + label:after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background: var(--primary_colour);
    border-radius: 2px;
    position: absolute;
    top: 3px;
    left: 3px;
}

.checkbox input:checked + label:before {
    border-color: var(--primary_colour);
}

.total-new-order hr {
    background: #bdc7cf !important;
    width: calc(100% - 250px) !important;
    margin-right: 20px;
}

.message-table table tr {
    background: transparent !important;
}

.text-circle {
    color: #fff;
    width: 26px;
    height: 26px;
    line-height: 25px;
    text-align: center;
    border-radius: 100px;
}

.message-table b.bg {
    background: #EFF1F2;
    padding: 8px 14px;
    display: inline-block;
    border-radius: 5px;
    color: #697279;
}

a.arrow-bttn-bg {
    background: #EFF1F2 url(../images/right-arrow.svg) no-repeat center center;
    padding: 8px 6px 11px;
    border-radius: 5px;
    width: 23px;
    height: 32px;
    display: inline-block;
}

.message-table .table td, .message-table .table th {
    padding: 8px 8px;
}

.sidebar-nav {
    padding: 10px;
    transition: padding 0.2s cubic-bezier(0.4, 0, 1, 1);
}

.sidebar-nav li a img.icon {
    width: 21px;
    margin-right: 10px;
    vertical-align: top;
    opacity: 0.32;
    transition: all 0.1s ease-in-out;
}

.sidebar-nav ul.main-nav > li > a {
    font-size: 14px;
    color: #CBD4DB;
    font-weight: 500;
    display: flex;
    padding: 12px 12px;
    border-radius: 8px;
}

body:not(.sidebar-collapse) .sidebar-nav ul.main-nav > li > a[aria-expanded="true"] {
    background: #182127;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.sidebar-nav ul.main-nav > li > a.active {
    background: #394752;
}

.sidebar-nav ul.main-nav > li {
    padding-bottom: 12px;
}

.sidebar-nav ul.main-nav > li > a.active img.icon {
    opacity: 0.8;
}

.sidebar-nav .sub-menu {
    background: #182127;
    padding: 10px 15px 10px;
    border-radius: 0px 0px 9px 9px;
}

.sidebar-nav .sub-menu li a {
    color: #cbd4db;
    padding: 6px 0 6px 30px;
    display: block;
    transition: all 0.1s ease;
    border-bottom: 1px solid #1F2B34;
    margin: 0 0 1px 0;
}

.sidebar-nav .sub-menu li:last-child a {
    border: 0;
}

.sidebar-nav .sub-menu li a:hover, .sidebar-nav .sub-menu li a.active {
    background: #1F2B34;
}

.place-order-box {
    flex: 1;
    padding-right: 295px;
}

.order-summary-box {
    width: 295px;
    padding: 30px 25px;
    border-left: 1px solid var(--primary_colour);
    margin-left: 30px;
    height: calc(100vh - 82px);
    position: fixed;
    top: 82px;
    right: 0;
    z-index: 11;
}

.order-summary-box ul.total-list li {
    border-bottom: 1px solid #BDC7CF;
    padding: 4px 0 4px 0;
}

.order-summary-box .subtotal-info {
    color: #697279;
}

.place-order-box .or {
    width: 175px;
}

.form-design1.small-fileds input, .form-design1.small-fileds select {
    height: 40px;
}

.form-design1.small-fileds label.label {
    top: 9px;
}

.form-design1.small-fileds select + label.label {
    top: -9px;
}

.existing-order-filed .form-design1 input:focus, .existing-order-filed .form-design1 input:valid {
    border-color: #61ACCC;
}

.existing-order-filed .form-design1 input:valid ~ .find-bttn {
    opacity: 1;
}

.form-filed .find-bttn {
    width: 32px;
    height: 32px;
    background: var(--primary_colour);
    display: inline-block;
    line-height: 28px;
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 42;
    opacity: 0;
}

/* .existing-order-filed input, .form-filed .find-bttn {border-radius: 5px;} */


.collapse-nav {
    display: flex;
    align-items: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #364550;
    padding: 30px 0 30px 25px;
}

.sidebar-inner {
    position: relative;
    height: 100%;
}

.sidebar-collapse .sidebar {
    width: 80px;
}

.sidebar-collapse .collapse-nav span, .sidebar-collapse .sidebar-nav ul.main-nav > li > a span {
    display: none;
}

.sidebar-collapse .collapse-nav img {
    transform: rotate(180deg);
    margin-left: 3px;
}

.collapse-nav img {
    transition: all 0.2s ease-in-out;
}

.sidebar-collapse .sidebar-nav ul.main-nav > li > a img.icon {
    margin-left: 3px;
}

.sidebar-collapse .sidebar-nav ul.main-nav > li > a {
    padding: 12px 15px;
}

.sidebar-collapse .sidebar-nav li div.collapse {
    position: fixed !important;
    height: 100% !important;
    width: 275px !important;
    top: 81px !important;
    z-index: 12 !important;
    left: -300px !important;
    display: block !important;
    overflow: auto !important;
}

.sidebar-collapse .sidebar-nav li div#accountmenu {
    display: none !important;
    transition: none !important;
}

.sidebar-collapse .sidebar-nav li div#accountmenu.show {
    display: block !important;
}

.sidebar-collapse .sidebar-nav li .collapse.show {
    left: 80px !important;
}

.sidebar-collapse .sidebar-nav .sub-menu {
    height: 100%;
    border-radius: 0;
    padding: 15px;
    background: #EBEBEB;
    border: 5px solid #fff;
    margin-right: 5px !important;
}

.sidebar-collapse .sidebar-nav .sub-menu li a {
    color: #1f2b34;
    font-weight: 600;
    padding: 8px 10px;
    border-color: #cbd4db;
    background: none;
}

.sidebar-collapse .sidebar-nav .sub-menu li a:hover, .sidebar-collapse .sidebar-nav .sub-menu li a.active {
    background: #dedede;
}


.sidebar-collapse .now-viewing {
    margin-left: 250px;
}

.sidebar-collapse .sidebar-nav ul.main-nav > li > a.active {
    background: #fff;
    border-radius: 8px 0 0 8px;
    margin-right: -10px;
}

.sidebar-collapse .sidebar-nav ul.main-nav > li > a.active img {
    filter: brightness(0%);
}


.order-process-steps span {
    font-size: 15px;
}

.order-process-steps li:not(:last-child) label:after {
    content: "";
    height: 12px;
    width: 6px;
    display: block;
    border: 2px solid #fff;
    border-width: 0px 2px 2px 0px;
    position: absolute;
    top: 6px;
    right: 10px;
    transform: rotate(45deg);
}

.order-process-steps label {
    margin: 0;
    width: 30px;
    height: 30px;
    border: 2px solid var(--primary_colour);
    border-radius: 100px;
    line-height: 26px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 12;
}


.order-process-steps {
    width: 235px;
    margin-left: -30px;
}

.order-process-steps li {
    position: relative;
    padding: 10px 46px 69px 0;
    z-index: 4;
    pointer-events: none;
}

.order-process-steps li label {
    background: var(--primary_colour);
    font-size: 0;
    border-color: #fff;
}

.order-process-steps li.active label {
    background: var(--primary_colour);
    color: #fff;
    font-size: 15px;
}

.order-process-steps li.active label:after, .order-process-steps li.active ~ li label:after {
    display: none;
}

.order-process-steps li.active ~ li label {
    font-size: 15px;
    border-color: var(--primary_colour);
    background-color: #fff;
    box-shadow: 0px 0px 5px 2px rgb(0 0 0 / 18%);
    color: var(--primary_colour);
}

.order-process-steps li:not(:last-child):after {
    content: "";
    height: calc(100% - 25px);
    width: 4px;
    background: var(--primary_colour);
    display: block;
    position: absolute;
    right: 12px;
    top: 32px;
    z-index: 1;
}

.order-process-steps li.active:after, .order-process-steps li.active ~ li:after {
    opacity: 0.3;
}

.order-process-steps li.active ~ li span {
    color: #7F9DA5;
}

.order-process-steps li:not(.active, .completed) {
    opacity: 0.6;
}

.order-process-steps li:last-child label {
    border: 0;
    box-shadow: none !important;
    background: transparent;
}

.order-process-steps li:last-child label svg {
    width: 40px;
    margin-top: -12px;
    margin-left: -4px;
}


.order-process-steps li span {
    color: var(--primary_colour);
}

.order-process-steps li.active span {
    font-weight: 700;
}

.order-process-content {
    flex: 1;
    padding-left: 50px;
}

a.back-bttn {
    padding: 0 0 0 20px;
    display: inline-block;
    background: url(../images/back-arrow-gray.svg) no-repeat center left;
}

.search-pakage input[type="search"] {
    border: 1px solid #7F9DA5;
    font-size: 13px;
    background: url(../images/search-icon-blue.svg) no-repeat;
    background-position: right 10px bottom 12px;
    background-size: 16px;
    padding-right: 30px;
    font-weight: 500;
}

/*.search-pakage input:focus::-moz-placeholder {color: var(--primary_colour) !important;} 
.search-pakage input:focus::-webkit-input-placeholder {color: var(--primary_colour) !important;}
.search-pakage input:focus:-ms-input-placeholder {color: var(--primary_colour) !important;}*/

.search-pakage input[type="search"]:focus, .search-pakage input[type="search"]:valid {
    border-color: var(--primary_colour) !important;
}

.order-process-steps li:not(.active, .completed) * {
    pointer-events: none;
}


.pd-box {
    padding: 30px 25px;
    border: 2px solid var(--primary_colour);
    border-radius: 10px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

#order-detail-box {
    padding-bottom: 0 !important;
}

.product-modals .modal-dialog {
    max-width: 925px;
}

.modal-content {
    border: 0;
    border-radius: 10px;
}

.close-modals {
    position: absolute;
    right: 12px;
    top: 12px;
}

.checkbox {
    height: 19px;
    position: relative;
}

.option-type-content {
    flex: 1;
}

.mls-body li {
    padding: 10px 30px;
}

.mls-body li:nth-child(odd) {
    background: #F2F6F7;
}

.mls-body ul {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.more-show p.d-none {
    display: block !important;
}

.arrow-bttn svg {
    margin-top: -1px;
}

.theme3 .order-bttn .bttn2:hover {
    box-shadow: 0 0px 5px 0px rgb(255 255 255 / 10%);
}

a.bttn2.border {
    border-width: 2px !important;
}

a.bttn2.lightblue_bg:hover {
    background-color: #fff !important;
    color: #00adce;
}

.no-shadow {
    box-shadow: none !important;
}

.checkbox.radio label:before {
    border-radius: 100px;
}

.checkbox.radio input:checked + label:after {
    border-radius: 100px;
    background-color: var(--primary_colour);
}

.checkbox.radio input:checked + label:before {
    border-color: var(--primary_colour);
}

.tc-body > ul.check-list > li {
    flex: 1;
}

.tc-body > ul.check-list > li:first-child {
    width: 200px;
    flex: 0 0 200px;
}

.tc-body .checkbox.radio span {
    margin: 0 0 0 15px;
}

.tc-body .checkbox label {
    top: 3px;
}

.tc-body .checkbox {
    height: auto;
}

.tc-basic-info {
    background: #F2F6F7;
    padding: 20px 10px 20px 75px;
    margin: 0 -15px;
}

.pd-box.disible {
    border-color: #7F9DA5;
    pointer-events: none;
}

.pd-box.disible a.bttn2 {
    border-color: #7F9DA5;
    background-color: #7F9DA5;
}

.pd-box.disible h3 {
    color: #7F9DA5;
}

.total-list .remove img {
    vertical-align: text-bottom;
}

.total-list .product-price {
    background: #F2F6F7;
    padding: 7px 23px !important;
    margin: 0 -25px;
    border: 0 !important;
}

.order-remove-modal .modal-dialog {
    max-width: 420px;
}

.bttn2.border-bttn {
    color: var(--primary_colour) !important;
    background: #fff;
    border: 1px solid var(--primary_colour) !important;
}

.bttn1.border-bttn {
    color: var(--primary_colour) !important;
    background: #fff;
    border: 1px solid var(--primary_colour) !important;
}

.bttn2.border-bttn:hover {
    background-color: var(--primary_colour);
    border-color: var(--primary_colour) !important;
    color: #fff !important;
}

.bttn1.border-bttn:hover {
    background-color: var(--primary_colour);
    border-color: var(--primary_colour) !important;
    color: #fff !important;
}

.default-shadow:hover {
    box-shadow: 0 2px 20px 2px rgb(84 84 84 / 18%) !important;
}


.order-process-content .form-filed {
    margin-bottom: 17px;
}

.process-property-information, .order-details-information {
    width: 620px;
}

.checkbox-design2 .radio-col {
    flex: 1;
    text-align: center;
    position: relative;
}

.checkbox-design2.radio label, .checkbox-design2.radio label:before {
    width: 100%;
    height: 100%;
}

.checkbox-design2.radio label:before {
    border-radius: 100px;
    border: 1px solid #7F9DA5;
    height: 40px;
}

.checkbox-design2 .radio-col:first-child label:before {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.checkbox-design2 .radio-col:last-child label:before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.checkbox-design2.radio .radio-col:last-child input:checked + label:after {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.checkbox-design2.radio .radio-col:first-child input:checked + label:after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.checkbox-design2 input:checked + label:after {
    background-color: var(--primary_colour);
    width: 100%;
    height: 100%;
}

.checkbox-design2 label i,
.checkbox-design2 label em {
    font-style: inherit;
    font-size: 15px;
    color: #7F9DA5;
    position: absolute;
    top: 10px;
    z-index: 4;
}

.checkbox-design2 {
    height: 40px;
}

.checkbox-design2.radio input:checked + label:after {
    border-radius: 100px;
    background-color: var(--primary_colour);
    top: 0;
    left: 0;
}

.checkbox-design2.radio input:checked + label i,
.checkbox-design2.radio input:checked + label em {
    color: #fff;
    font-weight: 600;
}

.add-owners-modal .modal-dialog {
    max-width: 475px;
}

.form-design1 input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}

.form-design1 input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}

.form-design1 input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url('../images/calendar-icon.svg') no-repeat center right;
    width: 20px;
    height: 20px;
    background-size: 20px;
    cursor: pointer;
}

.form-design1 input[type="date"] {
    padding-right: 10px;
}


a.place-order-bttn {
    background-color: var(--primary_colour);
    border-color: var(--primary_colour);
}

.bttn1.small-bttn {
    padding: 9px 15px;
    font-size: 14px;
    font-weight: 600;
    border-width: 2px;
    border: 2px solid var(--primary_colour);
}

.product-total-box {
    border: 1px solid #cbd4db;
    width: 500px;
    flex: 0 0 500px;
    margin-right: 40px;
}

.mls-taxes {
    background: #F2F6F7;
    padding: 16px;
    border-top: 1px solid #cbd4db;
}

.tax-subtotal li {
    border-bottom: 1px solid #BDC7CF;
    padding: 8px 0 4px 0;
}

.product-order-details {
    flex: 1;
    color: #697279;
}

.payment-method-detail .checkbox {
    height: auto;
    flex: 1;
}

.saved-payment-method span.digits {
    background: #F2F6F7 url(../images/forward-arrow.svg) no-repeat 60px 11px;
    padding: 5px 37px 5px 10px;
    border-radius: 3px;
    margin: -5px 0;
    position: absolute;
    left: 262px;
}

.saved-payment-method .checkbox.radio label span:after {
    content: "";
    width: 350px;
    border: 1px solid #CDD5DB;
    padding: 8px 5px 8px 10px;
    border-radius: 5px;
    color: #707070;
    display: block;
    margin: -31px 0 0 -37px;
    height: 40px;
}

.review-details-information .checkbox.radio input:checked + label {
    color: var(--primary_colour);
}

.payment-method-detail .checkbox label {
    width: 100%;
}

.payment-method-detail .checkbox label span {
    position: absolute;
    top: -1px;
    left: 27px;
}

.saved-payment-method:not(.different-payment-method) .checkbox.radio input:checked + label span:after {
    border-color: var(--primary_colour);
}

.payment-method-filed {
    margin-top: 9px;
    width: 630px;
    border: 1px solid #cbd4db;
    padding: 30px 20px 20px;
    border-top: 0;
    background: #fff;
    position: relative;
    top: -3px;
    right: 2px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.different-payment-method:not(.show) .checkbox.radio label span:after {
    width: 350px;
}

.different-payment-method:not(.show) .payment-method-filed {
    display: none;
}

.different-payment-method .checkbox.radio label span:after {
    width: 630px;
}

.order-process-steps li.success {
    opacity: 1;
}

.order-process-steps li:not(.success):last-child svg g g:nth-child(1), .order-process-steps li:not(.success):last-child svg g g:nth-child(2) {
    display: none;
}

.pagination-design li {
    margin: 0 4px;
}

.pagination-design li.active {
    border: 1px solid var(--primary_colour);
    border-radius: 6px;
    background: rgb(242 246 247);
}

.pagination-design li a {
    padding: 3px 6px;
    display: inline-block;
}

.pagination-design svg {
    margin-top: -1px;
}

.orders-search-title .search-pakage {
    width: 300px;
}

.orders-search-title {
    padding: 30px 10px 30px 40px;
}

.order-table-main {
    border-top: 1px solid #7F9DA5;
    border-bottom: 1px solid #7F9DA5;
}

.existing-order-filed input[type="search"] {
    background: transparent;
}

.existing-order-filed button {
    border: 0;
    background: var(--primary_colour);
    position: absolute;
    right: 4px;
    z-index: 55;
    top: 4px;
    padding: 9px 10px 10px;
    line-height: 1;
    opacity: 0;
}

.search-pakage input[type="search"]:valid + button {
    opacity: 1;
}

.ot-table-row > ul, .order-thead-status > ul {
    padding: 12px 18px;
    margin: 0;
    flex-wrap: wrap;
}

.ot-table-row > ul > li:nth-child(1) {
    flex: 0 0 12%;
    max-width: 12%;
}

.ot-table-row > ul > li:nth-child(2) {
    flex: 0 0 13%;
    max-width: 13%;
}

.ot-table-row > ul > li:nth-child(3) {
    flex: 0 0 15%;
    max-width: 15%;
}

.ot-table-row > ul > li:nth-child(4) {
    flex: 0 0 12%;
    max-width: 12%;
}

.ot-table-row > ul > li:nth-child(5) {
    flex: 0 0 12%;
    max-width: 12%;
}

.ot-table-row > ul > li:nth-child(6) {
    flex: 0 0 12%;
    max-width: 12%;
}

.ot-table-row > ul > li:nth-child(7) {
    flex: 0 0 12%;
    max-width: 12%;
}

.ot-table-row > ul > li:nth-child(8) {
    flex: 0 0 12%;
    max-width: 12%;
}


.ot-body > ul:nth-child(odd) {
    background: #F2F6F7;
}

.order-file-info {
    background: #fff;
    border-bottom: 1px solid #7f9da5;
    margin: 0 -20px;
}

.action-tooltip > a {
    padding: 4px 10px 6px;
    background: #f2f6f7;
}

span.completed {
    color: var(--primary_colour);
}

span.processing {
    color: var(--secondary_colour);
}

span.issue {
    color: #E32458;
}

.status-info {
    padding: 3px;
}

.status-info:before {
    content: "";
    height: 15px;
    width: 15px;
    background: var(--primary_colour);
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    border-radius: 100px;
}

span.processing:before {
    background: var(--secondary_colour);
}

span.issue:before {
    background: #E32458;
}

.ot-table-row .ot-table > ul {
    padding: 5px;
}

.ot-table-row .ot-table {
    padding: 15px 0 15px 70px;
}

li.order-file-box {
    flex: 0 0 100%;
    max-width: 100%;
    top: 10px;
}

.ot-body > ul.active .file-number > svg {
    transform: rotate(90deg);
}

.ot-body > ul.active {
    background: #DDF4FA;
}


.order-file-box .ot-table-row ul > li:nth-child(1) {
    flex: 0 0 12%;
    max-width: 12%;
}

.order-file-box .ot-table-row ul > li:nth-child(2) {
    flex: 0 0 11%;
    max-width: 11%;
}

.order-file-box .ot-table-row ul > li:nth-child(3) {
    flex: 0 0 15%;
    max-width: 15%;
}

.order-file-box .ot-table-row ul > li:nth-child(4) {
    flex: 0 0 12%;
    max-width: 12%;
}

.order-file-box .ot-table-row ul > li:nth-child(5) {
    flex: 0 0 12%;
    max-width: 12%;
}

.order-file-box .ot-table-row ul > li:nth-child(6) {
    flex: 0 0 13%;
    max-width: 13%;
}


.per-page-order {
    background: transparent;
    border: 0;
    cursor: pointer;
}

.per-page-order option {
    color: #1f2b34;
    font-weight: 500;
    padding: 10px;
}

.order-table-main {
    height: calc(100vh - 305px);
    overflow: hidden;
    overflow-y: auto;
}

/* .order-table-main {height: calc(100vh - 435px); overflow: hidden;overflow-y: auto; }  */


.order-table-main::-webkit-scrollbar {
    width: 12px;
}

.order-table-main::-webkit-scrollbar-track {
    background: #F2F6F7;
}

.order-table-main::-webkit-scrollbar-thumb {
    background-color: #7F9DA5;
    border-radius: 20px;
    border: 3px solid #F2F6F7;
}

.order-table-main::-moz-scrollbar {
    width: 12px;
}

.order-table-main::-moz-scrollbar-track {
    background: #F2F6F7;
}

.order-table-main::-moz-scrollbar-thumb {
    background-color: #7F9DA5;
    border-radius: 20px;
    border: 3px solid #F2F6F7;
}

.order-table-main::scrollbar {
    width: 12px;
}

.order-table-main::scrollbar-track {
    background: #F2F6F7;
}

.order-table-main::scrollbar-thumb {
    background-color: #7F9DA5;
    border-radius: 20px;
    border: 3px solid #F2F6F7;
}


.order-table-responsive:after, .invoices-order-list:after {
    content: "";
    height: 100%;
    width: 1px;
    background: #7f9da5;
    display: block;
    position: absolute;
    right: 12px;
    top: 0;
}

.tooltip-wrap {
    padding: 10px;
    border: 1px solid var(--primary_colour);
    position: absolute;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 10px 20px #0000001a;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    z-index: -99;
    z-index: 99;
    margin-top: 8px;
}

.action-tooltip .tooltip-data a img {
    position: absolute;
    left: 13px;
    margin-top: 2px;
}

.action-tooltip .tooltip-data a {
    display: block;
    padding: 6px 0 6px 28px;
    margin: 2px 0;
    color: #1F2B34 !important;
}

.action-tooltip .tooltip-wrap {
    margin-left: -73px;
}

.tooltip-arrow {
    height: 12px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    right: 50%;
    transform: translate(50%, 0%);
}

.tooltip-arrow:before {
    content: "";
    height: 14px;
    width: 14px;
    background: #fff;
    border: 1px solid var(--primary_colour);
    display: block;
    transform: rotate(45deg);
    margin-top: 5px;
}

.has-tooltip.show + .tooltip-wrap, .tooltip-wrap.show {
    opacity: 1;
    visibility: visible;
    z-index: 99;
    margin-top: 2px;
}

.status-tooltip .tooltip-wrap {
    margin-left: 45px;
    top: 40px;
}

.status-tooltip .tooltip-arrow {
    margin-right: 66px;
}

.checkbox-design3 input {
    display: none;
}

.checkbox-design3 > div {
    padding: 7px 0 7px 30px;
    position: relative;
}

.checkbox-design3 input + label:before {
    content: "";
    height: 8px;
    width: 13px;
    border: 1px solid #9BB3B9;
    border-width: 0px 0px 2px 2px;
    display: block;
    transform: rotate(-45deg);
    position: absolute;
    left: 3px;
    top: 10px;
    opacity: 0;
}

.checkbox-design3 input:checked + label:before {
    opacity: 1;
}

.checkbox-design3 label {
    display: block;
    cursor: pointer;
    cursor: pointer;
}

.product-tooltip .tooltip-wrap {
    margin-left: -130px;
    top: 40px;
}

.product-tooltip .tooltip-arrow {
    right: 40px;
}

.created-tooltip .tooltip-wrap {
    top: 40px;
    margin-left: -12px;
}

.ot-table-row > ul.order-thead-status > li:nth-child(2) {
    flex: 0 0 70%;
    max-width: 70%;
}

.order-thead-status ul li:nth-child(1) {
    flex: 0 0 12%;
    max-width: 12%;
}

.order-thead-status ul li:nth-child(2) {
    flex: 1;
}

.od-col h5 {
    background: #B2C4C9;
    padding: 11px 0;
}

.od-col span {
    padding: 10px 0;
    display: block;
}

.od-col, .ods-col, .sn-list {
    border: 1px solid #b2c4c9;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.ods-list li {
    padding: 10px 15px;
}

.ods-list li:nth-child(odd) {
    background: #F2F6F7;
}

.od-services {
    padding-right: 10%;
}

.od-service-boxs > [class*='col-'] {
    padding-right: 10px;
    padding-left: 10px;
}

.od-service-boxs {
    margin-right: -10px;
    margin-left: -10px;
}

.red-box {
    background: #E32458;
    color: #fff;
    border-radius: 3px;
    padding: 3px 8px;
}

.osb-client-info .ods-col {
    border: 0;
}

.service-notes-list .sn-list:not(:last-child) {
    margin-bottom: 18px;
}

.supporter-name span {
    width: 40px;
    height: 40px;
    background: var(--primary_colour);
    line-height: 40px;
    text-align: center;
    border-radius: 100px;
    font-size: 18px;
    color: #fff;
    display: inline-block;
}

.supporter-name span.online:before {
    content: "";
    height: 11px;
    width: 11px;
    background: #00adce;
    border: 1px solid #fff;
    display: block;
    border-radius: 100px;
    position: absolute;
    margin: 1px -2px;
}

.chat-box-main {
    border: 1px solid #b2c4c9;
    border-radius: 10px;
    height: 100%;
}

.msg-chat-box .msg-chat-row {
    background: #F2F6F7;
}

.chat-messages-list {
    background: #F2F6F7;
    height: calc(100% - 140px);
    max-height: 500px;
    overflow-x: scroll;
}

.chatbox-header, .chatbox-footer {
    background: #fff;
}

.chatbox-footer {
    bottom: 0;
    border-top: 1px solid #CBD4DB;
}

.chatbox-footer input[type="text"] {
    flex: 1;
    border: 0;
    background: transparent;
}

.chatbox-footer a.bttn1 {
    margin: -5px;
}

.chatbox-header {
    border-bottom: 1px solid #CBD4DB;
}

.chat-messages-list li span.msg {
    font-size: 15px;
    background: #fff;
    border-radius: 10px 10px 0px 10px;
    color: #7F9DA5;
    margin: 0 18px;
    flex: 1;
    max-width: calc(100% - 175px);
    box-shadow: 1px 3px 9px rgb(0 90 219 / 10%);
}

.chat-messages-list li label {
    background: #0089FF;
    color: #fff;
    border-radius: 100px;
    text-align: center;
    display: inline-block;
    margin: 0 0 -12px 0;
    width: 38px;
    height: 38px;
    line-height: 40px;
    font-size: 16px;
}

.chat-messages-list li {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 7px 0;
}

.chat-messages-list li:nth-child(even) {
    flex-direction: row-reverse;
}

.chat-messages-list > ul {
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
}

.dp-box {
    width: 160px;
    height: 160px;
    border-radius: 100px;
    margin: 0 auto -10px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

a.camera-icon {
    width: 38px;
    height: 38px;
    background: #fff;
    display: inline-block;
    border-radius: 100px;
    padding: 6px 0 0 0;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 22%);
    position: relative;
    top: -35px;
    right: -60px;
}

.user-profile-col {
    flex: 0 0 440px;
    max-width: 440px;
}

.tab-design ul.nav li a {
    padding: 10px 20px;
    display: block;
    color: #7F9DA5;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-weight: 500;
    font-size: 14px;
}

.tab-design ul.nav li a.active {
    color: var(--primary_colour) !important;
    border-color: var(--primary_colour) !important;
}

.tab-design ul.nav {
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 20px;
}

.switch {
    width: 70px;
}

.switch input[type=checkbox] {
    display: none;
}

.switch input[type=checkbox]:checked + label::after {
    left: calc(100% - 4px);
    transform: translateX(-100%);
    background-color: var(--primary_colour) !important;
}

.switch label {
    cursor: pointer;
    width: 68px;
    height: 30px;
    border: 1px solid #7F9DA5;
    background: white;
    display: block;
    border-radius: 24px;
    position: relative;
}

.switch label::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: #999999;
    border-radius: 100px;
    transition: all 0.1s ease-in-out;
}

.order-titles {
    flex: 1;
}

.order-switch {
    margin: 5px 0;
}

.communication-col .bg-white {
    min-height: calc(100vh - 150px);
}

.order-titles p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ut-table .ot-table-row > ul > li:nth-child(1) {
    flex: 0 0 8%;
    max-width: 8%;
}

.ut-table .ot-table-row > ul > li:nth-child(2) {
    flex: 0 0 22%;
    max-width: 22%;
}

.ut-table .ot-table-row > ul > li:nth-child(3) {
    flex: 0 0 45%;
    max-width: 45%;
}

.ut-table .ot-table-row > ul > li:nth-child(4) {
    flex: 1;
    max-width: inherit;
}

.ut-pagination .search-pakage input[type="search"] {
    width: 245px;
}

.modal-backdrop.show {
    opacity: .3;
}

.ud-info-list li {
    padding: 10px 0 10px 30px;
}

.ud-info-list li:nth-child(odd) {
    background: #F2F6F7;
}

.ud-acction-tooltip .tooltip-wrap {
    left: calc(50% - 70px);
}

.uto-table .ot-table-row > ul > li:nth-child(2) {
    flex: 0 0 28%;
    max-width: 28%;
}

.uto-table .ot-table-row > ul > li:nth-child(3) {
    flex: 0 0 36%;
    max-width: 36%;
}

.office-details-modal .ud-acction-tooltip .tooltip-wrap {
    left: 15px;
}

.detail-od-col {
    background: #F2F6F7;
    padding: 20px;
    border-radius: 5px;
    flex: 0 0 280px;
    max-width: 280px;
    min-height: 500px;
}

.detail-oi-col {
    flex: 1;
}


.bi-col {
    border: 2px solid var(--primary_colour);
    padding: 25px 25px 20px;
    border-radius: 10px;
    height: 100%;
}

.bi-col p {
    min-height: 60px;
}

.billing-info-list > [class*='col-'] {
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
}

.billing-info-list {
    margin-right: -10px;
    margin-left: -10px;
}

.bi-col.add-binfo {
    border-color: #AEB5BF;
}

.saved-billing-documents {
    flex: 0 0 380px;
    max-width: 380px;
}

.saved-billing-documents ul li:nth-child(odd) {
    background: #F2F6F7;
}

.add-payment-modal .form-design1 {
    max-width: 290px;
    margin: 20px auto 100px;
}

.id-box {
    background: var(--primary_colour);
    padding: 25px 25px 20px;
    border-radius: 5px;
    color: #fff;
}

.invoices-due-row > .col {
    flex: 0 0 325px;
    max-width: 325px;
    margin-right: 25px;
}

.id-box .play-now {
    position: absolute;
    right: 15px;
    bottom: 10px;
    z-index: 22;
}

.past-due-col .id-box {
    background: #E32458;
}

.total-due-col .id-box {
    background: #008DBD;
}

.status-info.gray:before {
    background: #AEB5BF;
}

.invoices-order-table .ot-table-row > ul > li:nth-child(1) {
    flex: 0 0 11%;
    max-width: 11%;
}

.invoices-order-table .ot-table-row > ul > li:nth-child(2) {
    flex: 0 0 11%;
    max-width: 11%;
}

.invoices-order-table .ot-table-row > ul > li:nth-child(3) {
    flex: 0 0 12%;
    max-width: 12%;
}

.invoices-order-table .ot-table-row > ul > li:nth-child(4) {
    flex: 0 0 15%;
    max-width: 15%;
}

.invoices-order-table .ot-table-row > ul > li:nth-child(5) {
    flex: 0 0 10%;
    max-width: 10%;
}

.invoices-order-table .ot-table-row > ul > li:nth-child(6) {
    flex: 0 0 11%;
    max-width: 11%;
}

.invoices-order-table .ot-table-row > ul > li:nth-child(7) {
    flex: 0 0 11%;
    max-width: 11%;
}

.invoices-order-table .ot-table-row > ul > li:nth-child(8) {
    flex: 0 0 18%;
    max-width: 18%;
}

.invoices-order-table .status-info:before {
    vertical-align: text-top;
}

.red {
    color: #e32458;
}

.invoice-table .order-table-main {
    height: calc(100vh - 445px);
}

.users-teams-box .order-table-main {
    height: calc(100vh - 435px);
}

.now-viewing {
    position: absolute;
    z-index: 999;
    top: 25px;
    width: 600px;
}

.invoices-viewing > a.has-tooltip {
    background: #fff url(../images/arrow-bottom01.svg) no-repeat 255px 15px;
    padding: 8px 15px;
    border-radius: 4px;
    width: 275px;
    display: block;
    cursor: pointer;
}

.now-viewing .tooltip-wrap {
    margin: -3px 0 0 0 !important;
    border-radius: 0px 0px 5px 5px;
    border-top: 0;
    padding: 15px;
    border: 0;
}

.invoices-viewing > a.has-tooltip * {
    cursor: pointer;
}

.invoices-thead-status a.add-cart {
    padding: 3px 10px;
    font-size: 13px;
    margin: -5px 0 -5px 50px;
}

.invoices-thead-status ul li:nth-child(1) {
    flex: 0 0 10%;
    max-width: 10%;
}

.invoices-thead-status .created-tooltip .tooltip-wrap {
    top: 30px;
    margin-left: 5px;
}

.invoices-thead-status a.add-cart img {
    vertical-align: sub;
}

.review-order-modal .detail-od-col {
    flex: 0 0 250px;
    max-width: 250px;
    min-height: 600px;
}

.confirm-pay {
    padding: 0 60px;
}

.confirm-pay .payment-method-filed, .confirm-pay .different-payment-method .checkbox.radio label span:after {
    width: 350px;
}

.confirm-pay .saved-payment-method .checkbox.radio label span:after {
    margin: -29px 0 0 -37px;
}

.confirm-pay .payment-method-detail .checkbox label span {
    top: 0px;
}

.cp-order-total {
    padding: 25px 30px 0 20px;
}

select.digits.select-design {
    background: #F2F6F7 url(../images/right-arrow-gray.svg) no-repeat 90% center;
    border: 0;
    padding: 6px 5px 6px 10px;
    width: 90px;
    margin: 0 14px 0 0;
    appearance: none;
    position: relative;
    z-index: 777;
    cursor: pointer;
    font-size: 12px;
}

.review-order-info select.digits.select-design {
    position: absolute;
    left: 252px;
    top: -3px;
}

.msg-title-search input[type="search"] {
    min-width: 250px;
}

.msg-title-search {
    border-bottom: 1px solid #CBD4DB;
}

.msg-order-col {
    flex: 0 0 525px;
    max-width: 525px;
    border-right: 1px solid #CBD4DB;
}

.msg-order-tab .tab-design ul {
    padding: 0 20px;
    border-color: #CBD4DB;
}

.msg-order-tab .tab-design ul li {
    flex: 1;
    text-align: center;
}

.sort-name span {
    width: 34px;
    height: 34px;
    display: block;
    border-radius: 100px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 36px;
    margin-right: 22px;
}

.msg-time {
    text-align: right;
    color: #697279;
    margin-left: -25px;
}

.msg-time .number {
    background: #e32458;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 25px;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin: 0;
}

.messenger-name {
    position: relative;
    padding-left: 50px;
}

.sort-name {
    position: absolute;
    left: 0;
    top: -10px;
}

.messenger-name p {
    color: #697279;
}

.om-col {
    padding: 25px 30px 20px;
    border-bottom: 1px solid #CBD4DB;
}

.om-col:last-child {
    border: 0;
}

.om-col.selected .messenger-name p, .om-col.selected .messenger-name h6 {
    color: #7F9DA5;
}

.msg-bttn a.bttn1 {
    display: block;
    max-width: 320px;
    margin: 8px auto;
}

.msg-chat-box {
    flex: 1;
}

.msg-chat-row {
    background: #F2F6F7;
}

.msg-chat-box .chat-box-main {
    border: 0;
    border-radius: 0;
}

.msg-chat-box .chatbox-header {
    padding: 12px 10px 12px 25px;
    line-height: 1.2;
}

.chat-messages-list li:nth-child(even) label {
    background: #56D964;
}

.msg-chat-box .chat-messages-list li span.msg {
    max-width: 475px;
}

.chat-messages-list li:nth-child(even) span.msg {
    border-radius: 10px 10px 10px 0px;
}

.msg-chat-box .chat-messages-list li {
    margin-top: 20px;
}

.msg-chat-box .chat-messages-list {
    height: 100%;
    max-height: calc(100vh - 350px);
    border: 0;
}

.msg-order-tab .tab-content {
    min-height: calc(100vh - 275px);
}

.modal-open .sidebar {
    position: relative;
    z-index: 9999;
    pointer-events: none;
}

.create-msg-box {
    max-width: 650px;
    margin: 0 auto;
}

.chat-box-main.step2 .chatbox-footer a.bttn1 {
    background: #7F9DA5;
    border-color: #7F9DA5;
}

.chat-box-main.step2 .chatbox-footer {
    background: #F2F6F7;
    pointer-events: none;
}


.support-box {
    border: 1px solid #7F9DA5;
    padding: 14px;
    margin: 0 70px;
}

.support-box.hover {
    background: #F7F7F7;
}

.info-notifications {
    width: 350px;
    background-color: var(--primary_colour);
    display: block;
    position: relative;
    float: right;
    bottom: 152px;
    right: 0;
    z-index: 11;
    border-radius: 10px;
    padding: 15px 15px 30px;
}

.info-notifications .close {
    margin-top: -10px;
    margin-right: -5px;
    opacity: 1 !important;
}

.info-notifications:after {
    content: "";
    height: 9px;
    width: calc(100% - 18px);
    background: rgb(0 0 0 / 15%);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}

body:not(.themes):after {
    content: "";
    height: 100%;
    width: 100%;
    background: #fff;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999;
}


.bob {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}

.bob:hover {
    animation-name: bob-on-hover-float, bob-on-hover;
    animation-duration: .3s, 1.5s;
    animation-delay: 0s, .3s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards;
    animation-direction: normal, alternate;
}

@-webkit-keyframes bob-on-hover {
    0% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
    50% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }
    100% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}

@keyframes bob-on-hover {
    0% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
    50% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }
    100% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}

@-webkit-keyframes bob-on-hover-float {
    100% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}

@keyframes bob-on-hover-float {
    100% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}

.bob-up {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}

.bob-up:hover {
    animation-name: bob-up-on-hover-float, bob-up-on-hover;
    animation-duration: .3s, 1.5s;
    animation-delay: 0s, .3s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards;
    animation-direction: normal, alternate;
}

@-webkit-keyframes bob-up-on-hover {
    0% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

@keyframes bob-up-on-hover {
    0% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

@-webkit-keyframes bob-up-on-hover-float {
    100% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

@keyframes bob-up-on-hover-float {
    100% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

.total-list li.product-price:not(.show) {
    display: none !important;
}

.om-row {
    height: calc(100vh - 335px);
}

.om-row.order-table-main {
    border: 0;
    border-bottom: 1px solid #cbd4db;
}

.product-filters .tooltip-wrap {
    left: -8px;
}

.has-info-tooltip a.icon {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 12;
    background: #fff;
}

.has-info-tooltip .tooltip-wrap {
    right: -58px;
    top: 37px;
}

.file-number svg {
    width: 12px;
}

.sidebar-collapse .sidebar a[aria-expanded="true"] {
    background: #394752;
}

body.sidebar-collapse.submenu-collapse aside.sidebar {
    width: 340px;
}


i.icons,
em.icons {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    background-size: 19px !important;
    background-position: center center !important;
}

.sidebar-nav i.icons,
.sidebar-nav em.icons {
    margin-right: 9px;
    background-position: center left !important;
    opacity: 0.4;
    background-size: contain !important;
    width: 24px;
    height: 21px;
    flex: 0 0 25px;
}

i.dashboard-icon.icons {
    background: url(../images/dashboard-icon.svg) no-repeat;
}

i.marketplace-icon.icons {
    background: url(../images/marketplace-icon.svg) no-repeat;
}

i.order-icon.icons {
    background: url(../images/cart-icon.svg) no-repeat;
}

i.account-icon.icons {
    background: url(../images/settings-icon.svg) no-repeat;
}

i.messages-icon.icons {
    background: url(../images/messages-icon.svg) no-repeat;
}

.sidebar-nav ul.main-nav > li > a.active i,
.sidebar-nav ul.main-nav > li > a.active em {
    opacity: 1;
}

.sidebar-nav i.icons + span {
    flex: 1;
}

.sidebar-collapse .sidebar-nav ul.main-nav > li > a.active i,
.sidebar-collapse .sidebar-nav ul.main-nav > li > a.active em {
    filter: brightness(0.2);
}

i.icons.pause-icon,
em.icons.pause-icon {
    background: url(../images/pause-icon.svg) no-repeat;
    background-size: 17px !important;
}

i.icons.cancel-icon,
em.icons.cancel-icon {
    background: url(../images/cancel-icon.svg) no-repeat;
    background-size: 16px !important;
}

i.icons.archive-icon,
em.icons.archive-icon {
    background: url(../images/archive-icon.svg) no-repeat;
    background-size: 16px !important;
}

i.icons.cart2-icon,
em.icons.cart2-icon {
    background: url(../images/cart-icon2.svg) no-repeat;
    background-size: 24px !important;
    margin-right: 5px;
}

i.icons.right-arrow-white,
em.icons.right-arrow-white {
    background: url(../images/right-arrow-white.svg) no-repeat;
    background-size: 12px !important;
}

i.icons.delete-icon,
em.icons.delete-icon {
    background: url(../images/delete-icon.svg) no-repeat left center !important;
    background-size: 14px !important;
    margin-top: -2px;
}

i.icons.info-icon,
em.icons.info-icon {
    background: url(../images/info-icon.svg) no-repeat center center !important;
    background-size: 17px !important;
    margin-top: -3px;
}

i.icons.calendar-icon,
em.icons.calendar-icon {
    background: url(../images/calendar-icon.svg) no-repeat center center !important;
    background-size: 18px !important;
    margin-top: -2px;
}

i.icons.download-icon,
em.icons.download-icon {
    background: url(../images/download-icon01.svg) no-repeat;
    background-size: 16px !important;
}

i.icons.filter-icon-black,
em.icons.filter-icon-black {
    background: url(../images/filter-icon-black.svg) no-repeat center left !important;
    background-size: 15px !important;
    margin-top: -3px;
    margin-bottom: -2px;
}

.dots-bttn-bg {
    background: #f2f6f7 url(../images/dots-gray.svg) no-repeat center center !important;
    background-size: 4px !important;
    margin-top: -3px;
    margin-bottom: -2px;
    width: 20px;
    height: 29px;
    display: inline-block;
}

i.icons.send-icon,
em.icons.send-icon {
    background: url(../images/send-icon.svg) no-repeat center right !important;
    background-size: 15px !important;
    margin-top: -3px;
    margin-bottom: -2px;
}

.icons.attech-icon {
    background: url(../images/attech-icon.svg) no-repeat center left !important;
    background-size: 22px !important;
    width: 30px;
    height: 34px;
}

.order-thead-status i.icons,
.order-thead-status em.icons {
    width: 20px;
    height: 20px;
}

.order-thead-status span {
    display: inline-block;
    vertical-align: bottom;
}

i.icons.arrow-bottom-white,
em.icons.arrow-bottom-white {
    background: url(../images/arrow-bottom-white.svg) no-repeat center right !important;
    background-size: 10px !important;
    width: 18px;
    height: 17px;
}

i.icons.info-icon-white,
em.icons.info-icon-white {
    background: url(../images/info-icon-white.svg) no-repeat center right !important;
    background-size: 17px !important;
    width: 18px;
    height: 17px;
}


/* MEDIA CSS */

@media (max-width: 1600px) {

    h1, h2 {
        font-size: 30px;
    }

    .db-right {
        padding: 20px;
    }

    .new-product-box {
        margin: -20px;
    }

    .sidebar {
        width: 225px;
    }

    .table-design1 th, .table-design1 tr, .table-design1 td {
        padding: 11px 8px;
    }

    .sidebar-nav {
        padding: 5px 8px 8px 10px;
    }

    .order-summary-box {
        margin-left: 20px;
    }

    .order-process-content {
        padding-left: 25px;
    }

    .od-services {
        padding-right: 0;
    }

    .now-viewing {
        margin-left: 100px;
    }

    /* .modal-backdrop {width: calc(100vw - 225px);} */
    .order-table-main {
        height: calc(100vh - 285px);
    }

    .users-teams-box .order-table-main {
        height: calc(100vh - 410px);
    }

    .invoice-table .order-table-main {
        height: calc(100vh - 425px);
    }

}

@media (max-width: 1550px) {

    .process-property-information {
        width: 520px;
    }

    .order-process-steps span {
        font-size: 12px;
    }

    .order-process-steps {
        width: 190px;
    }

    .pd-box {
        padding: 20px 15px;
    }

    .order-process-content {
        padding-left: 15px;
    }

    .product-total-box {
        width: 400px;
        flex: 0 0 400px;
        margin-right: 15px;
    }

    .ot-table-row .ot-table {
        padding-left: 50px;
    }

    /*.order-file-box .ot-table-row ul > li:nth-child(1) {flex: 0 0 16%;max-width: 16%;}*/
    .ot-table-row .btn {
        min-width: 65px !important;
    }

    .user-profile-col {
        flex: 0 0 400px;
        max-width: 400px;
    }

    .order-titles h4 {
        font-size: 16px;
    }

    .order-titles p {
        font-size: 14px;
    }

    .ut-table .ot-table-row > ul > li:nth-child(1) {
        flex: 0 0 5%;
        max-width: 5%;
    }

    .ut-table .ot-table-row > ul > li:nth-child(2) {
        flex: 0 0 19%;
        max-width: 19%;
    }

    .ut-table .ot-table-row > ul > li:nth-child(3) {
        flex: 0 0 50%;
        max-width: 50%;
        padding-right: 35px;
    }

    .uto-table .ot-table-row > ul > li:nth-child(2) {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .uto-table .ot-table-row > ul > li:nth-child(3) {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .saved-billing-documents {
        flex: 0 0 350px;
        max-width: 350px;
    }

    .pagination-design li {
        margin: 0 1px;
    }

    .msg-order-col {
        flex: 0 0 450px;
        max-width: 450px;
    }

    .om-col {
        padding: 22px 13px 18px;
    }

    .switch {
        width: 60px;
    }

    .switch label {
        width: 58px;
        margin-left: 12px;
    }


}

@media (max-width: 1440px) {

    .process-property-information {
        width: 100%;
    }

    .msg-order-col {
        flex: 0 0 400px;
        max-width: 400px;
    }

    .invoices-due-row > .col {
        margin-right: 0;
    }

}