.submit-btn {
    padding: 5px 41px;
    font-size: 13px;
}

.login-sbmt {
    width: 100%;
    padding: 5px;
    font-size: 18px;
    border-radius: 25px;
}

.bg {
    background-color: white;
}

.bg label {
    font-size: 17px;
    color: black;

}

.bg input {
    font-size: 17px !important;
}



.shdw {
    box-shadow: 0px 0px 1rem 0 rgb(41 48 66 / 16%);
    border-radius: 42px !important;
}

.body-radius {
    border-radius: 42px !important;
}

.first-box {
    padding: 46px;
    background-color: #e0eafc;
    border-radius: 6px;
    box-shadow: 2px 2px 2px 2px grey;
    box-shadow: 0px 0px 1rem 0 rgb(41 48 66 / 20%);
}

.cus-deals a svg {
    fill: #3382e3 !important;
    transition: .3s;
}


.booking-deals a svg {
    fill: #429f88 !important;
}

.users-deals a svg {
    fill: #a45ebe !important;
    transition: .3s;
}



.deals-card {
    background-color: #ffffff;
    padding: 30px 30px;
    box-shadow: 0px 0px 15px 0px #00000024;
    border-radius: 12px;
}

.deals-content {
    display: flex;
    justify-content: space-between;
}

.total-deals {
    display: flex;
    align-items: center;
}

.total-deals svg {
    margin-right: 10px;
}

.total-deals h3 {
    margin: 0px;
    font-size: 22px;
    font-weight: 600;
}

.total-deals span {
    color: #7f7f7f;
    font-size: 16px;
    font-weight: 500 !important;
}

.deals-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}

.deals-row .deals-card {
    flex-grow: 1;
    flex-basis: 0;
    margin: 20px;
}

/* pie chart css start here */


.pie {
    --p: 20;
    --b: 22px;
    --c: darkred;
    --w: 90px;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    margin: 5px;
    place-content: center;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    transform: rotate(180deg);
}

.pie:before,
.pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.pie:before {
    inset: 0;
    background:
        radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
    inset: calc(50% - var(--b)/2);
    background: var(--c);
    transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

.animate {
    animation: p 1s .5s both;
}

.no-round:before {
    background-size: 0 0, auto;
}

.no-round:after {
    content: none;
}

@keyframes p {
    from {
        --p: 0
    }
}

.pie:after {
    content: "";
    position: absolute;
    width: 90px;
    background: no-repeat;
    border: 1px solid #eee;
    height: 90px;
    top: 0;
    left: 0;
}

.inner-border:after {
    content: "";
    position: absolute;
    width: 67px;
    background: no-repeat;
    border: 1px solid #eee;
    height: 67px;
    top: 11px;
    left: 11px;
    border-radius: 50%;
    right: 0;
}

/* pie chart css end here */

.validate-danger {
    color: red;
}

/*toggle button for negotiated rate code status */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

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

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

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

input:checked+.slider {
    background-color: #3c5656;
}

input:focus+.slider {
    box-shadow: 0 0 1px #3c5656;
}

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

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

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

/* For edit buttom in booking list */
.actionButton {
    gap: 10px;
}