:root {
    --page-margin-left: 2rem;
    --page-margin-right: 2rem;
    /* FONT */
    --base-font-size: 14px;
    --extra-large-font-size: 3rem;
    --large-font-size: 1.4rem;
    --default-font-size: 1rem;
    --small-font-size: 0.85rem;
    --large-icon-font-size: 2.5rem;
    --small-icon-font-size: 1rem;
    --input-block-spacer: 0.4rem;
    --preview-block-spacer: 1.2rem;
    --main-text-colour: #706f6c;
    --secondary-text-color: #706f6c;
    --main-menu-font-size: 1.1rem;
    /* SYSTEM COLOURS */
    --system-blue: #56bdda; /*#3193ff*/
    --system-purple: #8d25d4;
    --system-black: #000000;
    --styletech-green: #1ba084;
    --styletech-green-transparent: #1ba08496;
    --styletech-yellow: #fdb813;
    --styletech-red: #d91473;
    --styletech-red-transparent: #d9147326;
    --styletech-light-blue: #56bdda;
    --styletech-light-blue-transparent: #56bdda47;
    --styletech-orange: #f16521;
    --styletech-dark-blue: #1d1f3a;
    /* Chart COLOURS */
    --chart-light-blue: #56bdda;
    --chart-aqua: #19B0B4;
    --chart-turquoise: #1BA084;
    --chart-green: #81B84B;
    --chart-yellow: #FDB813;
    --chart-orange: #FA8F12;
    --chart-dark-orange: #F16521;
    --chart-red: #EF384D;
    --chart-purple: #6E2D6F;
    --chart-pink: #D91473;
    --styletech-dark-blue: #52ADC7;
    /*Main Colours*/
    --primary-color: #fff;
    --secondary-color: #f9f9f9;
    --tertiary-color: #fff;
    --hover-color: #ccc;
    --border-color: #ccc;
    /* CONTACT TYPE COLOURS */
    --customer-colour: #3193ff;
    --supplier-colour: #2b319d;
    --partner-colour: #ff76c1;
    --competitor-colour: #dc2855;
    --prospect-colour: #ffc803;
    --company-colour: #00d9a6;
    --level-one-colour: #D91473;
    --level-two-colour: #F16522;
    --user-colour: #ff763f;
    --other-colour: #424242;
    --contact-header-colour: #fff;
    --contact-header-text-colour: #1d1e3b;
    /* MOBILE */
    --mobile-floating-button-bottom-offset: 5rem;
    --mobile-floating-button-right-offset: 1rem;
    --mobile-footer-height: 3.75rem;
    /* BORDER RADIUS */
    --border-radius-small: 0.3rem;
    --border-radius-large: 2.2rem;
    --border-radius-desktop-only: 0;
    /* DROPDOWNS */
    --dropdown-width: 100%;
    --dropdown-border-color: #d91472;
    --dropdown-text-color: #fff;
    --dropdown-text-hover-color: #d91472;
    --dropdown-background-color: #d91472;
    --dropdown-tag-background-colour: var(--styletech-light-blue);
    --readonly-dropdown-tag-background-colour: var(--styletech-light-blue-transparent);
    --readonly-dropdown-tag-border-colour: var(--styletech-light-blue);
    --multipick-control-border-colour: #ccc;
    /* BUTTONS */
    --btn-border-radius: 0.25rem;
    --btn-text-color: #fff;
    --btn-border-color: var(--styletech-light-blue);
    --btn-hover-text-colour: #fff;
    --floating-btn-background: #3193ff;
    --btn-background-colour: var(--styletech-light-blue);
    /* OVERLAYS */
    --overlay-dark-background-colour: rgba(0, 0, 0, 0.5);
    /* FORM INPUTS */
    --form-date-input-width: 100%;
    /* TABS */
    --minimum-tab-width: 11rem;
    /* NEW VARIBLES (NEED SORTING AND APPLYING)*/
    --warning-background-color: #fcf8e3;
    --warning-text-color: var(--secondary-text-color);
    --login-windows-logo: var(--system-black);
    --green-text-color: var(--styletech-green);
    --popup-background-color: #fff;
    --popup-widget-background-color: #f9f9f9;
    --widget-background-color: #fff;
    --red-text-color: #d91473;
    --placeholder-text-color: #6c757d;
    --quote-tab-arrow-color: #ccc;
    --quote-tab-internal-color: #fff;
    --quote-tab-active-color: var(--primary-color);
    --col-hover: #848484;
    --popup-header-color: #fff;
    --table-background-color: #F5F6F8;
    --table-row-background-color: #FBFBFB;
    --alt-table-background-color: #EAEAEA;
    --quote-icon-color: #ddf2f8;
    --faded-text-color: #515967;
    --table-hover-color: #ccc;
    --box-shadow-color: #ccc;
    --site-footer-text: #1d1f3a;
    --filter-icon-color: #444340;
    --body-background: #f9f9f9;
    --main-header-height: 3rem;
    --header-padding-bottom: 0.1rem;
    --header-padding-top: 0.1rem;
    --page-content-height: calc(100% - var(--mobile-footer-height));
    --main-background-color: #F5F6F8;
    --panel-background-colour: #fff;
    --header-background: #fff;
    --tab-background-colour: #fff;
    --tab-hover-background-colour: #ccc;
    --tab-selected-background-color: #fff;
    --tab-font-colour: #fff;
    --tab-hover-font-colour: #fff;
    --tab-selected-font-color: #fff;
    --btn-hover-background-colour: #fff;
    --cal-event-background-colour: #fff;
    --cal-event-font-colour: #fff;
    --header-border-bottom: 1px solid #ddd;
    /* MAIN MENU */
    --menu-background-color: #fff;
    --menu-text-color: black;
    --menu-width: 100%;
    /* POPUPS */
    --auto-popup-height: 100%;
    --auto-popup-max-height: 100%;
    --small-popup-height: 100%;
    --medium-popup-height: 100%;
    --extra-large-popup-height: 100%;
    --collection-control-border: none;
    --popup-content-background-colour: #F5F6F8;
    /* PINELINE */
    --kanban-stage-height: 11rem;
    /* RELATIONSHIP GRID */
    --inactive-row-hover-background-colour: #ffdede;
    --inactive-row-hover-text-colour: #1d1e3b;
    --inactive-row-background-colour: #ffdede;
    --inactive-row-text-colour: #1d1e3b;
    --inactive-row-icon-colour: #f0005b;
    /* TAB STRIP */
    --tabstrip-background-colour: #fff;
    --tabstrip-tab-background-colour: #fff;
    --tabstrip-border-colour: #ddd;
    --tabstrip-tab-border-radius: 0px;
    --tabstrip-tab-link-colour: #8f8f8f;
    --tabstrip-tab-link-selected-colour: var(--main-text-colour);
    --tabstrip-tab-selected-background-colour: var(--styletech-light-blue);
    --tabstrip-tab-selected-border-colour: var(--styletech-light-blue);
    --tabstrip-content-background-colour: #f9f9f9;
    --dashboard-progressbar-background-color: rgba(217, 20, 115, 0.25);
    --dashboard-progressbar-bar-color: var(--styletech-red);
    --dashboard-progressbar-complete-bar-color: var(--styletech-green);
    /* GRIDS */
    --grid-header-background-color: #fff;
    /* SPLITTER */
    --vertical-splitter-bar-background-colour: #f3f3f4;
    --vertical-splitter-bar-handle-color: #515967;
    /* GOOGLE MAPS STYLE*/
    --gm_geometry_color: #F5F5F5;
    --gm_labels_text_fill_color: #616161;
    --gm_labels_text_stroke_color: #F5F5F5;
    --gm_administrative_geometry_stroke_color: #F5F5F5;
    --gm_administrative_geometry_stroke_weight: 2;
    --gm_administrative_country_stroke_color: #AAAAAA;
    --gm_administrative_country_stroke_weight: 2;
    --gm_administrative_land_pracel_labels_text_fill_color: #BDBDBD;
    --gm_poi_geometry_color: #EEEEEE;
    --gm_poi_text_fill_color: #757575;
    --gm_poi_park_geometry_color: #E5E5E5;
    --gm_poi_park_labels_text_fill_color: #9E9E9E;
    --gm_road_geometry_color: #FFFFFF;
    --gm_road_arterial_label_text_fill_color: #757575;
    --gm_road_highway_color: #DADADA;
    --gm_road_highway_label_text_fill_color: #616161;
    --gm_road_local_label_text_fill_color: #9E9E9E;
    --gm_tranisit_line_geometry_color: #E5E5E5;
    --gm_tranisit_station_geometry_color: #EEEEEE;
    --gm_water_geometry_color: #C8D7D4;
    --gm_water_geometry_label_text_color: #9E9E9E;
    /* GOOGLE MAPS POLYGON STYLES */
    --gm_polygon_stroke_color: #DC0F7E;
    --gm_polygon_stroke_opacity: 1.0;
    --gm_polygon_stroke_weight: 3;
    --gm_polygon_fill_color: #DC0F7E;
    --gm_polygon_fill_opacity: 0.15;
    /* GOOGLE MAPS CIRCLE STYLES */
    --gm_circle_fill_color: #3BAA85;
    --gm_circle_fill_opacity: 0.15;
    --gm_circle_stroke_color: #3BAA85;
    --gm_circle_stroke_opacity: 1.0;
    --gm_circle_stroke_weight: 3;
    /* MENU OVERRIDE */
    --link-menu-text-colour: var(--styletech-light-blue);
    --link-menu-hover-colour: #0d6efd;
    /* FORM INPUTS */
    --form-input-spacer: 1.25rem;
    --scrollbar-colour: #ccc;
    --hover-scale-factor: 1.020;
    --popup-base-z-index: 10500;
    --full-screen-z-index: calc(var(--popup-base-z-index) - 1);
    /*Logos*/
    --viewpoint-logo: url("/images/viewpoint-logo_full_compact.svg");
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--main-background-color)
    /*font-size: 16px;*/
}
body {
    overflow-y: hidden;
    padding-top: 0px;
    zoom: 1;
    font-family: 'DM Sans', sans-serif !important;
    background-color: var(--main-background-color);
}

    body:before {
        content: '';
        background: url(../images/Backdrop_logo_color_new_logo.svg);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.2;
    }



.body-content {
    padding-left: 0px;
}

a {
    cursor: pointer;
}

label {
    display: inline-block !important;
    max-width: 100% !important;
    font-weight: normal !important;
}

/* ------------------- Login - Start ------------------- */

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

/* Styles for small screens */
@media (max-width: 767px) {
    .login-container{
        width: 20rem !important;
        height:fit-content;
        top: 2rem !important;
    }
    .loginPopupHeader img{
        width: 17.5rem !important
    }
    .loginPopupContent{
        margin-top: 0 !important;
    }

    #loginPopupContent-center {
        width: 70% !important;
        margin:auto;
    }
}

/*Styles for really small Screens*/
@media (max-width: 767px) and (max-height: 655px) {
    .login-container {
        width: 15rem !important;
        height: fit-content;
        top: 2rem !important;
        width: 100% !important;
    }
    #loginPopupContent-center{
        width:80% !important;
        margin:auto;
    }

    .twoFactorAuthenticationBackground {
        width: 15rem !important;
    }

    .loginPopupHeader img {
        width: 12.5rem !important
    }

    .loginPopupContent {
        margin-top: 0 !important;
    }

    .rememberMeLabel {
        width: 7rem !important;
    }

    #crmAuthenticationSection{
        margin-top: 0 !important;
    }

        #crmAuthenticationSection .inputGroup{
            margin-bottom: 0 !important;
        }

        #crmAuthenticationSection button {
            margin: 0.5rem auto !important;
        }
    .remember-me-container{
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) and (max-height: 622px) {
    .login-container {
        width: 15rem !important;
        height: fit-content;
        top: 0.5rem !important;
        width: 100% !important;
    }
}

@media (min-width: 440px) and (max-width: 767px) {
    .twoFactorAuthenticationBackground {
        width: 25rem !important;
    }

    .loginPopupHeader img {
        width: 20.5rem !important
    }

    #forgot-password{
        display:inline !important;
    }
}

@media (max-height:570px){
    #crmAuthenticationSection{
        margin-top: 0 !important;
    }

    .loginPopupHeader {
        margin: 0 !important;
    }
}

    /*Styles for 200% zoom*/
    @media (min-width: 768px) and (max-height: 768px) {
        .login-container {
            overflow: auto;
            width: 100% !important;
        }

        .twoFactorAuthenticationBackground {
            width: 30rem !important;
        }
    }

    .k-tooltip .k-callout {
        color: var(--styletech-red);
    }

    .verificationPopup {
        position: fixed;
        top: 0px;
    }

    .loginPopupFooter {
        height: 51px;
        background-color: #30373f;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .twoFactorAuthenticationBackground {
        width: 100%;
        position: relative;
        background-color: var(--secondary-color);
        z-index: 55;
        text-align: center;
        border-radius: 10px;
        /*left: 0;*/
        /*right: 0;*/
        /*bottom: 0;*/
        /*top: 0;*/
        /*position: absolute;*/
        /*position: fixed;*/
        /*margin: 10% auto;*/
        padding: 2px;
        padding-top: 20px;
        box-shadow: 0 0 11px 0 var(--box-shadow-color);
    }

    #gallery.homepageGallery {
        max-width: none !important;
        margin-left: -50px;
        margin-right: -50px;
    }

    .homepageGallery a {
        cursor: default !important;
    }

    .loginPopupHeader {
        /*height: 100px;*/
        /*height: 5rem;*/
        /*background-color: #272E35;*/
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin: 1rem;
    }

        .loginPopupHeader > div {
            height: 100%;
            padding: 15px;
        }

        .loginPopupHeader img {
            width: 23.5rem;
        }

    .galleryOverlay {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: black;
        z-index: 10;
        opacity: 0.5;
        pointer-events: none;
    }

    .loginPopupContent {
        float: left;
        width: 100%;
        margin-top: 1rem;
        /*font-size: 1.05em;*/
        text-align: left;
    }

        .loginPopupContent h2 {
            text-align: center;
            font-size: 1.75em;
            margin: 0;
            margin-bottom: 0.6em;
        }

        .loginPopupContent h3 {
            text-align: center;
            font-size: 1.75em;
            margin: 0;
            margin-bottom: 0.6em;
        }

    #loginPopupContent-center {
        width: 60%;
        text-align: center;
        margin:auto;
    }

    #loginPopupContent-left {
        float: left;
        width: 47%;
        margin: 1em 1em 1em 3em;
    }

    #loginPopupContent-right {
        float: right;
        width: 35%;
        margin: 1em 3em 1em 1em;
    }

    #loginPopupContent-full {
        float: left;
        margin: 1em 2.8em 1em 2.8em;
    }

        #loginPopupContent-full label {
            width: 100%;
            text-align: center;
        }

    #externalAuthWrapper {
        margin-top: 1.5em;
    }

    .externalAuthButton {
        width: 100%;
        margin-bottom: 12px;
        background: #F1F1F1;
        border: none;
        border-radius: 35px;
        text-align: left;
        padding-left: 5px;
        cursor: pointer;
        -moz-transition: background 0.3s;
        -o-transition: background 0.3s;
        -webkit-transition: background 0.3s;
        transition: background 0.3s;
    }

        .externalAuthButton:hover {
            background: #d8d6d6;
        }

        .externalAuthButton:focus {
            outline: none;
        }

        .externalAuthButton span {
            display: inline-block;
            margin: 0.5em 0.7em;
        }

        .externalAuthButton .fa {
            color: white;
            background: #aaa;
            border-radius: 35px;
            padding: 0.5em;
            width: 2.1em;
            text-align: center;
        }

    .linkedInAuth .fa {
        background: #4875B4;
    }

    .microsoftAuth .fa {
        background: #8DC63F;
    }

    .facebookAuth .fa {
        background: #3B5998;
    }

    .twitterAuth .fa {
        background: #55ACEE;
    }

    .googleAuth .fa {
        background: #DC4E41;
    }

    .defaultAuth .fa {
        background: #fae22a;
    }

    #crmAuthenticationSection {
        margin-top: 1.5em;
    }

        #crmAuthenticationSection .inputGroup {
            margin-bottom: 1em;
        }

            #crmAuthenticationSection .inputGroup input {
                border: none;
                background: none;
                margin-bottom: 2px;
                border-bottom: 1px solid var(--border-color);
                border-radius: 0px;
                padding-left: 3px;
                width: 100% !important;
                color: var(--main-text-colour);
                /*text-align:center;*/
            }

                #crmAuthenticationSection .inputGroup input:focus {
                    outline: none;
                }

        #crmAuthenticationSection button {
            width: 50%;
            border: 1px solid var(--styletech-green);
            background: var(--styletech-green);
            color: #fff;
            cursor: pointer;
            margin: 1.5rem auto;
        }

            #crmAuthenticationSection button:hover {
                color: #fff !important;
                background-color: #1ba084b0;
                border-color: #1ba084b0;
            }

            #crmAuthenticationSection button:focus {
                outline: none;
            }


        #crmAuthenticationSection button {
            width: 100%;
            border-radius: 7px;
            padding: 0.6em 1em;
        }

        #crmAuthenticationSection input[type=text] {
            width: 100%;
        }

    #forgot-password {
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: normal;
        color: var(--red-text-color);
    }

    .login-link {
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: normal;
        color: var(--red-text-color);
    }


    .externalLoginLabel {
        font-size: var(--small-font-size);
    }

    .mainHeaderText {
        font-size: 18px;
        color: #4f4f4f;
        display: block;
        letter-spacing: 1px;
        font-weight: 700;
        padding-left: 7px;
    }

    .mainHeaderTextWhite {
        font-size: 18px;
        color: #ffffff;
        display: block;
        letter-spacing: 1px;
        font-weight: 700;
        padding-left: 7px;
    }

    .mainHeaderTextError {
        color: var(--styletech-red);
        display: block;
        letter-spacing: 1px;
        font-weight: 400;
        padding-left: 7px;
        text-align: left;
        /*display: none !important;*/
        font-size: var(--small-font-size);
    }

    .validation-summary-errors {
        color: var(--styletech-red);
        display: block;
        letter-spacing: 1px;
        font-weight: 400;
        padding-left: 7px;
        text-align: left;
        top: -15px;
        font-size: var(--small-font-size);
    }

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

    .input-validation-error {
        border-bottom-color: var(--styletech-red) !important;
    }

    .k-tooltip, .k-tooltip.k-widget, .k-tooltip.k-popup {
        background: var(--styletech-red);
        box-shadow: none;
        border: none;
    }

    .k-tooltip-content {
        color: white;
        margin: auto;
    }

    .mainHeaderTextError ul {
        padding: 0;
        list-style: none;
    }

    .verificationPopupWrapper form {
        text-align: center;
    }

    .verificationPopupWrapper input {
        width: 8% !important;
        height: 3em !important;
        font-size: 16px;
        text-align: center;
        border: none;
        background: var(--secondary-color);
        border-bottom: solid 2px var(--border-color);
        color: var(--main-text-colour);
        padding: 0 !important;
        outline: none;
        margin-right: 7px;
        /*font-weight: bold;*/
    }

        .verificationPopupWrapper input:focus {
            border-bottom: solid 2px #7823c6;
        }


    .field-validation-error {
        text-align: center;
        display: none;
    }

    .verificationPopupWrapper button {
        width: 75% !important;
    }



    .underscoreInput {
        border-radius: 0 !important;
    }


    /*#phoneVerificationPopup {
    min-height: 480px;
    max-height: 480px;
}*/
    .phoneNumberVerificationPopupWrapper {
        width: 75%;
        margin: 0 auto;
    }

    #forgot-password,
    .login-link {
        /*border-bottom: solid 1px #fff;*/
        font-size: var(--small-font-size);
    }

        #forgot-password:hover,
        .login-link:hover {
            /*border-bottom: solid 1px var(--styletech-light-blue);*/
            color: var(--styletech-light-blue);
        }

    .fa:active, .fa:focus {
        outline: none;
    }





    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px var(--secondary-color) inset !important;
        background-color: none;
        color: var(--main-text-colour) !important;
    }

    .inputError {
        border: 1.5px solid var(--styletech-red) !important;
        background: #ff4d6a;
        /*color: #fff;*/
        /*background: rgba(0,148,255,0.22) !important;*/
    }


    .text-danger {
        color: var(--styletech-red);
    }

    a.text-danger:hover,
    a.text-danger:focus {
        color: var(--styletech-red);
    }

    /* ------------------- Login - End ------------------- */

    /* Switches */

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

        .switch-container .switch-text {
            font-size: 0.8em;
        }

            .switch-container .switch-text:hover {
                cursor: pointer;
            }

    .switch {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        top: -1px;
        width: 60px;
        height: 15px;
        padding: 3px;
        /*float: right;*/
        border-radius: 18px;
        cursor: pointer;
    }

    .switch-input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        box-sizing: content-box;
    }

    .switch-label {
        position: relative;
        display: block;
        height: inherit;
        font-size: 0.6em !important;
        text-transform: uppercase;
        background: #eceeef;
        border-radius: inherit;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
        box-sizing: content-box;
    }

        .switch-label:before, .switch-label:after {
            position: absolute;
            top: 50%;
            margin-top: -.5em;
            line-height: 1;
            -webkit-transition: inherit;
            -moz-transition: inherit;
            -o-transition: inherit;
            transition: inherit;
            box-sizing: content-box;
        }

        .switch-label:before {
            content: attr(data-off);
            right: 11px;
            color: #aaaaaa;
            text-shadow: 0 1px rgba(255, 255, 255, 0.5);
        }

        .switch-label:after {
            content: attr(data-on);
            left: 11px;
            color: #FFFFFF;
            text-shadow: 0 1px rgba(0, 0, 0, 0.2);
            opacity: 0;
        }

    .switch-input:checked ~ .switch-label {
        background: var(--styletech-red);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
    }

        .switch-input:checked ~ .switch-label:before {
            opacity: 0;
        }

        .switch-input:checked ~ .switch-label:after {
            opacity: 1;
        }

    .switch-handle {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 13px;
        height: 13px;
        background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
        background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
        border-radius: 100%;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        padding-left: 0px !important;
    }

        .switch-handle:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -6px 0 0 -6px;
            width: 12px;
            height: 12px;
            background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
            background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
            border-radius: 6px;
            box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
        }

    .switch-input:checked ~ .switch-handle {
        left: 43px;
        box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
    }

    /* Transition
    ========================== */
    .switch-label, .switch-handle {
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
    }

    .terms-and-conditions-container {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 50rem;
        max-width: 100%;
        height: 15rem;
        background: var(--secondary-color);
        border-radius: 10px;
        box-shadow: 0 0 11px 0 var(--box-shadow-color);
        padding: 25px;
        min-height: 350px;
        color: var(--main-text-colour);
    }

        .terms-and-conditions-container > form {
            display: flex;
            flex-direction: column;
        }

    .terms-and-conditions-title {
        text-align: center;
        margin-bottom: 1rem;
        font-size: var(--large-font-size);
    }

    .terms-and-conditions-content {
        line-height: 1.5rem;
        font-size: var(--default-font-size);
        overflow: auto;
        padding: 10px;
    }

    .terms-and-conditions-buttons {
        text-align: center;
    }

        .terms-and-conditions-buttons button {
            width: 50%;
            /* border: 1px solid var(--styletech-green);
        background: var(--styletech-green);*/
            color: #fff;
            cursor: pointer;
            margin-top: 1.5rem;
            margin-left: auto;
            margin-right: auto;
        }

    /* .terms-and-conditions-buttons button:hover {
            background: #7823c6;
            color: #fff;
        }

        .terms-and-conditions-buttons button:focus {
            outline: none;
        }*/


    .btn.positive {
        background-color: var(--styletech-green);
        border-color: var(--styletech-green);
        color: #fff;
    }

        .btn.positive:hover {
            background-color: #1ba084b0;
            border-color: #1ba084b0;
        }

    .locked {
        border: 1px solid var(--border-color) !important;
        color: var(--secondary-text-color) !important;
        background: var(--secondary-color) !important;
    }

        .locked:hover {
            border: 1px solid var(--border-color) !important;
            color: var(--secondary-text-color) !important;
            background: var(--secondary-color) !important;
            cursor: default;
        }

    .h-100 {
        height: 100%;
    }

    ::-webkit-scrollbar {
        width: 8px; /* for vertical scrollbars */
        height: 8px; /* for horizontal scrollbars */
        /*border: 1px solid rgba(48, 56, 65, 0.0);*/
        border-radius: 10px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(48, 56, 65, 0.1);
        opacity: 0.5;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: #bbb;
        /*border: 1px solid #303841;*/
        border-radius: 10px;
    }




    .login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 0px;
        width: 30rem;
    }

    .login-extra {
        margin: 4em auto;
    }


        .login-extra > div,
        .login-extra i {
            color: var(--login-windows-logo);
        }

            .login-extra i:hover {
                color: var(--styletech-light-blue);
            }

    .login-extra {
        margin: 2em auto;
        bottom: -100px;
        left: 0;
        right: 0;
    }

    .input-placeholder-container {
        position: relative;
        padding-top: 24px !important;
    }

        .input-placeholder-container *,
        .input-placeholder-container *:focus {
            outline: none !important;
            box-shadow: none !important;
        }

    .floating-placeholder {
        position: absolute;
        /*pointer-events: none;*/
        left: 1rem;
        top: 1.55rem;
        transition: 0.2s ease all;
        color: var(--main-text-colour);
        min-width: 0 !important;
        z-index: 1;
    }

    ::placeholder,
    ::-ms-input-placeholder,
    select option[value=''] {
        color: var(--main-text-colour);
    }


    .rememberMeLabel {
        padding: 0 0.5em;
        color: var(--faded-text-color);
        margin-top: 0.2rem !important;
        font-size: var(--small-font-size);
    }

        .rememberMeLabel:hover {
            cursor: pointer;
        }

    .input-placeholder-container > :first-child:-webkit-autofill ~ .floating-placeholder,
    .input-placeholder-container > :first-child:focus ~ .floating-placeholder,
    .input-placeholder-container > :first-child.valid ~ .floating-placeholder {
        top: 0px;
        letter-spacing: 1px;
        color: var(--main-text-colour);
        left: 0;
        font-size: var(--small-font-size);
    }

    .input-placeholder-container > :first-child:focus ~ .floating-placeholder {
        color: var(--styletech-light-blue);
    }


    .input-placeholder-container > :first-child:focus {
        border-bottom-color: var(--styletech-light-blue) !important;
    }


    .input-placeholder-container *,
    .input-placeholder-container *:focus {
        outline: none !important;
    }

    html {
        font-size: 100%;
        overflow: hidden;
    }

        html.text-large {
            font-size: 110%;
        }

        html.text-xlarge {
            font-size: 120%;
        }

        html.text-xxlarge {
            font-size: 130%;
        }

        html.text-xxxlarge {
            font-size: 140%;
        }

        html.text-small {
            font-size: 85%;
        }

        html.text-xsmall {
            font-size: 75%;
        }

        html.text-xxsmall {
            font-size: 65%;
        }

        html.text-xxxsmall {
            font-size: 55%;
        }


    .k-checkbox {
        width: 1.5rem;
        height: 1.5rem !important;
        font-size: var(--large-font-size);
        padding-left: 3px !important;
    }

        .k-checkbox::before {
            width: var(--large-font-size);
            height: var(--large-font-size);
            font-size: var(--large-font-size);
        }

    .remember-me-container {
        padding: 0.6em 1em !important;
        font-size: var(--small-font-size);
        margin-bottom: 1rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .k-callout.k-callout-w {
        display: none;
    }

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

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

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

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

    .form-control, .form-control:focus, .form-control::placeholder {
        color: var(--main-text-colour) !important;
        background: var(--secondary-color) !important;
    }

    .login-viewpoint-logo {
        content: var(--viewpoint-logo);
    }

    .authentication-code-request {
        color: var(--main-text-colour);
        font-size: var(--base-font-size);
    }

.warning-box {
    border: solid 1px var(--styletech-yellow) !important;
    background: var(--warning-background-color) !important;
    border-radius: 0px;
    padding: 10px 5px;
    position: relative;
    font-size: var(--default-font-size);
    color: var(--warning-text-color);
}

        .warning-box label {
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: center;
        }

.input-placeholder-container > .input-validation-error:first-child {
    border-bottom-color: var(--styletech-red) !important;
}