:root {
    /*--primary-bgcolor: #167D86;
    --primary-hover-color: #5DB1B9;
    --secondary-bgcolor: var(--theme-secondary);
    --secondary-color: #212529;
    --secondary-hover-color: #878C96;
    --menu-bgcolor: #005F6A;
    --box-header-color: #fff;
    --box-header-bgcolor: #09687E;
    --box-bgcolor: #fdfdfc;
    --font-color: #292b2c;
    --font-color-light: #fff;
    --font-color-strong: black;
    --border-color: #E5E5E5;
    --bgcolor: #fff;
    --display-font-size: 1em;
    --control-background-color: #fdfdfc;
    --container-background-color: #f4f8f8;
    --container-border-color: #E5E5E5;
    --container-shadow-color: #6c757d*/
}

html {
    background-color: var(--html-bgcolor);
    margin: 0;
    padding: 0;
    height: 100%;
}

@media only screen and (max-width: 760px) {
    html {
        overflow-x: hidden !important;
    }
}

body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #fff;
    font-size: 13px;
    color: #585A5B; /*#15181d;*/
    margin: 0;
    padding: 0;
    height: 100%;
    line-height: 1.42857143;
}

.main-container {
    padding-top: 50px !important;
    padding-bottom: 62px !important;
}

/* Customize scrollbar */
@media only screen and (max-width: 760px) {
    /* Hide normal scrollbar for mobile and tablets */
    ::-webkit-scrollbar {
        display: none;
        -webkit-overflow-scrolling: touch;
    }

    .body {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    }
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-bgcolor);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-color);
    }

/* SVG does not work as a click area in most browsers. What you do is to put the following on your svg to make it "transparent for clicks". */
svg {
    pointer-events: none;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.word-break {
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
}

.font-uppercase {
    text-transform: uppercase;
}

.font-extra-bold {
    font-weight: 700 !important;
}

/* Label styles */
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

/* Form styles */
.form-select, .form-control {
    /*background-color: var(--html-bgcolor);
    color: var(--text-color);*/
}

.form-select, .form-control, .btn, .gridtable-wrapper .pagination-btn {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 14px;
    height: 22px;
}

@media screen and (max-width: 375px) {
    .form-select, .form-control, .btn, .gridtable-wrapper .pagination-btn {
        margin: 0 2px !important;
    }
}

@media screen and (max-width: 280px) {
    .form-select, .form-control, .btn, .gridtable-wrapper .pagination-btn {
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: 12px !important;
        margin: 0 2px !important;
    }
}

.form-select {
    background-position: right 0.42rem center;
}