html {
    font-size: 14px;
}

body {
/*    padding-top: 50px;*/
    padding-bottom: 20px;
    
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}


/* QR code generator */
#qrCode {
    margin: 15px;
}

.form-group.profile {
    margin-top: 28px;
}


.profile-picture {
    border-radius: 25%;
    display:block;
    width:125px;
}



/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}


.w-100 { width: 100%; }
.h-100 { height: 100%; }
.bgc-grey { background-color: #f1f1f1; }
.bgc-green { background-color: #2A794D }
.navbar-height { height: 2.5rem; }

.pl-4 { padding-left: 1.5rem !important; }

.padding-0 { padding: 0; }
.padding-top-1 { padding: 1rem; }
.padding-x-1 { padding: 0rem 1rem; }
.padding-x-3 { padding: 0rem 3rem; }
.padding-y-img { padding: .3625rem 0rem; }
.padding-y-8px { padding: 8px 0 !important; }

.margin-y-0 { margin-top: 0!important; margin-bottom:0 !important;}

.font-white { color: #FFFFFF; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between }
.flex-around{ display: flex; justify-content: space-around }


.navbar-button { color: #FFFFFF !important; display: flex !important; align-items: center !important; height: 2.5rem; }
.navbar-button:hover { background-color: #64bf8d !important; }
.navbar-button:focus { background-color: #64bf8d !important; }

.hide-button-features { background-color: inherit; border: 0px; }

.relative { position: relative; }
.absolute-left-1 { position:absolute; left: 1rem; }
.absolute-right-1 { position:absolute; right: 1rem; }

.navbar-li-override {
    float: left !important;
}

@media (max-width: 900px) {
    .no-mobile {
        display: none !important;
    }
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.navbar {
    position: relative;
    justify-content: space-between;
    padding: .5rem 1rem;
}

.navbar-toggler {
    color: rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.1);
    line-height: 1;
}

.icon-smallification {
    font-size: 12px;
    width: 2rem;
    height: 2rem;
    padding: 4px 4px 4px 4px !important;
    background-color: rgba(1, 1, 1, 0.1);
    border: 1px solid transparent;
    border-radius: .25rem;
}

.navbar-brand {
    color: #fff;
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.margin-x-1 { margin-right: 1rem; margin-left: 1rem; }
.margin-0 { margin: 0;}

.logo-nav-menu {
    background-image: url(/images/logo-white.png);
    width: 7rem;
    background-size: cover;
}

.d-flex-nav {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}


.login-backdrop {
    display: flex;
    height: 100vh;
    position: fixed;
    width: 100vw;
    left: 0;
    top: 0;
    background: radial-gradient(#8a8a98, #262631) rgba(34, 34, 40, .94);
}


.login-card {
    width: 24rem;
    padding: 1rem;
    border: 1px solid;
    border-radius: 5px;
    margin: auto;
    background: white;
}


.login-branding {
    display: flex;
    justify-content: center;
}

.login-branding-img {
    max-height: 80px;
    max-width: 80%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media(max-width: 1100px) {
    .login-card {
        width: 100vw;
    }
}

.login-divider {
    margin: 24px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
}

.login-divider > span {
    position: relative;
    display: block;
    text-align: center;
    line-height: 1.5;
}

.login-divider > span:before {
    left: 0;
    content: '';
    position: absolute;
    width: calc(50% - 24px);
    height: 1px;
    background-color: #b3bac7;
    top: 8px;
}

.login-divider > span:after {
    right: 0;
    content: '';
    position: absolute;
    width: calc(50% - 24px);
    height: 1px;
    background-color: #b3bac7;
    top: 8px;
}

.image-sso-any {
    width: 100%;
    height: 85%;
    background-repeat: no-repeat;
    background-position: center;
}

.image-Microsoft {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjYgKDY3NDkxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY25fbWljcm9zb2Z0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Imljbl9taWNyb3NvZnQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJtcy1zeW1ib2xsb2NrdXBfbXNzeW1ib2xfMTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRjI1MDIyIiB4PSIwIiB5PSIwIiB3aWR0aD0iOS40NzM2ODQyMSIgaGVpZ2h0PSI5LjQ3MzY4NDIxIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiMwMEE0RUYiIHg9IjAiIHk9IjEwLjUyNjMxNTgiIHdpZHRoPSI5LjQ3MzY4NDIxIiBoZWlnaHQ9IjkuNDczNjg0MjEiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iIzdGQkEwMCIgeD0iMTAuNTI2MzE1OCIgeT0iMCIgd2lkdGg9IjkuNDczNjg0MjEiIGhlaWdodD0iOS40NzM2ODQyMSI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZCOTAwIiB4PSIxMC41MjYzMTU4IiB5PSIxMC41MjYzMTU4IiB3aWR0aD0iOS40NzM2ODQyMSIgaGVpZ2h0PSI5LjQ3MzY4NDIxIj48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=")
}

.image-Google {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjYgKDY3NDkxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY25fZ29vZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Imljbl9nb29nbGUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsb2dvX2dvb2dsZWdfNDhkcCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOS42LDEwLjIyNzI3MjcgQzE5LjYsOS41MTgxODE4MiAxOS41MzYzNjM2LDguODM2MzYzNjQgMTkuNDE4MTgxOCw4LjE4MTgxODE4IEwxMCw4LjE4MTgxODE4IEwxMCwxMi4wNSBMMTUuMzgxODE4MiwxMi4wNSBDMTUuMTUsMTMuMyAxNC40NDU0NTQ1LDE0LjM1OTA5MDkgMTMuMzg2MzYzNiwxNS4wNjgxODE4IEwxMy4zODYzNjM2LDE3LjU3NzI3MjcgTDE2LjYxODE4MTgsMTcuNTc3MjcyNyBDMTguNTA5MDkwOSwxNS44MzYzNjM2IDE5LjYsMTMuMjcyNzI3MyAxOS42LDEwLjIyNzI3MjcgTDE5LjYsMTAuMjI3MjcyNyBaIiBpZD0iU2hhcGUiIGZpbGw9IiM0Mjg1RjQiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTEwLDIwIEMxMi43LDIwIDE0Ljk2MzYzNjQsMTkuMTA0NTQ1NSAxNi42MTgxODE4LDE3LjU3NzI3MjcgTDEzLjM4NjM2MzYsMTUuMDY4MTgxOCBDMTIuNDkwOTA5MSwxNS42NjgxODE4IDExLjM0NTQ1NDUsMTYuMDIyNzI3MyAxMCwxNi4wMjI3MjczIEM3LjM5NTQ1NDU1LDE2LjAyMjcyNzMgNS4xOTA5MDkwOSwxNC4yNjM2MzY0IDQuNDA0NTQ1NDUsMTEuOSBMMS4wNjM2MzYzNiwxMS45IEwxLjA2MzYzNjM2LDE0LjQ5MDkwOTEgQzIuNzA5MDkwOTEsMTcuNzU5MDkwOSA2LjA5MDkwOTA5LDIwIDEwLDIwIEwxMCwyMCBaIiBpZD0iU2hhcGUiIGZpbGw9IiMzNEE4NTMiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTQuNDA0NTQ1NDUsMTEuOSBDNC4yMDQ1NDU0NSwxMS4zIDQuMDkwOTA5MDksMTAuNjU5MDkwOSA0LjA5MDkwOTA5LDEwIEM0LjA5MDkwOTA5LDkuMzQwOTA5MDkgNC4yMDQ1NDU0NSw4LjcgNC40MDQ1NDU0NSw4LjEgTDQuNDA0NTQ1NDUsNS41MDkwOTA5MSBMMS4wNjM2MzYzNiw1LjUwOTA5MDkxIEMwLjM4NjM2MzYzNiw2Ljg1OTA5MDkxIDAsOC4zODYzNjM2NCAwLDEwIEMwLDExLjYxMzYzNjQgMC4zODYzNjM2MzYsMTMuMTQwOTA5MSAxLjA2MzYzNjM2LDE0LjQ5MDkwOTEgTDQuNDA0NTQ1NDUsMTEuOSBMNC40MDQ1NDU0NSwxMS45IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0ZCQkMwNSI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMTAsMy45NzcyNzI3MyBDMTEuNDY4MTgxOCwzLjk3NzI3MjczIDEyLjc4NjM2MzYsNC40ODE4MTgxOCAxMy44MjI3MjczLDUuNDcyNzI3MjcgTDE2LjY5MDkwOTEsMi42MDQ1NDU0NSBDMTQuOTU5MDkwOSwwLjk5MDkwOTA5MSAxMi42OTU0NTQ1LDAgMTAsMCBDNi4wOTA5MDkwOSwwIDIuNzA5MDkwOTEsMi4yNDA5MDkwOSAxLjA2MzYzNjM2LDUuNTA5MDkwOTEgTDQuNDA0NTQ1NDUsOC4xIEM1LjE5MDkwOTA5LDUuNzM2MzYzNjQgNy4zOTU0NTQ1NSwzLjk3NzI3MjczIDEwLDMuOTc3MjcyNzMgTDEwLDMuOTc3MjcyNzMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRUE0MzM1Ij48L3BhdGg+CiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDAgMjAgMCAyMCAyMCAwIDIwIj48L3BvbHlnb24+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");
}

.image-Xero {
    background-image: url("/images/xero-software-logo.svg");
    width: 60% !important;
    height: 60% !important;
    margin: 0.4rem auto;
}

.image-Visma {
    background-image: url("/images/visma.svg");
    width: 60% !important;
    height: 60% !important;
    margin: 0.4rem auto;
    background-size: 50% auto; /* Adjust this value to scale the Visma logo */
    background-repeat: no-repeat;
    background-position: center;
}

.sso-button {
    border: none;
    padding: 0px;
    margin: 2px;
    width: 100%;
    height: 3.5rem;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 30% auto;
    transition: background-color 0.5s ease;
}

.sso-button-clamp {
    width: clamp(50px, 100%, 300px);
}

.sso-button:hover {
    background-color: rgb(209, 209, 209);
}

.sso-button-text {
    text-align: left;
    vertical-align: middle;
    line-height: 3.5rem;
}



.confirm-email-button {
    height: 3rem;
    border-radius: 50px;
    background-color: #2A794D;
    color: white;
    font-weight: bold;
    padding: 15px 30px;
    line-height: 100%;
    text-align: center;
    margin-bottom: 1rem;
}

.confirm-email-button-sm {
    border-radius: 50px;
    background-color: #2A794D;
    color: white;
    font-weight: bold;
    line-height: 100%;
    text-align: center;
    margin-bottom: 1rem;
    height: 2rem;
    padding: 0.5rem 1rem;
}

.confirm-email-title {
    font-weight: bold;
    margin-bottom: 2rem;
}


.backdrop-height {
    display: flex;
    height: 90vh;
}

.window-centered {
    margin: auto;
    width: fit-content;
    padding: 3rem;
    box-shadow: #f1f1f1 5px 5px 6px 6px;
    text-align: center;
}


/* /signinxero */

.welcome-div {
    margin: 2rem;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.welcome-image {
    width: 5rem;
    height: 5rem;
}

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

.italic {
    font-style: italic;
}

.margin-bottom-1 {
    margin-bottom: 1rem;
}


.margin-bottom-2 {
    margin-bottom: 2rem;
}


.nav-pills li.active a {
    background-color: #bdbdbd !important;
}

.nav-pills li.active a {
    color: #000 !important;
}

.float-right {
    float: right;
}



.xero-button {
    background-color: #0C7DA1;
    border-radius: 4px;
    color: white;
    font-size: 1.2rem;
}


.xero-container {
    margin-bottom: 5rem;
    margin-top: 5rem;
}

.xero-container > * {
    width: 400px;
    margin: auto;
    margin-top: 2rem;
    padding-left: 50px;
}


.xero-container > .welcome-div {
    padding-left: 0!important;
}


#qrCode > img {
    height: 23rem;
    margin: auto;
}