/**************************************
***  CSS Customization of Remark template ***
***   v0.1
***************************************/

:root {
  --hopi-main-color: #00aeef;
  --hopi-main-color-dark: #0189bb;
  --hopi-grey-color: #AAAAAA;
  --hopi-light-green-color: #B3D334;
  --hopi-green-color: #6EC400;
  --hopi-orange-color: #FFD118;
  --hopi-red-color: #E10000;
  --hopi-light-grey-color: #F2F2F2;
}

/*
* Page setup for job posting detail
*/

.page-jobad-detail {
    margin-left: 0 !important;
}
body.page-jobad-detail {
    background-color: #f2f2f2;
    padding-top: 0 !important;
    width: 70% !important;
    margin: auto !important;
}

#cookieConsent {
    z-index: 10000;
}

.modal {
    z-index:3000;
}
.modal-open .select2-container {
    z-index: 850;
}
.navbar-fixed-top, .navbar-fixed-bottom {
    z-index: 1040;
}
.site-menubar {
    z-index: 1040;
}

.mh-35rem { max-height: 35rem; }
.mw-35rem { max-width: 35rem; }

/* UX items */

#assistant-toggle {
    padding: 0 30px !important;
    margin: 45px 0 15px 0;
    color: var(--hopi-light-grey-color);
}

/*
* Main layout
*/

.site-menubar-body {
    height: 100% !important;
}

.font-color-main {
    color: var(--hopi-main-color);
}
.font-color-grey {
    color: var(--hopi-grey-color) !important;
}
.font-color-body {
    color: var(--body-color) !important;
}
.bgcolor-primary, .bg-hopi-primary {
    background-color: var(--hopi-main-color);
}
.bg-hopi-highlight {
    background-color: var(--hopi-orange-color);
}
.bg-hopi-secondary, .bg-hopi-green {
    background-color: var(--hopi-green-color);
    color:#FFFFFF;
}
.bg-hopi-light-green {
    background-color: var(--hopi-light-green-color);
}
.bg-hopi-grey {
    background-color: var(--hopi-light-grey-color) !important;
}

.site-navbar {
    background-color: var(--hopi-main-color) !important;
}

.site-menubar-unfold .site-navbar .container-full, .site-navbar .navbar-container.container-full {
  margin-left: 0;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover {
    border-bottom-color: var(--hopi-main-color); /* #6ec400; green */
    background-color: var(--hopi-main-color);
}

.nav-tabs-line .nav-link.active, .nav-tabs-line .nav-link.active:hover {
    color: var(--hopi-main-color); /* #049ad2; */
    border-bottom: 4px solid var(--hopi-main-color); /* #049ad2; */
    background-color: transparent;
    font-weight: 500;
}

.nav-tabs-solid .nav-link.active, .nav-tabs-solid .nav-link.active:hover {
    border-bottom: transparent;
}

.nav-tabs .nav-link-back {
    color: var(--hopi-grey-color);
}

.nav-tabs .nav-link-highlight {
    /* ???? background-color: #e9e9e9;*/
}
.nav-tabs .nav-link-highlight > .icon {
    color: var(--hopi-main-color);
}

.nav-tabs .nav-link-highlight:hover {
    background-color: #e9e9e9;
}
.nav-item {
    font-weight: 500;
    font-size: larger;
}
.nav-item > .nav-tabs, .nav-item > .nav-link {
    color: #333333;
}

.navbar-brand-company {
    padding: 3px !important;
    padding-left: 15px !important;
}
.navbar-brand-company-logo {
    max-width:80px;
    max-height:60px;
}

a, a.active, a:hover, a.active:hover {
    color: var(--hopi-main-color); /* #049ad2; */ /* dark blue #048abb */
    text-decoration: none !important;
}
a.color-inherit, a.color-inherit.active, a.color-inherit:hover, a.color-inherit.active:hover {
    color: inherit !important;
}
div.a-white a, div.a-white a.active, div.a-white a:hover, div.a-white a.active:hover {
    color: #EEEEEE !important;
}
a.dropdown-item:active {
    background-color: var(--hopi-main-color);
}

.alert-success a, .alert-danger a, .alert-success a:hover, .alert-danger a:hover {
    color: #ffffff !important;
}
.nounderline { text-decoration: none !important; }

.site-menubar {
    background-color: #444;
    color: #999;
}

.site-menu > .site-menu-item, .site-menu-item a, .site-menu > .site-menu-item > a {
    color: var(--hopi-light-grey-color);
}
.site-menu > .site-menu-item {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.site-menu > .site-menu-item.open {
  background: #ccc;
}

.site-menu > .site-menu-item.open > a {
  color: #444;
}

.site-menu > .site-menu-item.hover > a, .site-menu > .site-menu-item:hover > a {
  color: #444;
  background-color: #ccc;
}
.site-menu > .site-menu-item.hover, .site-menu > .site-menu-item:hover {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.site-menu > .site-menu-item.active {
  background: #ccc;
  border-top: 1px solid rgba(0, 0, 0, .04);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
}

.site-menu > .site-menu-item.active > a {
  color: #444;
}

.site-menu .site-menu-sub .site-menu-item, .site-menu .site-menu-sub .site-menu-item > a {
  color: #666;
}

.site-menu .site-menu-sub .site-menu-item.open {
  background: #ccc;
}

.site-menu .site-menu-sub .site-menu-item.open > a {
  color: #444;
}

.site-menu .site-menu-sub .site-menu-item.hover > a, .site-menu .site-menu-sub .site-menu-item:hover > a {
  background-color: #bbb;
}

.site-menu .site-menu-sub .site-menu-item.active {
  background: #bbb;
}

.site-menu .site-menu-sub .site-menu-item.active > a {
  color: #444;
}
.site-menu .site-menu-sub {
    background-color: #ccc;
}

.page {
    background-color: var(--hopi-light-grey-color);
}
.page-white {
    background-color: #FFFFFF;
}
.page-header {
    padding-bottom: 15px;
}
.site-menubar-unfold .page-full, .page.page-full {
    margin-left: 0;
}
.page-for-print {
    min-height: 0;
    background-color: #ffffff;
}

.site-menubar-unfold .site-footer-full, .site-footer.site-footer-full {
  margin-left: 0;
}
.site-footer {
    background-color: #35363A;
    color: #8f8f8f;
}
.site-footer-for-print {
    padding: 1rem;
    margin: 1rem 30px; /* left/right aligned with page padding */
    border-top: 1px solid #dddddd;
    text-align: center;
}

/* page welcome */
.vh-center {
    position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 2rem;
}
.page-welcome-message {
    margin-left: 0;
    height: 100%;
    background-color: var(--hopi-main-color);
    color: #FFFFFF;
}

.list-inline-item:not(:last-child) {
    margin-right: 1em;
}

.card-shadow
{
    -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, .3);
            box-shadow: 0 2px 3px 1px rgba(0, 0, 0, .3);
}
.card .card-features {
  padding: 0 18px;
  margin: 0;
}

.card ul.card-features > li {
  display: block;
  padding: 15px;
  list-style: none;
  border-top: 1px dashed #e0e0e0;
}

.card ul.card-features > li:first-child {
  border-top: none;
}
.card .card-block-header {
    border-radius: .215rem .215rem 0 0;
}
.card .card-block-footer {
    border-radius: 0 0 .215rem .215rem;
}

/* color override */
.irs-single {
    background-color: var(--hopi-main-color) !important;
}
.irs-bar {
    border: 1px solid var(--hopi-main-color) !important;
    border-left: 0;
    background: linear-gradient(to top, var(--hopi-main-color) 0%, var(--hopi-main-color) 100%);
}
.irs-bar-edge {
    border: 1px solid var(--hopi-main-color) !important;
    border-right: 0;
    background: linear-gradient(to top, var(--hopi-main-color) 0%, var(--hopi-main-color) 100%);
}
/* buttons & badges colors */
.badge-primary {
    background-color: var(--hopi-main-color) !important;
}
.btn-primary {
    background-color: var(--hopi-main-color) !important;
    border-color: var(--hopi-main-color) !important;
}
.btn-primary-dark {
    background-color: var(--hopi-main-color-dark) !important;
    border-color: var(--hopi-main-color-dark) !important;
}
button.disabled, a.disabled {
    cursor: not-allowed !important;
    pointer-events: all !important;
    color: var(--hopi-grey-color) !important;
}

/*.pricing-list {
    -webkit-box-shadow: 0 2px 7px 1px rgba(0, 0, 0, .3);
            box-shadow: 0 2px 7px 1px rgba(0, 0, 0, .3);
}*/

/****************************/
/***  FORMS  ***/
/****************************/

/* for IDs */
#job-search-filters .checkbox-lg {
    padding-left: 5px !important;
}

/* Classes */

.form-material .form-control:not(.empty)~.floating-label,
.form-material .form-control:-webkit-autofill~.floating-label,
.form-material .form-control:focus~.floating-label {
    top: -1.2rem !important;
}
.form-material .form-control, .form-material .form-control:focus, .form-material .form-control.focus {
  background-image: linear-gradient(var(--hopi-main-color), var(--hopi-main-color)), linear-gradient(#e0e0e0, #e0e0e0);
}

form ul.errorlist {
    list-style-type: none;
    padding:0;
    margin: 0;
    color: red;
}
.select2-container--default .select2-selection {
    border: 1px solid #f9f9f9 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 0  !important;
}

#help-container {
    margin-top: 0;
    right: 0;
    left: auto;
    height:100vh;
    margin-bottom:70px;
    padding-bottom:70px;
    overflow-x:auto;
    width:400px;
}

#main-input-search {
    border: 0 !important;
}
/* pre-style select element like JS result */
select.boots {
    background-color: #f9f9f9;
    text-align: left;
    padding: 5px 7px;
    line-height: 2em;
    font-weight: normal;
    height:36.0156px !important;
    border-top: 1px solid #f9f9f9;
    border-left: 1px solid #f9f9f9;
    border-right: 1px solid #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    margin-left: 0;
    margin-right: 2em; /* to create space for arrow outside of options */
    margin-bottom: 0;
    margin-top: 0;
}

/*.dropdown-menu.open { max-height: none !important; }*/
input.select2-search__field {
    /* TODO: change colors to vars */
    border: 0 !important;
    border-bottom: 2px solid #dddddd !important;
    border-radius: 0 !important;
}
input.select2-search__field:focus {
    border-bottom: 2px solid var(--hopi-main-color) !important;  /* TODO: change colors to vars */
}
.form-material .form-control:focus ~ .floating-label, .form-material .form-control.focus ~ .floating-label {
    color: var(--hopi-main-color);
}
span.select2-container--default .select2-selection {
    background-color: #f9f9f9 !important;
    text-align: left;
    padding: 5px 7px !important;
    line-height: 2em !important;
    font-weight: normal !important;
    border-top: 0;
    border-bottom: 0;
}
.select2-container--default .select2-dropdown {
    border-color: var(--hopi-main-color) !important;
    border-radius: 0 !important;
}
.select2-container--open .select2-selection {
    border-left: 1px solid var(--hopi-main-color) !important;
    border-right: 1px solid var(--hopi-main-color) !important
}
.select2-container--below.select2-container--open .select2-selection {
    border-top: 1px solid var(--hopi-main-color) !important;
}
.select2-container--above.select2-container--open .select2-selection {
    border-bottom: 1px solid var(--hopi-main-color) !important;
}

.resize-vertical { resize: vertical !important; }
.resize-both { resize: both !important; }

input, input.text, select, textarea {
    background-color: #f9f9f9 !important;
    padding:5px 7px !important;
}
.input-search .input-search-icon + .form-control {
    padding-left: 3rem !important;
}
#navbar-people-search .tt-menu {
   width: max-content; /* show results of tokenfield in 1 line */
 }

.checkbox-primary input[type="checkbox"]:checked + label::before, .checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.radio-primary input[type="radio"]:checked + label::before, .radio-primary input[type="radio"]:checked + input[type="hidden"] + label::before {
    background-color: var(--hopi-main-color) !important;
    border-color: var(--hopi-main-color) !important;
}

/* Token field */
.form-material .tokenfield { background-color: #f9f9f9 !important; }
.form-material .token-input.tt-hint { width: 30px !important; }
.form-material .tokenfield .twitter-typeahead {width: auto !important }
.form-material .tokenfield .token { background-color: #ffffff; border-color: #cccccc; }
.form-material .token-input.tt-input { display:flex !important; }

#navbar-people-search .tokenfield.form-control {
    padding-top: 0 !important;
}
#navbar-people-search .tokenfield .token-input {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    height: 2.4rem !important;
}

/* Chrome autofill background-color */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f9f9f9 inset !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.form-material.form-group .form-control-label {
    font-weight: normal;
}

input.knob-chart {
    background-color: inherit !important;
}

form .helptext, .helptext {
    font-size: 85%;
}
form .helptext ul {
    padding-left: 2em;
    margin-left: 0;
    list-style-type: circle;
}
form .helptext li {
    text-align: left;
}


/*input, input.text, select, INPUT.checkbox, INPUT.radio, textarea, button_1, .no_edit_text_field
{
    font-size:100%;
    background-color: #f1f1f1;
    padding:5px 7px;
    border: 1px solid #b3b3b3;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin:2px;
}
INPUT.outside_ct, TEXTAREA.outside_ct, SELECT.outside_ct  {
    background-color:#fefefe !important;
    margin-bottom:3px;
}
INPUT.public_field, TEXTAREA.public_field {
    background-color:#80d4f5 !important;
    border: 1px solid #048ABB !important;
}*/

/****************************/
/***  GRID & TABLES & others ***/
/****************************/
.flex-grow {
    flex-grow:1 !important;
}
.white-space-normal {
    white-space: normal !important;
}
.v-align {
    display: flex;
    align-items: center;
}
.row.row-no-margin {
    margin-right: 0;
    margin-left: 0;
}
.row.row-bordered > div {
    border-bottom: 1px solid #ddd;
    padding:10px;
}
.row.row-bordered.row-head > div {
    font-weight: 500;
    padding-top:0;
}
.row-no-margin.row-body:hover {
    background-color: #eee;
}
.row-bordered > div.col-no-border {
    border-bottom: 0;
}

/***** list field names (first) with values (other) of single object *****/
.row-detail-list .row > div {
    padding: 0.5em;
}
.row-detail-list .row > div:first-child {
    text-align: right;
    color: var(--hopi-grey-color);
}

@media (max-width: 767px) {

    /* Change navbar */
    #site-navbar-collapse {
        background-color: var(--hopi-main-color) !important;
        border-top: 0 !important;
    }
    #toggleChat i.icon { color: #FFFFFF !important; }
    .navbar-brand-logo { height: 1.25rem; }

    /* Display navbar fluid
       also on small devices as not many icons exist */
    .navbar > .containers,
    .navbar > .container-fluid,
    .navbar > .containers .navbar-collapse,
    .navbar > .container-fluid .navbar-collapse,
    .navbar > .containers .navbar-search,
    .navbar > .container-fluid .navbar-search
    {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0 !important;
            -ms-flex: 1 1 0 !important;
                flex: 1 1 0 !important;
    }
    .site-navbar.navbar .navbar-header {
        -webkit-box-flex: 1;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    }
    .navbar-collapse.collapse {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        padding-bottom: 0;
    }
    /* END: show navbar fluid also on small devices.
       as not many icons exist */


    input, input.text, select, textarea {
        background-color: #EEEEEE !important;
    }
    .row.row-bordered.row-head > div {
        border-bottom: 0;
    }
    .row.row-bordered > div {
        border-bottom: 0;
    }
    .row.row-bordered {
        border-bottom: 1px solid #ddd;
    }
    .row.row-bordered:nth-of-type(even){
      background-color: #F4F4F4;
    }
    .row-detail-list .row > div {
        padding: 0.5em;
        padding-top: 0.2em;
    }
    .row-detail-list .row > div:first-child:not([class^="offset-"]) {
        font-size: 80%;
        text-align: left;
        padding-bottom: 0;
        padding-top: 0.5em;
    }

    .site-footer {
        height: auto !important;
    }

    .site-footer .site-footer-legal, .site-footer .site-footer-right {
        width: 100%;
        text-align: center;
    }
    .radio-custom.radio-inline {
        display: block;
    }
    .radio-inline+.radio-inline {
        margin-left: 0;
    }

}

.table thead th {
    /*
    font-weight: lighter;
    color: #999;
    */
}


/****************************/
/***  UTILS  ***/
/****************************/
.pagination.pagination-center {
    justify-content: center;
    align-items: center;
}
.page-link {
    color: var(--hopi-main-color);
}
.page-link:hover {
    color: var(--hopi-main-color);
}
.page-item.active .page-link {
    color: #fff;
    background-color: var(--hopi-main-color);
    border-color: var(--hopi-main-color);
}
.error {
    background-color: #ff0000;
    color: white;
    display: block;
    font-size: 100%;
    margin: 0 0 3px;
    padding: 4px 5px;
}
.error {
    margin:10px 0;
    text-align:center;
}
.line-height-1 { line-height: 1em !important; }

.font-size-200p { font-size: 200% !important; }
.font-size-150p { font-size: 150% !important; }
.font-size-125p { font-size: 125% !important; }
.font-size-115p { font-size: 115% !important; }
.font-size-100p { font-size: 100% !important; }
.font-size-90p { font-size: 90% !important; }
.font-size-80p { font-size: 80% !important; }
.font-size-70p { font-size: 70% !important; }
.font-size-60p { font-size: 60% !important; }
.font-size-50p { font-size: 50% !important; }

.pl-range { padding-left: 20% !important; }
.pl-skill-range { padding-left: 9% !important; }

.font-size-reset { font-size: 1rem !important; }
.line-height-reset { line-height: 1.15 !important; }

@media print {
    .css-menubar .page, .css-menubar .site-footer { margin-left: 0 !important; }
    body { padding-top: 0 !important; }
    .print-block, pre, blockquote { page-break-inside: avoid !important;}
    .print-start-page { page-break-before: always !important;}
    body { padding-top: 0 !important; font-size: 75% !important; }
    h1, .page-title, h1.page-title { font-size: 200% !important; }
    h2 { font-size: 175% !important; }
    h3 { font-size: 150% !important; }
    h4, h5, h6 { font-size: 125% !important; }
    .pie-progress-number { font-size: 125% !important; }
}

/* adoptions */

.eval-note-item p { /* converted with markdown */
    margin-bottom: 0;
}