@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --bgprm: #C75AED;
}
* {margin: 0;padding: 0;font-family: "Roboto", sans-serif;box-sizing: border-box;}

/*-----------------Mock Test Body------------------*/
.ccc_exam_body{background-color: aliceblue;}
.f-MockTestBody-row{padding: 0px 0px 0px 0px;}
.f-MockTestBody-header1{padding:110px 0px 0px 0px; background-color:mediumslateblue;}
@media only screen and (max-width: 991px){.f-MockTestBody-header1{padding:70px 0px 0px 0px;}}

.f-MockTestBody-header2{padding:30px 0px 10px 0px; background-color:aliceblue;}
.f-MockTestBodyH1{font-size: 3rem; font-weight: 700;margin-left: 100px;color: darkblue}
.f-MockTestBodyH3{margin-left: 100px;color:darkblue}
.f-MockTestBody {background-color:transparent;padding: 0px 0px 0px 0px;}
.btn_exam {--c: var(--bgprm);color: #ffffff;font-size: 16px;background-image: linear-gradient(45deg,darkblue,red);text-transform: uppercase;font-weight: bold;letter-spacing: 0.1em;text-align: center; position: relative;overflow: hidden;z-index: 1;cursor: pointer;border:none;}
.btn_exam:hover{background-image: linear-gradient(45deg,red,darkblue);} 
#mainButton {font-size:20px;padding:16px 50px;border-radius: 50px; margin-left:40%;margin-top:40px;
margin-bottom: 0px;}

/*-----------------Mock Test Rules Box------------------*/
.f-MockTestRules-header{padding:0px;margin-left: 30%; margin-top: 20px;margin-bottom: 40px;}
.f-MockTestRules-box {width:60%;background-image: linear-gradient(45deg,red,darkblue);border-radius:10px;transition: all 0.3s ease;color: #fff;display: none;}
.f-MockTestRules-title {height: 60px;width: 100%;border-bottom: 1px solid lightgrey;display: flex;align-items:center;padding:0 30px;border-radius: 5px 5px 0 0;font-size: 20px;font-weight: 600;}
.f-MockTestRules-list {padding: 15px 30px;}
.info {margin: 2px 0;font-size: 15px;}
.info span {font-weight: 700;color: yellow;}

/*-----------------Mock Test Exit Coutinue Button------------------*/
.buttons {height:80px;display:flex;align-items:center;justify-content:flex-end;padding:0px 0px; border-top: 1px solid lightgrey;}
.buttons button {margin:0 5px;font-size:18px;font-weight:500;cursor:pointer !important;border-radius: 5px;transition: all 0.3s ease;color:#870E93;background-color: #fff;padding: 0px 0px;}
.buttons button:hover {color: #fff;background-color: #870E93;transform: scale(1.05);}

/*-----------------Mock Test Question Body------------------*/
.f-MockTest-Question-Body,.f-MockTest-Result-Body {display: none;}
.f-QuesResult-Container{ background-color:aliceblue;padding: 100px 0px 40px 250px;margin-top: 0px;}
.f-MockTestQuestion-Box{color:red;padding:15px 20px;margin-bottom: 0px;}
.f-MockTestQuestion-Box,.f-MockTestResult-Box {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.f-MockTestQuestion-Box,.f-MockTestResult-Box {width:75%;background: #fff;border-radius: 5px;transition: all 0.3s ease;}
.f-MockTestQuestion-Box header {position: relative;z-index: 1;height: 70px;padding: 0 30px;background: #fff;border-radius: 5px 5px 0px 0px;display: flex;align-items: center;justify-content: space-between;box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1);}
.f-MockTestQuestion-Box .title {font-size: 20px;font-weight: 600; color:#72097C;}
.timer {color:red;background-color:transparent; box-shadow: 5px 0px 15px 0px rgba(244, 204, 252 ,0.8);width: 200px;height: 45px;padding: 0 20px;border-radius: 30px;display: flex;align-items: center;justify-content: space-between;}
.time_left_txt {font-weight: 400;font-size: 17px;user-select: none;}
.timer_sec {font-size: 18px;height: 30px;width: 45px;line-height: 30px;text-align: center;
  border-left: 2px solid red;color:red;user-select: none;box-shadow: }
.time_line {position: absolute;bottom: 0px;left: 0px;height: 5px;width: 100%;transition: width 1s linear;background-color: green;}
.qasection {padding: 25px 30px 20px 30px;background: #fff;height:80%;}
.que_text{font-size: 15px;font-weight: 600;color:#C02BCF;text-align: center;}
.option_list {padding: 5px 0px;}
.containerr {display: flex;flex-direction: column;align-items: center;justify-content: center;}
.option_list .option:last-child {margin-bottom: 0px;}
.option:not(:last-child) {margin-bottom: 0px;}

[type="radio"] {z-index: -1;position: absolute;opacity: 0;}
[type="radio"]:checked ~ label {border-color: var(--bgprm);background-color:#F4A5FB;color:#500558;}
[type="radio"]:checked ~ label:before {will-change: transform, border-width, border-color;-webkit-animation: bubble 1s ease-in;animation: bubble 1s ease-in;}
[type="radio"]:checked ~ label:after {will-change: opacity, box-shadow;-webkit-animation: sparkles 700ms ease-in-out;animation: sparkles 700ms ease-in-out;}
[type="radio"]:checked ~ label > span {will-change: transform;border: 0;background-image: linear-gradient(to top right, var(--bgprm), #4363ee);-webkit-animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);}

.option label {position: relative;font-size: 15px;color:#7E0B89; display: grid;align-items: center;width:350px;height: 42px;text-align: left;padding: 10px 15px;border-radius: 0px;border: 1px solid var(--bgprm);cursor: pointer;background-color: transparent;transition: all 300ms ease-in;}

.option label:hover {border-color: #E330F5;background-color:#F4A5FB;}
.option label:before, .option label:after {position: absolute;left: 10px;border-radius: 50%;content: "";}
.option label:before {margin: -2rem;border: 20px solid red;width: 2rem;height: 2rem;transform: scale(0);}
.option label:after {margin: -0.18rem;width: 0.875rem;height: 0.875rem;}

@keyframes radio {100%,10.5% {transform: scale(0);}}
@keyframes bubble {100% {transform: scale(2);border-color:red;border-width: .1rem;}
  35%,100% {transform: scale(1);border-color:red;border-width:0;}}
@keyframes sparkles {10%,50% {opacity: 0;transform: scale(0);}
  10% {opacity: 1;transform: scale(2.2);
  }
}

/*----------FOR MOCK TEST ANSWER SHOW AND HIDE-----------*/
.hide {opacity: 0;top: calc(50% + 8em);} 
.show {opacity: 1;top: calc(50% + 6em);}

.answerd_text {font-size: 15px;background-color: #EEFEF1; color:#1DB53B;border:1px solid #1DB53B;border-radius: 4px;padding: 10px 15px; width: 50%;margin-left: 25%;text-align: center;}

/*----------FOR MOCK TEST FOOTER-----------------*/
.f-MockTest-Question-Footer{height: 50px;padding: 10px 30px;display: flex;align-items: center;justify-content: space-between;border-top: 1px solid #F0B2F7;padding-right: 10px;color:#72097C;}
.total_que{padding: 5px 10px;border-radius: 24px;color:#DF56FA;background-color:transparent;box-shadow: 5px 0px 15px 0px rgba(244, 204, 252 ,0.8);}
.total_que {display: flex;} 
.total_que span {user-select: none;}
.total_que span p {font-weight: 500;padding: 0 5px;}
.total_que span p:first-child {padding-left: 0px;}
.btns button {margin-right: 10px;border-radius: 30px;}

.pointerNone {pointer-events: none;}
.btns > button.btn.active {color: #fff;background-color: #870E93;border:1px solid #870E93;transition: 0.9s;box-shadow:none;}
.back, .MTskip, .MTnext, .result, #show-element{--c: var(--bgprm);color: #C75AED;font-size: 14px;border: 0.1em solid var(--c);background: transparent;text-transform: uppercase;font-weight: bold;letter-spacing: 1px; text-align: center;position: relative;overflow: hidden;z-index: 1;padding: 5px 10px;transition: 0.5s;cursor: pointer;}
.back:hover, .MTskip:hover, .MTnext:hover, .result:hover, #show-element:hover {color: #fff;background-color: #870E93;border:1px solid #870E93;transition: 0.9s;box-shadow:none;}
.disable {pointer-events:none;cursor:auto; background-color:#fff; border: 2px solid #FBEBFB;color:#FBEBFB;}


/*----------FOR MOCK TEST RESULT-----------------*/
.result {display: none;}
.f-MockTestResult-Box{padding:15px 15px;}

.f-MockTestResult-Box header {position: relative;z-index: 1;height: 50px;padding: 0 30px;background-image: linear-gradient(45deg,darkblue,red);color:#fff;border-radius: 5px 5px 0 0;display: flex;align-items: center;justify-content: space-between;box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1);}

.f-MockTestResult-Box .title {font-size: 20px;font-weight: 700;}
.f-MockTest-Result-Showing-Box {padding: 10px 10px;color:red;font-size: 14px;font-style: italic;}
.f-MockTest-Result-Showing-Box .label1, .f-MockTest-Result-Showing-Box .label2, .f-MockTest-Result-Showing-Box .label3 {float:left;width:100%;font-size: 18px;font-style: italic;padding:0px 0px;}
.f-MockTest-Result-Showing-Box .label1{color:blue;}
.f-MockTest-Result-Showing-Box .label2{color:green;}
.f-MockTest-Result-Showing-Box .label3{color:red;}


.f-MockTest-Result-Showing-Box .Correct-ans-given, .f-MockTest-Result-Showing-Box .wrong-ans-given, .f-MockTest-Result-Showing-Box .skip-ans-given, .f-MockTest-Result-Showing-Box .All-Questions {float:right;font-size: 20px;font-weight: 600;}

.f-MockTest-Result-Showing-Box .All-Questions{color:blue;}
.f-MockTest-Result-Showing-Box .Correct-ans-given{color:green;}

.f-MockTest-Result-Showing-Box .percentage, .f-MockTest-Result-Showing-Box .time {color:#6C7DF5;}
.perc-line-div,.time-line-div {margin-top: 12px; height: 5px;background-color:#FEDCFD;border-radius: 30px;}
.perc-line,.time-line {height: 5px;background-color: #DC59FC;width: 100%;border-radius: 30px;}
.time-result,.perc-result {margin-top: 26px;}

.time-result h4,.perc-result h4{color:darkblue;}

.f-MockTest-Result-Footer{height:50px;padding-left: 35%;}
.f-MockTest-Result-Footer .restart{background-image: linear-gradient(45deg,darkblue,red); color:#fff;border-radius: 30px;border:none; font-size: 15px;text-transform: uppercase;font-weight: bold;letter-spacing: 0.1em;text-align: center;position: relative;padding: 10px 50px;box-shadow: 5px 0px 15px 0px rgba(107, 53, 54 ,0.8);transition: 0.8s;cursor: pointer;}
.f-MockTest-Result-Footer .restart:hover{background-image: linear-gradient(45deg,red, darkblue);transform:translateX(-5px); transition: 0.8s;}



@media only screen and (max-width: 380px){.f-MockTestBodyH1{font-size:48px;font-weight: 800;margin-left: 40px;}.f-MockTestBodyH3{margin-left: 40px;} #mainButton{font-size:16px;padding:8px 25px;margin-left:13%;}.f-MockTestRules-header{margin-left: 5%; margin-top: 10px;margin-bottom: 20px;}.f-MockTestRules-box {width:95%;}.f-MockTestRules-title{font-size: 16px;}.info {font-size: 14px;}.buttons {height:80px;}.buttons button {font-size:14px;}.f-QuesResult-Container{padding:30px 0px 20px 10px;}
.f-MockTestQuestion-Box,.f-MockTestResult-Box {width:97%;}.f-MockTestQuestion-Box header{padding: 0 15px;}.f-MockTestQuestion-Box .title {font-size: 14px;}.time_left_txt {font-size: 10px;}.timer_sec {font-size: 10px;height: 10px;width: 25px;line-height: 12px;}.timer {width: 150px;height: 35px;}.qasection {padding: 40px 0px;height:100%;}.que_text{font-size: 13px;}.option label {font-size: 13px;width:250px;height:auto;}.answerd_text {font-size: 13px;width:95%;margin-left: 2%;}.f-MockTest-Question-Footer{height:auto;padding: 10px 5px;padding-right:0px;}.total_que{font-size: 10px;margin-right: 15px;color:#ffffff;background-color:#DF56FA;padding: 10px 15px;}.btns button {margin-right: 5px;}.back, .MTskip, .MTnext, .result {font-size: 12px;letter-spacing: 0px;padding: 5px 15px;margin-bottom: 10px;} #show-element{font-size: 12px;letter-spacing: 0px;padding: 5px 15px;margin-bottom: 0px;}.f-MockTestResult-Box .title {font-size: 15px;font-weight: 700;}.time-result h4,.perc-result h4{font-size: 20px;}.f-MockTest-Result-Footer{height:auto;padding-left: 0%; margin-top: 40px; margin-bottom: 20px;}.f-MockTest-Result-Footer .restart{width: 100%;}}


@media only screen and (min-width: 381px) and (max-width: 630px){.f-MockTestBodyH1{font-size:48px;font-weight: 800;margin-left: 40px;}.f-MockTestBodyH3{margin-left: 40px;} #mainButton{font-size:16px;padding:8px 25px;margin-left:13%;}.f-MockTestRules-header{margin-left: 5%; margin-top: 10px;margin-bottom: 20px;}.f-MockTestRules-box {width:95%;}.f-MockTestRules-title{font-size: 16px;}.info {font-size: 14px;}.buttons {height:80px;}.buttons button {font-size:14px;}.f-QuesResult-Container{padding:30px 0px 20px 10px;}
.f-MockTestQuestion-Box,.f-MockTestResult-Box {width:97%;}.f-MockTestQuestion-Box header{padding: 0 15px;}.f-MockTestQuestion-Box .title {font-size: 16px;}.time_left_txt {font-size: 12px;}.timer_sec {font-size: 12px;height: 10px;width: 40px;line-height: 12px;}.timer {width: 150px;height: 35px;}.qasection {padding: 40px 0px;height:100%;}.que_text{font-size: 16px;}.option label {font-size: 13px;width:340px;height:auto;}.answerd_text {font-size: 13px;width:80%;margin-left:10%;}.f-MockTest-Question-Footer{height:auto;padding: 10px 5px;padding-right:0px;}.total_que{font-size: 10px;margin-right: 15px;color:#ffffff;background-color:#DF56FA;padding: 10px 15px;}.btns button {margin-right: 5px;}.back, .MTskip, .MTnext, .result {font-size: 12px;letter-spacing: 0px;padding: 5px 15px;margin-bottom: 10px;} #show-element{font-size: 12px;letter-spacing: 0px;padding: 5px 15px;margin-bottom: 0px;}.f-MockTestResult-Box .title {font-size: 15px;font-weight: 700;}.time-result h4,.perc-result h4{font-size: 20px;}.f-MockTest-Result-Footer{height:auto;padding-left: 0%; margin-top: 40px; margin-bottom: 20px;}.f-MockTest-Result-Footer .restart{width: 80%; margin-left: 10%;}}

@media only screen and (min-width: 631px) and (max-width: 991px){.f-MockTestBodyH1{font-size:48px;font-weight: 800;margin-left: 40px;}.f-MockTestBodyH3{margin-left: 40px;} #mainButton{font-size:16px;padding:8px 25px;margin-left:13%;}.f-MockTestRules-header{margin-left: 5%; margin-top: 10px;margin-bottom: 20px;}.f-MockTestRules-box {width:95%;}.f-MockTestRules-title{font-size: 16px;}.info {font-size: 14px;}.buttons {height:80px;}.buttons button {font-size:14px;}.f-QuesResult-Container{padding:30px 0px 20px 10px;}
.f-MockTestQuestion-Box,.f-MockTestResult-Box {width:97%;}.f-MockTestQuestion-Box header{padding: 0 15px;}.f-MockTestQuestion-Box .title {font-size: 24px;}.time_left_txt {font-size: 12px;}.timer_sec {font-size: 12px;height: 10px;width: 40px;line-height: 12px;}.timer {width: 150px;height: 35px;}.qasection {padding: 40px 0px;height:100%;}.que_text{font-size: 16px;}.option label {font-size: 15px;width:500px;height:auto;}.answerd_text {font-size: 15px;width:70%;margin-left:15%;}.f-MockTest-Question-Footer{height:auto;padding: 10px 5px;padding-right:0px;}.total_que{font-size: 15px;margin-right: 15px;color:#ffffff;background-color:#DF56FA;padding: 10px 30px;}.btns button {margin-right: 10px;}.back, .MTskip, .MTnext, .result {font-size: 14px;letter-spacing: 0px;padding: 10px 15px;margin-bottom: 10px;} #show-element{font-size: 14px;letter-spacing: 0px;padding: 10px 15px;margin-bottom: 0px;}.f-MockTestResult-Box .title {font-size: 24px;font-weight: 700;}.time-result h4,.perc-result h4{font-size: 20px;}.f-MockTest-Result-Footer{height:auto;padding-left: 0%; margin-top: 40px; margin-bottom: 20px;}.f-MockTest-Result-Footer .restart{width: 50%; margin-left: 25%;}}