/* root */
:root{
    --bg-color: #012447;
    --fg-color: #fff;
    --accent-color: #ff5900;
    --accent-color-half: #ff590080;
    --menu-link-color: #337ab7;
    --hover-color: #3799ef;
    --soft-grey: #f9f9f9;
    --error-color: #fa7a7a;
    --success-color: #51e3a8;
    --hot-job: #fef8f1;

    --header-normal-height: 90px;
    --header-minimized-height: 60px;
}

@font-face{
    font-display:block;
    font-family:'Open Sans';
    src:
        url(/font/open_sans/open-sans-v15-latin-regular.woff2) format("woff2"),
        url(/font/open_sans/open-sans-v15-latin-regular.woff) format("woff");
}

.fb-2{
    flex-basis: calc(100% / 2) !important;
}
.fb-3{
    flex-basis: calc(100% / 3) !important;
}
.fb-4{
    flex-basis: calc(100% / 4) !important;
}
.fb-5{
    flex-basis: calc(100% / 5) !important;
}
.fb-6{
    flex-basis: calc(100% / 6) !important;
}
.fb-7{
    flex-basis: calc(100% / 7) !important;
}
.fb-8{
    flex-basis: calc(100% / 8) !important;
}
.fb-9{
    flex-basis: calc(100% / 9) !important;
}

.fb-1,
.fb-2,
.fb-3,
.fb-4,
.fb-5,
.fb-6,
.fb-7,
.fb-8,
.fb-9{
    flex-grow: 1 !important;
}


/* page */
html,
body{
    min-height: 100vh;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;
    overflow-anchor: none;
}

button{
    border: none !important;
    user-select: none;
}

.blue-underline{
    border-bottom: 2px solid var(--hover-color) !important;
}

.blue-overline{
    border-top: 2px solid var(--hover-color) !important;
}
.blue-icon{
    color: var(--hover-color);
    font-weight: bold;
    font-size: 2rem;
}
.blue-text{
    color: var(--hover-color);
}
.bg-soft-gray{
    background: var(--soft-grey);
}
.border-y-light{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.ad-pattern-info{
    color: var(--accent-color);
}
.btn-yes,
.btn-no{
    min-width: 120px;
}
.btn-yes{
    background: var(--hover-color);
    color: var(--fg-color);
}
.btn-yes:hover{
    background: #333;
    color: var(--fg-color);
}
.btn-no{
    background: var(--accent-color);
    color: var(--fg-color);
}
.btn-no:hover{
    background: #333;
    color: var(--fg-color);
}

button[name="delete"]:hover{
    background: var(--accent-color) !important;
}

ul {
    list-style: none;
    padding-left: 0;
}
ul.check li,
ul.star li{
    position: relative;
    margin: 8px 0 8px 25px;
}
ul.check li::before,
ul.star li::before{
    position: absolute;
    color: var(--hover-color);
    font-size: 1.8rem;
    font-weight: bold;
    left: -30px;
}
ul.star li::before{
    top: 3px;
    font-size: 1rem;
    left: -25px;
}

p{
    font-size: 1rem;
}

a{
    text-decoration: none;
    color: var(--menu-link-color);
    user-select: none;
}
a:hover{
    text-decoration: underline;
}
tr:hover{
    background: var(--soft-grey);
}
svg,
use{
    pointer-events: none;
}

.input-group-text{
    position: relative;
}
label[data-required="1"]::after{
    position: absolute;
    top: 5px;
    right: 5px;
    content:'*';
}
label[data-required="2"]::after{
    position: absolute;
    top: 5px;
    right: 5px;
    content: '**';
}
select,
input[type="text"]:not(#search-where,#search-what),
input[type="email"],
input[type="password"],
input[type="number"],
textarea{
    min-width: 280px;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder,
main .blue-form .form-floating label{
    color: #999 !important;
}

input,
select,
textarea{
    outline: 4px solid #0000 !important;
    outline-offset: -4px;
}
input[type="checkbox"],
input[type="radio"]{
    cursor:pointer;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus{
    outline: none !important;
    box-shadow: none !important;
}
input:focus:not(
    input[readonly]:focus,
    input[type="checkbox"]:focus,
    input[type="radio"]:focus
),
select:focus:not(select[readonly]:focus),
textarea:focus:not(input[readonly]:focus){
    outline: 4px solid var(--accent-color-half) !important;
    box-shadow: none !important;
    border: 1px solid var(--accent-color-half) !important;
    transition:
        outline 450ms ease-in-out,
        border 450ms ease-in-out;
}
input[readonly],
select[readonly],
textarea[readonly]{
    outline: none !important;
    box-shadow: none !important;
    background: #eee !important;
    color: #666 !important;
    border: 1px solid #ccc !important;
    cursor: not-allowed !important;
}

.accordion-button{
    color: #000;
}
.accordion-button:hover{
    color: var(--hover-color);
}
.accordion-button[aria-expanded="true"]{
    outline: none !important;
    box-shadow: none !important;
    color: var(--accent-color);
}
.accordion-button:focus{
    box-shadow: none;
}

button,
a.nav-link{
    font-size: 1.2rem !important;
}
textarea{
    min-height: 100px !important;
}
input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border-radius: 4px !important;
    border: 2px solid #999;
}
input[type="radio"]{
    width: 20px;
    height: 20px;
    border: 2px solid #999;
}
button.btn-form-submit{
    background: var(--hover-color);
    color: var(--fg-color);
}
button.btn-form-submit:hover{
    background: #323436;
    color: var(--fg-color);
}
form .input-group:has(*[data-validation*="validate"]) .validation-feedback{
    display: none;
    padding: 2px 5px;
    color: #000;
    font-size: .8rem;
    border-radius: 4px !important;
    margin-left: 1px !important;
}
form .input-group:has(*[data-validation*="validate"]) .validation-feedback.validate-failed,
form .input-group:has(*[data-validation*="validate"]) .validation-feedback.validate-ok{
    width: 100%;
}
form .input-group:has(*[data-validation*="validate"]) .validation-feedback.validate-failed{
    display: block;
    background: var(--error-color);
}
form .input-group:has(*[data-validation*="validate"]) .validation-feedback.validate-ok{
    display: none;
    background: var(--success-color);
}
form .input-group:has(*.validation-feedback.validate-failed){
    margin-bottom: 20px !important;
}
/*form .input-group:has(*.validation-feedback.validate-ok){*/
/*    margin-bottom: 20px !important;*/
/*}*/

.text-wrap-anywhere{
    word-wrap: anywhere;
}

/* polyfill */
.text-justify{
    text-align: justify;
}
.fs-0-8{
    font-size: .8rem !important;
}

/* header */
header{
    transition: box-shadow 150ms ease-in-out;
}
header #main-menu{
    transition: padding 150ms ease-in-out;
}
header #main-menu>div:not(header #main-menu>div#nav-container){
    height: var(--header-normal-height);
    transition:
        height 150ms ease-in-out,
        width 150ms ease-in-out;
}
header #main-menu .navbar-brand img{
    max-width: 100%;
    max-height: 100%;
}
header.minimized{
    box-shadow: 0 5px 10px #0003;
}
header.minimized #main-menu{
    padding-top: 0;
    padding-bottom: 0;
}
header.minimized #main-menu>div:not(header #main-menu>div#nav-container){
    height: var(--header-minimized-height);
}

header #header-menu{
    background: var(--soft-grey);
}
header #main-menu .nav-item{
    background: var(--accent-color);
    border-radius: 5px;
}
header #main-menu .nav-item:hover{
    background: var(--hover-color);
}
header #main-menu .nav-item a:hover{
    text-decoration: none;
}

header #main-menu .nav-item .nav-link{
    color: var(--fg-color);
}

/* search */
search #header-image{
    height: 360px;
    background: url(/media/image/header.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-bottom: var(--hover-color) solid 7px;
    box-shadow: 0 15px 10px #0003;
}
search #search-container{
    background: #0006;
    width: 300px;
    backdrop-filter: blur(4px);
    height: calc(100% - 7px) !important;
}
search #search-container button{
    background: var(--accent-color);
    color: var(--fg-color);
}
search #search-container button:hover{
    background: var(--hover-color);
}
search #search-container i[data-x="clear-field"]{
    font-size: 1.2rem;
    color: #0003;
    cursor: pointer;
}
search #search-container i[data-x="clear-field"]:hover{
    color: #f009 !important;
}

/* main */
main .request-status{
    padding: 10px;
    border-radius: 4px;
}
main .status-success{
    background: var(--success-color);
}
main .status-failed{
    background: var(--error-color);
}
main .blue-form .input-group-text{
    background: var(--hover-color);
}
main .blue-form .input-group>*:nth-child(2){
    min-width: 180px;
    text-align: left;
}
main .blue-form .small-box .input-group>*:nth-child(2){
    min-width: 100px;
}
main .blue-form .mid-box .input-group>*:nth-child(2){
    min-width: 140px;
}
main .blue-form .big-box .input-group>*:nth-child(2){
    min-width: 200px;
}
main .blue-form .bigger-box .input-group>*:nth-child(2){
    min-width: 220px;
}
main .blue-form .input-group-text i,
main .blue-form .input-group-text label{
    color: var(--fg-color);
}
main .blue-form .input-group-text label{
    width: 100%;
    display: flex;
    flex-direction: column;
}
main .blue-form .input-group-text label span:nth-child(2){
    display: inline-block;
    font-size: .7rem;
}
main #content{
    border-right: solid 1px #ebebeb;
}
main #content.no-border{
    border: none;
}

main .jobangebote .job-row{
    background: var(--soft-grey);
    min-height: 136px;
    border-radius: 4px;
}
main .jobangebote .job-row.is-hotjob{
    background: var(--hot-job);
}
main .jobangebote .job-image,
main #logo-bearbeiten .company-image{
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    height: 136px;
    min-height: 136px;
    max-height: 136px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1px;
}
main .jobangebote .job-image>img,
main #logo-bearbeiten .company-image>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
main .jobangebote .job-title{
    padding-right: 85px;
    position: relative;
}
main .jobangebote .job-title a{
    color: var(--hover-color);
    text-decoration: none;
}
main .jobangebote .img-job-packet{
    position: absolute;
    top: 0;
    right: 0;
}
main .jobangebote .job-icons span{
    font-size: .8rem;
    color: #999;
}
main .jobangebote .job-icons i{
    font-size: .7rem;
    color: #999;
}
main .img-logo-detail{
    max-width: 256px;
    max-height: 192px;
    object-fit: contain;
    object-position: center;
}

/* side menu */
main #side-menu ul li{
    transition: background 150ms ease-in-out;
    border-bottom: 1px solid #ebebeb;
}
main #side-menu ul li:hover{
    background: linear-gradient(to right, #0000, var(--soft-grey));
}
main #side-menu ul li a{
    color: var(--menu-link-color);
    transition: color 150ms ease-in-out;
}
main #side-menu ul li a:hover{
    color: var(--hover-color);
    text-decoration: none;
}
main #side-menu ul li a::before{
    content:'>>';
    letter-spacing: -2px;
    font-size: 10px;
    vertical-align: middle;
    padding-bottom: 3px;
    transform: scaleY(2);
    display: inline-block;
    color: var(--hover-color);
    width: 0;
    overflow: hidden;
    transition: width 50ms ease-in-out;
}
main #side-menu ul li a:hover::before{
    width: 15px;
}

main #pager{
    background: var(--soft-grey);
}
main #pager li{
    border: 1px solid #ccc;
    background: var(--fg-color);
    user-select: none;
    border-radius: 8px;
}
main #pager li:not(main #pager li.inactive):hover{
    box-shadow: 0 0 6px #0003;
}
main #pager li.active{
    background: var(--accent-color);
    border: 2px solid var(--accent-color);
}
main #pager li.inactive{
    border: none;
    background: #0000;
}
main #pager li a,
main #pager li span{
    color: var(--accent-color);
    background: #0000 !important;
    min-width: 30px;
    text-align: center;
    font-size: .9rem;
}
main #pager li.active a{
    color: var(--fg-color);
}
main #pager li a:hover{
    text-decoration: none;
}

main .login-container,
main .new-password-container{
    box-shadow: 0 2px 15px 5px #0002;
}

main #faq .accordion-button,
main #arbeitgeber .accordion-button{
    background: var(--fg-color);
}

main #datenschutz ul{
    list-style: '- ';
    padding-left: 10px;
}
main #jobagebot ul{
    list-style: disc;
    padding-left: 15px;
}
main #uebersicht ul li{
    counter-increment: overview;
}
main #uebersicht ul li::before{
    display: inline-block;
    content: counter(overview)".";
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: var(--hover-color);
    text-align: center;
    color: var(--fg-color);
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 4px;
}

main .user-menu ul li a{
    background: var(--soft-grey);
    margin: 1px;
    border-radius: 4px;
}
main .user-menu ul li a:hover{
    background: var(--hover-color);
    color: var(--fg-color);
    text-decoration: none;
}
main .user-menu ul li:nth-last-child(1) a:hover{
    background: var(--accent-color);
    color: var(--fg-color);
}

main #arbeitgeber ul.card-list li{
    width: 150px;
}
main #arbeitgeber ul.card-list li a:has(i){
    background-color: #0000;
    display: flex;
    width: 150px;
    height: 150px;
    border: 2px solid #eee;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/media/svg/crease.svg);
    transition: background 300ms ease-in-out;
}
main #arbeitgeber ul.card-list li a:has(i):not(main #arbeitgeber ul.card-list li a.no-link:has(i)):hover{
    background-color: var(--hover-color);
}
main #arbeitgeber ul.card-list li a i{
    font-size: 60px;
    color: var(--accent-color);
    transition: color 300ms ease-in-out;
}
main #arbeitgeber ul.card-list li a:not(main #arbeitgeber ul.card-list li a.no-link):hover i{
    color: var(--fg-color);
}
main #arbeitgeber ul.card-list li a.no-link{
    color: #000;
    cursor: default;
}

main #preise i.arrow-email{
    font-size: 1.2rem;
    vertical-align: middle;
    line-height: 1rem;
}
main #preise .offer-row{
    padding: 20px 0;
    margin: 0 -1px;
}
main #preise .offer-row>div{
    border: 2px solid var(--bg-color);
    border-radius: 16px;
    position: relative;
}
main #preise .offer-row>div ul{
    padding: 30px;
    list-style: url(/media/svg/list_style_arrow_right.svg);
}
main #preise .offer-row:nth-child(2)>div{
    background: #eee;
    border: 2px solid var(--accent-color);
    margin: -20px 0;
    padding-bottom: 60px !important;
    box-shadow: 0 0 10px #000a;
}
main #preise .offer-row:nth-child(1)>div{
    border-right: none;
    border-radius: 16px 0 0 16px;
    padding-right: 2px;
}
main #preise .offer-row:nth-child(3)>div{
    border-left: none;
    border-radius: 0 16px 16px 0;
    padding-left: 2px;
}
main #preise .offer-row>div li{
    padding: 5px 0;
}
main #preise .offer-row>div li.offer-diff{
    color: var(--accent-color);
}
main #preise .offer-row h3{
    background: var(--bg-color);
    color: var(--fg-color);
    margin: 0;
    border-bottom: 1px solid #fff;
}
main #preise .offer-row:nth-child(2) h3{
    background: var(--accent-color);
}
main #preise .offer-row span{
    background: #333;
    color: var(--fg-color);
}
main #preise .offer-row span>span{
    font-size: 0.8rem;
}

main .html-ad-info{
    margin-top: 100px;
}
main #html-ad{
    height: 600px;
}

main #anzeigen-auflisten .own-ads{
    max-width: calc(100vw - 20px);
}
main #anzeigen-auflisten .own-ads table th{
    background: var(--hover-color);
    color: var(--fg-color);
}
main #anzeigen-auflisten .own-ads table tr{
    border-top: 10px solid var(--fg-color);
}
main #anzeigen-auflisten .own-ads table tr:hover{
    background: #eee;
}
main #anzeigen-auflisten .own-ads table td a{
    font-size: 24px;
    color: #666;
}
main #anzeigen-auflisten .own-ads table td a:has(i[class*="bi-eye"]){
    font-size: 30px;
}
main #anzeigen-auflisten .own-ads table td a.btn-delete-ad{
    color: #888;
}
main #anzeigen-auflisten .own-ads table td a.btn-delete-ad i{
    pointer-events: none;
}
main #anzeigen-auflisten .own-ads table td a:hover,
main #anzeigen-auflisten .own-ads table td a:has(i[class*="bi-trash"]):hover{
    color: var(--hover-color);
}

main #anzeigen-auflisten #static-delete .modal-header,
main #anzeigen-auflisten #static-delete .modal-footer{
    background: var(--soft-grey);
}

main #anzeige-aufgeben .input-group.duration td i{
    color: var(--accent-color);
    cursor: help;
}

/* footer */
footer{
    min-height: 60px;
    background: var(--bg-color);
    color: var(--fg-color);
}

footer ul a{
    color: var(--fg-color);
    text-decoration: none;
}