/* .css-y5vkr9 {
    background-image: linear-gradient(#9854ff, #763eff) !important;
} */

.vertical-timeline::before {
    left: 13px !important;
}


.react-calendar{
    margin-left:17%;
}

.complete img {
    width: 200px;
}



.vertical-timeline-element-content .vertical-timeline-element-date {
    padding:  0 !important;
}

.css-172th5s-MuiSvgIcon-root-MuiStepIcon-root.Mui-completed {
    color: #763eff !important;
}

.css-172th5s-MuiSvgIcon-root-MuiStepIcon-root.Mui-active {
    color: #4446e4 !important;
}

.select-drop::after {
    content: "▼";
    position: absolute;
    top: 50%;
    right: 8px;
    /* Adjust the right position as needed */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    /* Adjust the border width to change the size of the arrow */
    border-color: #333 transparent transparent transparent;
    /* Adjust the border color as needed */
    transform: translateY(-50%);
    pointer-events: none;

}

.sign-canvas {
    border: 1px solid lightgray;
    width: 100%;
    margin-top: 10px;
}

.clr-btn {
    background: none;
    color: #f27474;
    border: 2px solid;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 10px;
}

.select-drop {
    font-size: 14px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.4375em;
    letter-spacing: 0.00938em;
    box-sizing: border-box;
    position: relative;
    cursor: text;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    position: relative;
    padding: 16px;
    border-radius: 4px;
    border-color: lightgray;
}

.row-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-data {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.css-1huol00-MuiPaper-root-MuiDialog-paper {
    border-radius: 10px;
}

.track-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: crimson;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.react-calendar__month-view__days__day--weekend {
    color: black !important;
}

.react-calendar__tile--now {
    background-color: #ff007d !important;
    color: white;
    border-radius: 90px;
}

.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus,
.react-calendar__tile--active {
    background: rgb(255 84 60);
    border-radius: 90px;
}

.react-calendar {
    border: none !important;
}

.react-calendar button {
    height: 50px;
}


.st-btn {
    padding: 5px 10px;
    width: 80px;
    border: none;
    color: black;
    background: #f4f6fa;
}

.ast-btn {
    padding: 5px 10px;
    width: 80px;
    border: none;
    color: black;
    background: #763eff;
    color: white;
}


.dd-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.tab-btn {
    width: 46px !important;
    height: 46px !important;
}

.demo-card {
    height: 60px;
    width: 40%;
    display: flex;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding-left: 2%;
}

.demo-con {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
}

.demo-con-text {
    color: black;
    font-size: 12px;
    margin-top: -10px;
}

.demo-count-text {
    font-size: 28px;
    color: gray;
    font-weight: bold;
}

.tab-con-child {
    width: 100%;
    height: 100%;
    padding: 15px 0px 10px;
    text-align: center;
    border-bottom: 3px solid lightgray;
    cursor: pointer;
}

.active-tab-con-child {
    width: 100%;
    height: 100%;
    padding: 15px 0px 10px;
    text-align: center;
    cursor: pointer;
    border-bottom: 3px solid #621dcf;
}

.notification-count {
    position: relative;
    top: -10px;
    left: 2px;
    background-color: red;
    color: white;
    /* padding: 2px 6px; */
    border-radius: 50%;

    font-size: 10px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}