/*Cursors*/
.cursor-pointer {
    cursor:pointer !important;
}
.cursor-move {
    cursor: move !important;
}
.cursor-auto{
    cursor: auto !important;
}


/*Opacities*/
/*0,25,50,75,100 already exist in bootstrap with same naming convention*/
.opacity-0 {
    opacity: 0 !important;
}
.opacity-10 {
    opacity: .10 !important;
}
.opacity-20 {
    opacity: .20 !important;
}
.opacity-30 {
    opacity: .30 !important;
}
.opacity-40 {
    opacity: .40 !important;
}
.opacity-50 {
    opacity: .50 !important;
}
.opacity-60 {
    opacity: .60 !important;
}
.opacity-70 {
    opacity: .70 !important;
}
.opacity-80 {
    opacity: .80 !important;
}
.opacity-90 {
    opacity: .90 !important;
}

/*inactives*/
.inactive-0 {
    opacity: 0 !important;
    pointer-events: none;
}
.inactive-10 {
    opacity: .10 !important;
    pointer-events: none;
}
.inactive-20 {
    opacity: .20 !important;
    pointer-events: none;
}
.inactive-25 {
    opacity: .25 !important;
    pointer-events: none;
}
.inactive-30 {
    opacity: .30 !important;
    pointer-events: none;
}
.inactive-40 {
    opacity: .40 !important;
    pointer-events: none;
}
.inactive-50 {
    opacity: .50 !important;
    pointer-events: none;
}
.inactive-60 {
    opacity: .60 !important;
    pointer-events: none;
}
.inactive-70 {
    opacity: .70 !important;
    pointer-events: none;
}
.inactive-75 {
    opacity: .75 !important;
    pointer-events: none;
}
.inactive-80 {
    opacity: .80 !important;
    pointer-events: none;
}
.inactive-90 {
    opacity: .90 !important;
    pointer-events: none;
}
.inactive-100 {
    opacity: 1 !important;
    pointer-events: none;
}

/*SPACING*/

/*Padding*/
.pad-1 {
    padding: var(--spacing-1) !important;
}
.pad-2 {
    padding: var(--spacing-2) !important;
}
.pad-3 {
    padding: var(--spacing-3) !important;
}
.pad-4 {
    padding: var(--spacing-4) !important;
}
.pad-5 {
    padding: var(--spacing-5) !important;
}
.pad-6 {
    padding: var(--spacing-6) !important;
}
.pad-8 {
    padding: var(--spacing-8) !important;
}
.pad-10 {
    padding: var(--spacing-10) !important;
}
.pad-12 {
    padding: var(--spacing-12) !important;
}

.pad-t-1 {
    padding-top: var(--spacing-1) !important;
}
.pad-t-2 {
    padding-top: var(--spacing-2) !important;
}
.pad-t-3 {
    padding-top: var(--spacing-3) !important;
}
.pad-t-4 {
    padding-top: var(--spacing-4) !important;
}
.pad-t-5 {
    padding-top: var(--spacing-5) !important;
}
.pad-t-6 {
    padding-top: var(--spacing-6) !important;
}
.pad-t-8 {
    padding-top: var(--spacing-8) !important;
}
.pad-t-10 {
    padding-top: var(--spacing-10) !important;
}
.pad-t-12 {
    padding-top: var(--spacing-12) !important;
}

.pad-b-1 {
    padding-bottom: var(--spacing-1) !important;
}
.pad-b-2 {
    padding-bottom: var(--spacing-2) !important;
}
.pad-b-3 {
    padding-bottom: var(--spacing-3) !important;
}
.pad-b-4 {
    padding-bottom: var(--spacing-4) !important;
}
.pad-b-5 {
    padding-bottom: var(--spacing-5) !important;
}
.pad-b-6 {
    padding-bottom: var(--spacing-6) !important;
}
.pad-b-8 {
    padding-bottom: var(--spacing-8) !important;
}
.pad-b-10 {
    padding-bottom: var(--spacing-10) !important;
}
.pad-b-12 {
    padding-bottom: var(--spacing-12) !important;
}

.pad-y-1 {
    padding-top: var(--spacing-1) !important;
    padding-bottom: var(--spacing-1) !important;
}
.pad-y-2 {
    padding-top: var(--spacing-2) !important;
    padding-bottom: var(--spacing-2) !important;
}
.pad-y-3 {
    padding-top: var(--spacing-3) !important;
    padding-bottom: var(--spacing-3) !important;
}
.pad-y-4 {
    padding-top: var(--spacing-4) !important;
    padding-bottom: var(--spacing-4) !important;
}
.pad-y-5 {
    padding-top: var(--spacing-5) !important;
    padding-bottom: var(--spacing-5) !important;
}
.pad-y-6 {
    padding-top: var(--spacing-6) !important;
    padding-bottom: var(--spacing-6) !important;
}
.pad-y-8 {
    padding-top: var(--spacing-8) !important;
    padding-bottom: var(--spacing-8) !important;
}
.pad-y-10 {
    padding-top: var(--spacing-10) !important;
    padding-bottom: var(--spacing-10) !important;
}
.pad-y-12 {
    padding-top: var(--spacing-12) !important;
    padding-bottom: var(--spacing-12) !important;
}

.pad-x-1 {
    padding-right: var(--spacing-1) !important;
    padding-left: var(--spacing-1) !important;
}
.pad-x-2 {
    padding-right: var(--spacing-2) !important;
    padding-left: var(--spacing-2) !important;
}
.pad-x-3 {
    padding-right: var(--spacing-3) !important;
    padding-left: var(--spacing-3) !important;
}
.pad-x-4 {
    padding-right: var(--spacing-4) !important;
    padding-left: var(--spacing-4) !important;
}
.pad-x-5 {
    padding-right: var(--spacing-5) !important;
    padding-left: var(--spacing-5) !important;
}
.pad-x-6 {
    padding-right: var(--spacing-6) !important;
    padding-left: var(--spacing-6) !important;
}
.pad-x-8 {
    padding-right: var(--spacing-8) !important;
    padding-left: var(--spacing-8) !important;
}
.pad-x-10 {
    padding-right: var(--spacing-10) !important;
    padding-left: var(--spacing-10) !important;
}
.pad-x-12 {
    padding-right: var(--spacing-12) !important;
    padding-left: var(--spacing-12) !important;
}

.pad-l-1 {
    padding-left: var(--spacing-1) !important;
}
.pad-l-2 {
    padding-left: var(--spacing-2) !important;
}
.pad-l-3 {
    padding-left: var(--spacing-3) !important;
}
.pad-l-4 {
    padding-left: var(--spacing-4) !important;
}
.pad-l-5 {
    padding-left: var(--spacing-5) !important;
}
.pad-l-6 {
    padding-left: var(--spacing-6) !important;
}
.pad-l-8 {
    padding-left: var(--spacing-8) !important;
}
.pad-l-10 {
    padding-left: var(--spacing-10) !important;
}
.pad-l-12 {
    padding-left: var(--spacing-12) !important;
}

.pad-r-1 {
    padding-right: var(--spacing-1) !important;
}
.pad-r-2 {
    padding-right: var(--spacing-2) !important;
}
.pad-r-3 {
    padding-right: var(--spacing-3) !important;
}
.pad-r-4 {
    padding-right: var(--spacing-4) !important;
}
.pad-r-5 {
    padding-right: var(--spacing-5) !important;
}
.pad-r-6 {
    padding-right: var(--spacing-6) !important;
}
.pad-r-8 {
    padding-right: var(--spacing-8) !important;
}
.pad-r-10 {
    padding-right: var(--spacing-10) !important;
}
.pad-r-12 {
    padding-right: var(--spacing-12) !important;
}


.pad-1-3 {
    padding: var(--spacing-1) var(--spacing-3) !important;
}
.pad-2-3 {
    padding: var(--spacing-2) var(--spacing-3) !important;
}
.pad-4-3 {
    padding: var(--spacing-4) var(--spacing-3) !important;
}


/*Margin*/
.mar-1 {
    margin: var(--spacing-1) !important;
}
.mar-2 {
    margin: var(--spacing-2) !important;
}
.mar-3 {
    margin: var(--spacing-3) !important;
}
.mar-4 {
    margin: var(--spacing-4) !important;
}
.mar-5 {
    margin: var(--spacing-5) !important;
}
.mar-6 {
    margin: var(--spacing-6) !important;
}
.mar-8 {
    margin: var(--spacing-8) !important;
}
.mar-10 {
    margin: var(--spacing-10) !important;
}
.mar-12 {
    margin: var(--spacing-12) !important;
}

.mar-b-1 {
    margin-bottom: var(--spacing-1) !important;
}
.mar-b-2 {
    margin-bottom: var(--spacing-2) !important;
}
.mar-b-3 {
    margin-bottom: var(--spacing-3) !important;
}
.mar-b-4 {
    margin-bottom: var(--spacing-4) !important;
}
.mar-b-5 {
    margin-bottom: var(--spacing-5) !important;
}
.mar-b-6 {
    margin-bottom: var(--spacing-6) !important;
}
.mar-b-8 {
    margin-bottom: var(--spacing-8) !important;
}
.mar-b-10 {
    margin-bottom: var(--spacing-10) !important;
}
.mar-b-12 {
    margin-bottom: var(--spacing-12) !important;
}

.mar-t-1 {
    margin-top: var(--spacing-1) !important;
}
.mar-t-2 {
    margin-top: var(--spacing-2) !important;
}
.mar-t-3 {
    margin-top: var(--spacing-3) !important;
}
.mar-t-4 {
    margin-top: var(--spacing-4) !important;
}
.mar-t-5 {
    margin-top: var(--spacing-5) !important;
}
.mar-t-6 {
    margin-top: var(--spacing-6) !important;
}
.mar-t-8 {
    margin-top: var(--spacing-8) !important;
}
.mar-t-10 {
    margin-top: var(--spacing-10) !important;
}
.mar-t-12 {
    margin-top: var(--spacing-12) !important;
}

.mar-y-1 {
    margin-top: var(--spacing-1) !important;
    margin-bottom: var(--spacing-1) !important;
}
.mar-y-2 {
    margin-top: var(--spacing-2) !important;
    margin-bottom: var(--spacing-2) !important;
}
.mar-y-3 {
    margin-top: var(--spacing-3) !important;
    margin-bottom: var(--spacing-3) !important;
}
.mar-y-4 {
    margin-top: var(--spacing-4) !important;
    margin-bottom: var(--spacing-4) !important;
}
.mar-y-5 {
    margin-top: var(--spacing-5) !important;
    margin-bottom: var(--spacing-5) !important;
}
.mar-y-6 {
    margin-top: var(--spacing-6) !important;
    margin-bottom: var(--spacing-6) !important;
}
.mar-y-8 {
    margin-top: var(--spacing-8) !important;
    margin-bottom: var(--spacing-8) !important;
}
.mar-y-10 {
    margin-top: var(--spacing-10) !important;
    margin-bottom: var(--spacing-10) !important;
}
.mar-y-12 {
    margin-top: var(--spacing-12) !important;
    margin-bottom: var(--spacing-12) !important;
}

.mar-x-1 {
    margin-right: var(--spacing-1) !important;
    margin-left: var(--spacing-1) !important;
}
.mar-x-2 {
    margin-right: var(--spacing-2) !important;
    margin-left: var(--spacing-2) !important;
}
.mar-x-3 {
    margin-right: var(--spacing-3) !important;
    margin-left: var(--spacing-3) !important;
}
.mar-x-4 {
    margin-right: var(--spacing-4) !important;
    margin-left: var(--spacing-4) !important;
}
.mar-x-5 {
    margin-right: var(--spacing-5) !important;
    margin-left: var(--spacing-5) !important;
}
.mar-x-6 {
    margin-right: var(--spacing-6) !important;
    margin-left: var(--spacing-6) !important;
}
.mar-x-8 {
    margin-right: var(--spacing-8) !important;
    margin-left: var(--spacing-8) !important;
}
.mar-x-10 {
    margin-right: var(--spacing-10) !important;
    margin-left: var(--spacing-10) !important;
}
.mar-x-12 {
    margin-right: var(--spacing-12) !important;
    margin-left: var(--spacing-12) !important;
}

/*Gap*/
.gap1 {
    gap: var(--spacing-1) !important;
}
.gap2 {
    gap: var(--spacing-2) !important;
}
.gap3 {
    gap: var(--spacing-3) !important;
}
.gap4 {
    gap: var(--spacing-4) !important;
}
.gap5 {
    gap: var(--spacing-5) !important;
}
.gap6 {
    gap: var(--spacing-6) !important;
}
.gap8 {
    gap: var(--spacing-8) !important;
}
.gap10 {
    gap: var(--spacing-10) !important;
}
.gap12 {
    gap: var(--spacing-12) !important;
}

.custom-gap-10 {
    gap: 10px;
}

/*Borders*/
.border {
    border: 0.5px solid var(--color-grey-medium);
}
.border-light {
    border-color: var(--color-grey-light) !important;
}
.border-medium {
    border-color: var(--color-grey-medium) !important;
}
.border-dark {
    border-color: var(--color-grey-dark) !important;
}
.border-crimson {
    border-color: var(--crimson-blaze) !important;
}

.border-rad {
    border-radius: var(--border-radius-default) !important;
}
.border-rad-md {
    border-radius: var(--border-radius-medium) !important;
}
.border-rad-sm {
    border-radius: var(--border-radius-small) !important;
}
.border-rad-xs {
    border-radius: var(--border-radius-smaller) !important;
}

.border-top-round {
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}

/*Dividers*/
.divider-vl {
    display: inline;
    align-self: stretch; /*for flex parent*/
    border-left: 0.5px solid var(--color-grey-medium);
}
.divider-hr {
    display: block;
    align-self: stretch;
    width: 100%;
    border-bottom: 0.5px solid var(--color-grey-medium);
    /*for usage in hr tag*/
    opacity: 1;
    background-color: var(--color-grey-medium);
    height: 0.5px !important;
}

/*Fixed widths and heights*/
.fixed-w-95 {
    width: 95px; /*mostly used for buttons*/
}
.fixed-w-96 {
    width: 96px; /*mostly used for labels*/
}
.fixed-w-102 {
    width: 102px; /*mostly used for labels*/
}
.fixed-w-135 {
    width: 135px; /*mostly used for switch button*/
}
.fixed-w-228 {
    width: 228px; /*mostly used for switch button*/
}
.fixed-min-w-308 {
    min-width: 308px; /*mostly used for Dropdowns*/
}
.fixed-min-w-196 {
    min-width: 196px; /*mostly used for Dropdowns*/
}


.fixed-h-180 {
    height: 180px; /*mostly used for Selects or Dropdowns*/
}
.fixed-h-234 {
    height: 234px; /*mostly used for Selects or Dropdowns*/
}
.fixed-h-414 {
    height: 414px; /*mostly used for Selects or Dropdowns*/
}
.fixed-h-450 {
    height: 450px; /*mostly used for Selects or Dropdowns*/
}

.max-h-414 {
    max-height: 414px; /*mostly used for Selects or Dropdowns*/
}
.max-h-450 {
    max-height: 450px; /*mostly used for Selects or Dropdowns*/
}