@import url('fonts/noto-sans.css');
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    /*color: #666666;*/
    font-size: 14px;
    line-height: 20px;
    /*background-color: hsla(0,0%,100%,0.70);*/
    background-color: rgba(255,255,255,1);
    color: #2E383F;
}

html {
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../assets/bg_projectlist.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../assets/bg_projectlist.jpg', sizingMethod='scale')";*/
}

* {
    box-sizing: border-box;
}

button, .btn {
    border-radius: 0 !important;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    color: #fff;
    background-color: #c51718 !important;
    border-color: #c51718 !important;
    padding-top: 7px;
    padding-bottom: 7px;
    font-weight: bold;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active {
    color: #fff;
    background-color: rgba(93,8,85,1) !important;
    border-color: rgba(93,8,85,1) !important;
    padding-top: 7px;
    padding-bottom: 7px;
    font-weight: bold;
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    background-color: rgba(93,8,85,1) !important;
    border-color: rgba(93,8,85,1) !important;
    padding-top: 7px;
    padding-bottom: 7px;
    font-weight: bold;
    border-radius: 0 !important;
}

#header {
    height: 100px;
    margin-bottom: 20px;
}

.main-wrapper {
    width: 1280px;
    margin: 0 auto;
}

#title {
    font-size: 50px;
    color: #ffffff;
}

#icon-logout {
    cursor: pointer !important;
}

    #icon-logout a {
        text-decoration: none;
        color: #000;
    }

#IconContainer ul {
    list-style: none;
}

#IconContainer li {
    padding-left: 10px;
}

.passingshower {
    background-color: rgba(000,058,129,1) !important;
}
.passingshower30 {
    background-color: rgba(180,183,213,1) !important;
}

.passingshower60 {
    background-color: rgba(108,119,171,1) !important;
}

.form-group label {
    font-weight: bold;
}

.chocolate {
    background-color: rgba(105,49,034,1);
}

.vibrantSommer {
    background-color: rgba(104,176,034,1);
}

.vibrantSommer30 {
    background-color: rgba(217,232,195,1);
}

.vibrantSommer60 {
    background-color: rgba(176,208,130,1);
}

.heavyMetal30 {
    background-color: rgba(209,220,224,1);
}

.passingshowerColor {
    color: rgba(000,058,129,1) !important
}

.symrisered {
    background-color: rgba(197,023,024,1);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999 !important;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #999 !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #999 !important;
}

.borderContainer {
    border: none;
    border-radius: .35rem;
    -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, .06);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, .06);
    /*background-color: rgba(255,255,255,1);*/
    padding-top: 5px;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.fa-minus-circle {
    color: rgba(197,023,024,1);
    margin-left: 5px;
    cursor: pointer;
}

.fa-plus-square {
    color: rgba(104,176,034,1);
    margin-top: 20px;
    cursor: pointer;
}

#toast-container {
    margin-top: 25%;
}

.questobject.matrix {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

@media screen and (min-width: 1000px) {
    .mobile-radio-button {
        display: none;
    }
}


@media (max-width: 999px) {
    .matrixButton .m2mrow {
        width: 100% !important;
        height: 455px !important;
        width: 100% !important;
        height: auto !important;
    }



    .matrixButton .m2mcol {
        height: 70px !important;
        width: 100% !important;
        margin-bottom:8px;
    }

    .matrixButton.qtten {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        height: 100% !important;
        margin: 20px 0;
    }

    #container-nextprev .btn {
        width: 100%;
    }

    .m2colContent {
        font-size: 18px;
    }

    .matrix .mrow {
        display: flex;
        flex-wrap: wrap;
        width: 100% !important;
    }

        .matrix .mrow .mcol {
            width: 100% !important;
            flex: 1 0 100%;
        }

    .rowLabelLeft {
        width: 100% !important;
        flex: 1 0 100%;
        font-size: 18px;
    }

    .matrix .colLabels {
        flex-wrap: nowrap;
        overflow: auto;
        white-space: nowrap;
        width: 100% !important;
        margin-bottom: 10px;
    }

    .matrix .leftCorner {
        width: 100% !important;
        float: none;
    }

    .matrix .colLabel {
        font-size: 12px;
        min-width: 25%;
        white-space: nowrap;
        overflow: visible;
        border: 1px solid #eee;
        margin: 0 !important;
        margin-left: -1px !important;
        margin-bottom: -1px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        white-space: normal;
        height: auto !important;
        min-height: 70px;
    }

        .matrix .colLabel .colLabelContent {
            top: 0 !important;
            transform: translateY(0) !important;
        }

    .matrix {
        margin: 0 !important;
    }

        .matrix .rowLabelLeft {
            float: none !important;
            padding: 15px !important;
            height: auto !important;
        }

        .matrix .rowLabelLeft {
            height: 50px !important;
            background: #fff;
            margin: 16px 0 0px !important;
        }


        .matrix .mcol {
            position: relative;
            height: 50px !important;
            background-color: #fff !important;
            border: 1px solid #2e383f;
            color: #2e383f;
            border-radius: 8px;
            margin-bottom: 8px !important;
        }
            .matrix .mcol [data-mode="radio"]:before {
                position: absolute;
                left: 50px;
                top: 50%;
                transform: translateY(-50%);
            }

    .matrix .mcol .radio {
        background-position: 16px 50%;
    }
            .matrix .mcol .radio-choosed {
                background-position: 16px 50%;
            }

        /*.matrix .col-1 [data-mode="radio"]:before {
            content: '1 Does not fit at all';
        }
        .matrix .col-2 [data-mode="radio"]:before {
            content: '2 Does not fit';
        }
        .matrix .col-3 [data-mode="radio"]:before {
            content: '3 Rather does not fit';
        }
        .matrix .col-4 [data-mode="radio"]:before {
            content: '4 Neither nor';
        }
        .matrix .col-5 [data-mode="radio"]:before {
            content: 'Rather fits';
        }
        .matrix .col-6 [data-mode="radio"]:before {
            content: '6 Fits';
        }
        .matrix .col-7 [data-mode="radio"]:before {
            content: '7 Fits very well';
        }*/

    .mobile-radio-button {
        padding: 15px 50px !important;
        display: inline-block !important;
    }

    span.mobile-radio-button br {
        display: none;
    }


    html, body {
        min-height: auto;
        height: auto;
    }
    #matrix-1-colLabels{
        display:none;
    }
    .matrix .choosed {
        background-color: #fff !important;
        color: #2E383F !important;
    }
    .matrix .mrow.checkboxclass {
        flex-direction: row-reverse;
        width: auto !important;
        width: auto;
        flex-wrap: nowrap;
    }
        .matrix .mrow.checkboxclass .mcol {
            width: 100px;
            flex: 1 0 60px;
            right: 0;
        }
          
        .matrix .mrow.checkboxclass .rowLabelLeft {
            width: 100px !important;
            flex: 1 0 280px;
            font-size: 20px !important;
            margin: 0 !important;
        }
    .questobject {
        padding-bottom:80px;
    }

    .questobject.matrix {
        display: block;
    }


   
}
.matrixButton .choosed {
    background-color: #2E383F !important;
    color: #fff !important;
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
    font-size: 16px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select:focus,
    textarea:focus,
    input:focus {
        font-size: 16px;
    }
}

.matrix-gray-background {
    background: #e7e7e7;
}