@import "../variables/_colors.css";
@import "../variables/_dimensions.css";
@font-face {
    font-family: 'Helvetica', sans-serif;
    src: url(../../fonts/Helvetica.otf);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'Tajawal', sans-serif;
    src: url(../../css/fonts/Tajawal-Regular.ttf);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}
/* #region -> backgrounds */
.norma--bg__success {
    background-color: var(--norma--success) !important;
}

.norma--bg__danger {
    background-color: var(--norma--danger) !important;
}

.norma--bg__warning {
    background-color: var(--norma--warning) !important;
}

.norma--bg__grey-1 {
    background-color: var(--norma__neutral--grey-1) !important;
}

.norma--bg__grey-2 {
    background-color: var(--norma__neutral--grey-2) !important;
}

.norma--bg__grey-3 {
    background-color: var(--norma__neutral--grey-3) !important;
}

.norma--bg__light-blue {
    background-color: var(--norma__neutral--light-blue) !important;
}

.norma--bg__light {
    background-color: var(--norma__neutral--light) !important;
}
/* #endregion */
/* #region -> text colors */
.norma--tx__success {
    color: var(--norma--success) !important;
}

.norma--tx__danger {
    color: var(--norma--danger) !important;
}

.norma--tx__warning {
    color: var(--norma--warning) !important;
}

.norma--tx__grey-1 {
    color: var(--norma__neutral--grey-1) !important;
}

.norma--tx__grey-2 {
    color: var(--norma__neutral--grey-2) !important;
}

.norma--tx__grey-3 {
    color: var(--norma__neutral--grey-3) !important;
}

.norma--tx__light-blue {
    color: var(--norma__neutral--light-blue) !important;
}

.norma--tx__sec-1 {
    color: var(--norma-secondary--1) !important;
}

.norma--tx__sec-2 {
    color: var(--norma-secondary--2) !important;
}

.norma--tx__sec-3 {
    color: var(--norma-secondary--3) !important;
}
/* #endregion */
/* #region -> custom padding */
/* padding X */
.norma--px-1 {
    padding-inline: var(--norma--padding-xs) !important;
}
.norma--px-0-2 {
    padding-inline: 0 var(--norma--padding-sm) !important;
}
    .norma--px-2 {
        padding-inline: var(--norma--padding-sm) !important;
    }

.norma--px-3 {
    padding-inline: var(--norma--padding-md) !important;
}

.norma--px-4 {
    padding-inline: var(--norma--padding-lg) !important;
}

.norma--px-5 {
    padding-inline: var(--norma--padding-xl) !important;
}

.norma--px-6 {
    padding-inline: var(--norma--padding-xxl) !important;
}

/* padding Y */
.norma--py-1 {
    padding-block: var(--norma--padding-xs) !important;
}

.norma--py-2 {
    padding-block: var(--norma--padding-sm) !important;
}

.norma--py-3 {
    padding-block: var(--norma--padding-md) !important;
}

.norma--py-4 {
    padding-block: var(--norma--padding-lg) !important;
}

.norma--py-5 {
    padding-block: var(--norma--padding-xl) !important;
}

.norma--py-6 {
    padding-block: var(--norma--padding-xxl) !important;
}
/* padding start */
.norma--ps-1 {
    padding-inline-start: var(--norma--padding-xs) !important;
}

.norma--ps-2 {
    padding-inline-start: var(--norma--padding-sm) !important;
}

.norma--ps-3 {
    padding-inline-start: var(--norma--padding-md) !important;
}

.norma--ps-4 {
    padding-inline-start: var(--norma--padding-lg) !important;
}

.norma--ps-5 {
    padding-inline-start: var(--norma--padding-xl) !important;
}

.norma--ps-6 {
    padding-inline-start: var(--norma--padding-xxl) !important;
}

/* #endregion */
/* #region -> Margin */
.norma--me-1 {
    margin-inline-end: var(--norma--margin-xs) !important;
}
.norma--me-2 {
    margin-inline-end: var(--norma--margin-sm) !important;
}
.norma--m-i-s-58{
    margin-inline-start:-58px
}
/* #endregion */
/* #region -> custom inputs */

/* #region -> norma--input--xxl inputs */
.norma--input.norma--input--xxl, .norma--input-view-noControl.norma--input--xxl {
    height: var(--norma--height-xxl) !important;
/*    font: normal normal var(--norma--fw-regular) var(--norma--font-lg) / var(--norma--line-height-1) 'Helvetica' !important;
*/}

.norma--floating-input > .norma--input.norma--input--xxl ~ label, .norma--input-view-noControl.norma--input--xxl ~ label{
/*    font: normal normal var(--norma--fw-bold) var(--norma--font-md) / var(--norma--line-height-1) 'Helvetica' !important;
*/}

.norma--floating-input > .norma--input.norma--input--xxl:focus ~ label {
    inset-inline-start: 1.563rem !important;
}

.norma--floating-input > .norma--input.norma--input--xxl:not(:placeholder-shown) ~ label {
    inset-inline-start: 1.563rem !important;
}
/* #endregion */

/* #region -> norma--input--xl inputs */
.norma--input.norma--input--xl, .norma--input-view-noControl.norma--input--xl {
    height: var(--norma--height-xl) !important;
/*    font: normal normal var(--norma--fw-regular) var(--norma--font-md) / var(--norma--line-height-2) 'Helvetica' !important;
*/}

/* the floating label */
.norma--floating-input > .norma--input.norma--input--xl ~ label, .norma--input-view-noControl.norma--input--xl ~label {
/*    font: normal normal var(--norma--fw-bold) var(--norma--font-sm) / var(--norma--line-height-2) 'Helvetica' !important;
*/}

.norma--floating-input > .norma--input.norma--input--xl:focus ~ label {
    inset-inline-start: 0.938rem !important;
}

.norma--floating-input > .norma--input.norma--input--xl:not(:placeholder-shown) ~ label {
    inset-inline-start: 0.938rem !important;
}
/* #endregion */

/* #region -> norma--input--lg inputs */
.norma--input.norma--input--lg, .norma--input-view-noControl.norma--input--lg {
    height: var(--norma--height-lg) !important;
    font: normal normal var(--norma--fw-regular) var(--norma--font-sm) / var(--norma--line-height-2) 'Helvetica' !important;
}
[dir=rtl] .norma--input.norma--input--lg, [dir=rtl] .norma--input-view-noControl.norma--input--lg {
    font-family: 'Tajawal' !important;
}
.norma--floating-input > .norma--input.norma--input--lg ~ label, .norma--input-view-noControl.norma--input--lg ~ label {
    font: normal normal var(--norma--fw-bold) var(--norma--font-xs) / var(--norma--line-height-4) 'Helvetica' !important;
}
[dir=rtl] .norma--floating-input > .norma--input.norma--input--lg ~ label, [dir=rtl] .norma--input-view-noControl.norma--input--lg ~ label {
    font-family: 'Tajawal' !important;
}

.norma--floating-input > .norma--input.norma--input--lg:focus ~ label {
    inset-inline-start: 0.938rem !important;
}

.norma--floating-input > .norma--input.norma--input--lg:not(:placeholder-shown) ~ label {
    inset-inline-start: 0.938rem !important;
}
/* #endregion */

/* #region -> norma--input--md inputs */
/* it's the same as the large one based on the ux designer */
.norma--input.norma--input--md, .norma--input-view-noControl.norma--input--md {
    height: var(--norma--height-xxl) !important;
    font: normal normal var(--norma--fw-regular) var(--norma--font-lg) / var(--norma--line-height-1) 'Helvetica' !important;
}
[dir=rtl] .norma--input.norma--input--md, [dir=rtl] .norma--input-view-noControl.norma--input--md {
    font-family: 'Tajawal' !important;
}

.norma--floating-input > .norma--input.norma--input--md ~ label, .norma--input-view-noControl.norma--input--md ~ label {
    font: normal normal var(--norma--fw-bold) var(--norma--font-xs) / var(--norma--line-height-4) 'Helvetica' !important;
}
[dir=rtl] .norma--floating-input > .norma--input.norma--input--md ~ label, [dir=rtl] .norma--input-view-noControl.norma--input--md ~ label {
    font-family: 'Tajawal' !important;
}
.norma--floating-input > .norma--input.norma--input--md:focus ~ label {
    inset-inline-start: 0.938rem !important;
}

.norma--floating-input > .norma--input.norma--input--md:not(:placeholder-shown) ~ label {
    inset-inline-start: 0.938rem !important;
}
/* #endregion */

/* #region -> norma--input--sm inputs */
.norma--input.norma--input--sm, .norma--input-view-noControl.norma--input--sm {
    height: var(--norma--height-md) !important;
    font: normal normal var(--norma--fw-regular) var(--norma--font-xxs) / var(--norma--line-height-3) 'Helvetica' !important;
    padding-inline: 0 !important;
    width: 104px;
    margin-inline-end: 3px;
    letter-spacing: -1px;
}
[dir=rtl] .norma--input.norma--input--sm, [dir=rtl] .norma--input-view-noControl.norma--input--sm {
    font-family: 'Tajawal' !important;
}
    .norma--floating-input > .norma--input.norma--input--sm ~ label, .norma--input-view-noControl.norma--input--sm ~ label {
        font: normal normal var(--norma--fw-bold) var(--norma--font-xxs) / var(--norma--line-height-4) 'Helvetica' !important;
    }
[dir=rtl] .norma--floating-input > .norma--input.norma--input--sm ~ label, [dir=rtl] .norma--input-view-noControl.norma--input--sm ~ label {
    font-family: 'Tajawal' !important;
}
.norma--floating-input > .norma--input.norma--input--sm:focus ~ label {
    inset-inline-start: 0.938rem !important;
}

.norma--floating-input > .norma--input.norma--input--sm:not(:placeholder-shown) ~ label {
    inset-inline-start: 0.938rem !important;
}
/* #endregion */
/* #endregion */

/* #region -> height */
.norma--height-1 {
    height: var(--norma--height-sm) !important;
}

.norma--height-2 {
    height: var(--norma-height-sm-2) !important;
}

.norma--height-3 {
    height: var(--norma--height-md) !important;
}

.norma--height-4 {
    height: var(--norma--height-lg) !important;
}

/* #endregion */
/* #region -> height */
.norma--width-50 {
    width: 50% !important;
}

/* #endregion */

/* #region -> border */
.border-inline-end-0{
    border-inline-end:none
}
.border-inline-start-0 {
    border-inline-start: none
}
/* #endregion */
/* #region => width*/
.norma--width-13{
    width:13px;
}
.norma--width-16 {
    width: 16px;
}
.norma--width-20 {
    width: 20px;
}
.norma--width-24 {
    width: 24px !important;
    min-width:24px !important
}
/* #endregion */
/* #region width */
.norma--prc-width-5{
    width:5% !important
}
.norma--prc-width-10 {
    width:10% !important
}
.norma--prc-width-12 {
    width: 12% !important
}
.norma--prc-width-15 {
    width:15% !important
}
.norma--prc-width-20 {
    width:20% !important
}
.norma--prc-width-25 {
    width:25% !important
}
.norma--prc-width-28 {
    width: 28% !important
}
.norma--prc-width-30 {
    width:30%!important
}
.norma--prc-width-35 {
    width:35%!important
}
.norma--prc-width-40 {
    width:40%!important
}
.norma--prc-width-45 {
    width:45% !important
}
.norma--prc-width-50 {
    width:50% !important
}
.norma--prc-width-55 {
    width:55% !important
}
.norma--prc-width-60 {
    width:60% !important
}
.norma--prc-width-65 {
    width:65%!important
}
.norma--prc-width-70 {
    width:70% !important
}
.norma--prc-width-75 {
    width:75% !important
}
.norma--prc-width-80 {
    width:80% !important
}
.norma--prc-width-85 {
    width:85% !important
}
.norma--prc-width-90 {
    width:90% !important
}
.norma--prc-width-95 {
    width:95% !important
}
.norma--prc-width-100 {
    width:100% !important
}
/* #endregion */
.norma--overflow-visible{
    overflow:visible !important
}
.cursor_pointer{
    cursor:pointer !important
}
/* #region ==> custom width percentage */
.norma_col_1p {
    -ms-flex: 0 0 1%;
    flex: 0 0 1%;
    max-width: 1%;
}
.norma_col_1p {
    -ms-flex: 0 0 1%;
    flex: 0 0 1%;
    max-width: 1%;
}
.norma_col_1p {
    -ms-flex: 0 0 1%;
    flex: 0 0 1%;
    max-width: 1%;
}
.norma_col_6p {
    -ms-flex: 0 0 6%;
    flex: 0 0 6%;
    max-width: 6%;
}
.norma_col_7p {
    -ms-flex: 0 0 7%;
    flex: 0 0 7%;
    max-width: 7%;
}
.norma_col_8p {
    -ms-flex: 0 0 8%;
    flex: 0 0 8%;
    max-width: 8%;
}
.norma_col_9p {
    -ms-flex: 0 0 9%;
    flex: 0 0 9%;
    max-width: 9%;
}
.norma_col_10p {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%;
}
.norma_col_12p {
    -ms-flex: 0 0 12%;
    flex: 0 0 12%;
    max-width: 12%;
}
.norma_col_14p {
    -ms-flex: 0 0 14%;
    flex: 0 0 14%;
    max-width: 14%;
}
.norma_col_16p {
    -ms-flex: 0 0 16%;
    flex: 0 0 16%;
    max-width: 16%;
}
.norma_col_20p {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.norma_col_21-5p {
    -ms-flex: 0 0 21.50%;
    flex: 0 0 21.50%;
    max-width: 21.50%;
}
.norma_col_23p {
    -ms-flex: 0 0 23%;
    flex: 0 0 23%;
    max-width: 23%;
}
.norma_col_24p {
    -ms-flex: 0 0 24%;
    flex: 0 0 24%;
    max-width: 24%;
}
.norma_col_25p {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.norma_col_31p {
    -ms-flex: 0 0 31%;
    flex: 0 0 31%;
    max-width: 31%;
}

.norma_col_37p {
    -ms-flex: 0 0 37%;
    flex: 0 0 37%;
    max-width: 37%;
}

.norma_col_38p {
    -ms-flex: 0 0 38%;
    flex: 0 0 38%;
    max-width: 38%;
}

.norma_col_40p {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
}

.norma_col_44p {
    -ms-flex: 0 0 44%;
    flex: 0 0 44%;
    max-width: 44%;
}
.norma_col_92p {
    -ms-flex: 0 0 92%;
    flex: 0 0 92%;
    max-width: 92%;
}
.norma_col_100p {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
/* #endregion*/