::-webkit-scrollbar {
    width: 12px;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
    background: #EAEAEA;
    border-radius: 8px;
    border: 2px solid #F6F8FA;
}

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

/* Colors Base */

.sm-primary {
    background-color: #185DBF;
    color: white;
}

.sm-structural-grey {
    background-color: #F6F8FA;
        color: black;
}

.sm-border {
    border: 1px solid #EBEEF1;
}

.sm-grey {
    background-color: #d8d8d8;
    color: black;
}

.sm-light-grey {
    background-color: #f0f0f0;
    color: black;
}

.sm-warning {
    background-color: #f0ad4e ;
    color: white;
}

h1, h2 {
    font-family: "Inter", sans-serif;
}

h3 {
    font-family: "Inter", sans-serif;
    font-size: 18px;
}

html, body, h5, h4, h6 {
    font-family: "Inter", sans-serif;
}

a, u {
    text-decoration: none !important;
}

.padding-horizontal-small {
    padding: 0 5px;
}

.padding-vertical-small {
    padding: 5px 0;
}

hr {
  border: 1px solid #ebeef1;
}

header {
    border-bottom: 1px solid #ebeef1;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: 12px;
    display: table;
    border-bottom: 1px solid #ebeef1
}

tr:first-child {
    border-top: 1px solid #ebeef1
}

tr {
    border-bottom: 1px solid #ebeef1
}

th, td {
    padding: 8px 8px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}

th:first-child, td:first-child {
    padding-left: 12px
}

/**
 *  Material Icon Styling
 */

.material-icons {
    vertical-align: middle;
    padding-bottom: 1px;
    font-size: 16px;
}

.material-icon-bg {
    background: #f0f0f0;
    border-radius: 4px;
    padding: 8px;
}

/**
 *  Input Styling
 */
.sm-input {
    border: 1px solid #808080;
    border-radius: 5px;
    padding: 4px 5px;
    outline: none;
    max-width: 100%;
}

.sm-input:focus {
    border: 1px solid #185DBF;
    box-shadow: 1px 1px 0 0 #185DBF;
}

.sm-input-wide {
    border: 1px solid #185DBF;
    border-radius: 5px;
    padding: 4px 5px;
    outline: none;
    width: 100%;
}

input[type=checkbox] {
    height: 20px;
    width: 20px;
    cursor: pointer;
}

/**
 *  button styling.
 */

.sm-icon-button {
    border: none;
    border-radius: 8px;
    box-shadow: 0 0 0 0;
    cursor: pointer;
    outline: none;
    font-size: 12px;
    padding: 9px 9px;
}

.sm-icon-button .material-icons {
    min-width: 20px;
    min-height: 20px;
}


.sm-button {
    border: none;
    border-radius: 8px;
    box-shadow: 0 0 0 0;
    cursor: pointer;
    outline: none;
    font-size: 12px;
    padding: 9px 18px;
}


.sm-button:hover, .sm-icon-button:hover {
    box-shadow: 1px 1px 1px 1px #aaaaaa;
}

.sm-disabled, .sm-button:disabled, .sm-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.4
}

.sm-disabled *, :disabled * {
    pointer-events: none
}

.sm-disabled:hover, .sm-button:disabled:hover, .sm-icon-button:disabled:hover {
    box-shadow: none
}

/* Sort Styling */

.sm-sort {
    cursor: pointer;
}

.sm-sort:hover {
    background: #f0f0f0;
}

/* Select Styling */
.sm-select {
    border-radius: 5px;
    background-color: white;
    border: 1px solid #185DBF;
    cursor: pointer;
    padding: 4px 12px;
    outline: none;
    overflow: hidden;
    max-width: 100%;
}

.sm-select-medium {
    padding: 4px 10px;
    border: 1px solid #aaaaaa;
    background-color: #f0f0f0;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    overflow: hidden
}

.sm-primary-border {
    border-color: #185DBF !important;
}

.sm-normal {
    border-color: #ccc !important;
}

.sm-checkbox-label {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}


/* Screen Only */
@media screen {
    .no-print {
        display: block;
        visibility: visible;
    }

    .no-show {
        display: none;
    }
}

/* Print Only */
@media print {
    .no-print {
        display: none !important;
        visibility: hidden;
    }

    .no-show {
        display: block;
    }

    .must-print {
        display: block;
        visibility: visible;
    }
}

/* a tag Styling */

a, u {
    text-decoration: none !important;
}

.pagination {
    list-style-type: none;
    margin-top: 16px;
    margin-bottom: 24px;
    margin-right: 16px;
}

.pagination li {
    padding: 8px 12px;
    display: inline;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #f0f0f0;
}

.pagination .active {
    background-color: #d8d8d8;
}

.sm-pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px;
    flex-wrap: wrap;
}

.sm-color-picker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: inline-block;
    width: 50px;
    height: 50px;
}
.sm-color-picker::-webkit-color-swatch {
    border-radius: 50%;
    border: 2px solid #000000;
}

.sm-color-picker::-moz-color-swatch {
    border-radius: 50%;
    border: 2px solid #000000;
}