﻿/*Cursors*/
.cursor-pointer {
    cursor:pointer;
}
.cursor-move {
    cursor: move;
}

/*Opacities*/
.opacity-40 {
    opacity: .40 !important;
}

/*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-2-3 {
    padding: var(--spacing-2) var(--spacing-3) !important;
}
.pad-4-3 {
    padding: var(--spacing-4) var(--spacing-3) !important;
}

.pad-l-4 {
    padding-left: var(--spacing-4) !important;
}
.pad-t-5 {
    padding-top: var(--spacing-5) !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-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-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-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;
}

.gap5{
    gap: var(--spacing-5);
}

/*Borders*/
.border {
    border: 0.5px solid var(--border-medium);
}
.border-light {
    border-color: var(--border-light) !important;
}
.border-medium {
    border-color: var(--border-medium) !important;
}
.border-dark {
    border-color: var(--border-dark) !important;
}
.border-crimson {
    border-color: var(--crimson-blaze) !important;
}

.border-rad {
    border-radius: var(--border-radius-default) !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(--border-medium);
}
.divider-hr {
    display: block;
    align-self: stretch;
    width: 100%;
    border-bottom: 0.5px solid var(--border-medium);
}

/*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-h-234 {
    height: 234px; /*mostly used for Selects or Dropdowns*/
}
.fixed-h-180 {
    height: 180px; /*mostly used for Selects or Dropdowns*/
}
