/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
/* common */
:root, [data-bs-theme=light] {
    --qmsol-dark-green: #128855;
    --qmsol-dark-green-rgb: 18 136 85;
    --qmsol-light-green: #acd7c3;
    --qmsol-light-green-rgb: 172, 215, 195;
    /*Bootstrap Variablen überschreiben*/
    --bs-link-color: var(--qmsol-dark-green);
    --bs-link-color-rgb: var(--qmsol-dark-green-rgb);
    --bs-link-hover-color: var(--qmsol-light-green);
    --bs-link-hover-color-rgb: var(--qmsol-light-green-rgb);
}

h1 {
    /*font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;*/
    text-align: center;
    font-size: 150%;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    /*text-decoration: underline;*/
    color: #128855;
    word-wrap: break-word;
}

h2 {
    background-color: #acd7c3;
    color: #128855;
    font-size: 130%;
    padding: 5px;
    margin: 5px 0 0 0;
    font-weight: bold;
}

h3 {
    text-align: center;
    font-size: 125%;
    font-weight: bold;
    text-transform: uppercase;
    color: #128855;
}


h4 {
    text-align: center;
    text-transform: uppercase;
}

a {
    color: #128855;
}
/* do questionnaire */
.thumbnail {
    border: #128855 solid 2px;
    margin-bottom: .5rem;
}

.unisol-media-container {
    position: relative;
}

.unisol-media-container .top-right {
    position: absolute;
    top: 2px;
    right: 2px;
}

.unisol-media-container .top-right img {
    vertical-align: bottom;
}

.unisol-frame {
    padding: 0 5px;
}

.unisol-form {
    padding: 0 5px;
}

.unisol-form-button-line input[type=submit] {
    margin: 5px 0;
}

.unisol-form-button-line a {
    margin: 5px 0;
}

.unisol-sub-form {
    padding: 0 5px;
    background-color: #e5f4ed;
    width: 100%;
    margin: 0;
}

    .unisol-sub-form .form-group {
        margin: 0.5rem;
    }

.unisol-pos-bottom {
    position: absolute;
    bottom: 1px;
}


.abs-center {
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.form-group {
    padding-left: 5px;
    padding-right: 5px;
}

.form-control:focus {
    border-block: var(--qmsol-dark-green);
    box-shadow: 0 0 0 0.25rem rgba( 18, 136, 85, 0.25);
}

.form-select:focus {
    border-block: var(--qmsol-dark-green);
    box-shadow: 0 0 0 0.25rem rgba( 18, 136, 85, 0.25);
}



.login-card {
    margin: 0 auto;
    padding: 40px 60px;
    width: 390px;
}

.error-card {
    margin: 0 auto;
    padding: 40px 60px;
    width: auto;
    max-width: 800px;
}

.spinner-border {
    margin-left: 5px;
}

.validation-summary-errors ul{
    list-style-type: none;
    padding-left: 0;
}

.validation-summary-errors ul li {
    text-align: center;
}

.field-validation-error {
    color: red;
    font-size:smaller;
}
.cursor-pointer {
    cursor: pointer;
}
.tolower {
    text-transform: lowercase;
}
@media (min-width: 992px) {
    .col-lg-6-m {
        flex: 0 0 auto;
        width: 49%;
    }
}

/*.selected-elements {
    padding: 5px;
}*/

/*.available-elements {
    padding: 5px;
}*/
.element-container {
    padding: 5px;
    min-height: 200px;
    max-height: 450px;
    overflow-y: scroll;
}

.questions {
    width: 100%;
}

.question-content {
    border: 1px solid #4cb482;
    margin-top: 4px;
}

.question-content-view {
    border: 1px solid #4cb482;
    margin-top: 2px;
    min-height: 30px;
}

.element-line {
    border: 1px solid #4cb482;
}

.element-line-insert-remove {
    border: 1px solid #4cb482;
    margin: 2px;
}

.element-line-insert-remove img {
    margin-top: -3px;
}

.element-line-disabled{
    border: 1px solid #5f5f5f;
    background-color: #eeeeee;

}

.question-edit {
    border: 1px solid #4cb482;
    margin: 2px;
}

.question-edit img {
    margin-top: -4px;
}

.question-category {
    font-size: 8pt;
    margin-bottom: -6px;
    margin-top: -2px;
}
.element-line-info {
    margin: 2px 6px;
}
.question-description {
    font-size: 75%;
}
.question-ownid {
    color: gray;
    font-size: 75%;
    padding-right: 5px;
}
.mover {
    padding-top: 1px;
    margin: 1px 1px 1px 3px;
}
.mover .up {
    margin-top: 2px;
    cursor: pointer;
}
.mover .down {
    margin-bottom: 2px;
    cursor: pointer;
}

.insert {
    cursor: pointer;
}

.remove {
    cursor: pointer;
}

.small {
    font-size: small;
}
.smaller {
    font-size: smaller;
}
.bgc-lightorange {
    background-color: linen;
}
/* Bootstrap-select v1.14.0-beta3 workarounds: close button not styled correctly: class 'close' doesn't exist in bootstrap 5, popover-header has no padding */
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
.dropdown-menu .popover-header {
    padding: .5rem .75rem;
}
.data-import-type {
    width: 110px;
}
.mapping-name {
    font-size: smaller;
    width: 90px;
    margin-right: 2px;
    padding: 3px;
}
.element-line-dropdown {
    width: 90px;
    margin-right: 2px;
}

.credentials-username {
    float: left;
    margin: 3px;
    padding: 3px;
    background: #e5f4ed;
    border-radius: 4px
}

/* loading */
.isloading-wrapper.isloading-right {
    margin-left: 10px;
}

.isloading-overlay {
    position: relative;
    text-align: center;
}

    .isloading-overlay .isloading-wrapper {
        display: inline-block;
        margin: 0 auto;
        padding: 10px 20px;
        top: 10%;
        z-index: 9000;
    }

.cssload-speeding-wheel {
    width: 49px;
    height: 49px;
    margin: 0 auto;
    border: 3px solid black;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: cssload-spin 875ms infinite linear;
    -o-animation: cssload-spin 875ms infinite linear;
    -ms-animation: cssload-spin 875ms infinite linear;
    -webkit-animation: cssload-spin 875ms infinite linear;
    -moz-animation: cssload-spin 875ms infinite linear;
}

.cssload-speeding-wheel-sm {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: cssload-spin 875ms infinite linear;
    -o-animation: cssload-spin 875ms infinite linear;
    -ms-animation: cssload-spin 875ms infinite linear;
    -webkit-animation: cssload-spin 875ms infinite linear;
    -moz-animation: cssload-spin 875ms infinite linear;
}

@keyframes cssload-spin {
    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-spin {
    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-spin {
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-spin {
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.accessrights-checkboxes {
    float: right;
    margin-left: 10px;
}

/* protocol new div design */
.unisol-protocol-main-head .col-lg-4,
.unisol-protocol-main-head .col-lg-8,
.unisol-protocol-main-head .col-lg-12,
.unisol-protocol-main-head .col-sm,
.unisol-protocol-main-head .col-md {
    padding: 0;
}

.unisol-protocol-head-row {
    margin: 0;
}

.unisol-protocol-head-row .col-lg-4,
.unisol-protocol-head-row .col-lg-8,
.unisol-protocol-head-row .col-lg-12,
.unisol-protocol-head-row .col-sm,
.unisol-protocol-head-row .col-md {
    padding: 0;
}

.unisol-protocol-headline {
    font-weight: bold;
    border-bottom: solid 3px black;
    text-transform: uppercase;
}

.unisol-protocol-head-text {
    padding: 10px 10px 10px 0;
}

#questionnaire_prefill .unisol-protocol-container {
    width: 100%;
}

.unisol-protocol-container div.unisol-protocol-row:nth-of-type(2n) {
    background-color: rgba(0, 0, 0, 0.05);
}

.unisol-protocol-row {
    padding: .3rem .3rem .3rem 0;
    margin: 0;
    border-bottom: 2px solid white;
}

.unisol-protocol-header {
    padding: .3rem 10px;
    margin: 0;
    border-bottom: 2px solid white;
    background-color: lightgray !important;
    font-weight: bold;
}

.unisol-protocol-col {
    padding: 0 10px 0 10px;
}

.unisol-answer-col, .unisol-question-col {
    padding-bottom: 5px;
    border-bottom: 1px solid lightgray;
    margin-bottom: 5px;
}

.unisol-protocol-container div.unisol-protocol-row:nth-of-type(2n) .unisol-answer-col, .unisol-protocol-container div.unisol-protocol-row:nth-of-type(2n) .unisol-question-col {
    border-bottom: 1px solid white;
}

.unisol-protocol-col .form-group {
    margin-bottom: 5px;
}

.unisol-protocol-col .unisol-file-group {
    margin-top: 5px;
}

.unisol-protocol-col .unisol-location-group {
    margin-top: 5px;
}

.unisol-protocol-col textarea {
    min-width: 150px;
}

.unisol-protocol-col select {
    min-width: 150px;
}
.unisol-protocol-col-checkbox{
    max-width: 20px;
}

.unisol-audit-col {
    width: 100%;
    margin: 5px 10px 0 10px;
    border-top: 1px solid white;
}

.unisol-background-light-color {
    background-color: #e5f4ed;
}

.unisol-bg-color-darkred {
    background-color: darkred !important;
}

.unisol-bg-color-magenta {
    background-color: magenta !important;
}

.unisol-bg-color-lightgray {
    background-color: lightgray !important;
}

.unisol-bg-color-yellow {
    background-color: yellow !important;
}

.unisol-bg-color-orange {
    background-color: orange !important;
}

.unisol-bg-color-red {
    background-color: red !important;
}

.csv-table thead {
    background-color: #128855;
}

.unisol-bg-color-green {
    background-color: lightgreen !important;
}


.bg-danger td {
    color: white;
}

.bg-danger .unisol-selectline {
    color: lightgray;
}

.unisol-op-bg-color-lightgray {
    background-color: rgba(211, 211, 211, 0.5) !important;
}

.unisol-op-bg-color-yellow {
    background-color: rgba(255, 255, 0, 0.5) !important;
}

.unisol-op-bg-color-orange {
    background-color: rgba(255, 193, 7, 0.5) !important;
}

.unisol-op-bg-color-blue {
    background-color: rgba(0, 0, 128, 0.05) !important;
}

.unisol-op-bg-color-red {
    background-color: rgba(255, 100, 100, 0.5) !important;
}

.unisol-op-bg-color-lightgreen {
    background-color: rgba(144, 238, 144, 0.5) !important;
}

.nobr {
    white-space: nowrap;
}

.custom-file-label[data-browse]::after {
    content: attr(data-browse);
}

.custom-file-label {
    overflow: hidden;
}

.form-check-inline .custom-control-label {
    margin-right: 10px;
}

.input-group-prepend {
    display: inline-table;
}

.input-group {
    margin-bottom: 2px;
}

.unisol-remove-file-selection {
    /*display: flex;*/
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.125);
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
}

    .unisol-remove-file-selection:hover {
        background-color: rgba(255, 255, 255, 0.5);
        border-style: solid;
        border-width: 1px;
        border-color: white;
    }

.unisol-remove-location {
    display: flex;
    cursor: pointer;
}

.unisol-form-aligned-button {
    cursor: pointer;
    margin-left: 5px;
    height: 38px;
}

.unisol-form-group-button {
    cursor: pointer;
    margin-top: 32px;
}

.unisol-selectline {
    /*letter-spacing: .038rem;*/
    cursor: pointer;
    color: #128855;
}

    .unisol-selectline:hover {
        /*letter-spacing: normal;*/
        /*font-weight: bold;*/
        text-decoration: underline;
    }

.form-row.unisol-sub-form > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* loading */
.isloading-wrapper.isloading-right {
    margin-left: 10px;
}

.isloading-overlay {
    position: relative;
    text-align: center;
    color: #ffffff;
}

.isloading-overlay .isloading-wrapper {
    display: inline-block;
    margin: 0 auto;
    padding: 10px 20px;
    top: 10%;
    z-index: 9000;
}

    .isloading-overlay .isloading-wrapper-text {
        display: inline-block;
        margin: 0 auto;
        padding: 10px 20px;
        top: 10%;
        background-color: #444444;
        opacity: 0.6;
        z-index: 9000;
    }


.cssload-speeding-wheel-text {
    width: 49px;
    height: 49px;
    margin: 0 auto;
    border: 3px solid #ffffff;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: cssload-spin 875ms infinite linear;
    -o-animation: cssload-spin 875ms infinite linear;
    -ms-animation: cssload-spin 875ms infinite linear;
    -webkit-animation: cssload-spin 875ms infinite linear;
    -moz-animation: cssload-spin 875ms infinite linear;
}

.cssload-speeding-wheel-sm {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: cssload-spin 875ms infinite linear;
    -o-animation: cssload-spin 875ms infinite linear;
    -ms-animation: cssload-spin 875ms infinite linear;
    -webkit-animation: cssload-spin 875ms infinite linear;
    -moz-animation: cssload-spin 875ms infinite linear;
}

@keyframes cssload-spin {
    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-spin {
    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-spin {
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-spin {
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* collapsible */
.collapsible h2 {
    cursor: pointer;
}

.arrow-r {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #128855;
    margin-right: 10px;
    margin-left: 5px;
    margin-top: 5px;
    float: left;
    display: inline-block;
}

.arrow-d {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #128855;
    margin-bottom: 5px;
    margin-right: 8px;
    margin-top: 9px;
    float: left;
    display: inline-block;
}

.collapse-container > :nth-child(odd) {
    padding: 5px;
    background-color: gray;
    background-image: linear-gradient(bottom, gray 14%, #969696 70%);
    background-image: -o-linear-gradient(bottom, gray 14%, #969696 70%);
    background-image: -moz-linear-gradient(bottom, gray 14%, #969696 70%);
    background-image: -webkit-linear-gradient(bottom, gray 14%, #969696 70%);
    background-image: -ms-linear-gradient(bottom, gray 14%, #969696 70%);
    border: 1px solid black;
    margin: auto;
}

.collapse-container > :nth-child(even) {
    background-color: white;
    display: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid black;
}

    .collapse-container > :nth-child(even) p {
        padding: 0px 5px;
    }

.collapse-container > :nth-child(odd):hover {
    cursor: pointer;
    -moz-user-select: none;
    /* mozilla browsers */
    -khtml-user-select: none;
    /* webkit browsers */
}

.collapse-container > :first-child {
    border-radius: 4px 4px 0px 0px;
}

.collapse-container > :nth-last-child(2) {
    border-radius: 0px 0px 3px 3px;
}

/* drag&drop */
.dragable {
    cursor: move;
}
.drop-target-selected {
    height: 100%;
}
/* loggedin */
.unisol-loggedin {
    margin: 0 2px;
    white-space: nowrap;
}

/* language selection */
#langselector a {
    margin: 5px;
    color: white;
}

.questions {
    width: 100%;
}

.question-content {
    border: 1px solid #4cb482;
    margin-top: 4px;
}

.question-content-view {
    border: 1px solid #4cb482;
    margin-top: 2px;
    min-height: 30px;
}

.questionnaire-question {
    margin-left: 4px;
    margin-right: 4px;
}

.questionnaire-question-category {
    font-size: 8pt;
    margin-bottom: -6px;
    margin-top: -2px;
}

.questions-used {
    padding: 5px;
    margin: 5px 5px 5px 5px;
}

#show-all-questions {
    padding: 5px;
    margin: 5px;
    /*height: 400px;*/
    overflow-y: scroll;
}

#all-report-questions {
    height: 550px;
    margin: 5px;
    overflow-y: scroll;
}

#all-report-filter-questions {
    height: 300px;
    margin: 5px;
    overflow-y: scroll;
}

#question-variables-list {
    max-width: 100%;
    margin-top: 10px;
    max-height: 30vh;
    overflow-y: scroll;
}

#question-analysis-list {
    max-width: 100%;
    margin-top: 10px;
    max-height: 30vh;
    overflow-y: scroll;
}

@media (max-width: 1024px) {
    #show-all-questions {
        height: 800px;
    }
}

@media (min-width: 1024px) {
    #show-all-questions {
        position: fixed;
        right: 150px;
        top: 240px;
        bottom: 50px;
    }
}

#question-selection-list {
    max-width: 100%;
    margin-top: 10px;
    max-height: 50vh;
    overflow-y: scroll;
}

#outer-droptarget {
    min-height: 480px;
}

.questions-used #outer-droptarget {
    min-height: 200px;
}

#edit-formula-question-content .questions-used {
    border: 1px solid gray;
    margin: 5px 0;
}

.empty-questionnaire-info {
    font-size: 200%;
    font-weight: bold;
    color: darkgray;
    text-align: center;
    width: 100%;
    padding-top: 70px;
    height: 200px;
    z-index: -1;
    display: none;
}

.questionnaire-question-description {
    font-size: 75%;
}

.questionnaire-question-info div {
    margin: 2px;
}

.questionnaire-question-info div img {
    margin-top: -2px;
}


.modal-header {
    background-color: #e5f4ed;
    color: #128855;
}

.modal-body .form-group {
    margin-right: 10px;
}

.modal-footer .btn {
    min-width: 70px;
}

.unisol-question-display {
    margin-right: 0;
}

.edit-question {
    cursor: pointer;
    border-color: #128855;
    border-style: solid;
    border-width: 1px;
    margin:3px;
}

.form-check-input:checked {
    color: #fff;
    border-color: #128855;
    background-color: #128855;
}

.form-check-input:focus {
    color: #fff;
    border-color: #128855;
    border-block: var(--qmsol-dark-green);
    box-shadow: 0 0 0 0.25rem rgba( 18, 136, 85, 0.25);
}


/*bootbox modal*/
.modal-body {
    max-height: 400px;
    overflow-y: auto;
}


.page-link {
    color: #128855;
}

.page-item.active .page-link {
    color: #fff;
    background-color: #128855;
    border-color: #128855;
    box-shadow: none;
}

.page-item.hover .page-link {
    border-color: #4cb482
}

/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
    color: #fff;
    background-color: #128855;
    border-color: #4cb482; /*set the color you want here*/
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #4cb482;
    border-color: #128855; /*set the color you want here*/
}


table.dataTable.table-bordered {
    border-top-style: solid;
    border-top-color: rgb(230, 230, 230);
    border-top-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(230, 230, 230);
    border-bottom-width: 1px;
}