﻿
/*move to variables.css or something like that */
:root {
    /*colors*/
    --footer-bottom-bg-color: #3a404a;
    --footer-bg-color: #3a4449;
    --footer-small-header-color: #a9a9a9;
    --app-header-color: #4382b4;
    /*fonts*/
    --footer-font-size: 0.9em;
    --padding-h1: 1em;
    --padding-h2: calc(var(--padding-h1) * 0.8 );
}


:root {
    --grey-def: #9e9e9e;
    --active-step-bg: #4382b4;
    --active-step-dark-bg: #295070;
    --color-primary-active: #4382b4;
    --color-primary-active-dark: #295070;
    --color-info-bg: rgba(33,150,243,.05);
    --color-info-border: rgba(33,150,243,0.11);
    --color-info-icon: rgba(33,150,243);
    --color-warning-bg: rgb(243, 104, 33, 0.05);
    --color-warning-border: rgb(222, 36, 36, 0.40);
    --color-error-bg: #f8d7da;
    --color-error-text: #58151c;
    --color-error-border-color: #f1aeb5;
    --error-border: 1px solid var(--color-error-border-color);
    --color-error-validation-text: #ed5c57;
    --color-def-hover-bg: rgba(0,0,0,.058823529411764705);
    --color-disabled-text: var(--grey-def);
    --color-bg-secondary: #F5F5F5; 
    --app-bar-h: 2.5rem;
    --button-font-size: 1rem; /*.875rem;*/
    --button-font-weight: 500;
    --button-letter-spaceing: .02857em;
    --button-font: "Onest","sans-serif"; /*"Roboto","Helvetica","Arial","sans-serif";*/
    --font-def: "Onest","sans-serif"; /*"Roboto","Helvetica","Arial","sans-serif";*/
    --font-bold: 600;
    --font-size-smaller: 0.9em;
    --wiz-h1-font-size: 1.7rem; /*1.875rem*/
}


/*New Design vars*/
:root {
    --color-border-brand-def: #0058D2;
    --color-bg-hover-brand-def: #0046A8;
    --color-bg-active-hover-brand-def: #0046A8;
    --text-color-secondary: #383838;
    --text-color-tertiary: #757575;
    --text-color-brand-def: #0058D2;
    --text-color-hover-brand-def: #0058D2;
    --text-color-visited-brand-def: #AA18CE;
    --color-bg-brand-def: #0058D2;
    --color-bg-brand-secondary: #E8F0FB;
    --color-bg-warning-secondary: #FEEFC6;
    --color-bg-base-secondary: #F5F5F5; /*light gray bg for default blocks and info-box*/
    --color-icon-brand-secondary: #0058D2;
    --color-icon-danger-def: #D92D20;
    --color-icon-warning-def: #DC6803;
    --color-bg-danger: #FEE4E2;
    --color-bg-danger-hover: #B32318;
    --color-text-green-success: #008745;
    --border-radius-def: 8px;
    --border-radius-info-box: 8px;
    --font-root-size: 16px;
    --font-family-def: "Onest";
    --text-base-default: #121212;
    --text-danger-default: #D92D20;
    --app-header-def: #1E1E1E;
    --text-def-color: rgb(68,68,68);
}



@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/Roboto-ExtraLight.ttf') format('truetype');
}


@font-face {
    font-family: 'Onest';
    src: url('../fonts/Onest-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* диапазон */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FE-Font';
    src: url('../fonts/FE-FONT.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html, body {
    font-family: var(--font-def);
}

/*--------------Layout-------------------*/

.navbar {
    background-color: var(--app-header-color);
    background-color: var(--app-header-def);
    background-color: var(--footer-bottom-bg-color);
    min-height: 2.5rem;
    /* height: 2.5rem;*/
    padding: .25rem 1rem;
    width: 100%;
    z-index: 1000;
    font-size: 0.9em;
}

.navbar a {
    color: #fff;
}

.app-main-header .nav-link:hover, .app-main-header .nav-link:focus {
    color: var(--color-bg-base-secondary) !important;
}
.navbar-brand:hover, .navbar-brand:focus {
    color: var(--color-bg-base-secondary);
}


.second-header .navbar a {
    color: rgb(68,68,68);
}
.second-header .nav-link:hover, .projectsSelector .nav-link:hover {
    background-color: var(--color-def-hover-bg);
}

.second-header .nav-link {
    padding-top: 0;
    padding-bottom: 0;
} 

.app-main-header .lang-selector {
    display: flex;
    list-style: none;
    gap: 0.7em;
    font-size: 1em;
    margin: 0;

}
.lang-selector a {
    text-decoration: none;
    font-weight: 500;
    /*color: var(--text-color-secondary);*/
}
.lang-selector a.active {
    text-decoration: underline;
}


.projectsSelector li {
}

.navbar a.dropdown-item {
    color: #000;
}
.nav-bar-bg {
  /*background-color: var(--app-header-color);*/
}

.navbar-toggler {
    padding: .25rem;
    font-size: 1.25em;
    background-color: #fff;
}

.app-nav-button {
    color: #fff;
    border: 0;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    outline: 0;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    -moz-appearance: none;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.5;
    padding: 0.5rem 1rem;
}


footer {
    background-color: var(--color-bg-base-secondary);
    color: var(--text-base-default);
    font-size: var(--footer-font-size);
}


    footer a {
        text-decoration: none!important;
        color: var(--text-base-default);
    }

    footer h4 {
        font-size: 1.5em;
        color: var(--text-base-default);
    }

    footer h5 {
        font-size: 1.3em;
        color: var(--text-color-secondary);
    }

.footer-links {
    color: var(--text-color-secondary);
}

.footer-links ul {
    padding: 0;
    margin: 0;
}

.footer-links li {
    list-style: none;
    margin: 0;
    padding-bottom: 0.6em;
}

.footer .egovLogo {
}

footer .support-and-social {
    text-align: right;
}

.support-and-social .small-header {
    color: var(--text-base-default);
    margin: 0;
    padding-bottom: 0.4em;
    font-weight: 600;
}

.support-and-social .mid-icon {
    font-size: 1.3em;
}


footer .app-store-links{
    display: flex;
}

footer .social {
    display: flex;
    text-align: right;
    padding: 0 1em;
}

    footer .social ul {
        list-style: none;
        margin: 0;
        padding-left: 1rem;
    }

    footer .social li {
        display: inline-block;
        text-align: center;
        padding: 0 0.8em;
    }

    footer .social i {
        background-color: #4f5a60;
        border-radius: 50%;
        font-size: 17px;
        color: #fff !important;
        display: inline-block;
        height: 24px;
        width: 24px;
        line-height: 25px;
    }

.footer-egov {
    color: var(--text-base-default);
    align-items: center;
}

.asp-logo-text {
    max-width: 8em;
    font-weight: 600;
    font-size: 0.7em;
    line-height: 1em;
    display: flex;
    flex-direction: column;
    padding-left: 0.4em;
}

.egov-logo-text {
    max-width: 6em;
    font-weight: 600;
    font-size: 0.7em;
    line-height: 1em;
}
.footer-egov-logo {
    /*border-right: 1px solid #fff;*/
}


.footer-evo-container .slogan {
    font-weight: 550;
    max-width: 15em;
}

.footer-bottom a, .footer-bottom a:visited {
    color: #fff;
    text-decoration: underline !important;
}

.footer-bottom {
    border-top: 1px solid #575757;
    font-size: .86rem;
    background-color: var(--footer-bottom-bg-color);
    color: #ffff;
    padding: 0.7em 0;
}
    .footer-bottom .right-block{
        display: flex;
        justify-content: right;
        gap: 1em;
    }
    /*--------Second Header-------*/
    .second-header {
        min-height: var(--app-bar-h);
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.15);
        margin-bottom: 1rem;
        border-bottom: 1px solid #ddd;
    }





/*--------Wizard layout-----------*/

    .wizard {
        font-family: var(--font-def);
    }

    .wizard h1 {
        font-size: var(--wiz-h1-font-size);
        font-family: var(--font-def);
        color: rgb(68,68,68);
        font-weight: 300;
        letter-spacing: -.01562em;
        padding-top: 0.3em;
    }

    .wizard .step-logo-container {
        display: flex;
        align-self: center;
        justify-content: center;
    }


    .wizard-side-menu {
        display: flex;
        flex-direction: column;
        padding-top: .5rem;
        padding-left: 0;
        padding-right: 0;
    }

    .wizard-side-menu .nav-pills .nav-link {
        border-radius: 0;
        height: 3rem;
        line-height: 2rem;
        color: var(--grey-def);
        font-weight: 600;
    }

    .wizard-side-menu .nav-pills .nav-link.active {
        color: #fff;
        background-color: var(--color-primary-active);
    }

.wizzard-step-content .card {
    border: 0;
}

.wizard-step-icon {
    margin: 0 1rem 0 1rem;
}

.wizzard-step-content .card-body {
    position: relative;
/*    padding-bottom: 6em;*/
}


.wizzard-step-form-content {
    position: relative;
    padding-bottom: 6em;
}

.wizard-buttons-container {
   /* position: absolute;
    width: 100%;
    bottom: 0;*/
}


.wizzard-progress-wrapper {
    width: 50%;
    margin: 0 auto;
}

.wizard-progress {
    display: inline-block;
    padding: 0.5em;
    /* width: 100px;
    height: 100px;*/
}

.progress-ring {
    display: block;
    width: 100%;
    height: 100%;
}

/* Фоновый круг (серый) */
.progress-ring-bg {
    stroke: #e6e6e6;
    stroke-width: 10;
    fill: transparent;
}

/* Прогресс (синий) */
.progress-ring-circle {
    stroke: #0078d4;
    stroke-width: 10;
    fill: transparent;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.35s ease;
}

/* Центральный текст */
.progress-ring text {
    font-family: var(--font-def);
   /* 'Segoe UI', Tahoma, sans-serif;*/
    /*font-size: 16px;*/
    fill: #333;
    text-anchor: middle;
}


.card-header {
    background-color: var(--color-bg-base-secondary);
    /*background-color: transparent;*/
}

.card-header-icon {
    padding: 0 4px;
}

.card-header-icon i {
    color: var(--color-primary-active);
    /*    width: 1em;
height: 1em;*/
    font-size: 0.7em;
}

.card-header-text {
    font-size: 1.25rem;
    font-family: var(--font-def);
    padding: 0 4px;
}

    .card-header-text.compact {
        font-size: 1rem;
    }


.def-button {
    cursor: pointer;
    /*box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);*/
    padding: 8px 16px;
    font-family: var(--button-font);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: 1.5;/*1.75;*/
    letter-spacing: var(--button-letter-spaceing);
    min-width: 64px;
    box-sizing: border-box;
    /* transition: background-color 250ms cubic-bezier(.4,0,.2,1) 0ms,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0ms,border 250ms cubic-bezier(.4,0,.2,1) 0ms;*/
    border-radius: var(--border-radius-def);
   /* text-transform: uppercase;*/
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--color-border-brand-def);
    color: var(--color-bg-brand-def);
}


.def-button.danger:hover{
    background-color: var(--color-bg-danger-hover);
    color: #fff;
}

.def-button.slim {
    padding: 4px 16px;
}
 
.def-button.active {
    color: #fff;
    /*background-color: var(--color-primary-active);*/
    background-color: var(--color-bg-brand-def);
}

.def-button.active:hover {
    background-color: var(--color-bg-hover-brand-def);
}

.def-button:hover{
    background-color: var(--color-bg-hover-brand-def);
    color: #fff;
}

.def-button-label {
}

.def-button .composite-container {
    display: flex;
    gap: 0.5em;
    align-items: center;
}


.mutted {
    color: var(--grey-def);
}

/*-----------------------Validation---------------------------*/

/*.validation-message::before {
    content: "⚠ ";*/ /* Unicode символ предупреждения */
    /*content: "ℹ ";*/ /* Unicode символ уведомления */
    /*font-style: normal;
    font-size: 1.2em;
    color: blue;

    content: "";
    background-image: url('/content/imgs/smal-info-icn.png');
    display: inline-block;
    width: 20px;
    background-size: contain;
    height: 17px;
}*/


.validation-message {
    color: var(--color-error-validation-text);
    font-size: 0.9em;
    margin-top: 0.25em;
    margin-bottom: 0;
    font-style: italic;
    display: flex;
}

/*---------------------Base Components------------------------*/
h6 {
    font-family: var(--font-def);
    font-weight: var(--font-bold);
}


.comp-href-link {
    display: inline-flex;
    position: relative;
    line-height: 1.7em;
}

.comp-href-link a{
    text-decoration: none;
    position: relative;
    color: var(--text-color-brand-def);
}

    .comp-href-link a:hover {
        color: var(--text-color-brand-def); /*?? - почему-то тот же*/
    }

    .comp-href-link a:visited {
        color: var(--text-color-visited-brand-def); /*?? - почему-то тот же*/
    }

    .comp-href-link a:focus {
        border: 1px solid;
        border-color: var(--text-color-brand-def);
    }

.comp-href-link .underline{
    position: absolute;
    height: 1px;
    left: 0px;
    right: 0px;
    bottom: 1px;
    background: #0058D2;
}


 
.comp-notification-block {
    padding: 1em;
    display: flex;
    gap: 1em;
    border-radius: var(--border-radius-info-box);
}

    .comp-notification-block .text-container{
        flex-grow: 1;
    }



    .comp-notification-block.compact {
        padding: 0.5em;
    }

    .comp-notification-block.compact .text-container {
        margin: 0;
        padding: 0;
    }


    .comp-notification-block.def-mutted-bg {
        background-color: var(--color-bg-base-secondary) !important;
    }


    .comp-notification-block.info {
        /* background-color: var(--color-info-bg);*/
        background-color: var(--color-bg-secondary);
        /* border: 1px solid var(--color-info-border);*/
    }

.comp-notification-block.warning {
    background-color: var(--color-bg-danger);
    /*background-color: var(--color-warning-bg);*/
   /* border: 1px solid var(--color-warning-border );*/
}

.comp-notification-block.attention {
    background-color: var(--color-bg-warning-secondary);
}

    .comp-notification-block.def {
        background-color: var(--color-bg-secondary);
        /*border: 1px solid var(--color-info-border);*/
    }

.comp-notification-block h1, 
.comp-notification-block h2, 
.comp-notification-block h3, 
.comp-notification-block h4 {
    font-weight: 600;
    color: #29457b;
    font-family: var(--font-def);
}

.comp-notification-icon{
    font-size: 1.5em;
    border: none !important;
    line-height: 1em;
}

.compact .comp-notification-icon {
    font-size: 1em;
}


.warning .comp-notification-icon {
    /*color: var(--color-warning-border);*/
    color: var(--color-icon-danger-def);
}

.info .comp-notification-icon {
    /*color: var(--color-info-icon);*/
    color: var(--color-icon-brand-secondary);
}

.attention .comp-notification-icon {
    color: var(--color-icon-warning-def);
}



.comp-labled-chckbx {
    margin: 0;
    display: flex;
    align-items: center;
    width: 100%;
}

    .comp-labled-chckbx label {
        display: inline-flex;
        align-items: baseline;
        cursor: pointer;
        width: 100%;
    }

.comp-labled-chckbx label .cb-btn {
    flex: 0 0 auto;
    padding: 12px;
    overflow: visible;
    text-align: center;
    transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms;
    border-radius: 50%;
    /*min-width: 40px;
    min-height: 40px;*/
}

.comp-labled-chckbx label .cb-btn:hover {
    background-color: var(--color-def-hover-bg);
}

.comp-labled-chckbx label .cb-lbl-txt {
    padding: 12px;
    font-family: var(--font-def);
}

    .comp-labled-chckbx label input.form-check-input,
    .comp-labled-chckbx label input {
        top: 0;
        left: 0;
        width: 100%;
        cursor: inherit;
        height: 100%;
        margin: 0;
        /*    opacity: 0;*/
        padding: 0;
        z-index: 1;
        /*    position: absolute;*/
        overflow: visible;
        vertical-align: middle !important;
        appearance: auto;
        background-image: url('/content/imgs/checkBox.svg');
        background-color: var(--color-bg-brand-def);
    }

.comp-labled-chckbx.compact {
    padding: 0;
}

    .comp-labled-chckbx.compact label .cb-btn,
    .comp-labled-chckbx.compact label .cb-lbl-txt {
        padding: 5px 0.7em;
    }
    .comp-labled-chckbx.super-compact {
        padding: 0;
       
    }
        .comp-labled-chckbx.super-compact .cb-lbl-txt{
            padding: 0 !important;  
        }


        .comp-labled-chckbx.super-compact{
           /* max-height: 1.3em;*/ 
            margin-bottom: 0.4em;
        }

        .comp-labled-chckbx.super-compact label .cb-btn,
        .comp-labled-chckbx.super-compact label .cb-lbl-txt {
            padding: 0 0.7em;
        }

            .comp-labled-chckbx.super-compact.left-0 label .cb-btn{
                padding-left:0;
            }

            .comp-radio-list ul {
                list-style: none;
                padding-left: 0;
                line-height: 2em;
            }


.service-section-content {
    padding: 1em;
    padding-bottom: 1em;
    line-height: 1.5em;
    position: relative;
    padding-bottom: inherit;
}

.service-section-content .row-item:hover {
    background-color: var(--color-def-hover-bg);
}

.disabled-item {
    color: var(--color-disabled-text);
    cursor: progress !important;
}

.loading-block {
    background-color: #f9f9f9;
    color: #aaa;
}
.form-item {
    margin-top: 0.5em;
}

.form-item label {
    /*new design*/
    font-weight: 500;
    font-size: 0.9em;
    padding-bottom: 0.3rem;
}


.errors-summary:has(.validation-errors) {
    padding: 1em;
    border: 1px solid red;
    background: #ff000008;
}

.errors-summary .validation-errors {
    list-style: none;
}

/*----------overlay-blocker-----------*/

.overlay-blocker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 128, 128, 0.03);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}
    .overlay-blocker.solid {
        background-color: var(--color-bg-base-secondary);
    }


    .overlay-blocker .icon {
        font-size: 10em;
        opacity: 0.1;
    }

    .overlay-blocker .solid-spinner {
        padding: 1em;
        background-color: #fff;
        border-radius: 1em;
        border: 1px solid #eee;
      /*  aspect-ratio: 1/1;*/
        align-items: center;
        /*flex-direction: column;*/
    }

    .smallest-header {
        min-height: 2.2em;
    }



/*------------------------------*/
.radio-box {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.radio-box.extended {
   /* gap: 0.5em;*/
}

.radio-option{
    list-style: none; 
}

.extended .radio-option {
    border-radius: var(--border-radius-def);
    border-color: #adb5bd;
    border-width: 1px;
    border-style: solid;
   /* padding: 1em;*/
}

    .extended .radio-option label {
        padding: 1em;
    }
    .extended .radio-option label:hover {
        background-color: var(--color-def-hover-bg);
    }

    .extended .radio-option label:active {
        background-color: var(--color-primary-active);
    }

        .extended .radio-option label:has(input[type="radio"]:checked) {
            background-color: var(--color-info-bg);
        }


        .radio-option label {
            display: flex;
            align-items: baseline;
            gap: 0.5em;
            cursor: pointer;
        }
.extended .radio-option .title{
    font-weight: 600;
}

.radio-option .description {
    color: #adb5bd;
}

/*---------Confirmation block------------*/
.shortServiceList {
    list-style: inside circle;
    padding-left: 0;
}

.shortServiceList li {
    line-height: 1.5em;
    font-weight: 300;
    margin-bottom: 0.5em;
}

.info-highlighed{
    color: var(--color-primary-active);
    font-weight: 400;
}


.lbl-value-container {
    margin-bottom: 0.5em;
}
.lbl-value-container .lbl{
    font-weight: normal;
}
.lbl-value-container .value{
    line-height: 1.2em;
}
    /*---------Validation------------*/
    .error-highlight {
        background-color: var(--color-error-bg);
        color: var(--color-error-text);
        border: var(--error-border);
        border-radius: 3px;
    }

.disabled-label{
    color: var(--color-disabled-text);
}


/*-----------------my-orders----------------------*/


.my-orders-header h1 {
    display: flex;
    align-items: center;
    gap: 0.2em;
}

.my-orders-list {
/*    max-height: 70vh;
    overflow: auto;*/
    margin-bottom: 6em;
}

    .my-orders-list .order-item {
        border-bottom: 1px solid #e6e7e8;
        padding: 1em;
        margin-bottom: 1em;
        /*border-radius: var(--border-radius-def);*/
       

       
      
    }

    .my-orders-list .order-item-wrapper {
        display: flex;
        gap: 1em;
        width: 100%;
    }


        .my-orders-list .order-info {
            display: flex;
            flex-direction: column;
            flex-grow: 0;
            min-width: 10rem;
            max-width: 10rem;
            gap: 0.1em;
        }
        .my-orders-list .order-info a{
            text-decoration: none;
            font-weight: bold;
        }
            .my-orders-list .order-nr {
                font-weight: bold;
                color: var(--text-color-brand-def);
            }

        .my-orders-list .order-services {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5em;
            flex-grow: 4;
        }

    .my-orders-list .service-info {
        display: flex;
        flex-direction: row;
        margin-bottom: 0.4em;

    }
.my-orders-list .service-info .title {
    font-weight: 600;
}

        .my-orders-list .service-info .target-subjects {
            color: var(--text-color-tertiary);
        }

.my-orders-list .order-actions {
    display: flex;
    flex-grow: 0;
    text-align: right;
    flex-direction: column;
    gap:0.2em;
}

    .my-orders-list .order-services h6 {
        font-weight: normal;
        color: var(--text-color-tertiary);
    }
/*    .my-orders-list > ul > li:nth-child(2n + 1):not(:only-child) > .order-item {
        background-color: #fafafa;
    }*/


    @media (max-width: 575.98px) {
        .my-orders-header h1 {
            justify-content: center;
        }

        .my-orders-list > ul > li:nth-child(2n + 1):not(:only-child) > .order-item {
            background-color: #fafafa;
        }

        .my-orders-list .order-item {
            padding: 0.75rem;
            padding-bottom: 2rem;
        }

        .my-orders-list .order-item-wrapper {
            flex-direction: column;
            gap: 0.75rem;
        }

        .my-orders-list .order-info {
            width: 100%;
            min-width: 0;
            max-width: none;
            padding-bottom: 0.75rem;
            border-right: 0 !important;
            border-bottom: 1px solid #dee2e6;
        }

        .my-orders-list .order-services {
            width: 100%;
            min-width: 0;
            flex-grow: 0;
        }

            .my-orders-list .order-services > ul {
                width: 100%;
                margin-bottom: 0;
            }

        .my-orders-list .order-actions,
        .my-orders-list .order-actions .btn {
            width: 100%;
        }
    }

    .my-orders-list .order-actions button{

    }

/*-----------------Print--------------------------*/
.print-a4-form {
    padding: 2em;
    border: 1px solid #e6e7e8;
    margin-bottom: 2em;
    max-width: 1200px;
    min-width: 500px;
    font-size: 0.9em;
}

.print-title-block {
    text-align: center;
    font-size: 2em;
    line-height: 1.2em;
    margin: auto;
    width: 70%;
    padding-bottom: 1em;
}
.print-title-block p{
     margin: 0;
}
.print-title-block .subtitle {
    font-size: 0.8em;
    line-height: 1.2em;
}
.print-title-block .subtitle.smaller {
    font-size: 0.65em;
}

.print-terms-agreement, .print-footer {
    font-size: 0.9em;
    line-height: 1.2em;
}
.print-footer{
    padding-top: 1em;
}
.print-footer i.big-icon {
    font-size: 4em;
    color: #e6e7e8;
}
.print-footer .col-border-right {
    border-right: 1px solid black;
    margin-right: 1em;
}

.print-signatures-placeholder {
    height: 6em;
    display: flex;
    justify-content: end;
    align-items: center;
}

.signature-placeholder-underline {
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
    width: 20em;
    height: 1.5em;
}

.print-bold-hr {
    position: relative;
}
.print-bold-hr .long-element {
    position: absolute;
    background-color: #a7a9ac;
    height: .2em;
    width: 100%;
    bottom: 0;
}

.print-bold-hr .center-element {
    background-color: #08338f;
    height: 0.5em;
    width: 33%;
    left: 33%;
    position: absolute;
    bottom: 0;
}
.print-bold-hr .center-element.reversed{
    bottom: -0.3em;
}

.btn-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
}
.btn-icon.mpass-icon {
    background-image: url('/content/imgs/MPassIcon.svg');
}
.btn-icon.msign-icon {
    background-image: url('/content/imgs/MSignIcon.svg');
}
    .btn-icon.mpay-icon {
        background-image: url('/content/imgs/MPayIcon.svg');
    } 


.print-asp-logo {
    background-image: url('/content/imgs/ASP_logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 100px;
    margin: 0 auto;
    width: 140px;
}

.print-form-block {
    margin-bottom: 1.8em;
    letter-spacing: .02857em;
}

.no-pg-break {
    break-inside: avoid;
    page-break-inside: avoid;
}

.labelWrapper {
}
.print-input-label, .print-input-sublabel{
    display: block;
}

.pseudo-input-field {
    background-color: #eee;
    height: 2em;
    line-height: 2em;
}

.digital-signature-placeholder {
    background-color: #e6e7e8;
    height: 5em;
    text-align:center;
    line-height: 5em;
    float: right;
}


/*-----------------Media Queries-----------------------*/

@media (max-width: 575.98px) {

    .in-col-for-sm {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.5rem;
    }

    .in-col-for-sm .lbl {
        color: var(--text-color-secondary);
    }
}

/*------helpers------*/


.color-warning {
    color: var(--text-danger-default) !important; 
}
.color-green-success {
    color: var(--color-text-green-success) !important;
}
.comp-text-primary {
    color: var(--color-primary-active);
}



.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-normal {
    font-weight: normal;
}
.text-bold {
    font-weight: var(--font-bold);
}

.text-italic { 
    font-style: italic;
}

.text-smaller {
    font-size: var(--font-size-smaller);
}

.border-bottom {
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.border-top {
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.d-hidden{
    visibility: hidden;
}
.capitalize-first-letter{
    text-transform: lowercase;
}
.capitalize-first-letter::first-letter {
    text-transform: uppercase;
}

.d-flex-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em; 
}

.mr-0{
    margin-right: 0;
}

.cur-pointer {
    cursor: pointer;
}
.cur-help {
    cursor: help;
}

/*--Table helpers--*/
.col-date{
    max-width: 100px; 
}
.col-max-250{
    max-width:250px;
}


/*Helpers*/
.color-warning {
    color: var(--color-icon-warning-def) !important;
}

.list-style-decimal{
    list-style: decimal !important; 
}
.list-style-disc {
    list-style: disc !important;
}
.list-style-circle {
    list-style: circle !important;
}

.list-style-letters {
    list-style: lower-latin !important;
}

.px-05{
    padding: 0 0.5em !important;
}