/* ------------------------------------ */
/* Colors                               */
/* ------------------------------------ */

:root {
    --primary: #023973;
    --secondary: #004993;
    --green: #3cb44a;
    --red: #ea1f25;
    --warning: #ba2121;
    --bg-gray: #f6f6f6;
    --border-gray: #eee;
    --border-dark: #a8a8a8;
    --text-color: #333;
    --text-gray: #999;
    --border-tabs: #8E8E8E;
}

/* ------------------------------------ */
/* Fonts                                */
/* ------------------------------------ */

body {
    font-size: 14px;
    line-height: 1.5em;
    color: #333;
}
body {
	/* font-family: "Open Sans"; */
}

a {
    text-decoration: none !important;
    color: var(--primary) !important;
}
a:focus,
a:hover {
    color: var(--secondary) !important;
}
a:focus {
    color: #111111 !important;
}

.warning,
.form-error {
    color: #ba2121 !important;
}

.module h2, li {
    font-size: 14px;
}
.form-row {
    font-size: 14px;
}
table th,
table td {
    font-size: 14px;
}

/* ------------------------------------ */
/* Layout                               */
/* ------------------------------------ */

#container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#content {
    padding: 30px 0px;
}

@media (max-width: 1240px) {
    #container #header {
        padding: 30px 20px 0px !important;
    }
    #container .nav-global {
        margin: 0px 20px !important;
    }
    #container #content {
        padding: 20px 20px !important;
    }
}

h1.page-title {
    font-size: 21px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

ul.messagelist {
	margin-top: 30px;
    margin-bottom: -10px;
}
ul.messagelist li {
	margin-bottom: 0px;
    font-size: 14px;
}
ul.messagelist li {
    font-weight: 600;
}
ul.messagelist li.info {
    background-image: none;
    margin-top: -12px;
    font-weight: normal;
}

/* ------------------------------------ */
/* Inputs                              */
/* ------------------------------------ */

input {
    outline: none;
}

input[type="date"] {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: 5px 6px;
	margin-top: 0;
	color: var(--body-fg);
	background-color: var(--body-bg);
}

/* ------------------------------------ */
/* Buttons                              */
/* ------------------------------------ */

button.default,
.submit-row input[type="submit"] {
    background-color: var(--primary) !important;
}
button.default:hover,
.submit-row input[type="submit"]:hover {
    background-color: var(--secondary) !important;
}

.submit-row *,
.tab-nav {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a.default {
    height: 15px;
    display: inline-block;
    line-height: 15px;
    padding: 0px;
    text-align: center;
    padding: 10px 20px;
    cursor: pointer;
    background-color: var(--primary) !important;
    text-decoration: none !important;
    color: #fff !important;
    border-radius: 4px;
}
a.default:hover {
    background-color: var(--secondary) !important;
}

a.default.secondary {
    background-color: #fff !important;
    color: var(--primary) !important;
    border: solid 1px var(--primary) !important;
    padding: 9px 19px;
}
a.default.secondary:hover {
    background-color: #fff !important;
    color: var(--secondary) !important;
    border: solid 1px var(--secondary) !important;
}

.btn.primary {
    background: var(--primary) !important;
    padding: 8px 15px;
}
.btn.primary:hover {
    background-color: var(--secondary) !important;
}
.btn.secondary {
    background: none !important;
    color: var(--primary);
    border: solid 1px var(--primary);
    padding: 7px 13px;
}
.btn.secondary:hover {
    color: var(--secondary);
    border: solid 1px var(--secondary);
}

span.button.default {
    text-align: center;
}

.submit-row .button.delete {
    background: #ba2121 !important;
}
.submit-row .button.delete:hover {
    background: #a41515 !important;
}

.button.inverted {
    border: solid 1px var(--primary);
    background-color: #ffffff !important;
    color: #447e9b;
}
.button.inverted:focus {
    border: solid 1px var(--primary);
    background-color: #ffffff !important;
    color: #447e9b;
}
.button.inverted:hover {
    border: solid 1px #609ab6;
    background-color: #609ab6 !important;
    color: #ffffff;
}

.filter-reset {
    position: absolute;
    top: 7px;
    right: 15px;
}
.filter-reset img {
    filter: brightness(10) saturate(0);
}

button, input[type=submit], .button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ------------------------------------ */
/* Forms                                */
/* ------------------------------------ */

form .form-spacer {
    margin: 20px 0px;
    border-top: solid 1px #eee;
    height: 1px;
    float: left;
    width: 100%;
}

.form-row,
.submit-row {
    border: none !important;
    background-color: #fff !important;
}

input, select, textarea {
    font-size: 14px;
}

label {
    font-size: 14px;
    display: block;
}


/* ------------------------------------ */
/* Header                               */
/* ------------------------------------ */

#header {
    background-color: transparent !important;
    padding: 30px 0px 20px 0px !important;
}
#header h1 {
    font-size: 21px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 20px 0 0 0;
}
#header h1 a {
    color: #333 !important;
}

#header {
    text-align: center;
}
#header .act-logo {
    width: auto;
    height: 75px;
    cursor: pointer;
    margin-left: 0;
}

body:not(.login) #site-name {
    display: none !important;
}

@media (max-width: 1024px) {
    body:not(.login) #header {
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 10px 40px !important;
    }
}

#user-status {
    color: #333;
    margin-top: 40px;
}
#user-login {
    float: right;
}
#user-login .btn-login {
	position: relative;
	top: 7px;
	right: 18px;
	padding: 2px 12px 2px 12px;
	background-color: #ffffff;
	border-radius: 4px;
	font-weight: 600;
}
#user-login .btn-login a {
    color: var(--secondary) !important;
}

body.login #branding img {
    display: block;
    height: 75px;
    width: auto;
}

body.login .nav-global {
    display: none !important;
}

/* ------------------------------------ */
/* Menu                                 */
/* ------------------------------------ */

.nav-global {
    background-color: var(--primary);
    border-radius: 4px;
    padding: 0 !important;
    display: block;
}
.nav-global .nav {
    padding: 0px;
}

.nav-global ul {
    margin: 0px;
}
.nav-global ul li {
    list-style-type: none !important;
    display: block;
    padding: 7px 36px;
    border-right: solid 1px #ffffff;
    float: left;
    text-align: center;
}

.nav-global * {
    white-space: nowrap;
}
.nav-global .menu-items {
    display: block;
}
.nav-global .menu-items *:not(span) {
    font-size: 14px !important;
}
.nav-global a {
    text-decoration: none !important;
    color: #fff !important;
    border-bottom: solid 1px transparent;
}
.nav-global a:hover,
.nav-global a.current {
    color: #fff !important;
    border-bottom: solid 1px #ffffff;
}

.nav-submenu {
    display: none !important;
    position: absolute;
    z-index: 5;
    background-color: var(--primary);
    padding: 5px 0px 5px 10px !important;
    margin-left: -10px !important;
    -webkit-box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.25);
    -moz-box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.25);
    box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.25);
}
.nav-submenu li {
    padding-right: 10px !important;
}
.nav-global li:hover .nav-submenu {
    display: block !important;
}

@media (max-width: 992px) {
    .nav-global ul li {
        padding: 7px 30px;
    }
    #user-login .btn-login {
        right: 30px;
    }
}

@media (max-width: 768px) {
    .nav-global {
        max-width: calc(100% - 40px);
    }
    .nav-global ul li {
        padding: 7px 14px;
    }
    #user-login .btn-login {
        right: 14px;
    }
}

/* ------------------------------------ */
/* Mobile                               */
/* ------------------------------------ */

@media (max-width: 768px) {
    
    body:not(.login) #header {
        flex-direction: column !important;
    }
    body:not(.login) #header .act-logo {
        height: 50px;
    }
    body:not(.login) #header #user-status {
        margin: 10px 0 20px 0;
    }
    body:not(.login) #user-login {
        
    }
}

/* ------------------------------------ */
/* Login                                */
/* ------------------------------------ */

.login #user-status {
    display: none !important;
}

.login #header {
    padding-bottom: 0px !important;
}

.login h1.page-title {
    text-align: center;
}

.login .form-row input[type=text],
.login .form-row input[type=password],
.login .form-row input[type=email] {
    padding: 8px;
    margin-left: 1px !important;
    width: calc(100% - 2px) !important;
}
.login .form-row input[type=email] {
    padding: 8px;
    margin-left: 1px !important;
    width: calc(100% - 20px) !important;
}
@media (max-width: 1024px) {
    .login .form-row input[type=email] {
        width: calc(100% - 2px) !important;
    }
}

.login .submit-row {
    padding: 1em 0 0 0 !important;
    text-align: center;
}
.login .submit-row input {
    min-width: 120px;
}

.login.user #footer {
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
    border-top: solid 1px #eee;
    background-color: #f6f6f6;
}

.login ul.messagelist li {
    padding-left: 40px;
    background-position: 15px 12px;
}
.login .form-row label {
    font-size: 14px;
}

/* ------------------------------------ */
/* Widgets                              */
/* ------------------------------------ */

@-moz-document url-prefix() {
  select {
    padding-right: 25px;
    background-image: url("data:image/svg+xml,\
      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='12px'\
           height='12px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    -moz-appearance: none;
    appearance: none;
  }
}

label.required {
    font-weight: normal;
}

label {
    color: #333;
}

input[type="date"] {
    min-width: 115px;
}

tr {
    background: transparent !important;
}

*:focus-visible {
    outline: none;
}

/* ------------------------------------ */
/* Buttons                              */
/* ------------------------------------ */

button.default,
.submit-row input[type="submit"] {
    background-color: var(--primary) !important;
}
button.default:hover,
.submit-row input[type="submit"]:hover {
    background-color: var(--secondary) !important;
}

.submit-row *,
.tab-nav {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a.default {
    height: 15px;
    display: inline-block;
    line-height: 15px;
    padding: 0px;
    text-align: center;
    padding: 10px 20px;
    cursor: pointer;
    background-color: var(--primary) !important;
    text-decoration: none !important;
    color: #fff !important;
    border-radius: 4px;
}
a.default:hover {
    background-color: var(--secondary) !important;
}

.selector-available a,
.selector-chosen a{
    font-size: 13px !important;
    font-weight: normal;
}
.selector-available select,
.selector-chosen select {
    background: none;
}

/* ------------------------------------ */
/* Steps & Tabs                         */
/* ------------------------------------ */

#steps {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 70px;
}
#steps .step {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
    padding-bottom: 12px;
    color: var(--text-gray);
    border-bottom: solid 3px var(--text-gray);
    cursor: pointer;
}
#steps .step.active {
    color: var(--text-color);
    border-bottom: solid 3px var(--primary);
}
#steps .step span:nth-child(1) {
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 4px
}
#steps .step span:nth-child(2) {
    font-size: 21px;
    line-height: 21px;
}

@media (max-width: 768px) {
    #steps .step span:nth-child(2) {
        font-size: 18px;
        line-height: 18px;
    }
}

#tabs {
    margin-bottom: 0 !important;
    margin-left: 1px;
}
#tabs .tab {
    border: solid 1px var(--border-tabs);
    margin-left: -1px;
}
.tab-content {
    padding: 10px 30px;
    border: solid 1px var(--border-tabs);
    margin-top: -1px !important;
}

/* ------------------------------------ */
/* Application Form                     */
/* ------------------------------------ */

body.application #header #branding {
    margin: auto;
}
body.application #header #branding img {
    height: 100px;
    margin-left: 0;
}
body.application #header #branding h1 {
    color: var(--primary) !important;
    margin: -10px auto 0 auto;
}

fieldset > h2,
.form-title {
    border: solid 1px #eee !important;
    background-color: #f6f6f6 !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    color: #333 !important;
}

.submit-row .back {
    float: left;
}
.application label {
    font-weight: normal !important;
}
.application .submit-row {
    padding: 20px 0 0 0;
}

.date-only a,
.datetime a {
	font-size: 11px !important;
}
.datetimeshortcuts {
	margin-right: 20px;
}

.related-widget-wrapper .select2, [name="KaufmaennischeSTYPID"], [name="RechtsformID"], [name="SchulformID"] {
	min-width: 294px !important;
}

.form-row.field-Lehrer_1,
.form-row.field-Lehrer_2 {
    padding-left: 0px;
    margin-left: -10px;
}
.form-row.field-Lehrer_1 > div > label,
.form-row.field-Lehrer_2 > div > label {
    display: none;
}

.application .tab-content {
    display: flex;
    flex-direction: column;
}
.application .row {
    clear: both;
    margin-left: -20px;
}
.application .row .cols-1 {
    width: calc(100% - 20px);
    float: left;
    margin-left: 20px;
}
.application .row .cols-2 {
    width: calc(50% - 20px);
    float: left;
    margin-left: 20px;
}
.application .submit-row {
    width: calc(100% - 20px);
    float: left;
    margin-left: 20px;
}

.application .flex-col > div {
    display: flex;
    flex-direction: column;
}
.application .flex-col label {
    width: auto !important;
    height: 21px;
}
.application .flex-col select {
    width: 294px;
}
.application .flex-col {
    padding-bottom: 0px;
}
.application .flex-col p.datetime {
    margin-left: -8px;
}
.application .flex-col p.datetime input.vDateField {
	margin-left: -2px;
}

.application .flex-col.date-field input {
    width: 94px;
}
.application .flex-col.date-field .datetimeshortcuts {
    position: relative;
    top: -24px;
    left: 112px;
}
.application .address-fields {
    display: flex;
}

.application [name="RechtsformID"] {
	width: 398px !important;
}
.application [name=Firmenname_1],
.application [name=Firmensitz],
.application [name=Street] {
    width: 384px;
}

.application .rjf-help-text {
    margin-top: 0px;
}
.application .hint {
    font-size: 11px;
    color: var(--body-quiet-color);
}

.asterisk {
    margin-left: 4px;
    color: var(--warning);
}

.form-table.holidays p.datetime {
	margin-left: -44px;
    margin-right: -204px;
}

.application .readonly input,
.application .readonly select {
    cursor: default;
    pointer-events: none;
    border: none;
    outline: none;
    margin-left: -6px;
    font-weight: 600;
    background: none;
}
.application .readonly select#id_SFKZ {
    margin-left: -2px;
    font-weight: 600 !important;
}

/* ------------------------------------ */
/* Application Form (Mobile)            */
/* ------------------------------------ */

@media (max-width: 768px) {
    
    .application #header #branding img {
        height: 60px !important;
    }

    .application .row .cols-2 {
        width: calc(100% - 20px);
    }
    
    .application .flex-col.date-only > div,
    .application .flex-col.date-only p.datetime {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 210px !important;
    }
    .application .flex-col.date-field .datetimeshortcuts {
        position: relative;
        top: -26px;
        left: 40px;
    }
    .application .flex-col.date-only p.datetime input {
        margin-left: -2px;
    }
    .application .form-row label {
        white-space: nowrap;
        padding-bottom: 0px;
    }
    .application .readonly input,
    .application .readonly select {
        margin: 0 !important;
        padding: 0 0 8px 0 !important;
        height: 18px !important;
        min-height: 18px !important;
    }
    
    .application .summary-table {
        gap: 8px;
        display: flex;
        flex-direction: column;
    }
    .application .summary-table > div {
        flex-direction: column;
    }
    .application .summary-table > div > label {
        padding-bottom: 0;
    }
    .application .summary-table > div > span {
        margin-top: 0;
    }
    
    .application .display-value {
        font-weight: 600;
    }
    
    .application .form-row input[type=text]:not(.vDateField),
    .application .form-row input[type=number],
    .application .form-row input[type=email],
    .application .form-row select {
        width: calc(100% - 0px) !important;
    }
    .application .form-row textarea {
        width: calc(100% - 30px) !important;
    }
    
    #persons-table .rjf-form-row label {
        padding: 0 !important;
    }
    
    .application .json-field fieldset .rjf-form-group label {
        width: calc(100vw - 100px) !important;
        margin-bottom: 4px;
    }
    
    .application .json-field fieldset .rjf-form-group input {
        width: auto !important;
    }
    
    .application .rjf-form-row-controls {
        position: absolute;
        right: 10px;
        top: auto !important;
        bottom: -2px;
    }
    
    .application .address-fields {
        flex-direction: column;
    }
    
    .application .form-row.school-search label {
        margin-bottom: 4px;
    }
    .application .form-row.school-search [name=SFKZ_search] {
        margin-bottom: 20px;
    }
    .application .form-row.school-search .field-SFKZ .related-widget-wrapper {
        width: 100%;
    }
    
    #id_Lehrer_1_jsonform label:after,
    #id_Lehrer_2_jsonform label:after {
        max-height: 26px
    }
        
    .application .submit-row {
        margin-top: 0 !important;
    }
    
    .submit-row > * {
        width: auto !important;
    }
}


/* ------------------------------------ */
/* Activation Form                      */
/* ------------------------------------ */

body.activation .firm-header {
    display: flex;
    margin-bottom: 30px;
}
body.activation .firm-header input,
body.activation .firm-header select {
    padding-top: 0;
    font-size: 16px !important;
}
body.activation .firm-header select {
    margin-top: -4px;
}

.hint-box,
.text-box {
    padding: 10px 20px 5px 20px;
    border: solid 1px var(--primary);
    border-radius: 10px;
}
.hint-box {
    margin-left: 10px;
}

.hint-box h1,
.text-box h1,
.hint-box h2,
.text-box h2 {
    font-size: 21px;
    color: var(--primary);
    margin-top: -20px;
    background: #fff;
    width: fit-content;
    margin-bottom: 8px !important;
    padding: 0 2px;
    margin-left: -2px;
}
.hint-box h2,
.text-box h2 {
    font-size: 16px;
    margin-top: -20px;
}
.hint-box h1,
.hint-box h2 {
    text-transform: uppercase;
}

.hint-box p {
    margin-top: 4px;
    padding-left: 0px;
}

.gray-box {
    padding: 16px 24px 8px 24px;
    border: solid 1px var(--border-gray);
    background-color: var(--bg-gray);
}
.border-box {
    padding: 16px 24px 8px 24px;
    border: solid 1px var(--border-dark);
    
}

@media (min-width: 768px) {
    p.desktop-no-margin {
        margin-bottom: -2px;
    }
}

body.activation .inline-group .errorlist.nonfield {
    background: none;
}
body.activation .inline-group .errorlist:not(.nonfield) {
    display: none;
}
body.activation .errornote {
    margin-bottom: 50px;
}

/* ------------------------------------ */
/* Activation Form (Mobile)             */
/* ------------------------------------ */

@media (max-width: 768px) {

    .activation #firm_form h1 {
        margin-top: 20px !important;
    }
    .activation .readonly input, .application .readonly select {
        height: 20px !important;
        min-height: 20px !important;
    }
    
    .activation fieldset.teacher > div {
        flex-direction: column !important;
        gap: 0px !important;
    }
    .select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
        line-height: 22px;
    }
}

/* ------------------------------------ */
/* Edit Form                            */
/* ------------------------------------ */

body.edit .form-row {
    padding: 4px 10px;
}
body.edit fieldset {
    margin-bottom: 0;
}
body.edit .form-row div.readonly {
    padding-top: 6px !important;
    padding-bottom: 2px !important;
}
body.edit .form-row.disable-link div.readonly a {
    pointer-events: none !important;
    cursor: default;
    color: var(--text-color) !important;
}
body.edit .form-row p.hint {
    margin-left: 170px;
    font-size: 11px;
    color: var(--body-quiet-color);
}
body.edit .form-row label.required {
    font-weight: 600;
}
body.edit .field-Gewinnorientiert_Nachweis {
    margin-left: 80px;
}

body.edit [data-legal-form] input {
    pointer-events: none !important;
    cursor: default;
    border-color: #fff;
}
body.edit [data-legal-form] input[type=date] {
    margin-left: -8px;
    margin-right: -50px;
    width: 188px !important;
}
body.edit [data-legal-form] .rjf-input-group {
    overflow: hidden;
}
body.edit [data-legal-form] button {
    display: none;
}
body.edit [data-legal-form] input[type=radio] {
    display: none;
}
body.edit [data-legal-form] label:has(input[type="radio"]) {
    display: none !important;
}
body.edit [data-legal-form] label:has(input[checked=""]) {
  display: inline-block !important;
}

body.edit .date-only div.readonly {
    max-width: 100px;
    max-height: 14px;
    overflow: hidden;
}

table.registered-businesses {
    margin-left: 10px;
}
table.registered-businesses tr th {
    font-weight: 600;
}
table.registered-businesses tr td:nth-child(1) {
    min-width: 120px
}
table.registered-businesses tr td:nth-child(2) {
    min-width: 320px
}

.body.edit .fields-teacher {
    display: flex;
    gap: 40px;
}

body.edit .hint-box {
    margin-left: 0;
}

/* ------------------------------------ */
/* Edit Form (Mobile)                   */
/* ------------------------------------ */

@media (max-width: 768px) {
    table.work-times th {
        padding: 0 0 0 6px !important;
    }
    table.work-times td {
        padding: 4px 6px 1px 6px !important;
    }
    table.work-times input {
        width: 46px !important;
        padding: 4px !important;
    }
    table.holidays p.datetime input {
        width: 92px !important;
    }
    .form-table.holidays p.datetime {
        margin-right: -216px;
    }
    .form-table.holidays p.datetime .datetimeshortcuts {
        margin-left: 4px;
    }
    body.edit label {
        padding-bottom: 0;
        margin: 4px 0 4px 0;
    }
    body.edit .form-row div.readonly {
        padding-top: 0px !important;
    }
    .select2 {
        width: 100% !important;
    }
    .select2-selection {
        padding: 6px 8px !important;
        height: 36px !important;
    }
    .select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
        line-height: 24px;
    }
    .select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
    body.edit .fields-teacher {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .submit-row {
        margin-top: 40px !important;
    }
    #bank_accounts-group tr.form-row.dynamic-bank_accounts {
        display: table-row;
    }
    #bank_accounts-group tr.form-row#bank_accounts-empty {
        display: none;
    }
    #bank_accounts-group tr.form-row.dynamic-bank_accounts .field-IsBusinessAccount select {
        width: 64px;
    }
    body.edit .form-row select,
    body.edit .form-row textarea {
        max-width: calc(100% - 30px);
    }
    body.edit .field-Gewinnorientiert_Nachweis {
        margin-left: 0px;
    }
    body.edit .field-Gewinnorientiert_Nachweis > div {
        display: flex;
        flex-direction: column;
    }
    table.registered-businesses {
        width: calc(100% - 30px);
        overflow: scroll;
    }
    table.registered-businesses tr td {
        min-width: 0px !important;
    }
    .form-row.field-GmbhGesellschaftsvertragDatum label {
        width: 100%;
    }
}

/* ------------------------------------ */
/* JSON Form                            */
/* ------------------------------------ */

.django-jsonform-container .inline-group-title {
    border: solid 1px #eee !important;
    background-color: #f6f6f6 !important;
    font-weight: 600 !important;
    padding: 3px 10px 2px 10px !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    color: #333 !important;
    background: var(--primary);
    width: 100% !important;
    margin-left: -10px;
    font-size: 14px;
}
.django-jsonform-container .rjf-form-group,
.django-jsonform-container > div > fieldset > div > div > div > .rjf-form-group-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

.rjf-form-row input[type="date"] {
	padding: 6px 6px !important;
}

/* ------------------------------------ */
/* Tables                               */
/* ------------------------------------ */

table tr th {
    font-size: 14px !important;
    line-height: 14px !important;
    text-transform: none;
    font-weight: normal;
    color: var(--text-color) !important;
    background: none;
    vertical-align: middle;
}

.summary-table {
    margin-left: 10px;
}
.summary-table > div {
    display: flex;
}
.summary-table label {
    width: 220px;
}
.summary-table span {
    font-weight: 600;
    margin-top: 4px;
}
.summary-table [data-contact] span {
    min-width: 220px;
    display: inline-block;
    margin-top: 2px;
}

#persons-table {
    margin: 0 10px;
}
#persons-table .display-value {
    display: inline-block;
    margin-right: 1px;
}
#persons-table .display-date {
    width: 130px;
}
#persons-table.json-field fieldset > div > div > div > div {
	margin-bottom: 0px !important;
}

#persons-table.json-field .inline-group th.name {
	width: 205px !important;
}
#persons-table .rjf-form-group-children > .rjf-form-row:nth-child(1) .display-value {
    margin-right: -80px;
}

/* ------------------------------------ */
/* Search Widget                        */
/* ------------------------------------ */

#id_SFKZ {
    width: 110px;
    pointer-events: none !important;
    border: solid 1px transparent;
    padding-left: 0;
    font-weight: 600;
    background: none !important;
    width: 100%;
    font-weight: normal !important;
    appearance: none;
}
#id_SFKZ.has-errors {
    color: var(--error-fg) !important;
    border: solid 1px transparent !important;
}
.school-search {
    display: flex;
}
.school-search [name="SFKZ_search"] {
    width: 120px;
}
.school-search > div,
.school-search .field-SFKZ > div {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------ */
/* Form Errors                          */
/* ------------------------------------ */

.has-errors {
	border: 1px solid var(--error-fg) !important;
}
.error-msg {
    display: block;
    color: var(--error-fg);
    font-size: 14px !important;
    line-height: 14px !important;
    margin-top: 2px;
}
.flex-col.date-field .error-msg {
    margin-top: -18px;
}
#work-times-errors .error-msg {
    margin-bottom: 4px;
}
#lehrer-1-errors .errorlist,
#lehrer-2-errors .errorlist {
    margin-left: 0;
}

/* ------------------------------------ */
/* Application Summary                  */
/* ------------------------------------ */

#summary {
    margin-bottom: 20px;
}

#summary .summary-item {
    display: flex;
}

#summary .summary-item label {
    width: 280px;
    display: block;
}
#summary .summary-item span {
    display: block;
    font-weight: 600;
}

#summary p {
    margin-left: 8px;
}
#summary .summary-item {
    margin-left: 8px;
}

/* ------------------------------------ */
/* Search Form                          */
/* ------------------------------------ */

.paginator {
    margin-top: 30px;
}
.paginator .this-page {
	padding: 2px 8px;
	font-weight: 600;
	display: inline-block;
}
.paginator a {
	padding: 2px 8px;
	background: var(--primary);
	text-decoration: none;
	color: #fff !important;
    display: inline-block;
}
.paginator a:hover {
    background: var(--secondary);
}
.paginator a.prev,
.paginator a.next {
    font-weight: normal;
}

.search-school th {
    padding-top: 8px !important;
}

#search_form {
    padding: 30px 30px 30px 30px;
    margin: 20px 0;
    border: solid 1px var(--primary);
    border-radius: 10px;
}
#search_form h1 {
    font-size: 16px;
    color: var(--primary);
    margin-top: -40px;
    background: #fff;
    width: fit-content;
    margin-bottom: 24px !important;
    font-weight: 600;
    padding: 0 2px;
    margin-left: -2px;
}
#search_form .filters {
    display: grid;
    justify-content: space-between;
    grid-template-columns: auto auto auto;
    gap: 20px;
}
#search_form .filters.cols-1 {
    grid-template-columns: 100% !important;
}
#search_form .filters.cols-2 {
    grid-template-columns: 50% 50%;
}
#search_form .filters.cols-3 {
    grid-template-columns: auto auto auto;
}
#search_form .filters.cols-4 {
    grid-template-columns: auto auto auto auto;
}
#search_form .filters.fixed-label label {
    width: 90px;
}
@media (max-width: 1240px) {
    #search_form .filters {
        grid-template-columns: 50% 50% !important;
    }
    #search_form .filters label {
        width: 90px;
    }
}
@media (max-width: 768px) {
    #search_form .filters {
        grid-template-columns: auto !important;
    }
    #search_form .filters label {
        width: 90px;
    }
}

#search_form.toggle {
    display: none;
}
#search_form .filters .filter-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
#search_form input,
#search_form select,
#search_form .select2-selection {
    border-color: var(--text-color);
    border-radius: 0px;
    width: 180px;
}
#search_form select {
    width: 194px;
}
#search_form .filters.cols-1 input,
#search_form .filters.cols-2 input {
    width: 240px;
}
#search_form .filters.cols-1 select,
#search_form .filters.cols-2 select,
#search_form .select2-selection {
    width: 254px;
}
#search_form .filter-item.work-times select {
    width: 107px;
}
#search_form .filter-item.open-now {
    margin: 12px 0 0 100px;
}
@media (max-width: 768px) {
    #search_form .filter-item.open-now {
        margin: 0 0 0 100px;
}
}
#search_form input[type=checkbox] {
    width: auto !important;
    position: relative;
    top: 2px;
}
#search_form .checkboxes {
    display: contents;
}
#search_form .checkboxes label {
    width: auto !important;
    margin-left: -4px;
}
#search_form .select2-container .select2-selection--single {
	height: 30px !important;
    padding: 1px 0 0 0 !important;
}

#search_form .select2-SFKZ {
    width: calc(50% + 274px) !important;
}
@media (max-width: 1240px) {
    #search_form .select2-SFKZ {
        width: calc(100% - 90px) !important;
    }
}
@media (max-width: 768px) {
    #search_form .select2-SFKZ {
        width: 254px !important;
    }
}
#search_form .filter-school .select2,
#search_form .filter-school .select2-selection {
    width: 100% !important;
}

#search_buttons {
    display: flex;
    width: 100%;
    margin-bottom: 40px;
    gap: 10px;
}
#search_buttons .primary {
    margin-left: auto;;
}
#search_buttons input {
    width: 180px;
}

/* ------------------------------------ */
/* Search Results Firmenbuch            */
/* ------------------------------------ */

.search-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.search-result {
    padding: 16px 24px;
    border: solid 1px var(--border-gray);
    background-color: var(--bg-gray);
}
.search-result .search-result-header {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 2px var(--border-dark);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.search-result .search-result-header h2 {
    margin: 0 !important;
    font-size: 16px;
    line-height: 16px;
}

.statement-header {
    display: flex;
    margin: 10px 0 30px auto;
}
.statement-header > div {
    display: flex;
    margin-left: auto;
}

.statement-header a.pdf-link,
.search-result .search-result-header a.pdf-link {
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
    margin-top: -24px;
    margin-left: 32px;
}
.statement-header a.pdf-link:hover:before,
.search-result .search-result-header a.pdf-link:hover:before {
    filter: brightness(1.2);
}
.statement-header a.pdf-link:before,
.search-result .search-result-header a.pdf-link:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url(../img/icon-pdf.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    left: -32px;
    top: 16px;
}

.search-result .search-result-content {
    display: grid;
    gap: 8px;
    grid-template-columns: 25% 25% 25% 25%;
}
@media (max-width: 1240px) {
    .search-result .search-result-content {
        grid-template-columns: 50% 50%;
    }
}
@media (max-width: 768px) {
    .search-result .search-result-content {
        grid-template-columns: 50% 50%;
    }
}
.search-result .search-result-content label {
    font-weight: 600;
}
.search-result .search-result-content > div {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------ */
/* Search Results Firmenverzeichnis     */
/* ------------------------------------ */

.search-result-header .status {
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
}
.search-result-header .status.active {
    color: var(--green);
}
.search-result-header .status.inactive {
    color: var(--warning);
}
.search-result-links {
    display: flex;
    gap: 20px;
}

.search-result-firmenverzeichnis .search-result-content {
    grid-template-columns: 50% calc(50% - 200px) 200px;
}
@media (max-width: 1240px) {
    .search-result-firmenverzeichnis .search-result-content {
        grid-template-columns: 50% 50%;
    }
}
@media (max-width: 768px) {
    .search-result-firmenverzeichnis .search-result-content {
        grid-template-columns: 100%;
    }
}

.search-results-col-justify {
	justify-content: space-between;
    gap: 20px;
}
@media (max-width: 768px) {
    .search-results-col-justify {
        gap: 8px;
    }
}
.open-hours-col {
    position: relative;
}
.open-hours-item {
    white-space: nowrap;
}
.open-hours-item > span:nth-child(1) {
    display: inline-block;
    width: 90px;
}
.is-open {
    display: none;
    border: solid 1px var(--green);
    color: var(--green);
    font-weight: normal;
    font-size: 13px;
    padding: 2px 12px;
    margin-top: 8px;
    width: fit-content;
}
@media (max-width: 768px) {
    .is-open {
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
.search-results-businesses {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------ */
/* Details Firmenverzeichnis            */
/* ------------------------------------ */

.firm-title {
    margin-top: 10px;
    margin-bottom: 32px;
    position: relative;
}
.firm-title h1 {
    font-size: 16px;
    line-height: 16px;
    margin: 0 0 4px 0;
    font-weight: 600;
    color: var(--text-color);
}
.firm-title span {
    font-size: 16px;
    line-height: 16px;
    margin: 0 8px 4px 0;
}

.firm-data {
    display: grid;
    grid-template-columns: 170px auto;
    gap: 2px;
    margin-bottom: 8px;
}
.firm-data span,
.firm-data div {
    font-weight: 600;
}

a.print {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 4px;
    right: 0px;
    height: 28px;
    font-size: 16px;
    line-height: 16px;
    border: solid 1px var(--primary);
    border-radius: 4px;
    padding: 2px 12px 2px 12px;
    cursor: pointer;
}
a.print:hover {
    border: solid 1px var(--secondary);
}
a.print:hover:after {
    filter: brightness(1.2);
}
a.print:after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../img/icon-print.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 0px;
    right: -8px;
}

body.details .text-box {
    margin-top: 10px;
    margin-bottom: 24px;
}

body.details .work-times {
    margin: 20px 0;
}
.table-display tbody tr td {
    padding: 8px 10px;
    font-weight: 600;
}
.table-mobile thead tr th span:nth-child(1) {
    display: block;
}
.table-mobile thead tr th span:nth-child(2) {
    display: none;
}
@media (max-width: 768px) {
    .table-mobile thead tr th span:nth-child(1) {
        display: none;
    }
    .table-mobile thead tr th span:nth-child(2) {
        display: block;
        min-width: 34px;
    }
}

body.details .special-cols-3 {
    grid-template-columns: auto auto auto; justify-content: start; gap: 52px;
}

.certificates {
    display: grid;
    grid-template-columns: 100%;
    justify-content: space-between;
    gap: 20px;
}
.certificates > div {
    text-align: center;
    margin: auto;
}
.certificates > div img {
    display: block;
    height: 58px;
    width: auto;
    margin: 0 auto 4px auto;
}
.certificates > div span {
    display: block;
    font-weight: 600;
}

@media (max-width: 768px) {
    a.print {
        display: none !important;
    }
    .firm-data {
        grid-template-columns: 140px auto;
    }
    body.details .special-cols-3 {
        grid-template-columns: auto auto auto; justify-content: start; gap: 22px;
    }
}

/* ------------------------------------ */
/* iframe                               */
/* ------------------------------------ */

body.iframe #header,
body.iframe .nav-global {
    display: none !important;
}

/* ------------------------------------ */
/* Print                                */
/* ------------------------------------ */

@media print {
    
    a.print,
    #user-status,
    .nav-global {
        display: none !important;
    }
    #header {
        padding-top: 0 !important;
    }
    
    formset,
    #content > div {
        break-inside: avoid;
    }
    
}