/* Start : Scroll Bar Styles */
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #1e88e5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* End : Scroll Bar Styles */

.sho-button {
    text-transform: capitalize;
}

.ml10 {
    margin-left: 10px !important;
}

.fs20 {
    font-size: 20px;
}

.mr6 {
    margin-right: 6px;
}

.page-header {
    padding: 0px;
}

.menu-text {
    color: #000;
    /* margin-left: 6px; */
}

.sho-logo {
    background: #1e88e5;
    padding: 20px;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 200px;
    font-size: 30px;
}

.side-menu-drawer .MuiPaper-root {
    border: 0px;
}

.side-menu-drawer .MuiList-root {
    border-right: 1px solid #ddd;
    height: 100%;
}

.color-white {
    color: #fff;
}

.color-white svg {
    color: #fff;
}

.MuiCard-root {
    padding: 10px;
}

.MuiButton-root {
    text-transform: unset;
}

.page-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-theme-toggle {
    /* position: absolute;
      top: 20px;
      right: 0px; */
    margin-left: 10px !important;
}

.btn-save {
    margin-left: 10px !important;
}

.sho-icon {
    height: 20px;
}

.customer-logo {
    object-fit: contain;
}

.MuiChip-root {
    /* width: fit-content; */
    margin-left: 0px !important;
}

.media-capture-container {
    background: #fff;
    color: rgba(0, 0, 0, 0.87);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    padding: 5px;
}

.selected-files-container {
    max-height: 100px;
    overflow: auto;
    /* padding: 5px; */
}

/* .image-capture-container {
} */
.selected-image-container {
    background: #fff;
    color: rgba(0, 0, 0, 0.87);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    padding: 5px;

    height: 200px;
    width: 200px;
    position: relative;
}

.selected-image-container img {
    width: 100%;
    height: 100%;
}

.remove-icon {
    position: absolute;
    right: -20px;
    top: 4px;
}

.remove-icon:hover {
    cursor: pointer;
    color: red;
}

#boundData {
    overflow: auto;
}

.jsonforms-field {
    display: flex;
    flex-direction: column;
}

.margin10 {
    margin: 10px !important;
}

.center-objects {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto !important;
}

@media (max-width: 768px) {
    .jsonforms-field {
        flex-direction: row;
    }
}

@media (min-width: 250px) and (max-width: 450px) {
    .minWidth {
        width: 350px !important;
    }

    .btn-theme-toggle,
    .btn-save {
        font-size: 9px !important;
    }

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

@media (width: 280px) {
    .minWidth {
        width: 200px !important;
    }
}

@media (min-width: 450px) and (max-width: 600px) {
    .minWidth {
        width: 500px !important;
    }
}

.sho-form-container {
    margin: "auto";
    padding: "1rem";
}

/* Reference :  https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile */
/* Mobile Devices */
@media (max-width: 480px) {
    .sho-form-container .MuiGrid-container .MuiGrid-root {
        flex-direction: column !important;
    }
}

.MuiTablePagination-root {
    overflow: hidden !important;
}

.sho-form-loader {
    opacity: 0.5 !important;
}