/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px grey;
    /* border-radius: 10px; */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(88, 103, 221, .5);
    /* border-radius: 10px; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(88, 103, 221, .6);
}

.modal .modal-header .close span {
    display: block !important;
}

.modal-right .modal-dialog {
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.modal-right .modal-content {
    height: 100vh;
    border-radius: unset;
}

.modal-right .modal-body {
    height: calc(100vh - 150px);
    overflow-y: auto;
}

.MuiTableCell-root {
    white-space: nowrap;
}

.pointer {
    cursor: pointer;
}

.hover-underline:hover {
    text-decoration: underline !important;
}

.drawer--fixed .MuiDrawer-paper {
    height: 100vh;
}

.drawer--fixed .drawer-body {
    height: calc(100vh - 50px);
    overflow-y: auto;
}

.btn-text-primary .svg-icon svg g [fill] {
    fill: #e2241b;
}

.opacity-9 {
    opacity: 0.9;
}

.code-bg {
    background-color: #F3F6F9;
}

.code-bg code {
    padding: unset;
}

.icon-primary g [fill] {
    fill: #e2241b !important;
}

.react-icon-primary {
    color: #e2241b;
    font-size: 23px;
}

.react-icon-primary path {
    stroke: #e2241b
}

.icon-flaticon {
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.avatar-image {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    object-fit: scale-down;
}

.image-preview {
    position: relative;
    display: flex;
    justify-content: center;
}

.image-preview svg {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

.image-preview img {
    margin-top: 30px;
}

.image-preview, .image-preview img {
    max-width: 100%;
    border-radius: 8px;
}

.contained-button-file {
    width: 100%;
}

.service-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 10px 0;
}

.active-user svg {
    color: limegreen;
}
.deactive-user svg {
    color: gray;
}

.is-invalid {
    border-color: red !important;
}

.modal-content {
    border-radius: 24px !important;
}

.modal-header {
    border: unset !important;
}

.modal-title {
    width: 100%;
    text-align: center;
}