@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
@import url(https://fonts.googleapis.com/earlyaccess/notokufiarabic.css);
:root {
    --primary: #990e5e;
    --secondary: #1b154a;
    --dark: #0d0928;
    --mallard-font-family: RobotoFallback, Verdana;
}

body {
    font-family: RobotoFallback, Verdana;
    background-size: 100%;
    /*background-color: var(--dark);*/
    padding-left: 15px;
    padding-right: 15px;
}

div .error-summary {
    width: auto;
    border: 7px solid #8B0000;
    background-color: #FAA0A0;
    padding: 10px;
    margin: auto !important;
    text-align: center;
    font-weight: bold;
}

a {
    color: var(--secondary);
    text-decoration: underline;
}

    a:hover {
        color: var(--dark);
        cursor: pointer;
    }

.somthing-wrong a {
    color: var(--dark) !important;
    text-decoration: underline !important;
}

.page-footer a {
    color: var(--dark) !important;
    text-decoration: underline !important;
}

@media (max-width: 300px) {
    .logo {
        width: 80%;
    }
}

/*.container {
    padding: 5px 15px 0 15px;
    margin-right: auto;
    margin-left: auto;
}*/


.body-title {
    display: flex;
    align-items: center;
     justify-content: space-between;
}

.page-header {
    padding: 9px 5px 9px 5px;
    margin: 10px 0 20px;
    background-color: #ffff;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .sign-out {
        height: 80%;
    }
.logout {
    display: flex;
    align-self:center;
    width: auto;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.logo {
    font-size: 10px;
    font-weight: bold;
}

    .page-footer {
        text-align: center;
        padding: 5px 5px 5px 5px;
        background-color: #ffff;
        border-radius: 6px;
    }

    .contact-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        .contact-info a {
            padding: 0 0 0 1.2rem;
            cursor: pointer;
        }


.login-body {
    padding: 1rem;
}


.jumbotron {
    color: inherit;
    min-width: 60svw;
    max-width: 80svw;
    background-color: #fff;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
}

    .jumbotron h1,
    .jumbotron .h1 {
        color: inherit;
        font-weight: 400;
        flex-wrap: wrap;
        font-size: 1.2rem;
    }

    .jumbotron h2,
    .jumbotron .h2 {
        color: inherit;
        font-weight: 300;
        font-size: 1rem;
    }

    .jumbotron h3,
    .jumbotron .h3 {
        color: inherit;
        font-weight: 100;
        font-size: 0.8rem;
    }

    .jumbotron p,
    .jumbotron .p {
        color: inherit;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 0.8rem;
        font-weight: 200;
    }


    .jumbotron > hr {
        border-top-color: #d5d5d5;
    }

    .jumbotron strong {
        font-weight: bold !important;
    }

    .jumbotron .example {
        font-weight: 400;
        color: #6f777b;
    }

        .jumbotron .horizontal-center {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: left;
            width: 100%;
        }

    .container .jumbotron,
    .container-fluid .jumbotron {
        padding-right: 15px;
        padding-left: 15px;
        border-radius: 6px;
    }

    .jumbotron .container {
        max-width: 100%;
    }

@media screen and (max-width: 768px) {
    .login-buttons .dx-box-flex.dx-box.dx-widget.dx-collection {
        display: flex !important;
        flex-direction: row !important;
    }
    header {
        padding: 0.5rem 0;
    }
}

    @media screen and (min-width: 768px) {
        .logout {
            padding: 0 1rem 0 0;
        }

        .jumbotron {
            padding: 1rem 2rem;
            display: flex;
            flex-direction: column;
        }

        .container .jumbotron,
        .container-fluid .jumbotron {
            padding-right: 40px;
            padding-left: 40px;
        }

        .jumbotron h1,
        .jumbotron .h1 {
            color: inherit;
            font-weight: 400;
            flex-wrap: wrap;
            font-size: 1.8rem;
        }

        .jumbotron h2,
        .jumbotron .h2 {
            color: inherit;
            font-weight: 300;
            font-size: 1.6rem;
        }

        .jumbotron h3,
        .jumbotron .h3 {
            color: inherit;
            font-weight: 100;
            font-size: 1.4rem;
        }

        .jumbotron p,
        .jumbotron .p {
            color: inherit;
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 1rem;
            font-weight: 200;
        }

        .container .jumbotron,
        .container-fluid .jumbotron {
            padding-right: 40px;
            padding-left: 40px;
        }


        .jumbotron h4,
        .jumbotron .h4 {
            color: inherit;
            margin-bottom: 15px;
            font-weight: 100;
        }


        .colStatus {
            width: 60px;
        }

        .button-row {
            padding: 1rem;
        }

        .date-text {
            justify-self: start;
        }
    }



    /* [COOKIE BANNER] */
    #cookie-law {
        position: fixed;
        z-index: 99999;
        background: white;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        text-align: center;
        padding: 30px 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

        #cookie-law p {
            margin: 0;
        }

    .close-cookie-banner span {
        position: absolute;
        top: 0;
        color: black;
        font-size: 25px;
    }
    /* [/COOKIE BANNER] */


    /* https://demos.devexpress.com/ASPNetCore/Demo/Form/Validation */

    #helpedInfo {
        color: #ffff;
        padding: 0 1rem 0 0;
    }

    #tooltip-content {
        font-size: 14px;
        font-weight: bold;
    }

    #template-content {
        display: inline-flex;
        background: var(--dark);
        border-radius: 5px;
        color: white;
        padding: 5px;
        margin: 0 0 10px 5px;
    }

    .center-align {
        display: flex;
        justify-content: center;
        align-items: baseline;
    }

    .org-select-box {
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #dealerSelectBox {
        width: 15svw;
    }


    @media (max-width: 2000px ) {
        #dealerSelectBox {
            width: 35svw;
        }
    }

    @media (max-width: 1000px ) {
        #dealerSelectBox {
            width: 60svw;
        }
    }


    @media (max-width: 650px ) {
        #dealerSelectBox {
            width: 75svw;
        }
    }



    #selectedDealerTextBox {
        width: 15svw;
    }


    @media (max-width: 2000px ) {
        #selectedDealerTextBox {
            width: 35svw;
        }
    }

    @media (max-width: 1000px ) {
        #selectedDealerTextBox {
            width: 60svw;
        }
    }


    @media (max-width: 650px ) {
        #selectedDealerTextBox {
            width: 75svw;
        }
    }

    .dx-button-default {
        background-color: var(--secondary) !important;
    }


    .login-form {
        width: 40svw;
        padding: 1rem;
    }



    @media(max-width: 1300px) {
        .login-form {
            width: 60svw;
        }
    }

    @media(max-width: 500px) {
        .login-form {
            width: 80svw;
        }
    }

    .dx-button-default {
        background-color: var(--dark);
        color: white;
        border: none;
        border-radius: 100px !important;
        padding-left: 20px;
        padding-right: 20px;
        line-height: 20px;
        max-width: 480px;
        min-height: 40px;
        justify-content: center;
        display: inline-flex;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
        border: 0;
        align-items: center;
    }

    .mallard-button {
        background-color: var(--dark);
        color: white;
        border: none;
        border-radius: 100px !important;
        padding-left: 20px;
        padding-right: 20px;
        line-height: 20px;
        max-width: 480px;
        min-height: 40px;
        justify-content: center;
        display: inline-flex;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
        border: 0;
        align-items: center;
    }

    .button-row {
        margin: 0 0 1rem 0;
    }

    .dx-datagrid-group-panel .dx-group-panel-item {
        background-color: var(--dark);
        color: white;
    }

    .dx-datagrid-group-panel .dx-sort {
        background-color: var(--dark);
        color: white;
    }

    .dx-pager .dx-pages .dx-selection {
        background-color: var(--dark);
        color: white;
    }


    .dx-toast-content {
        justify-content: center;
    }

    .mallard-hamburger {
        padding-right: 20px;
    }

        .mallard-hamburger .dx-icon-menu {
            color: var(--dark);
            transform: scale(1.5);
        }

    .button-menu .dx-menu-item {
        font-size: 1rem;
        color: black;
    }

    .dx-calendar-navigator .dx-icon,
    .button-menu .dx-icon {
        font-size: 1rem;
        color: var(--dark) !important;
    }

    .dx-overlay-content.dx-menu-adaptive-mode.button-menu {
        width: 50vw !important;
    }

    .dx-treeview-item {
        gap: 0;
    }

    .dx-treeview-expander-icon-stub {
        display: none;
    }

    .button-menu {
        display: flex;
        justify-content: space-evenly;
        transform: scale(1.3)
    }

    .dx-datebox {
        color: var(--dark) !important;
    }

    .tmInlineDiv {
        color: var(--primary);
    }

    .details-column-item {
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
        justify-content: center;
        /*justify-items: center;*/
        /*justify-self: center;*/
    }

        .details-column-item > a {
            display: flex;
            flex-direction: row;
            width: 100%;
            align-items: center;
            justify-content: center;
        }

            .details-column-item > a > img {
                padding-right: 1rem;
            }
@media (max-width: 810px) {
    .logo {
        width: 30%;
    }
    .contact {
        font-size: 12px
    }
    .contact p{
        font-size: 12px
    }
 /*   .contact {
        width: 50%
    }*/
}
    @media (max-width: 767px) {


        .header-button {
            padding: 0;
            margin-right: 0.7rem;
            width: auto;
        }

            .header-button .dx-button-content i {
                margin: 0 !important;
            }

            .header-button .dx-button-content .dx-button-text {
                display: none;
            }
        .jumbotron {
            max-width: 90svw;
            display: flex;
            flex-direction: column;
            margin: 1rem;
        }
        .jumbotron h1,
        .jumbotron .h1 {
            color: inherit;
            font-weight: 200;
            padding: 0px;
            font-size: 1.7rem;
        }

        .jumbotron h4,
        .jumbotron .h4 {
            color: inherit;
            font-weight: 200;
            padding: 0px;
            font-size: 1.2rem;
        }


        .mallard-button {
            padding-left: 5px !important;
            padding-right: 5px !important;
        }
    }

    .header-button {
        align-self: center;
        background-color: var(--secondary);
    }


    .dx-menu-horizontal {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

        .dx-menu-horizontal ul {
            border-block: double !important;
            border-radius: 5px;
            border-width: 2px;
            border-color: var(--dark);
        }

    .dx-widget.dx-calendar-navigator > .dx-button-default {
        background-color: #ffff !important;
        color: var(--dark);
    }

    .dx-calendar-cell.dx-calendar-today span {
        border-color: rgb(51, 97, 148, 0.5);
    }

    .dx-calendar-cell.dx-calendar-selected-date span {
        color: #fff;
        background-color: var(--dark);
        border-color: var(--dark);
    }

    .dx-calendar-cell.dx-calendar-contoured-date span {
        box-shadow: 0 0 0 2px var(--dark);
    }

    .dx-texteditor.dx-state-focused .dx-texteditor-label {
        color: var(--dark);
    }

    .dx-button-mode-text.dx-button-default {
        background-color: transparent !important;
        color: var(--dark);
    }


    .contact-popover {
        margin: 0 2rem 0 0;
        transform: scale(2);
        color: var(--dark);
        cursor: pointer;
    }

    @media (max-width: 753px ) {
        .contact-popover {
            margin: 0 2rem 0 0;
            transform: scale(2);
            color: var(--dark);
        }

        .contact-info {
            display: flex;
            flex-direction: column !important;
            padding: 1rem 0 0 0;
        }

            .contact-info a {
                padding: 0 0 1rem 1.2rem;
            }
    }

    @media (max-width: 1000 ) {
        .contact-popover {
            margin: 0 2rem 0 0;
            transform: scale(2);
            color: var(--dark);
        }
    }


    .dx-menu-hamburger-button {
        transform: scale(2);
    }

    .dx-popup-content .dx-popup-content-scrollable {
        width: fit-content !important;
    }

    .text-content-center {
        display:flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

       /* .text-content-center:has(.auto-height) {
            min-height: 0;
            padding: 0 0 1rem 0;
        }*/
    .dx-texteditor.dx-state-readonly input {
        color: black !important;
    }

    .details-column-content {
        padding: 0 0.8rem;
    }

    @media (max-width: 753 ) {
        .details-column-content > div {
            padding: 0 0 1rem 0;
        }
    }

    @media (min-width: 753 ) {
        .details-column-content {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

            .details-column-content > div {
                padding: 0 1rem 0 0;
            }
    }

    .dx-toolbar-after > div > div > div > .dx-button-content {
        transform: scale(1.5) !important;
    }


    .dx-icon-xlsxfile {
        color: var(--dark);
    }

    .prop-pdf-link {
        transform: scale(1.5);
        cursor: pointer;
    }

    #ProposalDataGrid {
        margin: 1rem 0 1rem 0;
    }


    #dataCommissionGrid {
        margin: 0 0 1rem 0;
    }

    .data-grid-container {
        width: 100%;
    }

    .proposal-link {
        text-decoration: underline;
    }

    .dx-loadpanel-content-wrapper {
        transform: scale(3);
    }

    .dx-toolbar-item-auto-hide {
        margin-left: 10px;
    }

    .dx-form > .dx-layout-manager.dx-layout-manager-one-col .dx-field-item .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
        padding-top: 0 !important;
    }


    .dx-texteditor-input {
        min-height: 40px;
        font-weight: 400;
        font-size: 1rem;
    }


    .center-table {
        margin: 0 auto;
    }


    @media (min-width: 993px) {
        .center-table {
            margin: 0 auto;
            justify-content: center;
            display: flex;
        }
    }

    .maintenance-message {
        display: inline-flex;
        background: rgb(217, 173, 70);
        border-radius: 5px;
        color: white;
        padding: 5px;
        margin: 0 0 10px 5px;
        width: 100%;
    }

    #helpedInfo {
        color: #ffff;
        padding: 0 1rem 0 0;
    }

.resend-code {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content:center;
}



#resendCode {
    color: var(--primary);
    text-decoration: underline;
}


.remember-login {
    display: flex;
    flex-grow: 0 !important;
    align-self: end;
}
.details-row {
    margin: 1rem 0 0 0;
    display: flex;
    justify-content: space-evenly;
    align-content: space-between;
    padding: 0 0 1rem 0;
    flex-wrap: wrap;
    width: 100%;
}

    .details-column {
        padding: 1rem 0 0 0;
        flex-grow: 1;
    }



    @media (max-width: 1000px) {
        .button-menu {
            transform: scale(1.1);
        }
    }

    @media (max-width: 767px) {
        .details-column {
            /*border-bottom: 1px solid var(--dark);*/
        }

        .button-menu {
            transform: scale(1);
        }
    }

    #waLogo {
        transform: scale(3);
        width: fit-content;
    }

    .bottom-contact-us {
        display: flex;
        flex-direction: column;
    }

    .bottom-contact-us-item {
        margin: 0.5rem 0 0.5rem 0;
    }

    .tmInlineDiv {
        display: inline-flex;
        padding: 0.3rem 0 0.3rem 0;
    }

    .details-column-content > p {
        padding: 0;
        margin: 0.2rem 0 0.2rem 0;
    }

    .details-row-logo {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: 1rem 0 0 0;
    }

    .table-footer {
        display: flex;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    }

    .dx-datagrid-text-content {
        overflow: visible !important;
    }

    .dx-fileuploader-container {
        display: flex;
        float: none;
        justify-content: center;
    }

    .btn-upload-bank-details-div {
        margin: 1rem 0 1rem 0;
    }

    .account-number-div {
        display: flex;
        justify-content: center;
    }

    pdf {
        height: 100%;
        width: 100%;
        margin: 2em auto;
        border: 1px solid #999999;
    }

    .pdf .content h1 {
        font-size: 14px;
        font-weight: bold;
        padding-bottom: 2px;
    }

    .pdf .content h2 {
        font-size: 12px;
        font-weight: bold;
        padding-bottom: 2px;
    }

    .pdf .content h3 {
        font-size: 12px;
        font-weight: bold;
        padding-bottom: 2px;
    }

    .pdf .content p {
        font-size: 10px;
        padding-bottom: 2px;
    }

    .pdf .content b {
        font-weight: bold !important;
    }

    .pdf .content strong {
        font-weight: bold !important;
    }

    .pdf .content table {
        font-size: 10px;
        padding-bottom: 2px;
        margin: 1em;
    }

    #scrollview {
        height: 70vh;
    }

    #chkTerms {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

#SignedBy {
    width: 100%;
    margin: 5px 0;
}


    @media (min-width: 768px) {
        .pdf .content h1 {
            font-size: 18px;
            font-weight: bold;
            padding-bottom: 5px;
        }

        .pdf .content h2 {
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 5px;
        }

        .pdf .content h3 {
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 5px;
        }

        .pdf .content p {
            font-size: 14px;
            padding-bottom: 5px;
        }

        .pdf .content table {
            font-size: 14px;
            padding-bottom: 5px;
        }

        #chkTerms {
            display: flex;
            /*justify-self: center;*/
            width: 50%;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        #SignedBy {
            display: flex;
            /*justify-self: center;*/
            width: 50%;
            margin: 5px 0;
        }


        .button-group-div {
            margin: auto;
        }

        .button-group .dx-button {
            display: flex;
            height: 14svh;
            width: 14svw;
            flex-wrap: wrap;
        }
    }

    .button-group-div {
        max-width: 100svw;
    }

    .button-group {
        display: flex;
        flex-grow: 1;
        width: 100%;
    }

    .dx-buttongroup-wrapper {
        flex-wrap: wrap !important;
        justify-content: center;
    }

    .button-group .dx-button {
        display: flex;
        height: 14svh;
        flex-wrap: wrap;
    }



    .dx-buttongroup-wrapper i {
        transform: scale(2);
        margin: 0 0 1rem 0;
    }

    #btnBankDetails {
        display: flex;
        flex-wrap: wrap;
        justify-self: center;
    }

    .dx-buttongroup-wrapper .dx-button-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-self: center;
        align-items: center;
        justify-items: center;
        justify-self: center;
        justify-content: center;
        width: 100%;
        overflow: visible;
        height: fit-content;
    }

    .dx-buttongroup-item.dx-button-mode-outlined.dx-button {
        background-color: var(--secondary);
        color: white;
        margin: 0.5svh 0.5svh 0.5svh 0.5svh;
        border: 2px var(--secondary) !important;
        border-radius: 5px;
        flex-grow: 1;
    }

    .button-group .dx-button-has-icon.dx-button-has-text .dx-icon {
        width: 32px;
        height: 32px;
        color: white;
    }

    .button-group .dx-button-text {
        white-space: break-spaces !important;
    }

    .placeholderContent button {
        display: flex;
    }

    .content-container {
        width: 100%;
        margin: 1rem 1rem 1rem 1rem;
    }


    .fc-body {
        display: flex;
        margin: 2rem 0 0 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
    }

    .fc-left {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 70%;
    }

    .fc-slider {
        padding: 1rem 0 1rem 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    @media (max-width: 1000px) {

        /*  .fc-body {
        flex-direction: column-reverse;
        justify-content: space-between;
    }*/

        .fc-slider-wrapper {
            width: 100%;
        }
    }

    .fc-summary-text {
        margin: auto;
        font-size: 1rem;
        font-weight: 100;
    }

    .fc-credit-div {
        display: flex;
        flex-direction: column;
        padding: 0.5rem
    }

        .fc-credit-div #rgCreditDescription {
            margin: auto;
        }

    .fc-calc-div {
        display: flex;
        flex-direction: column;
        padding: 0.5rem
    }

        .fc-calc-div #rgCalculateBy {
            margin: auto;
        }

    .prop-status-span {
        display: flex;
        flex-direction: row;
        align-items: center;
        /*justify-content: space-between*/
    }

.payment-conf {
    margin: 0 0 0 1rem;
    text-decoration: underline;
}

    .fc-representative {
        display: flex;
        margin: 1rem 0 1rem 0;
        width: 100%;
        padding: 1rem;
        /*border: 1px solid #071d3b;*/
        flex-direction: column;
        background-color: var(--dark);
        color: white;
        border-radius: 5px;
    }

    .fc-rep-values {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.5rem 0.5rem 0.5rem 0;
        border: 1px solid var(--dark);
        font-size: 1rem;
        margin: 1rem 0 1rem 0;
    }

    @media (max-width: 768px) {
        .fc-rep-values {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 1rem 0 1rem 0;
            padding:1rem;
            border: 1px solid var(--dark);
            font-size: 1rem;
        }

        .fc-summary-text {
            padding: 1rem;
        }
    }

    .fc-right {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .fc-totals {
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
        height: fit-content;
        color: white;
        background-color: var(--secondary);
        border-radius: 5px;
        font-size: 1.2rem;
        justify-content: space-between;
    }

        .fc-totals div {
            padding: 0.5rem;
            display: flex;
            justify-items: center;
        }

            .fc-totals div b {
                font-size: 1.5rem;
                /*padding: 0 0 0 1rem;*/
                /*justify-self: end;*/
            }

    .fc-totals-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }

    @media (min-width: 768px) {
        .fc-totals {
            padding: 1rem;
        }

            .fc-totals div {
                padding: 0.5rem;
                display: flex;
                justify-items: center;
            }
    }


    .fc-right .dx-button {
        margin: 1rem 0 1rem 0;
    }

    .dx-icon-pound {
        background-image: url(/images/pound.svg);
    }

    .dx-icon-pound-blue {
        background-image: url(/images/poundBlue.svg);
    }

    .dx-icon-pound-black {
        background-image: url(/images/poundBlack.svg);
    }

    .dx-icon-pound-white {
        background-image: url(/images/poundWhite.svg);
        transform: scale(1) !important;
    }

    #dgOSProofs .dx-row {
        cursor: pointer;
    }

    .osProofTypeName {
        text-decoration: underline;
    }

    .dx-texteditor {
        border-radius: 5px;
    }


    /****New Website CSS****
******WITH CHANGES*****/
    html,
    body,
    /*div,*/
    span,
    applet,
    object,
    iframe,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    body {
        line-height: 1;
        font-family: "body-font", sans-serif;
    }

    ol,
    ul {
        list-style: none;
    }

    blockquote,
    q {
        quotes: none;
    }

        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: "";
            content: none;
        }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    @font-face {
        font-family: "body-font";
        font-display: swap;
        src: url("./fonts/Manrope-VariableFont_wght.ttf") format("truetype");
    }


    .container {
        max-width: 1320px;
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-right: auto;
        margin-left: auto;
    }

    header {
        display: flex;
        padding: 1rem 0;
    }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

    .logo img {
        width: 150%;
        max-width: 300px;
    }

    @media (max-width: 500px) {
        .logo img {
            max-width: 200px;
        }
    }

    .contact {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

        .contact p {
            font-size: 0.85rem;
            text-align: center;
            margin-bottom: 0;
        }

        .contact a {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            text-decoration: none;
            text-align: center;
            color: var(--primary);
        }

        .contact svg {
            width: 0.85rem;
            height: 0.85rem;
            fill: var(--primary);
        }

.main {
    background-color: var(--secondary);
    display: flex;
    align-items: start;
    justify-content: center;
    padding: 3rem 0;
    min-height: 80svh;
    background-position: right bottom;
    /* background-size: contain;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMTYuOSAxNTguOTIiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgICAgb3BhY2l0eTogLjA1OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMi0yIiBkYXRhLW5hbWU9IkxheWVyIDIiPgogICAgPGc+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyMTYuOSAxMDcuMDEgMjE2LjkgMTU4LjkyIDE2My42NiAxNTguOTIgMTYzLjY2IDE0Mi40OCAyMTYuOSAxMDcuMDEiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjAgMTA3LjAxIDAgMTU4LjkyIDUzLjI0IDE1OC45MiA1My4yNCAxNDIuNDggMCAxMDcuMDEiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjIxNi45IDcxLjY0IDIxNi45IDAgMTA4LjQ1IDY1LjczIDAgMCAwIDcxLjY0IDEwOC40NSAxNDkuODQgMjE2LjkgNzEuNjQiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjEwOC45OCAzMi41OSAxNjMuOTEgMCA1Mi45NiAwIDEwOC45OCAzMi41OSIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+)*/
}

        .main .container {
            display: flex;
        }

        .main .form-wrap {
            background-color: white;
            max-width: 1000px;
            width: 100%;
            margin-inline: auto;
            border-radius: 0.5rem;
            padding: clamp(1rem, 4vw, 3rem);
        }

    .divider {
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        display: flex;
    }

        .divider svg {
            height: 30px;
        }

    footer {
        background-color: var(--dark);
        position: relative;
        padding: 3rem 0;
        display: flex;
    }

        footer .container .footer-main {
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            footer .container .footer-main:before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 400px;
                height: 80%;
                background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMTYuOSAxNTguOTIiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgICAgb3BhY2l0eTogLjA1OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMi0yIiBkYXRhLW5hbWU9IkxheWVyIDIiPgogICAgPGc+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyMTYuOSAxMDcuMDEgMjE2LjkgMTU4LjkyIDE2My42NiAxNTguOTIgMTYzLjY2IDE0Mi40OCAyMTYuOSAxMDcuMDEiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjAgMTA3LjAxIDAgMTU4LjkyIDUzLjI0IDE1OC45MiA1My4yNCAxNDIuNDggMCAxMDcuMDEiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjIxNi45IDcxLjY0IDIxNi45IDAgMTA4LjQ1IDY1LjczIDAgMCAwIDcxLjY0IDEwOC40NSAxNDkuODQgMjE2LjkgNzEuNjQiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjEwOC45OCAzMi41OSAxNjMuOTEgMCA1Mi45NiAwIDEwOC45OCAzMi41OSIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+);
                background-position: left bottom;
                background-size: contain;
                background-repeat: no-repeat;
                z-index: 0;
            }

    @media (max-width: 500px) {
        footer .container .footer-main {
            flex-direction: column;
        }

        .copy-legal {
            margin-top: 2rem;
        }

        footer .logo img {
            max-width: 300px;
        }
    }

    .copy-legal {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        text-align: end;
        opacity: 0.76;
        font-size: 0.85rem;
    }

        .copy-legal a {
            color: white;
            text-decoration: none;
        }

            .copy-legal a:hover {
                color: white;
                text-decoration: underline;
            }

    .cls-1 {
        fill: #981f60;
    }

.no-fca-div{
    margin: 1rem 5rem;
    padding: 1rem 5rem;
    /*border: 1px solid var(--secondary);*/
    border-radius: 5px;
}
#btnHome {
    /*padding: 1rem 0;*/
    margin: 4rem 0;
}

.download-text {
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

.uploader {
    display: flex;
    flex-direction: column;
    align-self: center;
    padding: 1rem;

}

.sign-content
{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    margin: 1rem;
}

.sign-button {
    padding: 1rem 0 0 0 ;
}

.sign-footer {
    padding: 1rem 0 0 0;
}

.notification-badge {
    position: absolute;
    top: -5px; 
    right: -5px; 
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px; 
    font-size: 10px; 
    font-weight: bold;
    line-height: 1;
    min-width: 16px; 
    text-align: center;
    z-index: 10;
    box-shadow: 0 0 1px rgba(0,0,0,0.5); 
    display: none; 
}