.card-header {
    background-color: rgb(var(--theme-primary-background-color)) !important;
}

.card-body {
    background-color: white !important;
}

html, body {
    height: 100%;
    font-family: 'Abel', sans-serif;
}

footer {
    position: absolute;
    bottom: 0;
}

.saveFooter {
    border-top: solid;
    border-top-width: 1px;
    border-color: #ddd;
}

.container {
    padding-bottom: 2em;
}

.clickable:hover {
    cursor: copy;
}

#watingResponseText {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 30px;
    margin-left: -45px;
    width: 100px;
    height: 100px;
    background-color: none;
}

#watingResponse {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background-color: none;
}

.lds-default {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-default div {
        position: absolute;
        width: 6px;
        height: 6px;
        background: #01295c;
        border-radius: 50%;
        animation: lds-default 1.2s linear infinite;
    }

        .lds-default div:nth-child(1) {
            animation-delay: 0s;
            top: 37px;
            left: 66px;
        }

        .lds-default div:nth-child(2) {
            animation-delay: -0.1s;
            top: 22px;
            left: 62px;
        }

        .lds-default div:nth-child(3) {
            animation-delay: -0.2s;
            top: 11px;
            left: 52px;
        }

        .lds-default div:nth-child(4) {
            animation-delay: -0.3s;
            top: 7px;
            left: 37px;
        }

        .lds-default div:nth-child(5) {
            animation-delay: -0.4s;
            top: 11px;
            left: 22px;
        }

        .lds-default div:nth-child(6) {
            animation-delay: -0.5s;
            top: 22px;
            left: 11px;
        }

        .lds-default div:nth-child(7) {
            animation-delay: -0.6s;
            top: 37px;
            left: 7px;
        }

        .lds-default div:nth-child(8) {
            animation-delay: -0.7s;
            top: 52px;
            left: 11px;
        }

        .lds-default div:nth-child(9) {
            animation-delay: -0.8s;
            top: 62px;
            left: 22px;
        }

        .lds-default div:nth-child(10) {
            animation-delay: -0.9s;
            top: 66px;
            left: 37px;
        }

        .lds-default div:nth-child(11) {
            animation-delay: -1s;
            top: 62px;
            left: 52px;
        }

        .lds-default div:nth-child(12) {
            animation-delay: -1.1s;
            top: 52px;
            left: 62px;
        }

@keyframes lds-default {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}


/*
.custom-select {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23343a40' d='M2 0L0 4zm0 5L0 2h4z'/></svg>") no-repeat right .75rem center/8px 10px;
    height: calc(1.5em + .5rem + 2px);
    //padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    text-transform: uppercase;
}*/


.borderless td, .borderless th {
    border: none;
}

/*
 #nav2 ul li:hover {
    background-color: #51a2f5 !important;
}*/

.lead {
    cursor: default;
}

.checkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin: 0;
    transition: background-color .4s ease;
}

.checkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.checkbox-menu li.active label {
    background-color: #cbcbff;
    font-weight: bold;
}

.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
    background-color: #f5f5f5;
}

.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: #b8b8ff;
}

h4, h5 {
    font-family: Montserrat, sans-serif;
    cursor: default;
}

:root {
    /* vars given in decimal RGB format to facilitate setting an opacity property */
    --theme-primary-color: 1, 41, 92; /* #1976d2 */
    --theme-primary-color-hex: #01295c;
    --theme-primary-background-color: #ffffff; /* #F4F4F4 */
    --theme-light-text-color: rgb(255, 255, 255); /* #ffffff */
    --theme-light-color: 255, 255, 255; /* #ffffff */
}

.bg-theme-primary {
    background-color: rgb(var(--theme-primary-color));
}

#tabs .nav-tabs .nav-item {
    margin-bottom: 0;
}

#tabs .nav-tabs .nav-link {
    color: rgba(var(--theme-light-color), 0.7);
    border-color: transparent;
    padding: 1em 0.8575em 0.8em 0.8575em;
    text-align: center;
    min-width: 72px;
}

    #tabs .nav-tabs .nav-link.active, #tabs .nav-tabs .nav-link.active:focus, #tabs .nav-tabs .nav-link:focus {
        color: var(--theme-light-text-color);
        border-bottom-width: 2px;
        background-color: transparent;
    }

    #tabs .nav-tabs .nav-link:hover {
        color: var(--theme-light-text-color);
        border-color: transparent;
        background-color: rgba(var(--theme-light-color), 0.08);
    }

    #tabs .nav-tabs .nav-link.active:hover {
        border-color: rgb(var(--theme-light-color));
        background-color: transparent;
    }

#tabs .nav-tabs .nav-link {
    border: 0
}

#nav2 .nav-tabs .nav-item.show .nav-link, #nav2 .nav-tabs .nav-link.active {
    border-bottom: .214rem solid transparent;
}

.nav-link-menu {
    color: white !important;
}

.tabs,
.scrtabs-tab-container,
.scrtabs-tabs-fixed-container,
.scrtabs-tab-scroll-arrow {
    height: 48.016px;
}
/* tabs component jQuery scroller */
.scrtabs-tab-scroll-arrow {
    color: var(--theme-light-text-color);
    padding: 0;
    border: none;
    line-height: 2;
}

    .scrtabs-tab-scroll-arrow:hover {
        background-color: transparent;
    }

    .scrtabs-tab-scroll-arrow button {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.scrtabs-disable i {
    color: transparent;
}

.scrtabs-tab-scroll-arrow-left {
    text-align: right;
    width: 60px;
    padding-right: 6px;
}

.scrtabs-tab-scroll-arrow-right {
    width: 48px;
    padding-left: 6px;
}

.scrtabs-arrow-btn {
    background-color: transparent;
    height: 36px;
    width: 36px;
    padding: 0;
    color: rgb(var(--theme-light-color));
    font-size: 24px;
    line-height: 12px;
    border: 0;
}

.md-elevation-4dp {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

#freeTrial {
    color: green;
}

    #freeTrial:hover {
        color: white;
    }

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 4px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1031; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbar.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

label.error {
    color: #dc3545 !important;
}

.page-item.active .page-link {
    z-index: 0;
}

.list-group {
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: .009375em;
    text-transform: inherit;
    line-height: 1.5rem;
    list-style-type: none;
    color: rgba(0,0,0,.87);
}

.list-group-item {
    width: 100%;
    height: auto;
    cursor: pointer;
    border: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .75rem 1.25rem 0rem 1.25rem;
}

    .list-group-item a {
        -webkit-user-select: none; /* Chrome/Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+ */
    }

.second-item-list-group {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: .0178571429em;
    text-decoration: inherit;
    text-transform: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    margin-top: 0;
    line-height: normal;
    color: rgba(0,0,0,.54);
    display: block;
}

.list-group-item:last-child {
    padding-bottom: 10px;
}

.list-item-right {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: .75rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: .0333333333em;
    text-decoration: inherit;
    text-transform: inherit;
    margin-left: auto;
    margin-right: 0;
    color: rgba(0, 0, 0, 0.38);
    float: right;
}

.material-icons {
    color: rgba(0, 0, 0, 0.38);
}

.modal-header-primary {
    background-color: var(--theme-primary-color-hex) !important;
    color: white !important;
}

.modal-header-primary button[data-bs-dismiss="modal"] {
    background: none !important;
    color: white !important;
    opacity: .5;
    text-shadow: none !important;
    border: none !important;
    font-size: 1.6rem;
    margin-left: auto;
    font-weight: 700;
    line-height: 1.3rem;
}

.modal-header-primary button[data-bs-dismiss="modal"]:hover {
    opacity: .8;
}

.dropdown-menu {
    position: absolute;
    z-index: 1029 !important;
    opacity: 1;
}

.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

#tabs .nav-tabs .nav-item.show .nav-link, #tabs .nav-tabs .nav-link.active {
    background-color: rgb(238,244,247);
    color: #fff;
    background-color: rgb(var(--theme-primary-color));
}

.nav nav-tabs nav-justified justify-content-center pt-0 nav-item {
    margin-top: 1px;
    margin-bottom: 1px;
}

.add-button i {
    color: #007bff;
}

.add-button:hover i {
    color: white;
}

.selectize-dropdown-content {
    cursor: pointer;
}

.clockon-menu-item {
    position: relative;
    top: 5px;
    left: -5px;
    padding-bottom: 0.7rem;
}

.swal-button--confirm {
    background-color: #007bff;
}

    .swal-button--confirm:hover {
        background-color: #0069d9 !important;
    }

.clockon-save {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
}

.clockon-cancel {
    color: #555;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
}

.modal-dialog {
    overflow-y: initial !important
}

.modal-body {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.modal-open .modal {
    overflow-x: inherit;
    overflow-y: inherit;
}


.nav-item:after {
    display: block;
    content: '';
    /*border-bottom: 2px solid #cccccc;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;*/
}

.nav-item:hover:after {
    /*transform: scaleX(1);*/
}



.btn {
    margin: 0px 10px;
    margin-bottom: 20px;
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: hidden !important;
}

html.swal2-shown,
body.swal2-shown {
    overflow-y: hidden !important;
}

.dropdown-menu {
    font-family: Roboto, sans-serif;
    padding: 0px !important;
}

.nav-link {
    border-radius: 0px !important;
}

.dropdown-menu .dropdown-divider {
    margin: 0px;
}

.dropdown-menu > .nav-link:hover {
    opacity: 0.5 !important;
}

/*.dropdown-menu > .nav-link:hover, .nav-link:focus {
    opacity: 0.5 !important;
}*/


.select-menu-button::after {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: -2px;
    content: "";
    border: 4px solid transparent;
    border-top-color: transparent;
    border-top-color: currentcolor;
}

.select-menu-header {
    padding: 8px 10px;
    line-height: 16px;
    background: #f6f8fa;
    border-bottom: 1px solid #e1e4e8;
}

.main-page {
    background-color: rgb(var(--theme-primary-background-color));
    padding-bottom: 2.5rem !important;
}

#footer {
    background: transparent;
}

#copyright {
    cursor: default;
}

.dropdown-toggle::after {
    display: none;
}

.dropleft .dropdown-toggle::before {
    display: none;
}

.github-button {
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
    border: 1px solid rgba(27,31,35,.2);
    margin: 10px 0px 10px 0px;
}


.validation-summary-valid {
    display: none;
}

.field-validation-valid {
    display: none;
}

/*th {
    background-color: rgb(var(--theme-primary-color));
    color: white;
}

table.dataTable tbody tr.selected {
    color: white;
    background-color: cornflowerblue;
}

    table.dataTable tbody tr.selected td.select-checkbox {
        color: black;
    }

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: deepskyblue;
}

.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
    background-color: grey;
}*/


.ui-timepicker-standard {
    font-size: 1em;
}

/* Not sure. rulesets edit. */
.btn[disabled] {
    background-color: #808080;
    border-color: #808080;
}

/* Frames - the remove button placement. */
div.framepanel {
    position: relative;
    /*border: 2px solid cornflowerblue;*/
    /*margin-top: 20px;*/
    /*padding: 20px 10px 10px;*/
}

    div.framepanel label.framepanel-label {
        /*color: white;*/
        line-height: 20px;
        padding: 0 5px;
        position: absolute;
        /*background-color: cornflowerblue;*/
        /* Adjust these values to posiytion the title or label */
        top: 0px;
        left: 0px;
    }

    div.framepanel button.framepanel-button {
        z-index: 1000;
        /*color: white;*/
        /*line-height: 30px;
                padding: 0 0px;*/
        position: absolute;
        /*margin-right: 0px !important;*/
        /*background-color: cornflowerblue;*/
        /* Adjust these values to posiytion the title or label */
        top: 0px;
        right: 0px;
    }

        div.framepanel button.framepanel-button:hover {
            background-color: transparent;
            color: lightgray;
        }

.pageBanner {
    height: 3em;
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: #ddd;
    /*background-color: rgb(255, 255, 255) !important; /*av test */ */
}

.pageHeader {
    font-family: 'Montserrat', 'sans-serif';
    font-size: larger;
    padding-top: 0.6em;
    /*color: rgb(var(--theme-primary-color)) !important;*/
    font-weight: bold;
}

    .pageHeader > a {
        font-family: inherit;
        font-size: inherit;
        padding-top: inherit;
        color: inherit;
        font-weight: inherit;
    }

.pageHeaderItem {
    font-family: 'Montserrat', 'sans-serif';
    font-size: larger;
    color: rgb(var(--theme-primary-color)) !important;
    font-weight: bold;
}

.crumbSpace {
    color: rgb(85, 85, 85);
    /*font-size: small;*/
    padding-left: .5em;
    padding-right: .5em;
}

.crumbItem {
    color: rgb(85, 85, 85);
    /*font-size: small;*/
    /*font-size: large;*/
}

.pageTitle {
    margin-bottom: 1em;
}

.control-label {
    font-weight: 600 !important;
}

    /* font for disabled date edits. */
    .control-label .dx-texteditor-input {
        font-weight: 600 !important;
        background-color: white;
    }

.form-check-label {
    font-weight: 600 !important;
}

.saveButton {
    margin-right: 10px;
}


.saveDivButtonGroup {
    float: right;
}

.color-white {
    color: white !important;
}


/* Removing the hyperlink underline. */
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.dx-popup-content.dx-dropdownbutton-content {
    padding: 0 !important;
}

.dx-popup-content.dx-dropdownbutton-content {
    padding: 0 !important;
}

.action-delete {
    background-color: #d9534f !important;
    color: white !important;
}

.dx-htmleditor img {
    max-width: 100% !important;
}