/* /////////////////////////////////////////////// */
/* #region vars  */
/* /////////////////////////////////////////////// */
:root {
    --fnt-s-bigger: 40px;
    --fnt-s-big: 35px;
    --fnt-s-medium: 30px;
    --fnt-s-smaller: 25px;
    --fnt-s-small: 20px;
    --fnt-s-lighter: 17px;
    --fnt-s-light: 13px;

    --clr-main: #cda274;
    --clr-sec: #2f2e2e;

    --step: 15px;
}
/* /////////////////////////////////////////////// */
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  general */
* {
    margin: 0;
}
i {
    font-style: normal;
}
a.disabled {
    pointer-events: none;
    cursor: default;
}
body {
    background-color: #ececeb;
    font-weight: 400;
    overflow-x: hidden;
}
/* #region  scrols */
body::-webkit-scrollbar-track {
    background: #909dac;
}
body::-webkit-scrollbar-thumb {
    background: #293547;
}
body::-webkit-scrollbar {
    width: 5px;
}
/* #endregion */

/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  fonts */

@font-face {
    font-family: F-L;
    font-style: normal;
    font-display: swap;
    src: url(fonts/quicksand/Quicksand-Light.ttf);
}
@font-face {
    font-family: F-B;
    font-style: normal;
    font-display: swap;
    src: url(fonts/quicksand/Quicksand-Bold.ttf);
}
@font-face {
    font-family: F-M;
    font-style: normal;
    font-display: swap;
    src: url(fonts/quicksand/Quicksand-Medium.ttf);
}
@font-face {
    font-family: F-R;
    font-style: normal;
    font-display: swap;
    src: url(fonts/quicksand/Quicksand-Regular.ttf);
}

.fnt-light {
    font-family: F-L;
}
.fnt-bold {
    font-family: F-B;
}
.fnt-meduim {
    font-family: F-M;
}
.fnt-regular {
    font-family: F-R;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Font Size */
.fnt-s-bigger {
    font-size: var(--fnt-s-bigger);
}
.fnt-s-big {
    font-size: var(--fnt-s-big);
}
.fnt-s-medium {
    font-size: var(--fnt-s-medium);
}
.fnt-s-smaller {
    font-size: var(--fnt-s-smaller);
}
.fnt-s-small {
    font-size: var(--fnt-s-small);
}
.fnt-s-lighter {
    font-size: var(--fnt-s-lighter);
}
.fnt-s-light {
    font-size: var(--fnt-s-light);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Font Weight */
.fnt-w-1 {
    font-weight: 100 !important;
}
.fnt-w-2 {
    font-weight: 200 !important;
}
.fnt-w-3 {
    font-weight: 300 !important;
}
.fnt-w-4 {
    font-weight: 400 !important;
}
.fnt-w-5 {
    font-weight: 500 !important;
}
.fnt-w-6 {
    font-weight: 600 !important;
}
.fnt-w-7 {
    font-weight: 700 !important;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  display */
.hidden {
    display: none !important;
}
.inline-flex {
    display: inline-flex;
}
.inline-block {
    display: inline-block;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  positions */
.pos-relative {
    position: relative;
}
.pos-absolute {
    position: absolute;
}
.pos-fixed {
    position: fixed;
}
.pos-full-absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  positioning */
.pos-center-x {
    left: 50%;
    transform: translateX(-50%);
}
.pos-center-y {
    top: 50%;
    transform: translateY(-50%);
}
.pos-center-xy {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  spaces */
.nowrap {
    white-space: nowrap;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Flip */
.flep-x {
    transform: scaleX(-1);
}
.flep-y {
    transform: scaleY(-1);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  flex */
.flex-row {
    display: flex;
    flex-flow: row;
}
.flex-col {
    display: flex;
    flex-flow: column;
}
.flex-col-sm {
    display: flex;
    flex-flow: column;
}
.flex-row-sm {
    display: flex;
    flex-flow: row;
}
.flex-row-sm-rev {
    display: flex;
    flex-flow: row;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {
    flex: 3;
}
.flex-4 {
    flex: 4;
}
.flex-5 {
    flex: 5;
}
.flex-6 {
    flex: 6;
}
.flex-7 {
    flex: 7;
}
.flex-1-2 {
    flex: 1;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  aligns */
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}

.vertical-middle {
    vertical-align: middle;
}
.vertical-top {
    vertical-align: top;
}
.vertical-bottom {
    vertical-align: bottom;
}

.justify-center {
    justify-content: center;
}
.justify-start {
    justify-content: start;
}
.justify-end {
    justify-content: end;
}
.justify-space-between {
    justify-content: space-between;
}
.justify-space-evenly {
    justify-content: space-evenly;
}

.align-start {
    align-items: start;
}
.align-center {
    align-items: center;
}
.align-end {
    align-items: end;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  margins */
/* ############### auto ############### */
.mar-l-auto {
    margin-left: auto;
}
.mar-r-auto {
    margin-right: auto;
}
.mar-lr-auto {
    margin-left: auto;
    margin-right: auto;
}
/* ############### 1stp ############### */
.mar-l-1stp {
    margin-left: calc(var(--step) * 1);
}
.mar-r-1stp {
    margin-right: calc(var(--step) * 1);
}
.mar-lr-1stp {
    margin-left: calc(var(--step) * 1);
    margin-right: calc(var(--step) * 1);
}
.mar-t-1stp {
    margin-top: calc(var(--step) * 1);
}
.mar-b-1stp {
    margin-bottom: calc(var(--step) * 1);
}
.mar-tb-1stp {
    margin-top: calc(var(--step) * 1);
    margin-bottom: calc(var(--step) * 1);
}
/* ############### 2stp ############### */
.mar-l-2stp {
    margin-left: calc(var(--step) * 2);
}
.mar-r-2stp {
    margin-right: calc(var(--step) * 2);
}
.mar-lr-2stp {
    margin-left: calc(var(--step) * 2);
    margin-right: calc(var(--step) * 2);
}
.mar-t-2stp {
    margin-top: calc(var(--step) * 2);
}
.mar-b-2stp {
    margin-bottom: calc(var(--step) * 2);
}
.mar-tb-2stp {
    margin-top: calc(var(--step) * 2);
    margin-bottom: calc(var(--step) * 2);
}
/* ############### 3stp ############### */
.mar-l-3stp {
    margin-left: calc(var(--step) * 3);
}
.mar-r-3stp {
    margin-right: calc(var(--step) * 3);
}
.mar-lr-3stp {
    margin-left: calc(var(--step) * 3);
    margin-right: calc(var(--step) * 3);
}
.mar-t-3stp {
    margin-top: calc(var(--step) * 3);
}
.mar-b-3stp {
    margin-bottom: calc(var(--step) * 3);
}
.mar-tb-3stp {
    margin-top: calc(var(--step) * 3);
    margin-bottom: calc(var(--step) * 3);
}
/* ############### 4stp ############### */
.mar-l-4stp {
    margin-left: calc(var(--step) * 4);
}
.mar-r-4stp {
    margin-right: calc(var(--step) * 4);
}
.mar-lr-4stp {
    margin-left: calc(var(--step) * 4);
    margin-right: calc(var(--step) * 4);
}
.mar-t-4stp {
    margin-top: calc(var(--step) * 4);
}
.mar-b-4stp {
    margin-bottom: calc(var(--step) * 4);
}
.mar-tb-4stp {
    margin-top: calc(var(--step) * 4);
    margin-bottom: calc(var(--step) * 4);
}
/* ############### 5stp ############### */
.mar-l-5stp {
    margin-left: calc(var(--step) * 5);
}
.mar-r-5stp {
    margin-right: calc(var(--step) * 5);
}
.mar-lr-5stp {
    margin-left: calc(var(--step) * 5);
    margin-right: calc(var(--step) * 5);
}
.mar-t-5stp {
    margin-top: calc(var(--step) * 5);
}
.mar-b-5stp {
    margin-bottom: calc(var(--step) * 5);
}
.mar-tb-5stp {
    margin-top: calc(var(--step) * 5);
    margin-bottom: calc(var(--step) * 5);
}
/* ############### 6stp ############### */
.mar-l-6stp {
    margin-left: calc(var(--step) * 6);
}
.mar-r-6stp {
    margin-right: calc(var(--step) * 6);
}
.mar-lr-6stp {
    margin-left: calc(var(--step) * 6);
    margin-right: calc(var(--step) * 6);
}
.mar-t-6stp {
    margin-top: calc(var(--step) * 6);
}
.mar-b-6stp {
    margin-bottom: calc(var(--step) * 6);
}
.mar-tb-6stp {
    margin-top: calc(var(--step) * 6);
    margin-bottom: calc(var(--step) * 6);
}
/* ############### 7stp ############### */
.mar-l-7stp {
    margin-left: calc(var(--step) * 7);
}
.mar-r-7stp {
    margin-right: calc(var(--step) * 7);
}
.mar-lr-7stp {
    margin-left: calc(var(--step) * 7);
    margin-right: calc(var(--step) * 7);
}
.mar-t-7stp {
    margin-top: calc(var(--step) * 7);
}
.mar-b-7stp {
    margin-bottom: calc(var(--step) * 7);
}
.mar-tb-7stp {
    margin-top: calc(var(--step) * 7);
    margin-bottom: calc(var(--step) * 7);
}
/* ############### 8stp ############### */
.mar-l-8stp {
    margin-left: calc(var(--step) * 8);
}
.mar-r-8stp {
    margin-right: calc(var(--step) * 8);
}
.mar-lr-8stp {
    margin-left: calc(var(--step) * 8);
    margin-right: calc(var(--step) * 8);
}
.mar-t-8stp {
    margin-top: calc(var(--step) * 8);
}
.mar-b-8stp {
    margin-bottom: calc(var(--step) * 8);
}
.mar-tb-8stp {
    margin-top: calc(var(--step) * 8);
    margin-bottom: calc(var(--step) * 8);
}
/* ############### 9stp ############### */
.mar-l-9stp {
    margin-left: calc(var(--step) * 9);
}
.mar-r-9stp {
    margin-right: calc(var(--step) * 9);
}
.mar-lr-9stp {
    margin-left: calc(var(--step) * 9);
    margin-right: calc(var(--step) * 9);
}
.mar-t-9stp {
    margin-top: calc(var(--step) * 9);
}
.mar-b-9stp {
    margin-bottom: calc(var(--step) * 9);
}
.mar-tb-9stp {
    margin-top: calc(var(--step) * 9);
    margin-bottom: calc(var(--step) * 9);
}
/* ############### 10stp ############### */
.mar-l-10stp {
    margin-left: calc(var(--step) * 10);
}
.mar-r-10stp {
    margin-right: calc(var(--step) * 10);
}
.mar-lr-10stp {
    margin-left: calc(var(--step) * 10);
    margin-right: calc(var(--step) * 10);
}
.mar-t-10stp {
    margin-top: calc(var(--step) * 10);
}
.mar-b-10stp {
    margin-bottom: calc(var(--step) * 10);
}
.mar-tb-10stp {
    margin-top: calc(var(--step) * 10);
    margin-bottom: calc(var(--step) * 10);
}
/* ############### 11stp ############### */
.mar-l-11stp {
    margin-left: calc(var(--step) * 11);
}
.mar-r-11stp {
    margin-right: calc(var(--step) * 11);
}
.mar-lr-11stp {
    margin-left: calc(var(--step) * 11);
    margin-right: calc(var(--step) * 11);
}
.mar-t-11stp {
    margin-top: calc(var(--step) * 11);
}
.mar-b-11stp {
    margin-bottom: calc(var(--step) * 11);
}
.mar-tb-11stp {
    margin-top: calc(var(--step) * 11);
    margin-bottom: calc(var(--step) * 11);
}
/* ############### 12stp ############### */
.mar-l-12stp {
    margin-left: calc(var(--step) * 12);
}
.mar-r-12stp {
    margin-right: calc(var(--step) * 12);
}
.mar-lr-12stp {
    margin-left: calc(var(--step) * 12);
    margin-right: calc(var(--step) * 12);
}
.mar-t-12stp {
    margin-top: calc(var(--step) * 12);
}
.mar-b-12stp {
    margin-bottom: calc(var(--step) * 12);
}
.mar-tb-12stp {
    margin-top: calc(var(--step) * 12);
    margin-bottom: calc(var(--step) * 12);
}
/* ############### 13stp ############### */
.mar-l-13stp {
    margin-left: calc(var(--step) * 13);
}
.mar-r-13stp {
    margin-right: calc(var(--step) * 13);
}
.mar-lr-13stp {
    margin-left: calc(var(--step) * 13);
    margin-right: calc(var(--step) * 13);
}
.mar-t-13stp {
    margin-top: calc(var(--step) * 13);
}
.mar-b-13stp {
    margin-bottom: calc(var(--step) * 13);
}
.mar-tb-13stp {
    margin-top: calc(var(--step) * 13);
    margin-bottom: calc(var(--step) * 13);
}
/* ############### 14stp ############### */
.mar-l-14stp {
    margin-left: calc(var(--step) * 14);
}
.mar-r-14stp {
    margin-right: calc(var(--step) * 14);
}
.mar-lr-14stp {
    margin-left: calc(var(--step) * 14);
    margin-right: calc(var(--step) * 14);
}
.mar-t-14stp {
    margin-top: calc(var(--step) * 14);
}
.mar-b-14stp {
    margin-bottom: calc(var(--step) * 14);
}
.mar-tb-14stp {
    margin-top: calc(var(--step) * 14);
    margin-bottom: calc(var(--step) * 14);
}
/* ############### 15stp ############### */
.mar-l-15stp {
    margin-left: calc(var(--step) * 15);
}
.mar-r-15stp {
    margin-right: calc(var(--step) * 15);
}
.mar-lr-15stp {
    margin-left: calc(var(--step) * 15);
    margin-right: calc(var(--step) * 15);
}
.mar-t-15stp {
    margin-top: calc(var(--step) * 15);
}
.mar-b-15stp {
    margin-bottom: calc(var(--step) * 15);
}
.mar-tb-15stp {
    margin-top: calc(var(--step) * 15);
    margin-bottom: calc(var(--step) * 15);
}
/* ############### 16stp ############### */
.mar-l-16stp {
    margin-left: calc(var(--step) * 16);
}
.mar-r-16stp {
    margin-right: calc(var(--step) * 16);
}
.mar-lr-16stp {
    margin-left: calc(var(--step) * 16);
    margin-right: calc(var(--step) * 16);
}
.mar-t-16stp {
    margin-top: calc(var(--step) * 16);
}
.mar-b-16stp {
    margin-bottom: calc(var(--step) * 16);
}
.mar-tb-16stp {
    margin-top: calc(var(--step) * 16);
    margin-bottom: calc(var(--step) * 16);
}
/* ############### 17stp ############### */
.mar-l-17stp {
    margin-left: calc(var(--step) * 17);
}
.mar-r-17stp {
    margin-right: calc(var(--step) * 17);
}
.mar-lr-17stp {
    margin-left: calc(var(--step) * 17);
    margin-right: calc(var(--step) * 17);
}
.mar-t-17stp {
    margin-top: calc(var(--step) * 17);
}
.mar-b-17stp {
    margin-bottom: calc(var(--step) * 17);
}
.mar-tb-17stp {
    margin-top: calc(var(--step) * 17);
    margin-bottom: calc(var(--step) * 17);
}
/* ############### 18stp ############### */
.mar-l-18stp {
    margin-left: calc(var(--step) * 18);
}
.mar-r-18stp {
    margin-right: calc(var(--step) * 18);
}
.mar-lr-18stp {
    margin-left: calc(var(--step) * 18);
    margin-right: calc(var(--step) * 18);
}
.mar-t-18stp {
    margin-top: calc(var(--step) * 18);
}
.mar-b-18stp {
    margin-bottom: calc(var(--step) * 18);
}
.mar-tb-18stp {
    margin-top: calc(var(--step) * 18);
    margin-bottom: calc(var(--step) * 18);
}
/* ############### 19stp ############### */
.mar-l-19stp {
    margin-left: calc(var(--step) * 19);
}
.mar-r-19stp {
    margin-right: calc(var(--step) * 19);
}
.mar-lr-19stp {
    margin-left: calc(var(--step) * 19);
    margin-right: calc(var(--step) * 19);
}
.mar-t-19stp {
    margin-top: calc(var(--step) * 19);
}
.mar-b-19stp {
    margin-bottom: calc(var(--step) * 19);
}
.mar-tb-19stp {
    margin-top: calc(var(--step) * 19);
    margin-bottom: calc(var(--step) * 19);
}
/* ############### 20stp ############### */
.mar-l-20stp {
    margin-left: calc(var(--step) * 20);
}
.mar-r-20stp {
    margin-right: calc(var(--step) * 20);
}
.mar-lr-20stp {
    margin-left: calc(var(--step) * 20);
    margin-right: calc(var(--step) * 20);
}
.mar-t-20stp {
    margin-top: calc(var(--step) * 20);
}
.mar-b-20stp {
    margin-bottom: calc(var(--step) * 20);
}
.mar-tb-20stp {
    margin-top: calc(var(--step) * 20);
    margin-bottom: calc(var(--step) * 20);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  paddings */
/* ############### 0 ################### */
.pad-0 {
    padding: 0 !important;
}
.pad-t-0 {
    padding-top: 0 !important;
}
.pad-b-0 {
    padding-bottom: 0 !important;
}
.pad-l-0 {
    padding-left: 0 !important;
}
.pad-r-0 {
    padding-right: 0 !important;
}
/* ############### hstp ############### */
.pad-l-hstp {
    padding-left: calc(var(--step) * 0.5);
}
.pad-r-hstp {
    padding-right: calc(var(--step) * 0.5);
}
.pad-lr-hstp {
    padding-left: calc(var(--step) * 0.5);
    padding-right: calc(var(--step) * 0.5);
}
.pad-t-hstp {
    padding-top: calc(var(--step) * 0.5);
}
.pad-b-hstp {
    padding-bottom: calc(var(--step) * 0.5);
}
.pad-tb-hstp {
    padding-top: calc(var(--step) * 0.5);
    padding-bottom: calc(var(--step) * 0.5);
}
/* ############### 1stp ############### */
.pad-l-1stp {
    padding-left: calc(var(--step) * 1);
}
.pad-r-1stp {
    padding-right: calc(var(--step) * 1);
}
.pad-lr-1stp {
    padding-left: calc(var(--step) * 1);
    padding-right: calc(var(--step) * 1);
}
.pad-t-1stp {
    padding-top: calc(var(--step) * 1);
}
.pad-b-1stp {
    padding-bottom: calc(var(--step) * 1);
}
.pad-tb-1stp {
    padding-top: calc(var(--step) * 1);
    padding-bottom: calc(var(--step) * 1);
}
/* ############### 2stp ############### */
.pad-l-2stp {
    padding-left: calc(var(--step) * 2);
}
.pad-r-2stp {
    padding-right: calc(var(--step) * 2);
}
.pad-lr-2stp {
    padding-left: calc(var(--step) * 2);
    padding-right: calc(var(--step) * 2);
}
.pad-t-2stp {
    padding-top: calc(var(--step) * 2);
}
.pad-b-2stp {
    padding-bottom: calc(var(--step) * 2);
}
.pad-tb-2stp {
    padding-top: calc(var(--step) * 2);
    padding-bottom: calc(var(--step) * 2);
}
/* ############### 3stp ############### */
.pad-l-3stp {
    padding-left: calc(var(--step) * 3);
}
.pad-r-3stp {
    padding-right: calc(var(--step) * 3);
}
.pad-lr-3stp {
    padding-left: calc(var(--step) * 3);
    padding-right: calc(var(--step) * 3);
}
.pad-t-3stp {
    padding-top: calc(var(--step) * 3);
}
.pad-b-3stp {
    padding-bottom: calc(var(--step) * 3);
}
.pad-tb-3stp {
    padding-top: calc(var(--step) * 3);
    padding-bottom: calc(var(--step) * 3);
}
/* ############### 4stp ############### */
.pad-l-4stp {
    padding-left: calc(var(--step) * 4);
}
.pad-r-4stp {
    padding-right: calc(var(--step) * 4);
}
.pad-lr-4stp {
    padding-left: calc(var(--step) * 4);
    padding-right: calc(var(--step) * 4);
}
.pad-t-4stp {
    padding-top: calc(var(--step) * 4);
}
.pad-b-4stp {
    padding-bottom: calc(var(--step) * 4);
}
.pad-tb-4stp {
    padding-top: calc(var(--step) * 4);
    padding-bottom: calc(var(--step) * 4);
}
/* ############### 5stp ############### */
.pad-l-5stp {
    padding-left: calc(var(--step) * 5);
}
.pad-r-5stp {
    padding-right: calc(var(--step) * 5);
}
.pad-lr-5stp {
    padding-left: calc(var(--step) * 5);
    padding-right: calc(var(--step) * 5);
}
.pad-t-5stp {
    padding-top: calc(var(--step) * 5);
}
.pad-b-5stp {
    padding-bottom: calc(var(--step) * 5);
}
.pad-tb-5stp {
    padding-top: calc(var(--step) * 5);
    padding-bottom: calc(var(--step) * 5);
}
/* ############### 6stp ############### */
.pad-l-6stp {
    padding-left: calc(var(--step) * 6);
}
.pad-r-6stp {
    padding-right: calc(var(--step) * 6);
}
.pad-lr-6stp {
    padding-left: calc(var(--step) * 6);
    padding-right: calc(var(--step) * 6);
}
.pad-t-6stp {
    padding-top: calc(var(--step) * 6);
}
.pad-b-6stp {
    padding-bottom: calc(var(--step) * 6);
}
.pad-tb-6stp {
    padding-top: calc(var(--step) * 6);
    padding-bottom: calc(var(--step) * 6);
}
/* ############### 7stp ############### */
.pad-l-7stp {
    padding-left: calc(var(--step) * 7);
}
.pad-r-7stp {
    padding-right: calc(var(--step) * 7);
}
.pad-lr-7stp {
    padding-left: calc(var(--step) * 7);
    padding-right: calc(var(--step) * 7);
}
.pad-t-7stp {
    padding-top: calc(var(--step) * 7);
}
.pad-b-7stp {
    padding-bottom: calc(var(--step) * 7);
}
.pad-tb-7stp {
    padding-top: calc(var(--step) * 7);
    padding-bottom: calc(var(--step) * 7);
}
/* ############### 8stp ############### */
.pad-l-8stp {
    padding-left: calc(var(--step) * 8);
}
.pad-r-8stp {
    padding-right: calc(var(--step) * 8);
}
.pad-lr-8stp {
    padding-left: calc(var(--step) * 8);
    padding-right: calc(var(--step) * 8);
}
.pad-t-8stp {
    padding-top: calc(var(--step) * 8);
}
.pad-b-8stp {
    padding-bottom: calc(var(--step) * 8);
}
.pad-tb-8stp {
    padding-top: calc(var(--step) * 8);
    padding-bottom: calc(var(--step) * 8);
}
/* ############### 9stp ############### */
.pad-l-9stp {
    padding-left: calc(var(--step) * 9);
}
.pad-r-9stp {
    padding-right: calc(var(--step) * 9);
}
.pad-lr-9stp {
    padding-left: calc(var(--step) * 9);
    padding-right: calc(var(--step) * 9);
}
.pad-t-9stp {
    padding-top: calc(var(--step) * 9);
}
.pad-b-9stp {
    padding-bottom: calc(var(--step) * 9);
}
.pad-tb-9stp {
    padding-top: calc(var(--step) * 9);
    padding-bottom: calc(var(--step) * 9);
}
/* ############### 10stp ############### */
.pad-l-10stp {
    padding-left: calc(var(--step) * 10);
}
.pad-r-10stp {
    padding-right: calc(var(--step) * 10);
}
.pad-lr-10stp {
    padding-left: calc(var(--step) * 10);
    padding-right: calc(var(--step) * 10);
}
.pad-t-10stp {
    padding-top: calc(var(--step) * 10);
}
.pad-b-10stp {
    padding-bottom: calc(var(--step) * 10);
}
.pad-tb-10stp {
    padding-top: calc(var(--step) * 10);
    padding-bottom: calc(var(--step) * 10);
}
/* ############### 11stp ############### */
.pad-l-11stp {
    padding-left: calc(var(--step) * 11);
}
.pad-r-11stp {
    padding-right: calc(var(--step) * 11);
}
.pad-lr-11stp {
    padding-left: calc(var(--step) * 11);
    padding-right: calc(var(--step) * 11);
}
.pad-t-11stp {
    padding-top: calc(var(--step) * 11);
}
.pad-b-11stp {
    padding-bottom: calc(var(--step) * 11);
}
.pad-tb-11stp {
    padding-top: calc(var(--step) * 11);
    padding-bottom: calc(var(--step) * 11);
}
/* ############### 12stp ############### */
.pad-l-12stp {
    padding-left: calc(var(--step) * 12);
}
.pad-r-12stp {
    padding-right: calc(var(--step) * 12);
}
.pad-lr-12stp {
    padding-left: calc(var(--step) * 12);
    padding-right: calc(var(--step) * 12);
}
.pad-t-12stp {
    padding-top: calc(var(--step) * 12);
}
.pad-b-12stp {
    padding-bottom: calc(var(--step) * 12);
}
.pad-tb-12stp {
    padding-top: calc(var(--step) * 12);
    padding-bottom: calc(var(--step) * 12);
}
/* ############### 13stp ############### */
.pad-l-13stp {
    padding-left: calc(var(--step) * 13);
}
.pad-r-13stp {
    padding-right: calc(var(--step) * 13);
}
.pad-lr-13stp {
    padding-left: calc(var(--step) * 13);
    padding-right: calc(var(--step) * 13);
}
.pad-t-13stp {
    padding-top: calc(var(--step) * 13);
}
.pad-b-13stp {
    padding-bottom: calc(var(--step) * 13);
}
.pad-tb-13stp {
    padding-top: calc(var(--step) * 13);
    padding-bottom: calc(var(--step) * 13);
}
/* ############### 14stp ############### */
.pad-l-14stp {
    padding-left: calc(var(--step) * 14);
}
.pad-r-14stp {
    padding-right: calc(var(--step) * 14);
}
.pad-lr-14stp {
    padding-left: calc(var(--step) * 14);
    padding-right: calc(var(--step) * 14);
}
.pad-t-14stp {
    padding-top: calc(var(--step) * 14);
}
.pad-b-14stp {
    padding-bottom: calc(var(--step) * 14);
}
.pad-tb-14stp {
    padding-top: calc(var(--step) * 14);
    padding-bottom: calc(var(--step) * 14);
}
/* ############### 15stp ############### */
.pad-l-15stp {
    padding-left: calc(var(--step) * 15);
}
.pad-r-15stp {
    padding-right: calc(var(--step) * 15);
}
.pad-lr-15stp {
    padding-left: calc(var(--step) * 15);
    padding-right: calc(var(--step) * 15);
}
.pad-t-15stp {
    padding-top: calc(var(--step) * 15);
}
.pad-b-15stp {
    padding-bottom: calc(var(--step) * 15);
}
.pad-tb-15stp {
    padding-top: calc(var(--step) * 15);
    padding-bottom: calc(var(--step) * 15);
}
/* ############### 16stp ############### */
.pad-l-16stp {
    padding-left: calc(var(--step) * 16);
}
.pad-r-16stp {
    padding-right: calc(var(--step) * 16);
}
.pad-lr-16stp {
    padding-left: calc(var(--step) * 16);
    padding-right: calc(var(--step) * 16);
}
.pad-t-16stp {
    padding-top: calc(var(--step) * 16);
}
.pad-b-16stp {
    padding-bottom: calc(var(--step) * 16);
}
.pad-tb-16stp {
    padding-top: calc(var(--step) * 16);
    padding-bottom: calc(var(--step) * 16);
}
/* ############### 17stp ############### */
.pad-l-17stp {
    padding-left: calc(var(--step) * 17);
}
.pad-r-17stp {
    padding-right: calc(var(--step) * 17);
}
.pad-lr-17stp {
    padding-left: calc(var(--step) * 17);
    padding-right: calc(var(--step) * 17);
}
.pad-t-17stp {
    padding-top: calc(var(--step) * 17);
}
.pad-b-17stp {
    padding-bottom: calc(var(--step) * 17);
}
.pad-tb-17stp {
    padding-top: calc(var(--step) * 17);
    padding-bottom: calc(var(--step) * 17);
}
/* ############### 18stp ############### */
.pad-l-18stp {
    padding-left: calc(var(--step) * 18);
}
.pad-r-18stp {
    padding-right: calc(var(--step) * 18);
}
.pad-lr-18stp {
    padding-left: calc(var(--step) * 18);
    padding-right: calc(var(--step) * 18);
}
.pad-t-18stp {
    padding-top: calc(var(--step) * 18);
}
.pad-b-18stp {
    padding-bottom: calc(var(--step) * 18);
}
.pad-tb-18stp {
    padding-top: calc(var(--step) * 18);
    padding-bottom: calc(var(--step) * 18);
}
/* ############### 19stp ############### */
.pad-l-19stp {
    padding-left: calc(var(--step) * 19);
}
.pad-r-19stp {
    padding-right: calc(var(--step) * 19);
}
.pad-lr-19stp {
    padding-left: calc(var(--step) * 19);
    padding-right: calc(var(--step) * 19);
}
.pad-t-19stp {
    padding-top: calc(var(--step) * 19);
}
.pad-b-19stp {
    padding-bottom: calc(var(--step) * 19);
}
.pad-tb-19stp {
    padding-top: calc(var(--step) * 19);
    padding-bottom: calc(var(--step) * 19);
}
/* ############### 20stp ############### */
.pad-l-20stp {
    padding-left: calc(var(--step) * 20);
}
.pad-r-20stp {
    padding-right: calc(var(--step) * 20);
}
.pad-lr-20stp {
    padding-left: calc(var(--step) * 20);
    padding-right: calc(var(--step) * 20);
}
.pad-t-20stp {
    padding-top: calc(var(--step) * 20);
}
.pad-b-20stp {
    padding-bottom: calc(var(--step) * 20);
}
.pad-tb-20stp {
    padding-top: calc(var(--step) * 20);
    padding-bottom: calc(var(--step) * 20);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  left & right */
.right-0 {
    right: 0;
}

.right-1em {
    right: 1em;
}

.left-0 {
    left: 0;
}

.left-1em {
    left: 1em;
}

/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  float */
.float-right {
    float: right;
}
.float-left {
    float: left;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  z-index */
.z-index-m2 {
    z-index: -2;
}
.z-index-m1 {
    z-index: -1;
}
.z-index-0 {
    z-index: 0;
}
.z-index-1 {
    z-index: 1;
}
.z-index-2 {
    z-index: 2;
}
.z-index-3 {
    z-index: 3;
}
.z-index-4 {
    z-index: 4;
}
.z-index-5 {
    z-index: 5;
}
.z-index-6 {
    z-index: 6;
}
.z-index-7 {
    z-index: 7;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  rotations */
.rotateZ-35deg {
    transform: rotateZ(-35deg);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  pointers */
.pointer {
    cursor: pointer;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  width & height */
.full-width {
    width: 100%;
}
.full-height {
    height: 100%;
}
.full-wh {
    width: 100%;
    height: 100%;
}
.wid-2em {
    width: 2em;
}
.wid-50-percent {
    width: 50%;
}
.wid-80-percent {
    width: 80%;
}
.wid-10em {
    width: 10em;
}
.max-wid-65perc {
    max-width: 65%;
}
.max-wid-75perc {
    max-width: 75%;
}
.height-1em {
    height: 1em;
}
.height-2em {
    height: 2em;
}
.height-3em {
    height: 3em;
}
.height-4em {
    height: 4em;
}
.height-5em {
    height: 5em;
}
.height-6em {
    height: 6em;
}
.height-7em {
    height: 7em;
}
.height-8em {
    height: 8em;
}
.height-100px {
    height: 100px;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  opacity */
.opacity02 {
    opacity: 0.2;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  box shadow */
.box-shadow-light {
    box-shadow: 0 0 1px 0;
}
.shadow-1px {
    box-shadow: 0 0 1px;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  borders */
.border-0 {
    border: 0;
}
.nooutline:focus {
    outline: none;
}
.bord-1px-main {
    border: 1px solid #cda274;
}
.bord-2px-main {
    border: 2px solid #cda274;
}
.bord-t-1px-black {
    border-top: 1px solid black;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Border Radius */
.b-radius-1px {
    border-radius: 1px;
}
.b-radius-2px {
    border-radius: 2px;
}
.b-radius-3px {
    border-radius: 3px;
}
.b-radius-4px {
    border-radius: 4px;
}
.b-radius-5px {
    border-radius: 5px;
}
.b-radius-6px {
    border-radius: 6px;
}
.b-radius-7px {
    border-radius: 7px;
}
.b-radius-8px {
    border-radius: 8px;
}
.b-radius-9px {
    border-radius: 9px;
}
.b-radius-10px {
    border-radius: 10px;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  overflow */
.ovflow-hidden {
    overflow: hidden;
}
.ovflow-x-hidden {
    overflow-x: hidden;
}
.ovflow-y-hidden {
    overflow-y: hidden;
}
.ovflow-scroll {
    overflow-y: scroll;
}
.ovflow-x-scroll {
    overflow-x: scroll;
}
.ovflow-y-scroll {
    overflow-y: scroll;
}
.ovflow-auto {
    overflow: auto;
}
.ovflow-x-auto {
    overflow-x: auto;
}
.ovflow-y-auto {
    overflow-y: auto;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  backgrounds */
.bg-white-boxes {
    background-image: url(src/bgs/white.jpg);
}
.darker4 {
    background: rgba(0, 0, 0, 0.4);
}
.darker9 {
    background: rgb(42 32 22 / 89%);
}
.bg-cover {
    background-size: cover !important;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  colors */
.color-main {
    color: var(--clr-main);
}
.color-sec {
    color: var(--clr-sec);
}
.color-white {
    color: white;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Components */

/* ############################################### */
/* #region  Inputs */
.ax-input input {
    padding: calc(var(--step) * 0.7);
    font-size: var(--fnt-s-small);
    border-radius: 5px;
    outline: none;
    border: none;
    box-shadow: 0 0 2px 0 black;
}
/* #endregion */
/* ############################################### */

/* ############################################### */
/* #region  Select */
.ax-input select {
    padding: calc(var(--step) * 0.7);
    font-size: var(--fnt-s-small);
    border-radius: 5px;
    outline: none;
    border: none;
    box-shadow: 0 0 2px 0 black;
}
/* #endregion */
/* ############################################### */

/* ############################################### */
/* #region  Buttons */
.ax-btn button {
    padding: calc(var(--step) * 0.7);
    font-size: var(--fnt-s-small);
    border-radius: 5px;
    outline: none;
    border: none;
}
.ax-btn.green button {
    box-shadow: 0 0 1px 0 black;
    color: white;
    background: darkgreen;
}
.ax-btn.nile button {
    box-shadow: 0 0 1px 0 black;
    color: white;
    background: #5142ff;
}
/* #endregion */
/* ############################################### */

/* ############################################### */
/* #region  Tables */
/* ----------------------------------------------- */
    /* #region  Base */
.ax-table table {
    width: 100%;
    table-layout: fixed;
}
.ax-table .tbl-header {
    border-radius: 5px 5px 0 0;
}
.ax-table .tbl-content {
    margin-top: 0px;
}
.ax-table th {
    padding: 5px;
    font-weight: 500;
    text-transform: uppercase;
}
.ax-table .controls-header {
    width: 160px;
}
.ax-table .icons-header {
    width: 60px;
    padding-left: 5px;
    padding-right: 5px;
}
.ax-table .controls-row {
    width: 160px;
    font-size: 0.7em;
}
.ax-table td {
    padding: 2px;
    vertical-align: middle;
    font-weight: 300;
    font-size: 0.9em;
}
.ax-table tbody tr:hover {
    transition: 0.3s;
}
.ax-table td button {
    font-size: 1.5em;
    padding: 0.2em 1em;
    border: none;
    cursor: pointer;
}
.ax-table td button:focus {
    outline: none;
}
.ax-table td button i {
    transition: 0.4s;
}
.ax-table td button:not([disabled]):hover i {
    transform: scale(1.4);
    transition: 0.4s;
}
.ax-table td button.red:not([disabled]):hover {
    background: red;
    color: white;
}
.ax-table td button.green:not([disabled]):hover {
    background: green;
    color: white;
}
.ax-table td button.blue:not([disabled]):hover {
    background: blue;
    color: white;
}
/* #endregion */
    /* ------------------------------------------- */
    /* ------------------------------------------- */
    /* #region  Coloring */
.ax-table.nile .tbl-content-container{
    box-shadow: 0 0 6px 1px #17395c inset;
}
.ax-table.nile .tbl-header {
    background: #17395c;
}
.ax-table.nile th {
    color: white;
}
.ax-table.nile td{
    border-bottom: 1px solid #17395c;
    color: white;
}
.ax-table.nile tbody tr:hover {
    background: #081636;
}
/* #endregion */
    /* ------------------------------------------- */
/* #endregion */
/* ############################################### */
/* #endregion */
/* /////////////////////////////////////////////// */