.main {
    height: 100dvh;
    display: flex;
}

.left {
    height: 100dvh;
    width: 250px;
    z-index: 99;
}

.left-top {
    height: 90px;
}

.logodiv {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px;
}

.logodiv img {
    max-width: 138px;
    object-fit: contain;
}

.left-mid {
    height: calc(100dvh - 160px);
    padding: 12px;
}

.list .first-ul {
    height: calc(100dvh - 180px);
    overflow: auto;
    padding: 0 5px;
}

.list ul {
    list-style: none;
    padding: 0;
}

.list>ul>li {
    justify-content: center;
    color: #000;
    font-size: 14px;

}

.mydropdown .active {
    color: #fff;
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    background-color: var(--sky);
}

.list>ul>li .active {
    color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    background-color: var(--sky);
}

.sidelink {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #000;
    text-transform: capitalize;
}

.sidelink p {
    color: #5D7285;
    font-weight: 500;
}

.sidelink.active p {
    color: #fff;
    font-weight: 500;
}

.sideicon {
    max-width: 20px;
    object-fit: contain;
    margin-right: 10px;
}

.left-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    color: #000;
}

.left-bottom a {
    text-decoration: none;
    margin-left: 5px;
    color: #000;
}

.right {
    height: 100dvh;
    background-color: #F8F7FA;
    width: calc(100% - 250px);
}

.right-top {
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    color: #000;
}

.userimg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 10px;
}

.bellimg {
    width: 30px;
    height: 30px;
}

.right-profile {
    height: calc(100dvh - 80px);
    padding: 12px;
    color: #000;
}


.right-bottom {
    height: calc(100dvh - 80px);
    padding: 12px;
    color: #000;
    overflow-y: auto;
}

.bottom-main {
    height: calc(100dvh - 110px);
    color: #000;
}

.content {
    height: calc(100dvh - 105px);
    overflow: auto;
}

.table-space {
    height: 15px;
}

.loginmain {
    min-height: 100dvh;
    width: 100%;
    position: relative;
}

.logintop {
    background-color: var(--sky);
    height: 25dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logintop img {
    height: 120px;
    width: 120px;
}

.loginbottom {
    position: absolute;
    height: 100dvh;
    width: 100%;
    display: flex;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 10px;
}

.formdiv {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 10px;
    width: 100%;
    max-width: 510px;
}

.circlelogo {
    display: flex;
    justify-content: center;
}

.circlelogo img {
    max-width: 70px;
    object-fit: contain;
}

.grybordr {
    border-bottom: solid 2px #E8E8E8;
    margin: 10px 20px;
    padding-bottom: 10px;
}

.table tbody,
.table td,
.table tfoot,
.table th,
.table thead,
.table tr {
    border: none;
}

.table tbody tr {
    border-bottom: 1px solid #DDDDDD;
}

.table th {
    background-color: var(--lblue);
    padding: 20px 10px !important;
    color: #000;
    text-wrap: nowrap !important;

}

.table td {
    padding: 20px 10px !important;
    text-wrap: nowrap !important;
}

.table thead tr th:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.table thead tr th:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}


.list ul::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.content::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.list ul::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track {
    background: #DADADA;
    margin: 50px 0;
    border-radius: 50px;

}

.list ul::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 50px;
}

.list ul::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover {
    background: #000;
}

/* -------new code-------- */
.chevron-icon {
    transition: transform 0.3s ease;
}

.collapse.show+.chevron-icon {
    transform: rotate(180deg);
}

.mydropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    margin: 6px 0
}

.mydropdown.show {
    max-height: 500px;
    /* Adjust this value based on the content's height */
}

.mydropdown .sidelink {
    padding: 5px 15px
}

.rotate {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
    /* Optional for smooth transition */
}

.logout-clr {
    background: #ccd9f8;
}

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

.bell-circle {
    padding: 6px 12px
}

.status-btn {
    min-width: 120px;
}

.main-tabb .nav-pills .nav-link {
    border-radius: 0px;
    color: #000;
}

.main-tabb .nav-pills .nav-link.active {
    border-radius: 0px;
    color: var(--sky);
    font-weight: 600;
    background-color: transparent;
    position: relative;
    /* border-bottom: 5px solid var(--sky); */
}

.main-tabb .nav-pills .nav-link.active:before {
    position: absolute;
    content: '';
    background: var(--sky);
    height: 4px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2px;
    border-radius: 100px;
}

.main-tabb ul {
    background: #ECF2FF;
}

.pagination-box {
    background: #FBFCFD;
}

.reports {
    height: calc(100dvh - 215px);
}

.dot-green {
    color: #00E813;
}

.ffont {
    font-size: 30px;
}

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

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

.bg-skybblue {
    background: rgba(0, 159, 244, 0.3);
}

.bg-red {
    background: #D92D20;
}

.red {
    color: #D20000;
}

.perpel {
    color: var(--Color-Palette-primary-main, #8C57FF);
}

.bg-lwhite {
    background: #E7E7E7;
}

.green {
    color: #0A8A01;
}

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

.bg-lgrey {
    background: #F5F5F5;
}

.bg-elblue {
    background: var(--elsky);
}

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

.bg-skyyblue {
    background: var(--skyyblue);
}

.bg-skyblue {
    background: rgba(0, 159, 244, 0.11);
}

.bg-dgrey {
    background: rgba(247, 247, 247, 1);
}

.dgrey {
    color: rgba(93, 114, 133, 1);
}

.skin {
    color: var(--Theme-text-disabled, rgba(46, 38, 61, 0.4));

}

.invoice-btn {
    border: none;
    padding: 9px 25px;
    color: white;
    border-radius: 5px;
}

.my-shadow {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    border-radius: 5px;
    padding: 20px 20px;
}

.custm-select option {
    color: #8897AD;
}

.shadow2 {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.table-bin {
    height: 24px;
    width: 24px;
    border-radius: 5px;
}

.table-tax {
    border: 1px solid gray;
    border-radius: 10px;
}

.bg-bin {
    height: 35px;
    width: 35px;
    border-radius: 5px;
    background: #E7E7E7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.border-btm {
    border-bottom: 1px solid var(--skyyblue);
}

.fram {
    height: 100%;
    width: 100%;
}

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

.img-size {
    height: 15px;
    width: 15px;
    object-fit: contain;
}

.img-icon {
    height: 45px;
    width: 45px;
    object-fit: contain;
}

.img-incom {
    height: 25px;
    width: 25px;
    object-fit: contain;
}

.angle-img {
    height: 20px;
    width: 25px;
    object-fit: contain;
}

.img-80px {
    height: 80px;
    width: 80px;
}

.team-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.btn1-cstm {
    padding: 2px 5px;
    border: 1px solid var(--skyyblue);
    color: var(--skyyblue);
    border-radius: 5px;
    min-width: 112px;
}

.btn2-cstm {
    padding: 2px 5px;
    border: 1px solid red;
    color: red;
    border-radius: 5px;
    min-width: 112px;
    background: transparent;
}

.border-btm {
    border-bottom: 1px solid var(--skyyblue);
}

.men-img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 8px;
}

.border-right {
    border-right: 3px solid rgba(93, 114, 133, 1);
}

.b-shadow {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.profit-border-btm {
    border-bottom: 6px solid rgba(0, 159, 244, 1);
}

.zip-btn {
    border-radius: 0 4px 4px 0 !important;
}

.label-url-btn {
    width: 100%;
}

.url-btn {
    display: flex;
    flex-grow: 1;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-right: 10px;
    max-width: 100%;
}

.url-btn input {
    flex: 1;
    border: none;
    padding: 10px;
    border-right: 1px solid #ced4da;
    border-radius: 4px 0 0 4px;
    min-width: 0;
}

.copy-btn {
    background-color: #F5F5F5;
    border: none;
    color: black;
    padding: 10px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.view-page-btn {
    background-color: #F5F5F5;
    border: 1px solid #ced4da;
    color: #000;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 10px;
    align-self: center;
}


.Request-Quote-main:hover {
    background-color: #ECF1FF;
    border: 1px solid #ECF1FF !important;
}

.profit-size {
    height: 35px;
    width: 35px;
    background-color: rgba(196, 228, 245, 1);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.reputation-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.fix-height {
    height: calc(100dvh - 200px);
    overflow-y: auto;
}

.left-bottom {
    border-top: 1px solid #E0E0E0;
}

.tab-100 {
    min-width: 210px;
}

.bg-nblue {
    background: #F7FBFF;
}

.max-w-700px {
    max-width: 700px;
}

.size-16px {
    width: 16px;
    height: 16px;
}

.cat-up2 {
    max-width: 320px;
    width: 100%;
    height: 200px;
    border: 2px dashed #009FF4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.border-blue {
    border: 1px solid var(--sky);
}

.bottom-dash-black {
    border-bottom: 1px dashed #00000080;
}

.border-dashed-blue {
    border: 1px dashed #009FF4;
}

.bg-ngrey {
    background: #D4D7E3;
}

.white-min {
    min-height: calc(100dvh - 230px);
}

.filter-width {
    max-width: 150px;
}

.bg-lgrey2 {
    background-color: #B3E3FC;
}

.font-j {
    display: flex;
    align-items: center;
}

.emoji-bg {
    background-color: #E0E6FA;
    padding: 6px 8px;
    color: var(--blue);
    border-radius: 50%;
    color: #1a83f5;
}

.profile-edit {
    padding: 8px 8px;
    background: #F5F5F5;
    border: 4px solid #fff;
    border-radius: 10px;
}

.profile-edit img {
    width: 70px;
}

.rev-main {
    overflow: auto;
}

.rev-inner {
    min-width: 700px;
    overflow-x: auto;
}

.border-dashed {
    border: 1px dashed #CECECE;
}

#raphael-group-ozAevNbU {
    display: none !important;
}

#triangleCanvas,
#triangleCanvas2 {
    display: block;
    height: auto;
}

.minus-box {
    height: calc(100% - 35px);
    min-height: 250px;
}

#myDiv,
#myDiv2 {
    width: 100%;
    height: 100%;
}

.greybtn {
    background: #CBCBCB;
    color: #949494;
}

/* ---------------Website---------- */
.navbar-brand {
    max-width: 180px;
}

.header-bg {
    background: #F5F5F5
}

.bg-ngrey1 {
    background: #F5F5F5;
}

.text-lwhite {
    color: #A1A1AA;
}

.bg-bluenew {
    background: #D6E1FF;
}

.ind-img {
    max-width: 70px;
    width: 100%;
    height: 70px;
    object-fit: contain;
}

.ser-hover {
    transition: all 0.3s;
}

.ser-hover:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 1px solid var(--sky);
}

.max-price {
    max-width: 480px;
}

.pricing-grey {
    background: #EEEEEE;
}

.bg-plans {
    background: #EBF0FF;
}

.text-grey {
    color: #848199;
}

.trial-bg {
    background: #8786A7;
}

.popular-neg {
    margin-top: -38px;
}

.col-minus {
    margin-top: -30px;
}

.book-box {
    border: 1px solid #E6E6E6;
}

.book-icon {
    background: #F5F5F5;
    display: inline-block;
    padding: 14px 14px;
    color: #000;
}

.arrow-up {
    border: 1px solid #E6E6E6;
    display: inline-block;
    padding: 14px 14px;
}

.book-box {
    transition: all 0.3s;
}

.book-box:hover {
    background: #E2E7F5;
}

.book-box:hover .arrow-up {
    border: 1px solid #1a83f5;
    background: #1a83f5;
    color: #fff;
}

.book-box:hover .book-icon {
    background: #1a83f5;
    color: #fff;
}

.pr-icon {
    width: 20px;
}

.pricing-tbl {
    min-width: 600px;
    padding: 0 20px;
}

.pr-main {
    overflow-x: auto;
}

.white-place::placeholder {
    color: #757575;
}

.dropdown-menu.new-dropdown {
    padding: 0px !important;
}

.new-dropdown li:last-child a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.new-dropdown li:first-child a {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

header .nav-link.active {
    color: #009FF4 !important;
    font-weight: 500;
}

.caret.active {
    color: #009FF4;
}

.potential-box:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: -10px;
    left: 0
}

.potential-box:nth-of-type(9n+1):before {
    background: url("../img/potential1.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.potential-box:nth-of-type(9n+2):before {
    background: url("../img/potential2.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.potential-box:nth-of-type(9n+3):before {
    background: url("../img/potential3.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.potential-box:nth-of-type(9n+4):before {
    background: url("../img/potential4.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.potential-box:nth-of-type(9n+5):before {
    background: url("../img/potential5.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.potential-box:nth-of-type(9n+6):before {
    background: url("../img/potential6.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.potential-box:nth-of-type(9n+7):before {
    background: url("../img/potential7.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.potential-box:nth-of-type(9n+8):before {
    background: url("../img/potential8.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.potential-box:nth-of-type(9n+9):before {
    background: url("../img/potential9.png") no-repeat;
    background-size: 28%;
    background-position: left top;
}

.trans-shadow {
    position: relative;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        linear-gradient(110.72deg, rgba(255, 255, 255, 0.3) -2.91%, rgba(255, 255, 255, 0) -2.9%, rgba(255, 255, 255, 0) 17.95%, rgba(255, 255, 255, 0.3) 19.42%, rgba(255, 255, 255, 0.3) 34.01%, rgba(255, 255, 255, 0) 36.21%, rgba(255, 255, 255, 0) 50.86%, rgba(255, 255, 255, 0.3) 53.07%, rgba(255, 255, 255, 0.3) 66.11%, rgba(255, 255, 255, 0) 68.32%);
}

.colrPic-main {
    backdrop-filter: blur(9.84276294708252px);
    box-shadow: 0px -1.23px 2.46px 0px #FFFFFF inset;
    box-shadow: 0px 9.84px 41.83px 0px #00000014;
    position: relative;
    z-index: 1;
}

.colr-pic {
    position: absolute;
    top: -9px;
    left: -9px;
    z-index: -1;
}

.colr-img {
    height: 100%;
    width: 85px;
}

.potential-box:nth-of-type(9n+1) .unlock-card {
    border: 1px solid #84D9C2;
}

.potential-box:nth-of-type(9n+1) .unlock-card {
    border: 1px solid #84D9C2;
}

.potential-box:nth-of-type(9n+2) .unlock-card {
    border: 1px solid #B098E4;
}

.potential-box:nth-of-type(9n+3) .unlock-card {
    border: 1px solid #F5A696;
}

.potential-box:nth-of-type(9n+4) .unlock-card {
    border: 1px solid #7690CC;
}

.potential-box:nth-of-type(9n+5) .unlock-card {
    border: 1px solid #EFBB60;
}

.potential-box:nth-of-type(9n+6) .unlock-card {
    border: 1px solid #59D560;
}

.potential-box:nth-of-type(9n+7) .unlock-card {
    border: 1px solid #6FC08F;
}

.potential-box:nth-of-type(9n+8) .unlock-card {
    border: 1px solid #79A5EC;
}

.potential-box:nth-of-type(9n+9) .unlock-card {
    border: 1px solid #DB847E;
}

.unlock-sec {
    background-image: linear-gradient(#FFFFFF, #D6E1FF, #D6E1FF, #D6E1FF, #D6E1FF);

}

.simplihost-card {
    box-shadow: 0px 30px 50px 0px #8742EB1A;
    border-radius: 20px;
}

.tabs {
    border: solid 2px var(--blue);
}

.tbss {
    background-color: #fff;

}

.review .nav-tabs {
    background-color: transparent !important;
    border: none !important;
}

.review .nav-link {
    background-color: transparent !important;
    color: #000 !important;
    font-size: 18px;
    border: none !important;
}

.review .nav-link.active {
    background-color: transparent !important;
    color: #1a83f5 !important;
    font-weight: 600;
    font-size: 18px;
    border-bottom: solid 5px #1a83f5 !important;
}

.review .bg-greyn {
    background: #F8F8F9;
}

.bg-sky2 {
    background: #ECF2FF;
}

.min-vh {
    min-height: 100dvh;
}

.low-stock {
    background: #FCE0D3;
    color: #DB7F5B;
}

.option-item {
    padding: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.option-item:hover {
    background-color: #e2e6ea;
}

.round-box {
    background: rgb(220, 227, 234);
    ;
    padding: 2px 8px;
    font-size: 10px;
}

.max-content {
    width: 70px !important;
}

.max-400 {
    max-width: 400px !important;
}

#divHide {
    display: none;
}


.graysection {
    background: #F7F7F7;
    height: calc(100dvh - 230px);
    border-radius: 20px;
    padding: 10px
}

.innerdiv {
    height: 100%;
    overflow: auto;
    padding: 0 10px;
}

.notif {
    background: #EBEBEB;
    border-radius: 15px;
}

.comimg {
    background-color: #fff;
    width: 100px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 15px;
    margin-right: 20px;
}

.inicons {
    color: var(--blue);
    font-size: 25px;
    margin-right: 15px;
}

.bell {
    width: 70px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #717171;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--sky);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--sky);
}

input:checked+.slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.qty {
    max-width: 70px;
    margin: auto;
}

.servicesmall {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 50%;
}

/* -------main1-------- */
.midbrdr {
    border-left: solid 1px #DDDDDD;
    border-right: solid 1px #DDDDDD;
}

.cardhight {
    height: 300px;
}

.setpperlabel {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 10px;
    background-color: #ECF1FF;
}

.stepperlogow {
    width: 100%;
    max-width: 200px;
    display: inline-flex;
    justify-content: center;
}

.step {
    display: none;
}

.step.active {
    display: block;
}

.stepper-buttons {
    margin-top: 20px;
}

.booking-btn button {
    margin-right: 5px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.booking-btn button img {
    width: 26px;
}

.booking-n button img {
    width: 14px;
}

.booking-btn button[disabled] {
    background-color: #cccccc;
}

/* Progress Bar Styling */
.progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    height: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #1a83f5;
    transition: width 0.3s ease;
}

#prevDateBtn,
#prevDates {
    background-color: #ECF1FF;
    cursor: pointer;
    /* padding: 20px; */
    border-radius: 8px;
    color: #000;
    font-size: 30px;
    padding: 0 20px 3px;
}

#nextDateBtn,
#nextDates {
    background-color: #ECF1FF;
    cursor: pointer;
    /* padding: 20px; */
    border-radius: 8px;
    color: #000;
    font-size: 30px;
    padding: 0 20px 3px;
}

#dateContainer {
    background-color: #ECF1FF;
    border-radius: 8px;
}

.date-item {
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.date-item {
    color: #007bff;
    opacity: 0.3;
}

.date-item.active {
    color: #007bff;
    opacity: 1;
}

.time-item {
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    border: solid 1px #0000004D;
    padding: 15px;
    margin: 6px 0;
    font-weight: 600;
}

.time-item.active {
    background-color: #fff;
    color: #007bff;
    border: solid 1px #007bff;

}


.side-bg {
    background-color: #F6F6F6;
    border-radius: 5px;
}

.topside {
    background-color: #ECF1FF;
    padding: 15px;
    border-radius: 5px;
}

.bottomitem {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    border-bottom: dashed 1px #0000004D;
}

.bottomitem img {
    width: 40px;
    height: 40px;
    margin-right: 10px;

}

.hght {
    height: calc(100dvh - 215px);
}

.dvh-100 {
    height: 100dvh;
}

.custominput {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: solid 1px #D4D7E3;
    padding: 15px;
    border-radius: 10px;
    background-color: #F7FBFF;
    width: 100%;
    max-width: 400px;
}

.custominput input {
    width: 520px !important;
}

.nextbtn {
    width: 100%;
    font-weight: 600;
    max-width: 220px;
    border-radius: 100px;
    background-color: #1a83f5;
}

.prevBtn {
    background-color: transparent !important;
}

.booking-btn .checkbox-wrapper-23 *,
.booking-btn .checkbox-wrapper-23 *:after,
.booking-btn .checkbox-wrapper-23 *:before {
    box-sizing: border-box;
}

.booking-btn .checkbox-wrapper-23 input {
    position: absolute;
    opacity: 0;
}

.booking-btn .checkbox-wrapper-23 input:checked+label svg path {
    stroke-dashoffset: 0;
}

.booking-btn .checkbox-wrapper-23 input:focus+label {
    transform: scale(1.03);
}

.booking-btn .checkbox-wrapper-23 input+label {
    display: block;
    border: 2px solid #D4D7E3;
    width: var(--size);
    height: var(--size);
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
}

.booking-btn .checkbox-wrapper-23 input+label:active {
    transform: scale(1.05);
    border-radius: 12px;
}

.booking-btn .checkbox-wrapper-23 input+label svg {
    pointer-events: none;
    padding: 5%;
}

.booking-btn .checkbox-wrapper-23 input+label svg path {
    fill: none;
    stroke: #333;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 101;
    transition: all 250ms cubic-bezier(1, 0, .37, .91);
}

.repair-logo {
    max-width: 300px;
}

.max-100 {
    max-width: 100% !important;
}

.uploadbtn2 {
    display: flex;
    align-items: center;
}

.uploadbtn2a {
    background-color: #1a83f5;
    color: #fff;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 20px;
    margin-right: 10px;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.dropdown-menu {
    padding: 10px !important;
    border-radius: 10px !important;
}

.dropdown-toggle::after {
    display: none !important;
}

.tag {
    background-color: #1a83f5;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    font-size: 16px;
    margin: 5px;
}

.tag .remove-tag {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}

#tag:focus {
    outline: none;
    border: none;
    background: #fff;
}

.accordion {
    --bs-accordion-btn-icon-width: 13px !important;
}

.brown {
    color: #973F00;
}

.rightarrow,
.rightarrow2 {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0;
    top: 50%;
    transform: translate(80%, -50%);
    border: solid 1px #48484833;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: rgba(253, 99, 99, 0.2) 0px 0px 25px;
}

.leftarrow,
.leftarrow2 {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 50%;
    transform: translate(-80%, -50%);
    border: solid 1px #48484833;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: rgba(253, 99, 99, 0.2) 0px 0px 25px;
}

.materialimg {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.opportunities-table .color-label {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.opportunities-table .color-label.red {
    background-color: #FF0000;
}

.opportunities-table .color-label.green {
    background-color: #00FF00;
}

.opportunities-table .color-label.blue {
    background-color: #0000FF;
}

.opportunities-table {
    overflow-x: auto;
}

.opportunities-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    margin-bottom: 8px;
}

.opportunities-table th .pipeline-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    text-align: left;
    margin-bottom: 0;
}

/* .opportunities-table th,
.opportunities-table td {
    min-width: 180px;
    background-color: rgba(0, 159, 244, 0.2);
    padding: 8px;
    border-radius: 12px;
} */

.opportunities-table th .box,
.opportunities-table td .box {
    min-width: 180px;
    background-color: rgba(0, 159, 244, 0.2);
    padding: 8px;
    border-radius: 12px;
}

.logs-table {
    overflow-x: auto;
}

.logs-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
    min-width: 500px;
    margin-bottom: 8px;
}

.logs-table th,
.logs-table td {
    border: 1px solid #E0E0E0;
    padding: 6px 12px;
    font-size: 14px;
}

.logs-table thead tr th:first-child {
    border-top-left-radius: 12px;
}

.logs-table thead tr th:last-child {
    border-top-right-radius: 12px;
}

.logs-table tbody tr td:first-child {
    text-wrap: nowrap;
}

.logs-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.logs-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.w-40px {
    width: 40px;
}

.ModifierGroupModal .modal-dialog {
    width: 100%;
    max-width: 1000px;
}

.Selection-types-wraper {
    display: flex;
    align-items: center;
}

.Selection-types-wraper div:first-child .Selectiontypelabel {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

.Selection-types-wraper div:last-child .Selectiontypelabel {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.Selectiontypelabel {
    border: 1px solid #D4D7E3;
    font-size: 14px;
    padding: 8px;
    cursor: pointer;
}

.Selectiontyperadio {
    display: none;

    &:checked+.Selectiontypelabel {
        border-color: #1a83f5;
        color: #1a83f5;
    }
}

.img-40px {
    width: 40px;
    height: 40px;
}

.img-70px {
    width: 70px;
    height: 70px;
}

.ceilingheightradioinput {
    display: none;

    &:checked+.ceilingheightradiolabel {
        border-color: #1a83f5;
        color: #1a83f5;
    }
}

.ceilingheightradiolabel {
    border: 1px solid #D4D7E3;
    font-size: 14px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 8px;
}

.progress-step {
    background-color: #e0e0e0;
    text-decoration: none;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 24px;
    text-wrap: nowrap;
    clip-path: polygon(calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 15px 50%, 0% 0%);
}

.progress-step:not(:first-child) {
    margin-left: -10px;
}

.progress-step.active {
    background-color: var(--lblue);
    color: white;
}

.progress-step:first-child {
    clip-path: polygon(calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 0% 0%);
}

.progress-step:last-child {
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 15px 50%, 0% 0%);
}

.category-label {
    border: 2px solid transparent;
    padding: 10px;
    border-radius: 5px;
    transition: border 0.3s ease;
    cursor: pointer;
}

.ind-sel input[type="radio"]:checked + .category-label {
    border: 2px solid #007bff !important; 
    background-color: #eef5ff;
}

.nextbtn {
    color: #fff;
    border: none;
}
.service-address-item {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

.service-address-actions {
    top: 5px;
    right: 5px;
}

.edit-service-btn,
.remove-service-btn {
    background: none;
    border: none;
    padding: 0 5px;
    cursor: pointer;
}

.edit-service-btn:hover {
    color: #0d6efd;
}

.remove-service-btn:hover {
    color: #dc3545;
}

.is-invalid {
    border-color: #dc3545 !important;
}
@media screen and (max-width: 1440px) {
    .table th {
        padding: 15px 10px !important;
        font-size: 14px;
    }

    .table td {
        padding: 10px 10px !important;
        font-size: 14px;
    }

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

@media screen and (max-width: 1200px) {
    .fix-height {
        height: calc(100dvh - 238px);
    }
}

@media screen and (max-width: 1030px) {

    .rightarrow,
    .rightarrow2 {
        display: none;
    }

    .leftarrow,
    .leftarrow2 {
        display: none;
    }
}

@media screen and (max-width:992px) {
    .tab-100 {
        width: 100%;
    }

    .fix-height {
        height: 100%;
    }

    .filter-width {
        max-width: 100%;
    }

    .new-dropdown {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media screen and (max-width:767px) {
    .popular-neg {
        margin-top: 8px;
    }

    .col-minus {
        margin-top: 0px;
    }

    .stepperlogow {
        width: 100%;
        max-width: 150px;
    }
}

@media screen and (max-width:577px) {
    .mbl-100 {
        width: 100%;
    }

    .cus-img {
        width: 30px;
        height: 30px;
    }

    .copy-input {
        width: 100%;
    }

    .url-btn {
        width: 100%;
        margin-right: 0;
    }

    .view-page-btn {
        width: 100%;
        margin-top: 10px;
        margin-right: 0;
        justify-content: center;
        align-self: stretch;
        margin-top: 5px;
    }

    .border-right {
        border-right: 0px solid rgba(93, 114, 133, 1);
    }

    .pricing-grey {
        background: none;
    }

    .custom-left {
        left: -16px;
        top: 0;
        height: 100dvh;
        overflow-y: auto;
        position: fixed;
    }
}

@media screen and (max-width:430px) {
    .f-16 {
        font-size: 12px;
    }

    .fa-angle-right {
        margin: 0px 3px !important;
    }
}

@media screen and (max-width:400px) {
    .deletejob-btn {
        font-size: 12px;
    }

    .generateinvoice-btn {
        font-size: 12px;
    }

    .date-item {
        font-size: 12px;
        padding: 10px 6px;
    }

    #nextDateBtn,
    #nextDates,
    #prevDates,
    #prevDateBtn {
        padding: 10px 10px;
    }

    #nextDateBtn img,
    #prevDateBtn img,
    #nextDates img,
    #prevDates img {
        width: 10px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 380px) {
    .view-page-btn {
        margin-top: 15px;
    }
}

@media screen and (max-width:341px) {
    .delete-invoice-btns {
        flex-wrap: wrap !important;
    }

    .deletejob-btn {
        margin-bottom: 8px;
    }
}

@media screen and (min-width:768px) {
    .ModifierGroupModal .form-box {
        max-height: calc(100dvh - 150px);
        overflow-y: auto;
    }
}