/* open-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ url('../fonts/open-sans-v34-latin-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
}

body {
    font-size: 14px;
}

html, body, h1, h2, h3, h4, h5 {
    font-family: "Open Sans", sans-serif
}


/** Main Nav and Manin Bar **/
#main-head-bar, #main-nav {
    background-color: var(--light-blue);
    color: var(--main-txt-form-color);
}

#main-nav {
    background-color: var(--purple);
    z-index: 3;
    width: 280px;
    padding-bottom: 24px;
}

.nav-section {
    padding: 8px 0 0 0;
}

.nav-section-head {
    color: var(--light-blue1);
}

.nav-section-head p {
    padding: 8px 16px;
    margin: 0;
}

.nav-section-head p > i {
    padding-right: 8px;
    color: var(--light-blue1);
    font-size: 1.4em;
}

.nav-section-content {
    padding: 0 8px;
}

.nav-section-content > div {
    padding: 0 0 0 16px !important;
}

.nav-section-content a {
    text-decoration: none;
    padding: 8px 0px 8px 24px;
    color: var(--main-white-color);
    display: block;
}

#main-head-bar {
    position: fixed;
    top: 0;
    width: calc(100% - 280px);
    z-index: 4;
    height: 48px;
    border-bottom: 1px solid var(--light-blue2);
    margin-left: 280px;
}

.head-avatar {
    background-image: url("../media/images/ORF8060.jpg");
    width: 40px;
    height: 40px;
    background-size: 260px;
    background-position: -27px -20px;
    border-radius: 30px;
    cursor: pointer;
    display: block;
}

.profile-link {
    color: var(--purple);
}

.notification-center {
    cursor: pointer;
}

div[data-close], .notification-center > div {
    width: 400px;
    height: 200px;
    position: fixed;
    right: 5px;
    top: 42px;
    background: var(--main-white-color);
    border: 1px solid var(--light-blue2);
    z-index: 4;
    border-radius: 5px;
    padding: 16px;
    display: none;
}

.notification-center > div {
    right: 112px;
    min-height: 300px;
    max-height: 350px;
    overflow-y: scroll;
}

.notification-center .notification-center-head {

}

.notification-center .notification-center-head p {
    font-size: 1.2em;
    color: var(--purple);
}

.notification-center ul li.read {
    font-weight: normal;
}

.notification-center ul li.unread {
    font-weight: bold;
}

.current-node {
    font-weight: bold;
    background: var(--purple-lighter2);
}

/** Tab page **/
.tab-bar {
    border-bottom: 2px solid var(--light-blue1);
    padding-bottom: 8px;
}

.tab-bar button {
    background-color: var(--grey);
}

.tab-container .tab:not(:first-child) {
    display: none;
}

.tab-bar .select-group {
    margin-right: 16px;
}

/** LOGO **/
.logo img {
    max-width: 256px;
    padding: 2px 12px;
}

/** Main Content **/
.main-content {
    background-color: var(--main-content-bg-color);
    min-height: 100vh;
    padding: 80px 0;
    position: relative;
}

/** DASHBOARD > NEWSFEED **/
.newsfeed-head {
    padding: 32px 0;
    margin: 0 16px;
    border-bottom: 2px solid var(--grey);
}
.newsfeed-head h1 span{
    color: var(--purple);
    font-weight: bold;
}
.newsfeed-content p{
    text-align: justify;
}

.feed-outer {
    margin: 8px;
}

.feed-inner {
    background: var(--light-blue1);
    height: 100%;
    padding-bottom: 16px;
}

.feed-content {
    text-align: justify;
}

.feed-modal-headline {
    background: var(--purple);
    color: var(--main-white-color);
}

.feed-modal-content {
    text-align: justify;
    padding: 8px 32px;
}

/** dashboard FORMS **/
.dashboard-form-year {
    font-size: 3em;
    font-weight: bold;
}

.form-box-head h3 {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--purple);
}

.form-box-footer {
    bottom: 0;
    position: absolute;
    width: 100%;
    background: var(--main-btn-color);
    color: var(--main-nav-txt-color);
}

.form-box-content {
    padding-top: 20px;
}

.dashboard-form-outerbox {
    background-color: var(--main-white-color);
    margin-bottom: 32px;
}

.dashboard-form-box-content {
    position: relative;
}

.form-progress {
    width: 100%;
    height: 20px;
    border: 2px solid var(--light-blue2);
}

.form-progress-bar {
    height: 100%;
    background: var(--light-blue1);
    width: 5%;
}


#overlay {
    display: none;
}

.overlay-inner {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    background: var(--main-overlay-bg-color);
}


/** Form-Page Submission **/
.form-content {
    padding-top: 48px;
}

#page .submission.w3-content{
    margin-left: 320px;
    position: relative;
}

#page .form-logo-small{
    position: absolute;
    top: 0;
    width: 100%;
    background-color: var(--dsw-gruen);
}

#form-nav {
    background-color: var(--grey);
    color: var(--main-txt-form-color);
    z-index: 4;
    width: 320px;
    top: 48px;
    margin-left: 280px;
}

#form-nav.openform-nav{
    top: 0;
    padding: 8px 0;
}

.sidebar-right {
    background-color: var(--main-content-bg-color);
    z-index: 5;
    width: 320px;
    padding: 80px 0;
}

.form-nav-btn-group {
    margin: 10px;
    text-decoration: none;
}
.form-nav-btn-group a {

}
#form-nav .form-nav-btn {
    display: flex;
    align-items: center;
    text-align: left;
    white-space: normal;

}

#form-nav .form-nav-btn a {

    font-weight: bold;
}

#form-nav .form-nav-btn.w3-button {

}

#form-nav .form-nav-btn.w3-button:hover {

}

#form-nav ul li {
    padding: 8px 0;
    font-size: 0.9em;
}

#form-nav ul li i {
    font-size: 0.6em;
    padding-right: 8px;

}

#form-nav ul li a {
    text-decoration: underline;
}

#form-nav .form-nav-number {
    padding-right: 20px;
}

.submission .form-footer {
    height: 48px;
    position: fixed;
    left: 260px;
    top: 0;
    z-index: 4;

}

.submission .form-footer-content {
    height: 100%;
    color: var(--main-txt-form-color);
}

.submission fieldset > legend ~ .input-container.Checkbox,
.submission .fieldset-group > .input-container.Checkbox,
    /*.submission fieldset > legend ~ .input-container.Radiobutton,*/
.submission .fieldset-group > .input-container.Radiobutton,
.submission fieldset > legend ~ .input-container.Textbox,
.submission .fieldset-group > .input-container.Textbox {
    display: block;
}

.submission fieldset > legend ~ .input-container.Radiobutton {
    /*display: block;*/
}

.submission fieldset > legend ~ .input-container.Checkbox .input-outer,
.submission .fieldset-group > .input-container.Checkbox .input-outer,
.submission .fieldset-group > .input-container.Radiobutton .input-outer,
.submission fieldset > legend ~ .input-container.Radiobutton .input-outer {
    width: 50%;
    padding: 16px 0;
}

.submission fieldset > legend ~ .input-container.Checkbox > label,
.submission .fieldset-group > .input-container.Checkbox > label,
.submission .fieldset-group > .input-container.Radiobutton > label,
.submission fieldset > legend ~ .input-container.Radiobutton > label {
    font-weight: bold;
}

.submission .input-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.submission .input-group .break {
    flex-basis: 100%;
    height: 0;
    margin: 4px 0;
}

.submission .radio-group, .submission .check-group {
    align-items: center;
    margin-bottom: 8px;
    position: relative;
    padding: 0 8px;

}


.submission .radio-group.has-other .other, .submission .check-group.has-other .other {
    width: 300px;
}

.submission .radio-group.has-other label, .submission .check-group.has-other label {
    width: 100px !important;

}

.submission .radio-group label, .submission .check-group label {
    padding-left: 8px;
    width: 400px !important;

}

.submission input[type="checkbox"][data-checkedprev] {
    border: 3px solid azure;
    outline: 3px solid var(--prev-value);
}
.submission input[type="checkbox"][data-checkedprev] + label::after,.submission input[type="radio"][data-checkedprev] + label::after {
    font-family: FontAwesome;
    content: "\f046";
    padding-left: 8px;
    background-color: var(--light-blue5);
    font-size: 14px;
    color: var(--main-white-color);
    padding: 3px;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    display: inline-block;
    padding-left: 4px;
    padding-top: 1px;
    margin-left: 8px;
}
.submission .input-container {
    padding: 0 10px;
    flex-grow: 3;
}

.submission .focus input[type="text"].other{
    width: 80% !important;
}

.submission .input-container[data-required] > .label label::after {
    content: "*";
    color: var(--main-error-color);
}

.submission .input-container[data-required] input[type="text"],
.submission .input-container[data-required] input[type="email"],
.submission .input-container[data-required] input[type="radio"],
.submission .input-container[data-required] input[type="checkbox"],
.submission .input-container[data-required] select,
.input-container[data-required] input[type="number"] {
    border: 0px solid var(--green) !important;
    outline: 2px solid var(--green) !important;
}

.submission .fieldset-group {
    padding: 8px 12px 20px 12px;
}

.submission fieldset {
    margin-bottom: 40px;

}

.submission .fieldset-group > label {
    display: block;
    padding: 8px 0;
}

.submission .fieldset-group > label + label {
    padding: 8px 20px;
}

.submission fieldset > legend ~ .input-container, fieldset > legend ~ .fieldset-group > .input-container,
.submission fieldset > legend ~ .calc-group .fieldset-group > .input-container {
    display: flex;
    padding: 8px 10px;
    align-items: baseline;
    margin-bottom: 4px;
}

.submission fieldset > legend ~ .input-container label, fieldset > legend ~ .fieldset-group > .input-container label,
.submission fieldset > legend ~ .calc-group .fieldset-group > .input-container label {
    width: 300px;
}

.submission fieldset > legend ~ .input-container .input-outer {
    width: 200px;
}

.submission fieldset > legend ~ .input-container.Textbox .input-outer {
    width: 100%;
}

.submission fieldset .fieldset-group:nth-child(2n+1) {
    background-color: var(--fieldgroup-odd-color);
}

.submission fieldset legend h2 {
    margin: 4px 0;
}

.submission legend {
    padding: 0 20px;
    background-color: var(--fieldgroup-odd-color);
    color: var(--main-txt-form-color);
}

.submission .fieldset-group legend {
    background-color: inherit;
    padding: 0 20px 0 0;
}

.submission fieldset legend ~ .input-container {

}
/**.submission fieldset legend ~ .input-container[data-required], .input-container[data-required] {
    background-color: var(--dsw-gruen-background-color-light);
}
.submission .fieldset-group legend ~ .input-container[data-required] {
    background-color: var(--dsw-gruen-background-color-light);
}**/

.submission .input-container .label {
    width: 300px;
}
.submission .input-container.Textbox .label {
    width: 100%;
    padding: 16px 0 8px 0;
}

.submission .input-group .input-container .label {
    width: auto;
    padding: 16px 0 8px 0;
}

.submission .textbox-group textarea {
    width: 100%;
    height: 80px;
}

.submission .textbox-group textarea {
    width: 100%;
    height: 80px;
}

.submission .textbox-group textarea#comment {
    width: 100%;
    height: 120px;
}

.submission .info {
    font-size: 1rem;
    vertical-align: super;
    padding: 8px 0 0 4px;
    cursor: pointer;
}

span.last-entry {
    color: var(--prev-value);
    margin-left: 8px;
    display: block;
}
.input-group span.last-entry {
    margin-top: 8px;
    color: var(--prev-value);
}

.last-year-data {
    background: var(--light-blue2);
    margin-top: 6px;
    padding: 3px;
}

.submission .select-group select {
    background-color:white;
    padding-left: 8px;
}

.submission .dropdown-content {
    width: 300px;
    position: relative;
}
.submission .dropdown-options {
    background: white;
    max-height: 400px;
    overflow: hidden;
    overflow-y: hidden;
    overflow-y: hidden;
    overflow-y: scroll;
    position: absolute;
    width: 100%;
    top: 43px;
}
.submission .dropdown-options p {
    margin: 0;
    padding: 8px;
    cursor: pointer;
    display: none;
}


@media (max-width:1024px){
    .w3-sidebar.w3-collapse{
        display:none
    }
    .w3-sidebar.openform-nav{
        left: -280px;
        display: block;
    }
    #page .submission{
        padding-left: 40px!important;
        padding-top: 128px!important;
    }

    .w3-main{
        margin-left:0!important;margin-right:0!important
    }
    .w3-auto{
        max-width:100%
    }
}
@media (min-width:calc(1024px + 320px)){
    #page .submission.w3-content{
        margin-left:calc((100vw / 2) - 320px);
    }
}


/** Input, select, classic-form **/

.select-group .label, .input-group label {

}

.select-group .label.label-bg {
    background-color: var(--purple);
    color: var(--main-white-color);
    padding: 0 8px;
}

.classic-form {
    padding: 16px;
}

.classic-form fieldset {
    border-radius: 8px;
}

.classic-form .select-group select, .select-group select {

    border-bottom-color: var(--light-blue4);
    background-color: var(--light-blue1);
    padding-left: 8px;
}

.classic-form .check-group {
    margin: 0;
}

.classic-form .check-group > label {
    width: auto !important;
    padding-right: 12px;
}

.classic-form .check-group input[type="checkbox"] {
    margin: 0;
}

.classic-form .input-group .input {
    width: 100%;
}

.classic-form .input-group textarea {
    width: 100%;
    height: 120px;
}

.classic-form .input-group input,
.classic-form .input-group .input input,
.classic-form .input-group textarea {
    border-bottom-color: var(--light-blue4);
    background-color: var(--light-blue1);
}

.classic-form .input-group,
.classic-form .select-group,
.classic-form .radio-group,
.classic-form .check-group {
    align-items: center;
    margin-bottom: 16px;
    position: relative;
}

.classic-form .check-group {
    margin: 0;
}

.classic-form .check-group .checkbox label {
    padding-right: 12px;
}

.classic-form .input-group label,
.classic-form .select-group .label,
.classic-form .radio-group .label,
.classic-form .check-group .label {
    position: relative;
}

.classic-form .input-group label,
.classic-form .select-group label,
.classic-form .radio-group label,
.classic-form .check-group > label {
    display: block;
    overflow: hidden;
}

.classic-form .form-container {
    margin-bottom: 32px;
}

.classic-form .required > .label label::after,
.classic-form .required > label::after {
    content: "*";
    color: var(--main-error-color);
}

.classic-form .form-container .input-group {
    width: 50%;
}

.classic-form .form-container .input-group,
.classic-form .form-container .select-group {
    margin: 0 16px;
}

.classic-form .form-container .input-group:first-child,
.classic-form .form-container .select-group:first-child {
    margin-left: 0;
}

.classic-form .form-container .input-group:last-child,
.classic-form .form-container .select-group:last-child {
    margin-right: 0;
}

.classic-form .form-container .select-group .label,
.classic-form .form-container .input-group label,
.classic-form .form-container .check-group > label {
    padding: 0;
    font-size: 1.2em;
    color: var(--purple);
}

.classic-form .form-container .input-group.w20,
.classic-form .form-container .select-group.w20 {
    width: 20%;
    max-width: 20%;
}

.classic-form .form-container .input-group.w40,
.classic-form .form-container .select-group.w40 {
    width: 40%;
    max-width: 40%;
}

.classic-form .form-container .input-group.w70,
.classic-form .form-container .select-group.w70 {
    width: 70%;
    max-width: 70%;
}

.classic-form .form-container .input-group.w80,
.classic-form .form-container .select-group.w80 {
    width: 80%;
    max-width: 80%;
}

.classic-form .form-container .input-group.w100,
.classic-form .form-container .select-group.w100 {
    width: 100%;
    max-width: 100%;
}


/** BENCHMARKING FORM **/
.input-icon, .input-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.input-icon input[type="radio"], .input-text input[type="checkbox"] {
    -webkit-appearance: none;
}

.input-icon label, .input-text label {
    height: 150px;
    width: 200px;
    border: 2px solid var(--purple);
    margin: 16px 16px;
    border-radius: 10px;
    position: relative;
    color: var(--purple);
    transition: 0.5s;
    cursor: pointer;

}

.input-text label {
    height: 60px;
    width: auto;
    padding: 0 8px;
}

.input-icon .fa {
    font-size: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
}

.input-icon label > span, .input-text label > span {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, 80%);
    text-align: center;
    white-space: nowrap;
    font-size: 16px;
    font-weight: bold;
}

.input-text label > span {
    position: relative;
    top: -6%;
    left: 50%;
    white-space: normal;
    display: inline-block;

}

.input-icon input[type="radio"]:checked + label, .input-text input[type="checkbox"]:checked + label {
    background-color: var(--purple);
    color: #ffffff;
}

.b-select {
    display: flex;
}

.b-select-span {
    margin: auto;
}

.b-select-span span {
    font-size: 16px;
    color: var(--purple);
}

.b-select .select-wrapper {
    position: relative;
    width: auto;
    margin: auto;
}

.b-select .select-wrapper::before {
    color: var(--purple);
    font-size: 20px;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 10px;
}

.b-select select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 3px solid var(--purple);
    border-radius: 3px;
    color: var(--purple);
    cursor: pointer;
    font-size: 16px;
    height: 40px;
    outline: none;
    padding-left: 10px;
    width: 100%;
    font-family: "Open Sans";

    background-color: white;
}

.b-select select option {
    color: #666;
}

.b-select select::-ms-expand {
    display: none;
}

.b-select select:focus::-ms-value {
    background-color: transparent;
}

.b-select-hidden {
    display: none;
}


.has-checkbox-dropdown.is-active {
    height: calc(100vh + 800px);
}

.checkbox-dropdown {
    width: 450px;
    border: 3px solid var(--purple);
    border-radius: 3px;
    padding: 10px;
    position: relative;
    margin: 0 auto;
    font-weight: bold;
    color: var(--purple);
    user-select: none;
}

/* Display CSS arrow to the right of the dropdown text */
.checkbox-dropdown:after {
    content: '';
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: var(--purple);
    top: 50%;
    right: 10px;
    margin-top: -3px;
}

/* Reverse the CSS arrow when the dropdown is active */
.checkbox-dropdown.is-active:after {
    border-bottom-color: var(--purple);
    border-top-color: #fff;
    margin-top: -9px;
}

.checkbox-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%; /* align the dropdown right below the dropdown text */
    border: inherit;
    border-top: none;
    left: -1px; /* align the dropdown to the left */
    right: -1px; /* align the dropdown to the right */
    opacity: 0; /* hide the dropdown */
    background: var(--main-white-color);
    transition: opacity 0.4s ease-in-out;
    height: 0;
    overflow: scroll;
    overflow-x: hidden;
    pointer-events: none; /* avoid mouse click events inside the dropdown */
    z-index: 1;
}

.is-active > .checkbox-dropdown-list {
    opacity: 1; /* display the dropdown */
    pointer-events: auto; /* make sure that the user still can select checkboxes */
    height: 350px;
}

.checkbox-dropdown-list li label {
    display: block;
    border-bottom: 1px solid silver;
    padding: 10px;

    transition: all 0.2s ease-out;
}

.checkbox-dropdown-list li label:hover {

}

.checkbox-dropdown-list input {
    margin: 0 8px 0 0;
}

/** BENCHMARKING TABLE RESULT **/
.result-table-outer {
    padding: 0 18px;
}

.result-table {

}

.result-table thead {
}

.result-table thead th {
    text-align: center;
    border-right: 1px solid #ccc;
    background-color: var(--light-blue2);
    position: sticky;
    z-index: 1;
}

.result-table tbody {
}

.result-table tbody td {
    max-width: 200px;
    width: 200px;
    text-align: right;
    border-right: 1px solid #ccc;
    min-width: 200px;
}

.result-table tbody th {
    border-right: 1px solid #ccc;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    position: sticky;
    z-index: 1;
}
/** TABLE EXPORT ERFASSUNGSDATEN **/
#table-export{
    max-height: calc(100vh - 270px);
}
#table-export thead th{
    position: sticky;
    top: 0;
    background-color: #fff;
}
/** FORM Exception Styling **/
input.input-error {
    border-color: var(--main-error-color) !important;
    border-width: 3px !important;
}

.classic-form .errorMSG {
    font-size: 0.8em;
    display: inline-block;
}

.classic-form div.submit {
    width: 100%;
    margin-top: 24px;
    position: relative;
}

.submit .wait {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: var(--grey);
    opacity: .7;

}

/** LAYER **/
.layer {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 4;
    background-color: rgba(25, 25, 25, 0.6);
    display: none;
}

/** helper classes **/
.display-flex {
    display: flex;
}

.flex-align-right {
    justify-content: flex-end;
}

.flex-center {
    height: 100%;
    align-items: center;
}

.flex-rest {
    flex-grow: 2;
}

.bold {
    font-weight: bold;
}

.icons-padding {
    padding-right: 8px;
    padding-left: 8px;
}

.display-center {
    display: table;
    margin: auto;
}

/** Custom Button Style **/
button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

.button {
    background-color: var(--grey);
    cursor: pointer;
    transition: opacity .2s ease-in-out;
}

.button:hover {
    opacity: .8;

}

.button-blue {
    background: var(--blue);
    color: var(--main-white-color);
}

.button-green {
    background: var(--green);
    color: var(--main-white-color);
}

.button-green:hover {
    background: var(--green);
    color: var(--main-white-color) !important;
}

.button-red {
    background: var(--red);
    color: var(--main-white-color);
}

.button-red:hover {
    background: var(--red);
    color: var(--main-white-color) !important;
}

a.button {
    padding: 8px 16px;
    text-decoration: none;
    display: block;
}

button i.fa {
    padding-right: 8px;
}

button.button.new::after {
    content: 'NEU!';
    background-color: var(--red);
    position: absolute;
    top: -6px;
    padding: 3px;
    border-radius: 26px;
    font-size: 9px;
    font-weight: bold;
}
/** MAINTENANCE PAGE*/
.maintenance {
    background: var(--main-bg-color);
    padding: 64px 0;
}

.maintenance .logo {
    text-align: center;
}

.maintenance-content {
    background: var(--main-white-color);
    padding: 32px 0;
    text-align: center;
}

/** LOADING PAGE OVERLAY **/
#loading {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 1;
    background-color: #fff;
    z-index: 99;
}

#loading-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    color: var(--purple);
}

/** MESSAGE ON TOP **/
#messageontop {

}

/** SLIDER **/
.mySlides {
    display: none;
}

.mySlides img {
    padding: 40px;
    background-color: var(--purple);
}

/** HELP CENTER MESSAGING */
.help-icon-outer {
    position: fixed;
    width: 60px;
    height: 60px;
    right: 10px;
    background: var(--purple);
    bottom: 10px;
    border-radius: 40px;
    cursor: pointer;
}

.help-icon .fa {
    font-size: 26px;
    padding: 18px 17px;
    color: white;
}

/** INFO PANEL ON TOP **/
body.panel-on-top {
    padding-top: 80px;
}

body.panel-on-top #main-head-bar,
body.panel-on-top #form-nav,
body.panel-on-top .form-footer,
body.panel-on-top div[data-close],
body.panel-on-top .notification-center > div {
    top: 80px;
}

body.panel-on-top #main-nav,
body.panel-on-top #form-nav {
    padding-bottom: 104px;
}

.on-top {
    margin: 0;
    z-index: 9;
    position: fixed;
    width: 100%;
    top: 0;
    max-height: 80px;
    height: 80px;
}

/** TABLE **/
table {
}

table thead {
}

table th {

}

table tbody {
}

table tr {
}

table tr td {
    vertical-align: middle !important;
}

/** FORM EDIT **/

.form-edit-outer {
    margin-bottom: 32px;
}

.form-edit0 {
    margin-bottom: 16px;
}

.form-edit0 th:nth-child(1), .form-edit0 td:nth-child(1),
.form-edit1 th:nth-child(1), .form-edit1 td:nth-child(1),
.form-edit2 th:nth-child(1), .form-edit2 td:nth-child(1) {
    width: 100px;
}

.form-edit0 th, .form-edit0 td {
    width: 300px;
}

.form-edit1 th, .form-edit1 td {
    width: 300px;
}

.form-edit2 th, .form-edit2 td {
    width: 300px;
}

.form-edit1 {
    margin-left: 16px;
    margin-bottom: 16px;
}

.form-edit2 {
    margin-left: 32px;
    margin-bottom: 16px;
}

.form-edit0 thead tr {
    background-color: var(--light-blue4) !important;
    cursor: pointer;
}

.form-edit1 thead tr {
    background-color: var(--light-blue3) !important;
    cursor: pointer;
}

.form-edit2 thead tr {
    background-color: var(--light-blue2) !important;
}
.form-edit-outer .tc-small{
    max-width: 40px!important;
    text-align: center;
}

.form-edit0 input, .form-edit1 input, .form-edit2 input {
    width: 100%;
}

.form-edit0 textarea, .form-edit1 textarea, .form-edit2 textarea {
    width: 100%;
}

/** COLORS **/
.bg-main-color {
    background-color: var(--purple);
    color: var(--main-white-color);
}

.text-purple {
    color: var(--purple);
}
.text-green {
    color: var(--green);
}

@media (max-width: 992px) {
    .submission .form-footer {
        left: 0;
    }
}