/********************************/
/*         UNIVERSAL            */
/********************************/

/* Universal */
.sticky-top { position: sticky !important; top: 0 !important; }
.sticky-top-2 { position: sticky !important; top: 20px !important; }
.mobile_only { display: none !important; }
.relative { position: relative; }
.radius, .rounded { border-radius: var(--border-radius); }
.shadow { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }
.pointer, .ui-button, *[data-href], *[data-switch] { cursor: pointer; }
.scroll-hidden { overflow: hidden !important; }


/********************************/
/*             FONT             */
/********************************/

/* font-size */
.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-26 { font-size: 26px !important; }
.fs-28 { font-size: 28px !important; }
.fs-30 { font-size: 30px !important; }
.fs-32 { font-size: 32px !important; }
.fs-40 { font-size: 40px !important; }
.fs-45 { font-size: 45px !important; }

/* weight */
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* text decoration */
.underline { text-decoration: underline !important; }
.uppercase { text-transform: uppercase !important; }
.t-trans-none { text-transform: none !important; }

/* text color */
.c-black { color: var(--color-black) !important; }
.c-white { color: var(--color-white) !important; }
.c-primary { color: var(--color-primary) !important; }
.c-text { color: var(--color-text) !important; }
.c-green { color: var(--color-positive) !important; }
.c-red { color: var(--color-negative) !important; }


/********************************/
/*         BACKGROUND           */
/********************************/
.bg-black { background-color: var(--color-black) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-text { background-color: var(--color-text) !important; }
.bg-green { background-color: var(--color-positive) !important; }
.bg-red { background-color: var(--color-negative) !important; }


/********************************/
/*             OFFSET           */
/********************************/
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }

/* margins top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--offset-base-y) !important; }
.mt-2 { margin-top: calc(2 * var(--offset-base-y)) !important; }
.mt-3 { margin-top: calc(3 * var(--offset-base-y)) !important; }
.mt-4 { margin-top: calc(4 * var(--offset-base-y)) !important; }
.mt-5 { margin-top: calc(5 * var(--offset-base-y)) !important; }
.mt-6 { margin-top: calc(6 * var(--offset-base-y)) !important; }
.mt-7 { margin-top: calc(7 * var(--offset-base-y)) !important; }

/* margins bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--offset-base-y) !important; }
.mb-2 { margin-bottom: calc(2 * var(--offset-base-y)) !important; }
.mb-3 { margin-bottom: calc(3 * var(--offset-base-y)) !important; }
.mb-4 { margin-bottom: calc(4 * var(--offset-base-y)) !important; }
.mb-5 { margin-bottom: calc(5 * var(--offset-base-y)) !important; }
.mb-6 { margin-bottom: calc(6 * var(--offset-base-y)) !important; }
.mb-7 { margin-bottom: calc(7 * var(--offset-base-y)) !important; }

/* margins right */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--offset-base-x) !important; }
.mr-2 { margin-right: calc(2 * var(--offset-base-x)) !important; }
.mr-3 { margin-right: calc(3 * var(--offset-base-x)) !important; }
.mr-4 { margin-right: calc(4 * var(--offset-base-x)) !important; }
.mr-5 { margin-right: calc(5 * var(--offset-base-x)) !important; }
.mr-6 { margin-right: calc(6 * var(--offset-base-x)) !important; }
.mr-7 { margin-right: calc(7 * var(--offset-base-x)) !important; }

/* margins left */
.ml-auto { margin-left: auto !important; }							/* usefull for flex */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--offset-base-x) !important; }
.ml-2 { margin-left: calc(2 * var(--offset-base-x)) !important; }
.ml-3 { margin-left: calc(3 * var(--offset-base-x)) !important; }
.ml-4 { margin-left: calc(4 * var(--offset-base-x)) !important; }
.ml-5 { margin-left: calc(5 * var(--offset-base-x)) !important; }
.ml-6 { margin-left: calc(6 * var(--offset-base-x)) !important; }
.ml-7 { margin-left: calc(7 * var(--offset-base-x)) !important; }

/* margin x */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--offset-base-x) !important; margin-right: var(--offset-base-x) !important; }
.mx-2 { margin-left: calc(2 * var(--offset-base-x)) !important; margin-right: calc(2 * var(--offset-base-x)) !important; }
.mx-3 { margin-left: calc(3 * var(--offset-base-x)) !important; margin-right: calc(3 * var(--offset-base-x)) !important; }

/* margin y */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--offset-base-y) !important; margin-bottom: var(--offset-base-y) !important; }
.my-2 { margin-top: calc(2 * var(--offset-base-y)) !important; margin-bottom: calc(2 * var(--offset-base-y)) !important; }
.my-3 { margin-top: calc(3 * var(--offset-base-y)) !important; margin-bottom: calc(3 * var(--offset-base-y)) !important; }

/* padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--offset-base-y) !important; }
.p-2 { padding: calc(2 * var(--offset-base-y)) !important; }
.p-3 { padding: calc(3 * var(--offset-base-y)) !important; }
.p-4 { padding: calc(4 * var(--offset-base-y)) !important; }
.p-5 { padding: calc(5 * var(--offset-base-y)) !important; }
.p-6 { padding: calc(6 * var(--offset-base-y)) !important; }
.p-7 { padding: calc(7 * var(--offset-base-y)) !important; }

/* padding top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--offset-base-y) !important; }
.pt-2 { padding-top: calc(2 * var(--offset-base-y)) !important; }
.pt-3 { padding-top: calc(3 * var(--offset-base-y)) !important; }
.pt-4 { padding-top: calc(4 * var(--offset-base-y)) !important; }
.pt-5 { padding-top: calc(5 * var(--offset-base-y)) !important; }
.pt-6 { padding-top: calc(6 * var(--offset-base-y)) !important; }
.pt-7 { padding-top: calc(7 * var(--offset-base-y)) !important; }

/* padding bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--offset-base-y) !important; }
.pb-2 { padding-bottom: calc(2 * var(--offset-base-y)) !important; }
.pb-3 { padding-bottom: calc(3 * var(--offset-base-y)) !important; }
.pb-4 { padding-bottom: calc(4 * var(--offset-base-y)) !important; }
.pb-5 { padding-bottom: calc(5 * var(--offset-base-y)) !important; }
.pb-6 { padding-bottom: calc(6 * var(--offset-base-y)) !important; }
.pb-7 { padding-bottom: calc(7 * var(--offset-base-y)) !important; }

/* padding right */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--offset-base-x) !important; }
.pr-2 { padding-right: calc(2 * var(--offset-base-x)) !important; }
.pr-3 { padding-right: calc(3 * var(--offset-base-x)) !important; }
.pr-4 { padding-right: calc(4 * var(--offset-base-x)) !important; }
.pr-5 { padding-right: calc(5 * var(--offset-base-x)) !important; }
.pr-6 { padding-right: calc(6 * var(--offset-base-x)) !important; }
.pr-7 { padding-right: calc(7 * var(--offset-base-x)) !important; }

/* padding left */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--offset-base-x) !important; }
.pl-2 { padding-left: calc(2 * var(--offset-base-x)) !important; }
.pl-3 { padding-left: calc(3 * var(--offset-base-x)) !important; }
.pl-4 { padding-left: calc(4 * var(--offset-base-x)) !important; }
.pl-5 { padding-left: calc(5 * var(--offset-base-x)) !important; }
.pl-6 { padding-left: calc(6 * var(--offset-base-x)) !important; }
.pl-7 { padding-left: calc(7 * var(--offset-base-x)) !important; }

/* padding x */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--offset-base-x) !important; padding-right: var(--offset-base-x) !important; }
.px-2 { padding-left: calc(2 * var(--offset-base-x)) !important; padding-right: calc(2 * var(--offset-base-x)) !important; }
.px-3 { padding-left: calc(3 * var(--offset-base-x)) !important; padding-right: calc(3 * var(--offset-base-x)) !important; }

/* padding y */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: calc(1 * var(--offset-base-y)) !important; padding-bottom: calc(1 * var(--offset-base-y)) !important; }
.py-2 { padding-top: calc(2 * var(--offset-base-y)) !important; padding-bottom: calc(2 * var(--offset-base-y)) !important; }
.py-3 { padding-top: calc(3 * var(--offset-base-y)) !important; padding-bottom: calc(3 * var(--offset-base-y)) !important; }

/********************************/
/*             WIDTH            */
/********************************/

/* Width */
.w-100 { width: 100% !important; }
.w-50 { width: 50% !important; }
.w-auto {
    width: auto !important;
    min-width: auto !important;
}


/********************************/
/*         BORDER               */
/********************************/

/* Border */
.ba, .border { border: 1px solid var(--color-border); }
.bb, .border-bottom { border-bottom: 1px solid var(--color-border); }
.bt, .border-top { border-top: 1px solid var(--color-border); }
.bl, .border-left { border-left: 1px solid var(--color-border); }
.br, .border-right { border-right: 1px solid var(--color-border); }


/********************************/
/*         ALIGNMENT            */
/********************************/

/* Float */
.fl, .float-left { float: left !important; }
.fr, .float-right { float: right !important; }
.cb, .clear-both { clear: both !important; }

/* Text align */
.tal, .text-left { text-align: left !important; }
.tac, .text-center { text-align: center !important; }
.tar, .text-right { text-align: right !important; }
.taj, .text-justify { text-align: justify !important; }

/* Flex */
.jsb, .space-beetween { justify-content: space-between !important; }
.jcc, .justify-center { justify-content: center !important; }
.jce, .justify-end { justify-content: end !important; }
.aic, .align-center { align-items: center !important; }
.aie, .align-end { align-items: end !important; }
.flex-wrap { display: flex !important;  flex-wrap: wrap !important; }

/* Align */
.align-baseline { vertical-align: baseline !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-top { vertical-align: text-top !important; }
.align-text-bottom { vertical-align: text-bottom !important; }


/********************************/
/*         VISIBILITY           */
/********************************/

/* Opacity */
.opacity-0, .o-0 { opacity: 0; }
.opacity-25, .o-25 { opacity: .25; }
.opacity-50, .o-50 { opacity: .5; }
.opacity-75, .o-75 { opacity: .75; }
.opacity-100, .o-100 { opacity: 1; }

/* display */
.hidden, .d-none { display: none !important }
.d-inline { display: inline !important }
.d-inline-block { display: inline-block !important }
.d-block { display: block !important }
.d-flex { display: flex !important }
.d-table-cell { display: table-cell !important }
.d-contents { display: contents !important }

@media (min-width:550px) {
    .d-sm-none { display: none !important }
    .d-sm-inline { display: inline !important }
    .d-sm-inline-block { display: inline-block !important }
    .d-sm-block { display: block !important }
    .d-sm-flex { display: flex !important }
    .d-sm-table-cell { display: table-cell !important }
    .d-sm-contents { display: contents !important }
}

@media (min-width:768px) {
    .d-md-none { display: none !important }
    .d-md-inline { display: inline !important }
    .d-md-inline-block { display: inline-block !important }
    .d-md-block { display: block !important }
    .d-md-flex { display: flex !important }
    .d-md-table-cell { display: table-cell !important }
    .d-md-contents { display: contents !important }
}

@media (min-width:1100px) {
    .d-lg-none { display: none !important }
    .d-lg-inline { display: inline !important }
    .d-lg-inline-block { display: inline-block !important }
    .d-lg-block { display: block !important }
    .d-lg-flex { display: flex !important }
    .d-lg-table-cell { display: table-cell !important }
    .d-lg-contents { display: contents !important }
}

@media (min-width:1200px) {
    .d-xl-none { display: none !important }
    .d-xl-inline { display: inline !important }
    .d-xl-inline-block { display: inline-block !important }
    .d-xl-block { display: block !important }
    .d-xl-flex { display: flex !important }
    .d-xl-table-cell { display: table-cell !important }
    .d-xl-contents { display: contents !important }
}

/********************************/
/*   SIMPLE ADMIN DOCS          */
/********************************/
.simple-admin-menu {
	padding: 30px !important;
	background-color: var(--color-primary);
}

.simple-admin-menu a {
	font-weight: 500;
	font-size: 14px;
	color: var(--color-white);
}
