:root{
    --qc-main-color:#0d6efd;
    --qc-border-width:1px;
    --qc-background-color:#FFFFFF;
    --qc-question-color:#0d6efd;
    --qc-question-size:20px;
    --qc-answer-color:#969696;
    --qc-right-answers-color:#14bb14;
    --qc-answer-border-width:0px;
    --qc-answer-size:20px;
    --qc-display-other-answers:block;
    --qc-card-animation:true;
}

/********Всплывающее окно информации о вопросе********/
.popover-body{
    padding: 0.5rem;
    color: var(--qc-question-color);
    box-shadow: 0px 0px 9px 0px rgb(0 0 0 / 50%);
    border-radius: 4px;
}


.qPop-Link{
    color:var(--qc-question-color);
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::after {border-bottom-color: var(--qc-background-color);}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-start>.popover-arrow::after {border-left-color: var(--qc-background-color);}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before, .bs-popover-bottom>.popover-arrow::before {border-bottom-color: var(--qc-main-color);}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before, .bs-popover-start>.popover-arrow::before {border-left-color: var(--qc-main-color);}



/*******Стили карточки вопроса*******/
.qCard{
    border-color:var(--qc-main-color) !important;
    border-width:var(--qc-border-width) !important;
    background-color:var(--qc-background-color) !important;
    border-radius:10px;
    padding:0;
    position: relative;
    padding-bottom: 5px;
    box-shadow: 0 0 7px 0px rgb(0 0 0 / 50%);
    border: 1px solid;
    z-index: 2;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.qCQuestion{
    color:var(--qc-question-color) !important;
    padding:5px;
    font-weight: bold;
    display: block; 
    font-size:var(--qc-question-size) !important; 
    border-bottom: 1px solid;
    margin-top: -5px; 
    margin-bottom: 5px;
    border-color: inherit;
}

.qCAnswer{
    color:var(--qc-answer-color) !important;
    display:var(--qc-display-other-answers);
    border-bottom: 1px solid var(--qc-main-color);
    border-width:var(--qc-answer-border-width);
    margin-inline: 5px;
    font-size:var(--qc-answer-size) !important; 
    border-color: inherit;
}

.qCAnswer:last-child{
    border-bottom: 0;
}

.qCRightAnswer{
    color:var(--qc-right-answers-color) !important;
    font-weight: bold;
    display:block;
}


.qCInfo{
    display: block;
    width: 35px;
    height: 35px;
    background: var(--qc-background-color) !important;
    position: relative;
    border-radius: 50%;
    float: right;
    margin-top: -17px;
    margin-right: -12px;
}

.qCInfo > button{
    color: var(--qc-question-color) !important;
    border-color: var(--qc-main-color) !important;
    width: 35px;
    height: 35px;
    position: relative;
    border-radius: 50%;
}

.qCInfo > button:hover{
    color:var(--qc-background-color) !important;
    background-color:var(--qc-question-color) !important;
    border-color:var(--qc-main-color) !important;
}

.qCInfo > button:focus{
    box-shadow: none;
}

.qCInfo > button > svg {
    position: absolute;
    top: -1px;
    left: -1px;
}

.qType4 > svg > path{
    fill: var(--qc-background-color) !important;
    fill-opacity: 1;
    stroke:currentColor;
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 1;
}

.qType4 > svg > text{
    font-size: 60px;
    color: currentColor;
}

.qType5{
    border: 1px solid;
}

.qNumber{
    border: 1px solid; 
    width: 24px; 
    text-align: center; 
    margin: -1px;
    display:none;
}

.qType5 .qNumber{
    display: inline-block; 
}

.qType5Inner{
    margin: 8px;
    margin-left: 25px;
}

.qType5Inner > div{
    display: inline-block;
    position:relative;
    z-index: 1;
    max-width: calc( 100% - 22px );
}

.qType5Inner > div::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    opacity: .08; 
    z-index: -1;
    background: var(--qc-right-answers-color) !important;
}

.noBold{
    font-weight: normal !important;
}


/******Стили настроек*****/

.settingsCard{
    border-color:var(--qc-main-color);
    background-color:var(--qc-background-color) !important;
}

.settingsMain{
    border-bottom: 1px solid;
    border-color:var(--qc-main-color);
}

.settingsSectionTitle{
    font-weight: bold;
    font-size: larger;
    color: var(--qc-question-color);
}

.settingsPropName{
    display: inline-block;
    vertical-align: super;
    color: var(--qc-question-color);
}

.settingsQ{
    color:var(--qc-question-color) !important;
}

.settingsAns{
    color:var(--qc-answer-color) !important;
}

.settingsAnsR{
    color:var(--qc-right-answers-color) !important;
}

.form-switch > input{
    float: none !important;
    margin-left: 0rem !important;
}



.myQColor{
    color: var(--qc-question-color);
}











/*************New***************/

.qPopover{
    position: absolute;
    display: block;
    max-width: 276px;
    font-size: .875rem;
    background: var(--qc-background-color);
    background-clip: padding-box;
    transform: translate(0, -51%);
    width: 186px;
    inset: 50% 47px auto auto;
    border: 0px solid var(--qc-main-color);
    animation-duration: .3s;
    animation-name: slidein;
    animation-timing-function: ease-in;
}

.popover-arrow{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(8px,-8px) rotate(45deg);
    background: inherit;
    border: inherit;
    width: 15px;
    height: 15px;
    border-left: 0;
    border-bottom: 0;
    border-radius: 1px 2px 1px 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 107%, 0% 7%);
    box-shadow: 0px 0px 9px 0px rgb(0 0 0 / 50%);
}

.qPopover .btn-settings{
    top: 5px;
    right: 5px;
    left:auto;
}


.qPopover .errorBtn{
    background: var(--qc-background-color);
    color: var(--bs-danger);
    padding: 3px;
    border: 1px solid;
    margin-top: 4px;
    width: 100%;
    
}

.qPopover .errorBtn:hover{
    background: var(--bs-danger);
    color: var(--qc-background-color);
}

@keyframes slidein {
    from {
        clip-path: circle(11% at 116% 50%);
    }
    to {
        clip-path: circle(155% at 116% 50%);
    }
}


/************Error report, Settings**************/



.bugReport .qContainer{
    min-height: 200px;
    background: var(--background-color);
    border-radius: 15px;
    box-shadow: inset 0 0 4px 0px rgb(0 0 0 / 50%);
    padding: 0.7rem;
    margin-inline: -0.3rem;
}

.bugReport .qContainer > div{
    margin-block: -1.5rem;
}

.bugReport .errorType{
    margin: 0.5rem 0.2rem;
}

.bugReport .errorType input{
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    border: 1px solid rgba(0,0,0,.25);
    margin-right: 3px;
}

.bugReport .comment{
    margin-top: 0.2rem;
    font-style: italic;
    font-size: small;
    background: honeydew;
    border-radius: 10px;
}

.bugReport .sendReport, .settingsMenu .saveSettings{
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-top: 0.5rem;
}

.settingsMenu{
    background: var(--qc-background-color);
}

.settingsMenu .themes{
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

.settingsMenu .themes .title{
    display: inline-block;
    padding-inline: 0.3rem;
    background: #49555e38;
    border-radius: 6px 6px 0 0;
    font-weight: 500;
    font-size: larger;
    color:var(--qc-question-color);
}

.settingsMenu .themes .box{
    background: #49555e38;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    padding: 0.3rem;
    border-radius: 0 6px 6px 6px;
}

.settingsMenu .themes .themeButton{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 1px solid;
    margin-inline: 0.2rem;
    position: relative;
    padding: 0.25rem;
    color:var(--theme-color1);
    background:var(--theme-color2);
    border-color:var(--theme-color1);
    transition: transform .15s ease-in, box-shadow .15s ease-in;
}

.settingsMenu .themes .themeButton:hover{
    transform: scale(1.1);
    box-shadow: 0 0 5px 0px rgb(0 0 0 / 40%);

}

.cardThemeLight{
    --theme-color1:#0d6efd;
    --theme-color2:white;
    
}

.cardThemeDark{
    --theme-color1:white;
    --theme-color2:#212121;
    
}

.cardBW{
    --theme-color1:black;
    --theme-color2:white;
}

.cardGreen{
    --theme-color1:#003d0a;
    --theme-color2:#d7eed8;
}

.cardPurple{
    --theme-color1:#412183;
    --theme-color2:#d1c4e9;
}

.cardBlue{
    --theme-color1:white;
    --theme-color2:#0054d1;
}

.settingsMenu .colorInput{
    width: 26px;
    height: 26px;
    padding: 1px;
    margin-left: 0.5rem;
    cursor: pointer;
}

.settingsMenu .settingsList{
    display: flex;
    flex-wrap: wrap;
    padding-inline: 0.3rem;
}

.settingsMenu .settingsList > div{
    padding-right: 0.7rem;
    padding-bottom: 0.25rem
}

.settingsMenu .rangeDiv{
    display: flex;
    flex-grow: 1;
    height: fit-content;
}

.settingsMenu .settingsRange{
    width: auto;
    flex-grow: 1;
    min-width: 140px;
    margin-left: 0.5rem;
    cursor: pointer;
}

.switch {
    width: 2em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba%280, 0, 0, 0.25%29'/></svg>");
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
    float: none !important;
    margin-left: 0rem !important;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
    appearance: none;
    -webkit-print-color-adjust: exact;
    cursor:pointer;
}

.switch:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-position: right center;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
}




/*******Images******/

.qCard img{
    max-height: 70px !important;
    display: inline-block !important;
    border-radius: 5px;
    border: 1px solid;
    margin-left: .3rem;
    margin-right: 0.3rem;
    cursor:pointer;
    transition: all 0.2s ease-in;
}

.qCard img:hover{
    transform:scale(1.02);
    box-shadow: 0 0 3px rgb(0 0 0 / 50%);
}

.scaledTestImageDiv{
    border-radius: 4px;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    padding:0;
}

.scaledTestImageDiv > div{
    overflow: scroll;
}

.scaledTestImageDiv label{
    width: 100%;
    text-align: center;
}

.scaledTestImageDiv input{
    width: calc(100% - 1rem );
    display: block;
    margin: 0.5rem 0.5rem 0 0.5rem;
}

.scaledTestImage{
    cursor:pointer;
}