* {
    margin: 0;
    padding: 0;
}

:root {
    /*GLOBAL COLORS*/
    --g-color-white: #ffffff;
    --g-color-black: #000000;
    /*blue*/
    --g-color-blue-10: #41B6E6;
    --g-color-blue-20: #42a5f5;
    --g-color-blue-80: #183DF0;
    --g-color-dark-blue-70: #023160;
    --g-color-dark-blue-80: #033160;
    /*red*/
    --g-color-red-80: #BD394E;
    --g-color-red-90: #aa3548;
    --g-color-red-80-opacity-75: rgba(189, 57, 78, 0.75);
    /*purple*/
    --g-color-purple-opacity-75: rgba(111, 66, 193, 0.75);
    /* ALIAS COLORS */
    /*buttons*/
    --cta-primary-bg-color: var(--g-color-blue-80);
    --cta-secondary-bg-color: var(--g-color-blue-20);
    --cta-tertiary-color: var(--g-color-dark-blue-80);
    --error-btn-bg-color: var(--g-color-red-80);
    --error-btn-hover-bg-color: var(--g-color-red-90);
    --reset-btn-bg-color: var(--g-color-red-80-opacity-75);
    --info-btn-bg-color: var(--g-color-purple-opacity-75);
    --cta-primary-text-color: var( --g-color-white);
    /*content*/
    --link-text-color: var(--g-color-white);
    --p-text-color: var(--g-color-black);
    --page-title-display: none;
}
/* ---HTML ELEMENTS--- */
img a {
    border: none;
}

a {
    outline: none;
    color: var(--link-text-color);
}

p {
    margin-bottom: 1em;
    color: var(--p-text-color);
}

.rightTop {
    float: right;
    margin: 25px;
}

.right {
    float: right;
    text-decoration: none;
}

.left {
    float: left;
}

hr {
    border: none;
    border-bottom: 1px solid white;
    margin-bottom: 10px;
}
/* ---FORM--- */
input[type=button], input[type=submit], button {
    /*Add a pointer to input buttons and submit elements*/
    cursor: pointer;
}

input[type="radio"] {
    /*Better alignment for radio buttons and their labels*/
    vertical-align: text-bottom;
}

input[type="checkbox"] {
    /*Better alignment for checkboxes and their labels*/
    vertical-align: bottom;
    vertical-align: baseline;
}


/* ---WRAPPER--- */
#wrapper {
    width: 1024px;
    text-align: left;
    margin-left: 25px;
    margin-right: auto;
}

/* ---HEADER--- */
#headerWrap {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 80px;
    text-align: left;
    margin: 0 auto;
    background-color: #F8F8F8 !important;
}

#header {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2px;
    padding-right: 50px;
    margin-right: 10px;
    text-align: left;
}

#logoHolder {
    height: 50px;
    padding-top: 5px;
    padding-left: 10px;
}

a#logoLink {
    width: 190px;
    height: 50px;
    text-decoration: none;
    position: absolute;
}

div#header h2 {
    font-weight: normal;
    font-size: 16px;
    margin-top: 25px;
    margin-left: 25px;
    float: left;
}

div#header p.user {
    margin: 20px 0 0 50px;
    font-size: 11px;
}


div#header li a {
    color: #033160;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    margin-left: 25px;
    text-decoration: none;
}

div#header li #requestDemo {
    padding: 6px 8px;
    border: 1px solid #023160;
    border-radius: 4px;
    margin-left: 70px;
}

    div#header li #requestDemo:hover {
        background-color: #023160;
        color: white;
    }

div#header li#userIdentification {
    margin-left: 55px;
    color: black;
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
}

div#header li#userIdentification span {
    display: inline-block;
    height: 32px;
    width: 32px;
    line-height: 32px;
    border-radius: 30px;
    background-color: #41B6E6;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
}

#logout button {
    width: 76px;
    height: 32px;
    padding: 6px 8px;
    border-radius: 4px;
    border-width: 1px;
    background-color: #033160;
    color: white;
    margin-left: 10px;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
}

div #header p {
    font-weight: bold;
    margin-top: 25px;
}

div#navWrapper {
    background: rgb(84,89,95);
    text-align: left;
    float: left;
    width: 100%;
    overflow: hidden;
    color: white;
}

div#subNavWrapper {
    background: #5d87a1;
    text-align: left;
    float: left;
    width: 100%;
    overflow: hidden;
}

div#nav, div#subNav {
    padding-right: 10px;
    margin-right: 10px;
}

ul#mainNav {
    list-style: none;
    float: left;
    padding-top: 15px;
    height: 30px;
}

    ul#mainNav li {
        float: left;
        display: block;
        margin: 0;
    }

        ul#mainNav li a {
            
            font-size: 16px;
            text-decoration: none;
            padding: 12px 16px;
            z-index: 5;
        }

            ul#mainNav li a:hover {
                background: gray;
            }

            ul#mainNav li a.active {
            }

div#nav p#navHeadline {
    float: left;
    margin: 5px 35px;
    margin-bottom: 5px;
}

.validation-summary-errors ul {
    padding-left: 40px;
    display: none;
}

.rounded.input-validation-error, .errorInput, .k-picker.errorInput {
    border: 1px solid #ED4040 !important;
}

ul#navTwo {
    margin-top: 15px;
    margin-bottom: 15px;
}

    ul#navTwo li {
        display: inline;
        border-right: 1px solid #636363;
        padding: 5px;
        line-height: 30px
    }

        ul#navTwo li:last-child {
            display: inline;
            border-right: none;
        }

    ul#navTwo a {        
        text-decoration: none;
    }

        ul#navTwo a:hover {
            text-decoration: underline;
        }

div#subNav h3 {
    font-size: 20px;
    padding: 2px 0px;
    float: left;
    margin-right: 50px;
}

div#subNav ul li {
    list-style: none;
    float: left;
    display: block;
    margin: 8px 0 0 0;
}

    div#subNav ul li a {
        text-decoration: none;
        padding: 8px 25px;
    }

        div#subNav ul li a:hover {
        }

        div#subNav ul li a.subActive {
        }


/* ---MAIN--- */




div#leftContainer {
    margin: 25px 0 0 35px;
    float: left;
    display: block;
}

.text-container p {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: white;
}

.text-container h5 {
    font-family: Roboto;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    color: white;
    margin-top: 40px;
    margin-bottom: 24px;
}

.text-container {
    padding-bottom: 60px;
    margin: 0 8%;
    float: left;
    display: block;
}

div#rightContainer {
    margin-left: 380px;
    height: 120%;
}

img#prostreamSolutions {
    position: absolute;
    right: 400px;
    top: 100px;
    z-index: -5;
}

div#leftContainer h3 {
    font-size: 18px;
    margin-bottom: 15px;
}

    div#leftContainer h3 span {
        font-size: 14px;
    }

    div#leftContainer h3#homeHeading {
        font-size: 22px;
        padding-bottom: 8px;
    }

div#leftContainer form {
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

div#leftContainer fieldset {
    border: none;
}

div#rightMessage {
    border: 1px solid white;
    font-family: Calibri;
    font-weight: bold;
    font-size: 14px;
    padding: 15px;
    width: 325px;
}

    div#rightMessage h3 {
        font-size: 14px;
        margin-bottom: 15px;
    }

        div#rightMessage h3 span {
            font-size: 18px;
        }

form#signin label {
    width: 30%;
    float: left;
}

a.selector {
    text-decoration: none;
    padding: 0;
    outline: 0;
}

a span.selector {
    background: url(../Images/selector-button.png) no-repeat;
    width: 218px;
    height: 38px;
    display: block;
    padding: 5px 20px 5px 5px;
    font-weight: bold;
    font-size: 18px;
}

a.selector:hover {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    /* IE 5-7 */
    filter: alpha(opacity=60);
    /* Netscape */
    -moz-opacity: 0.6;
    /* Safari 1.x */
    -khtml-opacity: 0.6;
}

.company {
}

div#formBottom input#submit:hover, #submitButton:hover {
    border: 1px solid #ccc;
    opacity: 0.6;
}

textarea:focus, input:focus {
    outline: none;
}

div.formBottom a#question {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 1px 4px;
    text-decoration: none;
    margin-left: 45px;
}



    div.formBottom a#question:hover {
        color: #ccc;
        border: 1px solid #ccc;
    }

div.suite {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

    div.suite:last-child {
        border-bottom: none;
    }


.fogotPasswordForm, .changePasswordForm {
    display: flex;
    padding-left: 10%;
    color: white;
    align-items: center;
    height: 100%;
}

    .fogotPasswordForm form, .changePasswordForm form {
        height: 460px;
    }

h4 {
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.suite h4 {
    font-size: 16px;
    margin-bottom: 10px;
}

div#rightContainer p#headline {
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: left;
    font-size: 14px;
}

a.orangeLink {
    background: url('../Images/orange-aarow.png') no-repeat right;
    padding: 2px 25px 2px 0;
    margin: 0 5px 0 0;
    border-bottom: none;
    font-weight: bold;
    text-decoration: none;
}

    a.orangeLink:hover {
        padding-right: 30px;
        margin-right: 0;
        -moz-transition: all .25s ease;
        -webkit-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

div.suite p {
    font-size: 11px;
}

div.suite img.suiteThum {
    float: left;
    margin: 0 10px 15px 0;
}

div.suite img.prostream {
    float: left;
    margin: 0 10px 35px 0;
}

div#footerWrap div#footer div.footlast {
    margin-right: 0;
}

div.footerContainer {
    float: left;
    display: block;
    margin: 20px 85px 0 0;
}

    div.footerContainer table {
        border-spacing: 0;
    }

    div.footerContainer td {
        padding-right: 35px;
    }

div#footerBottom {
    width: 1024px;
    margin: 0 auto;
    text-align: left;
}

    div#footerBottom a, div#footerBottom p {
        color: #333;
        font-size: 11px;
    }

#foot {
    width: 100%;
    height: 60px;
    color: white;
    font-family: Roboto;
    font-weight: 400;
    font-size: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #041830;
    position: fixed;
    bottom: 0;
    z-index: 5;
}

#foot div {
    display: flex;
    justify-content: center;
    align-items: center;
}

#foot a {
    text-decoration: none;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: white;
}

.field_label {
    float: left;
    width: 120px !important;
    text-align: left;
    display: inline;
    font-weight: bold;
}

.field_label_kendo {
    text-align: center !important;
    margin-bottom: 50px !important;
    width: 120px !important;
    display: inline;
    font-weight: bold;
}

.field_label_right {
    float: left;
    width: 120px !important;
    text-align: right;
    display: inline;
    font-weight: bold;
}



.field_label_edit {
    float: left;
    width: 160px !important;
    text-align: left;
    display: inline;
    font-weight: bold;
}

    .field_label_edit a {
        text-align: center;
    }

.field_remember {
    margin-left: 120px;
}

.field {
    float: left;
    overflow: hidden;
    color: black;
}

.field_right {
    float: right;
    overflow: hidden;
}

.field_error {
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: left;
    color: #393939;
}

div.formContainer {
    margin-bottom: 24px;
    overflow: hidden;
    max-width: 100vw;
    width: 880px;
}

    div.formContainer div.formInput, div.formContainer div.textInput input {
        margin-bottom: 0;
    }

.account-form-container .formContainer {
    max-width: 770px;
}

div.formContainerKendo {
    max-width: 900px;
    margin-left: 20px;
    
}
.width {
    width: 220px;
}


.error, .error_dark, .validation-summary-errors {
    color: #ffffff;
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: left;
}

.logon-error, .logon-error .error {
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: left;
    color: white;
}

.logon-error .error {
    display: inline-block;
    padding-bottom: 0;
    padding-top: 10px;
}

.product_tabs_new {
    margin: 0px auto;
    float: left;
    padding: 3px 10px 0px 0px;
}

#signin_back {
    background: url(../Images/arrow-white_reverse.gif) no-repeat left white;
    border: 1px solid white;
    color: #fff;
    padding: 2px 4px 2px 22px;
    font-weight: bold;
    font-size: 13px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-right: 10px;
}

    #signin_back:hover {
        border: 1px solid #ccc;
    }

#submitButton {
    color: white;
    height: 32px;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    border-radius: 4px;
    border: 1px solid #FFFFFF;
    display: flex;
    align-items: center;
    background: transparent;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
}

#signin_selected {
    background: url(../Images/arrow-white_edit.png) no-repeat right black;
    width: auto;
    border: 1px solid black;
    color: #fff;
    padding: 2px 18px 2px 4px;
    font-weight: bold;
    font-size: 13px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-right: 10px;
}


#signin:hover {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    /* IE 5-7 */
    filter: alpha(opacity=60);
    /* Netscape */
    -moz-opacity: 0.6;
    /* Safari 1.x */
    -khtml-opacity: 0.6;
}

.signin:hover {
    border: 1px solid #ccc;
}

.product_tabs_new a {
    text-align: center;
}

    .product_tabs_new a:link {
        text-decoration: none;
    }

    .product_tabs_new a:active {
        text-decoration: none;
    }

    .product_tabs_new a:visited {
        text-decoration: none;
    }

    .product_tabs_new a:hover {
        text-decoration: none;
    }

.cancel {
    margin: 0px auto;
    width: auto !important;
    border: 1px solid white;
    color: #fff !important;
    padding: 5px;
    font-weight: bold !important;
    font-size: 13px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
    margin-right: 10px !important;
    overflow: hidden;
}



/* --------- grid formating ------*/

.grid {
    border: 0;
    border-collapse: collapse;
    overflow: hidden;
    width: 460px;
    text-align: left !important;
    font-size: 12px !important;
}

.table {
    color: white;
    margin: 0px auto;
    border: 0;
    padding: 20px 0px 20px 0px;
    width: 460px;
    text-align: center;
}

.row {
    border: 0;
    background: rgba(0,0,0,0.6);
    text-align: center;
    font-size: 12px !important;
    color: white;
}


.alt {
    border: 0;
    font-size: 12px !important;
    background-color: lightblue;
}


.grid a:active {
    color: white;
    background-color: black;
}

.grid a:link {
    color: white;
}

.grid a:visited {
    text-decoration: none;
    color: white;
}

.grid a:hover {
}


.head {
    margin: 0px auto;
    font-size: 12px;
    padding: 6px 0px;
    height: 22px;
    text-align: center !important;
}





.grid .head a:active {
    color: white;
    text-decoration: none;
}

.grid .head a:link {
    color: white;
    text-decoration: none;
}

.grid .head a:hover {
    text-decoration: none;
    opacity: 0.6;
}

.app {
    padding: 4px;
}

.grid_button {
    padding: 4px;
}

.grid .foot {
    background-color: black;
    color: white;
}

h3 {
    font-size: 22px;
}

.color {
    font-size: 16px;
}

.orange {
    color: #f93;
}

.validation_msg {
    padding: 8px 16px;
    width: 100%;
}

    .validation_msg .validation-summary-errors {
        text-align: center;
    }

.fieldsetEdit {
    border: dotted 1px white;
    padding: 8px 3px 5px 5px;
    width: 446px;
}

.fieldsetEdit_In {
    float: left;
    padding: 4px 0 0 0;
    margin-right: 10px;
}

.large {
    font-size: 16px;
}

.support {
    font-size: 16px;
    margin-top: 0px;
    text-align: left;
    float: left;
    width: 100%;
    overflow: hidden;
    color : black !important;
}


fieldset {
    padding: 0px 7px 7px 7px;
}


.support a:active {
    text-decoration: underline;
    color: white;
    
}

.support a:link {
    text-decoration: underline;

}

.support a:visited {
    text-decoration: underline;
  
}

.support a:hover {
    text-decoration: underline;
    color: black;
}

.support_indent {
    margin: 0px auto;
    padding: 0 0 0 18px;
}

.support hr {
    margin: 0px auto;
}

.size {
    font-size: 16px;
}

.orange_darker {
    color: #4C4C4C;
}

.support hr {
    border: none;
    border-bottom: 1px dotted #5C5C5C;
    margin-bottom: 10px;
}


.support_left {
    float: left;
    width: 52%;
}


.support_right {
    float: right;
    width: 45%;
    margin-left: 10px;
}

.bak {
    background: url(../Images/edit_back.png);
    background-repeat: no-repeat;
    background-position: right;
}

.question:hover {
    color: #ccc;
    border: 1px solid #ccc;
}

.mapMenu {
    position: relative;
    z-index: 10;
}

    .mapMenu ul li a {
        display: block;
        text-decoration: none;
        text-align: left;
        color: white;
        line-height: 28px;
        overflow: hidden;
        font-weight: bold;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        border: 1px solid #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding-left: 2px;
        padding-right: 10px;
        text-decoration: none;
        margin-left: 45px;
    }

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

        .mapMenu ul li {
            float: left;
            position: relative;
            margin-right: 10px;
        }

            .mapMenu ul li ul {
                display: none;
            }

            .mapMenu ul li:hover a {
            }

            .mapMenu ul li:hover ul {
                display: block;
                position: absolute;
                left: 20px;
                top: -8px;
            }

    .mapMenu .subMenu {
        display: block;
        text-decoration: none;
        text-align: left;
        color: white;
        line-height: 28px;
        font-size: 11px;
        overflow: hidden;
        font-weight: bold;
        width: 180px;
    }

        .mapMenu .subMenu:hover {
            background: #aaaaaa;
            display: block;
            text-decoration: none;
            text-align: left;
            color: white;
            line-height: 28px;
            font-size: 11px;
            overflow: hidden;
            font-weight: bold;
            width: 180px;
        }

div.formBottom {
    max-width: 573px;
    width: 100%;
}

div.formBottom a#question:hover {
    color: #ccc;
    border: 1px solid #ccc;
}

    div.formBottom input#submit:hover {
        border: 1px solid #ccc;
    }

ul.rightTop li {
    margin-top: 25px;
    display: inline;
    padding: 3px;
}

    ul.rightTop li:last-child {
        margin-top: 25px;
        display: inline;
        border-right: none;
    }

.dynload_body {
    display: inline-block;
    padding: 5px;
    width: 275px;
}



div.page-content-logon {
    height: 100%;
    background: url("../Design/Background/logon.webp") no-repeat center center fixed;
    min-height: 500px;
    background-size: cover;
    margin-top: 80px;
}

#logOnform {
    height: 100%;
    padding-left: 10%;
    display: flex;
    color: white;
}

.formPostButtons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    height: 40px;
}

    .formPostButtons div {
        display: flex;
    }
    .formPostButtons #RememberMe {
        margin-right: 10px;
        border-radius: 4px;
    }
    .formPostButtons a {
        color: #41B7E6;
        text-decoration: none;
    }

    #logOnform p {
        font-family: Lato;
        font-size: 40px;
        font-weight: 700;
        line-height: 48px;
        width: 573px;
        text-align: left;
        color: white;
    }


h2 {
    font-family: Lato;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
    color: white;
}


html, main {
    height: 100%
}

body {
    height: calc(100% - 140px); /* Remove header and footer to prevent scroll*/
    background-color: #033160;
    background-size: cover;
    min-height: 100vh;
    padding: 0;
}

#mainLoginForm {
    color: white;
}

div.mainLogin {
    height: 100%;
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
}

#menuToggle input {
    display: none;
}


#mainLoginForm {
    float: left;
    height: 100%;
    text-align: left;
}

div.formInput, div.textInput input {
    margin-bottom: 10px;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

.k-form-field-wrap .k-input input {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #000000;
}

div.textInput input {
    border-color: #bfbfbf;
    border-width: 1px;
    border-style: solid;
}

.heading-text {
    max-width: 560px;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: white;
    text-align: left;
}

input.rounded {
    width: 546px;
    height: 38px;
    padding: 0px 12px;
    gap: 0px;
    border-radius: 4px;
}

    div.formBottom input#submit:hover {
        border: 1px solid #ccc;
    }

div.formBottomElement {
    color: white;
}

    div.formBottomElement span {
        padding-bottom: 15px;
    }

.roundedButton {
    background: url(../Images/button.png) no-repeat;
    width: 362px;
    background-color: #3399CC;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: none;
    padding: 7px 10px 5px 0px;
    color: white;
    text-align: center;
    min-height: 29px;
}

    .roundedButton:hover {
        opacity: 0.6;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        /* IE 5-7 */
        filter: alpha(opacity=60);
        /* Netscape */
        -moz-opacity: 0.6;
        /* Safari 1.x */
        -khtml-opacity: 0.6;
    }

.smallButton {
    background: url(../Images/button_small.png) no-repeat;
    background-color: #3399CC;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: none;
    min-width: 151px;
    min-height: 29px;
    color: white;
    padding-top: 5px;
}

    .smallButton:hover {
        opacity: 0.6;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        /* IE 5-7 */
        filter: alpha(opacity=60);
        /* Netscape */
        -moz-opacity: 0.6;
        /* Safari 1.x */
        -khtml-opacity: 0.6;
    }

.menuselectable:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* IE 5-7 */
    filter: alpha(opacity=80);
    /* Netscape */
    -moz-opacity: 0.8;
    /* Safari 1.x */
    -khtml-opacity: 0.8;
}

.menuselected {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

}

.selected-indicator {
    margin-right: 28px;
    border-bottom: 2px solid #41B6E6;
}

.userlist-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.button-group .primaryButton {
    border: 1px solid #FFFFFF;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #FFFFFF;
    background: transparent;
}

.k-button-solid-base:hover, .button-group .primaryButton:hover {
    border-color: #ffffff;
    background-color: #ffffff;
    background-color: #ffffff;
    color: #023160;
}

.button-group {
    display: flex;
    justify-content: space-between;
}

.k-toolbar .k-icon {
    font-size: 22px;
}

/* ---Dialog override--- */
.k-dialog .k-dialog-buttongroup .primaryButton, .k-toolbar .primaryButton, .k-filter-menu-container .k-action-buttons .k-button-solid-primary {
    background-color: #023160;
    border: 2px solid #023160;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #FFFFFF;
}

.k-dialog .k-dialog-buttongroup .primaryButton {
    margin-left: 8px;
}

.k-dialog .k-dialog-buttongroup .primaryButton:hover, .k-toolbar .primaryButton:hover, .k-filter-menu-container .k-action-buttons .k-button-solid-primary:hover {
    background-color: #023160;
    border: 2px solid #023160;
    opacity: 0.8;
}

.k-dialog .k-dialog-buttongroup .secondaryButton, .k-filter-menu-container .k-action-buttons .k-button-solid-base {
    background-color: #FFFFFF;
    border: 1px solid #023160;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #023160;
}

.k-dialog .k-window-titlebar .k-window-title {
    font-family: Lato;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    color: #393939;
}

.k-dialog .k-window-titlebar .k-i-close {
    color: black;
    font-size: 1.7rem;
}

.k-dialog .k-window-titlebar .k-dialog-close {
    opacity: 1;
}

.k-dialog .k-window-titlebar .k-dialog-close:hover {
    opacity: 0.5;
}

.k-dialog .k-dialog-content {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    color: black;
}

.k-dialog .k-dialog-content .k-row {
    margin-bottom: 14px;
}
/* ---FOOTER--- */
#footer1 {
    clear: both;
    width: 95%;
    padding-top: 5px;
    margin-bottom: 25px;
    text-align: left;
    border-top: 1px solid white;
    margin-left: 25px;
    margin-right: 25px;
}

    #footer1 p {
        font-weight: bold;
    }

    #footer1 a.contact {
        text-decoration: none;
    }

div.formContainer a {
    text-decoration: none;
}

div.textInput {
    padding-top: 5px;
}

.button {
    height: 32px;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    border-radius: 4px;
    border: 1px solid #FFFFFF;
    display: flex;
    align-items: center;
    background: transparent;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: white;
}

[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    text-decoration: none;
    background-color: transparent;
}

#togglePassword, #toggleConfirmPassword, .fa-eye {
    margin-left: -30px;
    cursor: pointer;
    color: black;
    z-index: 4;
    position: relative;
}

img.button {
    display: inline;
    border: 0;
    outline: 0;
}

    img.button:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        /* IE 5-7 */
        filter: alpha(opacity=50);
        /* Netscape */
        -moz-opacity: 0.5;
        /* Safari 1.x */
        -khtml-opacity: 0.5;
    }

div.accountMenu {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 30px;
}

.account-admin-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
    max-width: 880px;
}

.account-admin-menu .menu-links {
    display: flex;
}

.account-selected-container {
    display: flex;
    flex-direction: column;
}

.new-application-container {
    display: flex;
    justify-content: center;
}

.new-application-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.accountMenu a, .account-admin-menu a {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 44px;
    max-width: 155px;
    margin-right: 32px;
}

.account-admin-menu .account-admin-username span {
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: center;
    color: #FFFFFF;
}

.account-admin-menu .account-admin-username {
    display: flex;
    justify-content: center;
    align-items: center;
}

.accountMenu span, .account-admin-menu span {
    margin-left: 10px;
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
}

.accountMenu .menuselected span, .account-admin-menu .menuselected span {
    color: #41B6E6;
}

.account-admin-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#grid table {
    color: #212529;
}

body .dashboard-container {
    background: url("../Design/Background/dashboard.webp") no-repeat center center fixed;
    background-size: cover;
    margin-top: 0;
}

.applications-container {
    height: 100%;
    padding: 5% 5% 0 5%
}

.mobile-applications-container {
    margin-top: 80px;
}

.applications-container .slick-slide {
    padding: 0 40px
}

.applications-container .slick-prev.slick-disabled:before, .applications-container .slick-next.slick-disabled:before {
    cursor: auto;
}

.applications-container a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.applications-container img {
    background-color: var(--g-color-white);
    border-radius: 50%;
    width: 140px;
    height: 140px;
}

    .applications-container .application-img-hover {
        background: #d0edf9;
        border-radius: 50%;
    }

    .applications-container a {
        text-decoration: none;
    }

    .applications-container .application-img-focus {
        background: #41b6e6;
        border-radius: 50%;
    }

.applications-container .slick-prev::before, .applications-container .slick-next::before {
    font-size: 36px;
}

.applications-container .slick-prev::before {
    font-family: WebComponentsIcons;
    content: "\e016";
}

.applications-container .slick-next::before {
    font-family: WebComponentsIcons;
    content: "\e014";
}

.downloadMobileAppsContent #qrAppleDownload, .downloadMobileAppsContent #qrAndroidDownload {
    width: 160px;
    height: 160px;
}


.downloadMobileAppsContent #appleDownloadLink img, .downloadMobileAppsContent #androidDownloadLink img {
    width: 160px;
    height: 50px;
}

.downloadMobileAppsContent {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
}

.downloadMobileAppleApp, .downloadMobileAndroidApp {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 20px
}

.downloadMobileAppsContent a {
    margin-top: 20px
}

.mobile-app-row {
    display: flex;
    align-items: center;
    justify-content: center
}

#updateUserInfo {
    width: 440px;
}

    #updateUserInfo #userInfoFormContent p {
        font-family: Roboto;
        font-size: 18px;
        font-weight: 400;
        line-height: 30px;
        text-align: left;
    }

#userInfoFormContent div.formContainer {
    width: 408px;
}

#userInfoFormContent .k-input-label {
    color: black;

}

.download-button-link {
    padding: 5px 10px;
}

.web-application-selectior-wrapper, .mobile-application-selectior-wrapper {
    margin: 30px auto;
}

.mobile-application-selectior-wrapper a {
    cursor: pointer;
}

.applications-container .application-name {
    margin-top: 10px;
    text-align: center;
    color: var(--g-color-white);
    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.k-input-label {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    padding-bottom: 10px;
    color: white;
}

.k-dialog-content .k-input-label {
    color: black;
    margin-bottom: 100px;
}

.form {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: white;
    width: fit-content;
}

.formContainer .k-input, .formContainer .k-picker {
    margin: 5px 0;
}

    .formContainer .k-input input[readonly], .k-form-field .k-input input[readonly] {
        background-color: #bfbfbf;
        color: black;
    }

.formContainer .button:hover {
    opacity: 0.6;
}

.account-admin-container form {
    width: 100%;
    max-width: 880px;
}

.k-grid-header-wrap .k-header {
    background-color: #E5E5E5 !important;
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    color: black;
}

.k-form .k-form-field {
    margin-top: 0;
}

.field-validation-error {
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-top: 6px !important;
    display: inline-block;
}


.field-validation-valid {
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-top: 6px !important;
    display: inline-block;
}
.k-input-solid:has(> .input-validation-error) {
    border: 1px solid #ED4040 !important;
}

.formContainerKendo .k-validation-summary ul, .formContainerKendo .k-validation-summary li, .formContainerKendo .k-validation-summary a {
    text-decoration: none;
    list-style-type: none;
    cursor: default;
}
.formContainerKendo .k-validation-summary, .main-container .k-validation-summary {
    margin: 0;
    border-color: transparent;
    color: #ffffff;
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: left;
    background-color: transparent;
}

.k-loading-mask .k-loading-image:before {
    color: #41b6e6;
    font-size: 2em;
}

.k-grid-content td, .k-grid-content .k-grid-norecords, .k-filter-menu-container {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: black;
}

.centred-table-container .k-pager-wrap {
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: #565656;
}

.k-pager-wrap .k-pager-numbers .k-link {
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: #565656;
}
    .k-pager-wrap .k-pager-numbers .k-link.k-selected, .k-pager-wrap .k-pager-numbers .k-link.k-state-selected {
        border-color: #41B6E6;
        background-color: #41B6E6;
    }

.k-pager-wrap .k-pager-nav.k-link, .k-pager-wrap .k-pager-refresh {
    color: #565656;
}

.user-header-container {
    display: inline-block;
}

.field, .k-grid, .k-toolbar {
    border-radius: 8px !important;
}

.k-grid-content-sticky {
    display: flex;
    justify-content: space-between;
    border: 0 !important;
    box-shadow: -3px 0px 4px 1px #E5E5E5;
    max-width: 80px;
}

.k-grid-content-sticky .k-grid-Validate, .k-grid-content-sticky .k-grid-Edit {
    padding: 0.35rem;
    background: #41B6E6;
    color: white;
}
    .k-grid-content-sticky .k-grid-Validate:hover, .k-grid-content-sticky .k-grid-Edit:hover {
        background-color: #41B6E6;
        border-color: #41B6E6;
        opacity: 0.6;
    }

.k-grid-content-sticky .k-grid-Delete {
    padding: 0.35rem;
    background: #ED4040;
    color: white;
}

    .k-grid-content-sticky .k-grid-Delete:hover {
        background-color: #ED4040;
        border-color: #ED4040;
        opacity: 0.6;
    }

.k-grid-content-sticky .k-grid-Restore {
    padding: 0.35rem;
    background: #56AD5F;
    color: white;
}

    .k-grid-content-sticky .k-grid-Restore:hover {
        background-color: #56AD5F;
        border-color: #56AD5F;
        opacity: 0.6;
    }

.k-grid-header-sticky {
    border: 0 !important;
}

.no-scrollbar .k-grid-header {
    padding-right: 1px !important;
}

.no-scrollbar .k-grid-content {
    overflow-y: hidden;
}

.no-record-scrollbar .k-grid-content {
    overflow-x: hidden !important;
}

.userlist-container .value-cell, .userlist-container .k-header {
    width: 200px;
}

.userlist-container .k-header {
    width: 162px;
}

.userlist-container #applicationUserGrid {
    max-width: 760px;
}

.centred-table-container #usersGrid, .centred-table-container #companyGrid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.centred-table-container .applicationGrid {
    width: 100%;
    max-width:883px;
    margin: 0 auto;
}

.k-grid .k-grid-header .k-grid-filter.k-active, .k-grid-header .k-grid-filter.k-state-active, .k-grid-header .k-header-column-menu.k-active, .k-grid-header .k-header-column-menu.k-state-active, .k-grid-header .k-hierarchy-cell .k-icon.k-active, .k-grid-header .k-hierarchy-cell .k-icon.k-state-active {
    background-color: #023160;
}

.k-input-label.required::after {
    content: ' *';
    color: red;
}

fieldset {
    border: 0;
}

/* BUTTONS */
.k-button-solid-error {
    background: var(--error-btn-bg-color);
}

    .k-button-solid-error:hover {
        background: var( --error-btn-hover-bg-color);
    }

.k-button-solid-primary {
    background-color: var(--cta-primary-bg-color);
}

/* EDIT USER */
.edit-user-button-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.edit-company-button-group {
    margin-top: 40px;
    width: 100%;
    max-width: 880px;
}

.edit-company-button-group .delete .restore {
    margin-left: 24px;
}

    .edit-user-button-group .save, .edit-company-button-group .save {
        text-decoration: none;
        border: 1px solid #FFFFFF;
        background: transparent;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        text-align: left;
        color: white;
        padding: 6px 8px;
        gap: 10px;
        border-radius: 4px;
    }

    .edit-user-button-group .delete, .edit-company-button-group .delete {
        margin-left: 24px;
        text-decoration: none;
        border: 1px solid #ED4040;
        background: transparent;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        text-align: left;
        color: white;
        padding: 6px 8px;
        gap: 10px;
        border-radius: 4px;
    }

    .edit-user-button-group .restore, .edit-company-button-group .restore {
        margin-left: 24px;
        text-decoration: none;
        border: 1px solid #56AD5F;
        background: transparent;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        text-align: left;
        color: white;
        padding: 6px 8px;
        gap: 10px;
        border-radius: 4px;
    }


    .edit-user-button-group .reset-password-email, .edit-user-button-group .user-info-email {
        text-decoration: none;
        font-family: Lato;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
        text-align: left;
        color: #41B7E6;
        background: transparent;
        border: 0;
        gap: 8px;
    }

        .edit-user-button-group .save:hover, .edit-user-button-group .delete:hover, .edit-user-button-group .restore:hover, .edit-user-button-group .reset-password-email:hover, .edit-user-button-group .user-info-email:hover {
            opacity: 0.6;
        }

    .edit-user-button-group .user-info-email {
        margin-right: 24px;
    }

    .edit-user-button-group .k-icon {
        margin-right: 10px;
    }


    .edit-user-button-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

#memberInfo .k-colspan-4, #companyForm .k-colspan-4 {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: left;
}

.k-checkbox:checked {
    background-color: #41B7E6;
    border-color: #41B7E6;
}

#memberInfo, #companyForm {
    width: 100%;
    max-width: 880px;
}

#memberInfo #IsLockedOut-form-label, #companyForm #IsStrongPassword-form-label, #companyForm #PasswordExpires-form-label {
    margin: 0;
}

input.k-checkbox {
    margin: 0 5px;
}

.k-form-label, .formContainer label {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: white;
}

.k-grid-pager .k-pager-sizes {
    flex: 1 1 50%;
    order: 8;
    flex-direction: row-reverse;
}
    .k-grid-pager .k-pager-sizes .k-picker {
        margin-left: 10px;
    }

/* DOWNLOADS PAGE */
.main-container {
    margin-top: 80px;
    padding: 55px 20px 80px 20px;
    min-height: calc(100% - 135px);
}

.k-grid-applicationUser-column, k-grid-applicationUser-value {
    width: 200px;
}

.title-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto 2.5rem;
    width: auto;
}

    .title-container > h2 {
        text-align: center;
        text-transform: uppercase;
    }

    .title-container > hr {
        margin: 1rem auto 0;
        width: 7.5rem;
    }

    .title-container > span {
        color: var(--g-color-white);
        font-family: "Roboto", sans-serif;
        font-size: 1.125rem;
        margin-top: 1.25rem;
        display: flex;
        justify-content: center;
        text-align: center;
    }

.centred-table-container {
    padding: 16px 0 0 0;
}

#companyUsersGrid {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.user-role-warning, .api-permission-warning {
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: left;
    color: white;
    margin: 8px 0 16px 0;
}

.api-permission-warning {
    font-size: 16px;
    line-height: 18.4px;
    text-align: center;
    color: var(--g-color-red-80-opacity-75);
}

.account-admin-container h3 {
    font-family: Lato;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
    padding: 24px;
    text-align: left;
    color: white;
    text-align: center;
    text-transform: uppercase;
}

.mobile-app-settings {
    width: 100%;
    max-width: 880px;
}


.k-popup .k-list .k-selected:hover {
    color: rgb(65, 182, 230);
    background: rgb(228, 244, 251);
    opacity: 0.6;
}

.k-popup .k-list .k-list-item:hover, .k-popup .k-list .k-list-optionlabel:hover {
    background-color: transparent;
    opacity: 0.6;
}

.k-popup .k-list .k-list-item, .k-popup .k-list .k-list-optionlabel {
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
}

.k-popup .k-list .k-list-item {
    padding-left: 12px;
}

.k-popup .k-list .k-selected {
    color: rgb(65, 182, 230);
    box-shadow: none;
    margin: 0 4px;
    padding-left: 8px;
    border-radius: 4px;
    background: rgb(228, 244, 251);
    border-color: white;
}

.k-popup .k-list .k-list-optionlabel.k-selected {
    margin-top: 4px;
    padding-left: 0;
}

.k-popup .k-list .k-list-optionlabel {
    padding-left: 4px;
}

.k-popup {
    margin-top: 4px;
}

.k-picker .k-button .k-i-arrow-s:before, .k-combobox .k-button .k-i-arrow-s:before{
    content: "\e015";
}

.k-list .k-no-data {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #000000;
}

.formContainer .k-picker, .formContainer .k-picker:focus-within, .k-filter-menu-container .k-picker, .k-filter-menu-container .k-picker:focus, .k-filter-menu-container .k-picker:hover {
    background: #FFFFFF;
    border: 1px solid #BFBFBF;
    box-shadow: none;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #000000;
}

.grecaptcha-badge {
    z-index: 5;
}

.k-grid-header .k-i-sort-asc-sm, .k-grid-header .k-i-sort-desc-sm, .k-grid-header .k-sort-order {
    color: #023160;
}

.formContainer .k-picker-solid.k-hover, .formContainer .k-picker-solid:hover {
    background: #FFFFFF;
    border: 1px solid #BFBFBF;
}

.app-setting textarea {
    width: 100%;
    height: 350px;
    padding: 10px;
    border: 4px solid #41B6E6;
    border-radius: 4px;
    font-family: Roboto;
    font-weight: 400;
    font-size: 14px;
}

div.account-admin-container .k-role-picker {
    width: 100% !important;
}

.app-setting-header {
    display: flex;
    justify-content: space-between;
    height: 32px;
    border-radius: 4px;
    background: #41B6E6;
    margin: 24px 0 16px 0;
    padding: 8px;
}

.app-setting-header p {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    color: white;
    text-align: center;
    margin: 0;
    height: 100%;
    align-content: center;
}

.app-setting-buttons button {
    text-decoration: none;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: white;
    border: 1px solid #FFFFFF;
    background: transparent;
    padding: 6px 8px;
    border-radius: 4px;
    margin-left: 16px;
}

.app-setting-buttons span {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: white;
}

.app-setting-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}


.app-setting-buttons-edit-mode {
    width: 150%;
}

.app-setting {
    display: flex;
    flex-direction: column;
}

#panelbar {
    margin-top: 20px
}

.cards-container {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}

/* dp is the key, stands for doenload page*/
.dp-card-border-wrapper {
    border: 4px solid var(--g-color-blue-10);
    background-color: var(--g-color-blue-10);
    margin: 0.75rem;
    height: 320px;
}

.dp-card {
    background-color: var(--g-color-white);
    border-radius: 8px;
    padding: 1rem;
    width: 320px;
    height: calc(100% - 2rem);
}

    .dp-card > h3 {
        font-family: "Lato", sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.875rem;
        text-align: left;
    }

.dp-card-content {
    display: flex;
    flex-direction: column;
    margin: 0.75rem 0;
}

    .dp-card-content > span {
        font-family: "Roboto", sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.25rem;
        text-align: left;
        margin: 0.75rem 0;
    }

    .dp-card-content > a {
        text-decoration: none;
        color: var(--g-color-dark-blue-70);
        border: 1px solid var(--g-color-dark-blue-70);
        border-radius: 4px;
        width: fit-content;
        padding: 8px;
        font-weight: 700;
        font-size: 1rem;
        font-family: Roboto;
    }

/* Change value based on header width */
@media (max-width: 1250px) {
    .user-header-container {
        margin-top: 25px;
    }

    div#header li#userIdentification {
        margin-left: 25px;
    }

    #menuToggle {
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 25px;
        z-index: 10;
        -webkit-user-select: none;
        user-select: none;
    }

        #menuToggle input {
            display: flex;
            width: 40px;
            height: 32px;
            position: absolute;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
        }

        #menuToggle span {
            display: flex;
            width: 34px;
            height: 4px;
            margin-bottom: 5px;
            position: relative;
            background: black;
            border-radius: 3px;
            z-index: 1;
            transform-origin: 5px 0px;
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
        }

            #menuToggle span:first-child {
                transform-origin: 0% 0%;
            }

            #menuToggle span:nth-last-child(2) {
                transform-origin: 0% 100%;
            }

        #menuToggle input:checked ~ span {
            opacity: 1;
            transform: rotate(45deg) translate(5px, 5px);
        }

            #menuToggle input:checked ~ span:nth-last-child(3) {
                opacity: 0;
                transform: rotate(0deg) scale(0.2, 0.2);
            }

            #menuToggle input:checked ~ span:nth-last-child(2) {
                transform: rotate(-45deg) translate(-5px, 7px);
            }

        #menuToggle input:checked ~ #menu {
            transform: none;
        }

    .rightTop {
        position: absolute;
        z-index: 10;
        top: 30px;
        right: -50px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        display: flex;
        transform: translate(-120%, 0);
        width: 100vw;
        padding-bottom: 25px;
        margin: 15px 25px;
        background-color: #F5F6FA;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

        .rightTop li {
            padding: 10px 0;
            transition-delay: 2s;
        }
}

@media (max-width: 1050px) {
    #foot {
        flex-direction: column;
        height: 100px;
    }

        #foot div {
            width: auto;
        }

        #foot .rightReseved {
            padding: 20px
        }

        #foot .links {
            margin-bottom: 20px;
        }

    body .dashboard-container {
        min-height: calc(100% - 210px);
    }

    .text-container {
        margin: 0 3%;
    }

    .title-container {
        margin: 0 6% 40px;
    }

    .main-container {
        padding: 55px 20px;
        min-height: calc(100% - 110px);
    }

    div.formContainer, div.formContainerKendo {
        max-width: 470px;
    }

    .user-role-form {
        width: 100%;
    }

    .applications-container {
        height: 100%;
        padding: 10% 5% 0 5%
    }

    .applications-container img {
        width: 108px;
        height: 108px;
    }

    div.mainLogin {
        align-items: center;
    }

    #logOnform {
        padding-left: 0;
    }

    .fogotPasswordForm {
        padding-left: 30px;
        padding-right: 30px;
        justify-content: center;
    }

    #requestDemo {
        margin-left: 25px !important;
    }

    .k-form-buttons {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        float: left;
    }

    #foot {
        position: inherit;
    }

    #grid, .field {
        max-width: 100%;
    }

    .cards-container {
        justify-content: center;
    }

    .applications-container .slick-slide {
        padding: 0 25px;
    }

    .k-grid-applicationUser-column, k-grid-applicationUser-value {
        width: 100px;
    }

    .web-application-selectior-wrapper, .mobile-application-selectior-wrapper {
        max-width: 800px !important;
    }

    .accountMenu svg, .account-admin-menu svg {
        display: none;
    }

    .accountMenu span, .account-admin-menu span {
        margin-left: 0;
    }

    .account-admin-container form {
        width: 100%;
    }

    .account-form-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

        .account-form-container .formContainer {
            max-width: 472px;
        }

    .elementor-location-footer {
        display: none;
    }

    fieldset {
        grid-column-start: 1;
        grid-column-end: span 1;
    }

    body {
        height: calc(100% - 180px); /* Remove header and footer to prevent scroll*/
    }

    .centred-table-container #usersGrid .value-cell {
        width: 145px;
    }

    .centred-table-container #usersGrid .k-header {
        width: 109px;
    }

    fieldset {
        grid-column-start: 1;
        grid-column-end: span 1;
    }

    .centred-table-container .applicationGrid {
        max-width: 720px;
    }

    #pr-box {
        margin-left: 0 !important;
        font-family: Roboto !important;
    }

    .account-admin-menu, #companyUsersGrid, .edit-company-button-group, .account-admin-container form, .mobile-app-settings {
        max-width: 720px;
    }

    .mobile-application-selectior-wrapper {
        margin: 30px auto;
    }
}

@media (max-width: 550px) {
    #foot {
        height: 120px;
    }

    body {
        height: calc(100% - 200px);
    }

    .mobile-applications-container {
        margin-top: 60px;
    }

    .web-application-selectior-wrapper, .mobile-application-selectior-wrapper {
        max-width: 350px !important;
    }

    .applications-container .slick-slide {
        padding: 0 20px;
    }

    .mobile-applications-container .slick-slide {
        padding: 0 8px;
    }

    .userlist-container .value-cell, .centred-table-container .value-cell {
        width: 124px;
    }

    .userlist-container .k-header, .centred-table-container .k-header {
        width: 88px;
    }

    .userlist-container #applicationUserGrid {
        max-width: 440px;
    }

    .text-container {
        margin: 0;
    }

    .title-container {
        margin: 0 0 40px;
    }

    .rightReseved {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .mainLogin .form {
        max-width: 368px;
        width: 100%;
    }

    input.rounded, div.formContainerKendo {
        max-width: 338px;
        width: calc(100% - 24px)
    }

    div.formContainer {
        width: 100% !important;
    }

    div.formBottom, #logOnform p {
        max-width: 368px;
        display: flex;
        align-items: start;
        width: 100%;
    }

    .error, .error_dark, .validation-summary-errors {
        width: 364px;
    }

    .downloadMobileAppsContent #qrAppleDownload, .downloadMobileAppsContent #qrAndroidDownload {
        width: 140px;
        height: 140px;
    }

    .downloadMobileAppsContent #appleDownloadLink img, .downloadMobileAppsContent #androidDownloadLink img {
        width: 140px;
        height: 43px;
    }

    .downloadMobileAppsContent {
        padding: 5px 0;
    }

    body .k-dialog {
        width: 388px !important;
    }

    #updateUserInfo {
        width: 355px;
    }

    .edit-user-button-group {
        flex-direction: column;
        align-items: center;
    }

    .account-admin-menu {
        flex-direction: column-reverse;
    }

    .accountMenu a, .account-admin-menu a {
        margin-right: 10px;
    }

    .accountMenu #newaccount span {
        display: none;
    }

    .accountMenu #newaccount:after {
        content: "User Info";
    }

    div.accountMenu {
        justify-content: space-around;
    }

    .selected-indicator {
        margin-right: 8px;
    }

    .account-admin-menu .menu-links {
        justify-content: space-around;
        margin-top: 20px;
    }

    .edit-company-button-group {
        display: flex;
        justify-content: center;
    }

    .edit-user-button-group .user-buttons {
        margin-bottom: 24px;
    }

    .centred-table-container .applicationGrid {
        max-width: 380px;
    }

    .k-form-field {
        grid-column-start: unset;
        grid-column-end: unset;
    }

    .k-grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0px, 1fr));
    }

    body .dashboard-container {
        min-height: calc(100% - 230px);
    }

    .responsive-container {
        flex-direction: column; 
        align-items: stretch; 
        gap: 15px;
    }

        .responsive-container > div {
            justify-content: center; 
        }

        .responsive-container a,
        .responsive-container button {
            width: 100%; 
        }

}