* {
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Inter', sans-serif;
}

html {
    font-size: 14px;
}

html, body {
    padding: 0;
    margin: 0;
}

.nom { margin: 0; }
.nop { padding: 0; }
.nopl { padding-left: 0; }
.nopr { padding-right: 0; }

.m-b-4px { margin-bottom: 4px; }

.m-b-8px { margin-bottom: 8px; }
.m-r-8px { margin-right: 8px; }

.m-b-10px { margin-bottom: 10px; }

.m-b-16px { margin-bottom: 16px; }

.m-auto { margin: auto; }

.p-lr-8px { padding-left: 8px; padding-right: 8px; }
.p-r-8px { padding-right: 8px; }
.p-8px { padding: 8px; }

.p-lr-4px { padding-left: 4px; padding-right: 4px; }
.p-l-4px { padding-left: 4px; }
.p-r-4px { padding-right: 4px; }

.p-lr-20px { padding-left: 20px; padding-right: 20px; }

.b-rad-8px {
    border-radius: 8px !important;
}

.h-100vh { height: 100vh; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.h-0 { height: 0; }

.w-30px { width: 30px; }
.w-100px { width: 100px; }
.w-120px { width: 120px; }
.w-140px { width: 140px; }
.w-200px { width: 200px; }

.h-auto-container {
    display: flex;
    flex-direction: column;
}
.h-auto-container .row {
    width: 100%;
}
.h-auto {
    flex: 1 1 auto;
}

.b-rad-8px {
    border-radius: 8px;
}

.thin { font-weight: 200; }
.semibold { font-weight: 600; }
.bold { font-weight: 800; }

.smaller-text { font-size: .8rem; }
.smaller-text-i { font-size: .8rem !important; }
.normalsize-text { font-size: 1rem; }
.bigger-text { font-size: 1.2rem; }
.biggest-text { font-size: 1.4rem; }
.f-16px { font-size: 16px; }

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clickable { cursor: pointer; }

.fullscreen {
    width: 100%;
    height: 100vh;
}
.v-scroll { overflow-y: auto; }
.h-scroll { overflow-x: auto; }

.flex { display: flex; }
.block { display: block; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.grid-container { display: grid; display: inline-grid; }

.nowrap { white-space: nowrap; }

.grid-gap-10px {
    column-gap: 10px;
    row-gap: 10px;
}
.grid-3x2 {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
}
.grid-2x3 {
    grid-template-columns: auto ;
    grid-template-rows: auto auto auto;
}

.btn, .btn-small, .btn-large {
    box-shadow: none !important;
    cursor: pointer;
    text-transform: none;
}

.btn { border-radius: 12px; }
.btn-4px { border-radius: 4px; }
.btn-8px { border-radius: 8px; }
.btn-square {
    border-radius: 4px;
    height: 36px;
    width: 36px;
    padding: 0px;
}
.btn-square-small {
    border-radius: 4px;
    height: 24px;
    width: 24px;
    line-height: 24px;
    padding: 0px;
}

input {
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Inter', sans-serif;
}

input.browser-default,
select.browser-default {
    background: #D9D9D9;
    border-radius: 12px;
    border-width: 0;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 36px;
    height: 36px;
}

input.browser-default:focus,
select.browser-default:focus {
    outline: none;
}
input.browser-default.circle-edge {
    border-radius: 36px;
}
input.browser-default.icon-left {
    padding-left: 36px;
}
input.browser-default.white-input {
    border: 0.8px solid #0E77BB;
    background-color: white;
}
input.browser-default.modal-input,
select.browser-default.modal-input,
select.browser-default.white-input {
    border: 0.8px solid #DEDEDE;
    background-color: white;
}
select.browser-default.white-input.blue-border {
    border: 0.8px solid #0E77BB;
}

img.icon-left-36px {
    /* icon left for input with height 36px */
    width: 20px;
    height: 20px;
    top: 8px;
    left: 16px;
}
img.size-20 {
    width: 20px;
    height: 20px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--grey1);
    font-size: .8rem;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--grey1);
    font-size: .8rem;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--grey1);
    font-size: .8rem;
}

.v-scroll::-webkit-scrollbar {
    width: 4px;
}
.h-scroll::-webkit-scrollbar {
    height: 2px;
}
.v-scroll::-webkit-scrollbar-thumb,
.h-scroll::-webkit-scrollbar-thumb {
    background-color: var(--blue2);
    border: none;
    border-radius: 8px;
}
.v-scroll::-webkit-scrollbar-track,
.h-scroll::-webkit-scrollbar-track {
    background-color: var(--lightgrey1);
    border: 1px solid var(--lightgrey1);
    border-radius: 8px;
}

table.datatable th,
table.datatable td {
    border-radius: 0;
    padding-left: 8px;
    padding-right: 8px;
}
table.datatable th {
    color: white;
    font-weight: normal;
}
table.datatable tr:first-child th:first-child { border-top-left-radius: 4px; }
table.datatable tr:first-child th:last-child { border-top-right-radius: 4px; }
table.datatable tr:last-child th:first-child { border-bottom-left-radius: 4px; }
table.datatable tr:last-child th:last-child { border-bottom-right-radius: 4px; }
table.striped>tbody>tr:nth-child(odd) { background-color: white; }
table.striped>tbody>tr:nth-child(even) { background-color: #EBF5FC; }
table.striped.datatable tr:nth-child(even) td:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
table.striped.datatable tr:nth-child(even) td:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

table.compact th, table.compact td { padding: 4px; }
table.all-border th, table.all-border td { border: 1px solid rgba(0,0,0,0.12); }
table.noborder th, table.noborder td, table.noborder tr { border: 0; }

.modal { border-radius: 8px; }
.modal-content { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.modal-footer { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

.pagination-container { margin: auto !important; width: fit-content; }

.loader {
    background-color: #ededed;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, .5) 50%,
        rgba(255, 255, 255, 0) 60%
    ) #ededed;
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: .7s loader ease-in-out infinite;
}
@keyframes loader {
    to {
        background-position-x: -20%;
    }
}

.noselect {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
    display: flex;
    align-items: center;
}

.m-footer img.clicked {
    filter: brightness(2);
}