@import "../assets/css/fonts.css";
    :root {
            --font-primary: 'proxima_novaregular';
            --font-secondary: 'Catamaran SemiBold';
            --font-awesome: 'Font Awesome 5 Pro';
            --font-size-b1: 26px;
            --font-size-b2: 20px;
            --font-size-b3: 14px;
            --font-size-b4: 12px;
            --font-size-b5: 10px;
            --font-size-b6: 8px;
            --h1: 3rem;
            --h2: 2.5rem;
            --h3: 2rem;
            --h4: 1.8rem;
            --h5: 1.4rem;
            --h6: 1.2rem;
    }


.main-section{ display: block;}
 .sidebar-container .bar{ width: 92px; height: 92px; background-color: #fff; margin: 1rem 0; border-radius: 16px;
    border: 2px solid #D92A68; display: flex; align-items: center; justify-content: center; font-family: var(--font-primary:);}
 .sidebar-container .bar p{ margin-bottom: 0;}
 .sidebar-container .bar p small{ font-size: 1rem; display: block; font-weight: 600; text-align: center;
    color: #D92A68;}
 .sidebar-container .bar  a{ color: #D92A68; text-decoration: none; font-weight: 600; }

.main-bar  .progress{ background-color: #d9d9d9; height: 1.2rem; border-radius: 12px;}
.main-bar  .progress .progress-bar{background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-color: #D92A68; background-size: 1rem 1rem;}


.outer-progress  .progress{ background-color: #d9d9d9; height: 1.2rem; border-radius: 12px;}
.outer-progress  .progress .progress-bar{background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-color: #D92A68; background-size: 1rem 1rem;}

.main-section  .btn.back-link{background-color: #D92A68; color: #fff;   position: relative; z-index: 9999;width: 42px;height: 42px;display: inline-block;font-size: 16px;margin-top: 1rem;border-radius: 8px;}
.main-section .back-link::before{ content: "\f177"; font-family: "Font Awesome 7 Pro"; font-weight: 900; width: 100%; height: 100%; line-height: 42px; position: absolute; left: 0; top: 0;}
.main-section  .btn.back-link div{ display: none;}


.question.comman_view .container-fluid  form{ max-width: 80%; margin: 0 auto; text-align: center;}

.question.comman_view .container-fluid .question{  border: 1px solid #555555; background-color: #fff; border-radius: 16px;  text-align: center; padding: 2rem; margin: 1rem 0; color: #4E4E4E; font-size: 1.5rem;}
.question.comman_view  .option-list{ padding: 0; list-style: none; margin: 0 -15px;}
.question.comman_view  .option-list li{ display: inline-block; width: 50%; padding: 0 15px; margin: 1rem 0;}
.question.comman_view  .option-list li label{ display: block; text-align: center; margin-bottom: 0;
border: 1px solid #D92A68;color: #D92A68; padding: 1rem;background-color: #fff;border-radius: 40px; cursor: pointer;}

.question.comman_view  .option-list li input:checked ~ label,.question.comman_view  .option-list li label:hover{ background-image: linear-gradient(93.7deg, #D92A68 -0.1%, #A30F43 99.89%); color: #fff;}
.question.comman_view  .option-list li input[type=radio]{ display: none;}