/* Home page */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
body {
    margin: 0;
    overflow: hidden;
    background-image: url('../img/Home_Background.png');
    position: relative;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-size: 100% 100%;
    background-position: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
    z-index: 1;
}

a:link {
    text-decoration: none;
}

.title_container {
    position: relative;
    float: left;
    padding-top: 3vh;
    width: 60%;
    height: 100%;
    animation-name: leftToRightSwift;
    animation-duration: 4s;
}

@keyframes leftToRightSwift {
    0% {
        left: -50vw;
        top: 0vh;
    }
    50% {
        left: 2vw;
        top: 0vh;
    }
    100% {
        left: 0vh;
    }
}

.title_container h1 {
    font-family: inherit;
    font-weight: 400;
    display: block;
    font-size: calc(2.5vw + 2.5vh + 4.5vmin);
    color: #293949;
    margin-top: 25vh;
    margin-left: 5vw;
    transition: 0.3s;
    text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
}

.title_container h3 {
    position: relative;
    display: block;
    font-size: calc(1.2vw + 1.2vh + 2.4vmin);
    color: #293949;
    font-weight: 300;
    margin-left: 5vw;
    transition: 0.3s;
}


/* Home Page Buttons */


/* Start Button */

#StartBtnContainer ul {
    position: relative;
    display: block;
    visibility: hidden;
}

#StartBtnContainer ul li {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    padding: 1.5vh;
    width: 16vw;
    height: 8vh;
    border: 1px solid white;
    border-radius: 5vh;
    font-size: calc(0.7vw + 0.7vh + 1.4vmin);
    color: white;
    background-color: #19BC9C;
    margin-top: 15vh;
    margin-left: 5vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    cursor: pointer;
}

#StartBtnContainer ul li:hover {
    border: 1px solid #19BC9C;
    color: #19BC9C;
    background-color: white;
}


/* Auto and Mannul Button */

#AutobtnContainer ul {
    position: relative;
    display: block;
}

#AutobtnContainer ul li {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    padding: 1.5vh;
    width: 16vw;
    height: 8vh;
    border: 1px solid white;
    border-radius: 5vh;
    font-size: calc(0.7vw + 0.7vh + 1.4vmin);
    color: white;
    background-color: #60823e;
    margin-top: 15vh;
    margin-left: 5vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    cursor: pointer;
}

#AutobtnContainer ul li:hover {
    border: 1px solid #60823E;
    color: #60823E;
    background-color: white;
}

#AutobtnContainer {
    position: relative;
    margin-top: -23vh;
}


/* Home Page Image Container */

.title_image_container {
    position: relative;
    display: inline-flex;
    width: 40%;
    height: 100%;
    animation-name: rightToleftSwift;
    animation-duration: 4s;
}

@keyframes rightToleftSwift {
    0% {
        right: -50vw;
        top: 0vh;
    }
    50% {
        right: 2vw;
        top: 0vh;
    }
    100% {
        right: 0vh;
    }
}

.title_image_container img {
    width: 70%;
    height: auto;
    display: flex;
    margin: auto;
    justify-content: center;
    border: 7px solid rgb(48, 201, 201);
    transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.main_container {
    width: 100vw;
    height: 100vh;
    position: relative;
}


/* Header Start */

.nav {
    background-color: #00B3A6;
    width: 100%;
    height: 60px;
    position: relative;
}

.logo {
    display: inline-block;
    text-align: center;
    font-size: 25pt;
    color: white;
    position: relative;
    margin-left: 5vw;
}


/* Header End */


/* Subject Card */

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    display: inline-block;
    width: 200px;
    height: 100px;
    margin-right: 20px;
    border-radius: 10px;
    text-align: center;
}


/* On mouse-over, add a deeper shadow */

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


/* Add some padding inside the card container */

.container {
    padding: 2px 16px;
}


/* Catagory card Checkbox  */

.card_2 {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    display: inline-block;
    width: 250px;
    height: 60px;
    text-align: center;
    margin-right: 20px;
}


/* On mouse-over, add a deeper shadow */

.card_2:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


/* Add some padding inside the card container */

.container {
    padding: 2px 16px;
}

.section_header {
    color: #00B3A6;
    font-size: 20pt;
}


/* Custome Checkbox */


/* Body Style */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #2c3e50;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
}

.main_Container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}


/* Navbar */

.navbar {
    width: 100%;
    background-color: #F62459;
    top: 0;
    padding: .8%;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.homeBtn {
    display: inline-block;
    margin: auto;
}

.homeBtn img {
    width: 2vw;
}

.title {
    display: inline-block;
    font-size: calc(0.7vw + 0.7vh + 0.9vmin);
    color: white;
    margin: auto;
    padding-left: 1vw;
}


/* Information Container */

.info-container {
    padding-left: 1vw;
    display: flex;
    width: 100%;
    align-items: center;
    background-color: rgba(137, 130, 138, 0.1);
    margin-bottom: 1vh;
}

.info-container h1 {
    font-size: calc(0.4vw + 0.4vh + 1.5vmin);
    border-left: 5px solid #e74c3c;
}

.information-list {
    float: left;
    width: 40%;
}

.information-list li {
    float: left;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
}


/* Header End */


/* Start Left Side and Right Side Container  */

.left-continer-main {
    float: left;
    width: 20%;
    position: relative;
    animation-name: leftToRightSwift;
    animation-duration: 2s;
}

@keyframes leftToRightSwift {
    0% {
        left: -50vw;
        top: 0vh;
    }
    50% {
        left: 0vw;
        top: 0vh;
    }
    100% {
        left: 0vh;
    }
}

.right-container-main {
    float: left;
    position: relative;
    width: 80%;
    animation-name: rightToleftSwift;
    animation-duration: 4s;
}

@keyframes rightToleftSwift {
    0% {
        right: -50vw;
        top: 0vh;
    }
    50% {
        right: 0vw;
        top: 0vh;
    }
    100% {
        right: 0vh;
    }
}


/* End Left Side and Right Side Container  */


/* Global Data contain */

.data-Container {
    position: relative;
    float: left;
    width: 100%;
}

.data-Container h1 {
    margin: 16px 0;
    border-left: 5px solid #e74c3c;
    padding-left: 16px;
}


/* Side Menu Bar */

.sub-data-Container {
    width: 100%;
    display: flex;
    position: relative;
    height: 80vh;
    overflow: auto;
    flex-direction: column;
    padding-left: 1vw;
}


/* Custom Checkbox */

.group {
    padding: .5vw 5vh;
    margin: 1%;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.outline-none {
    border-bottom: none;
}

input[type="checkbox"] {
    display: none;
}

.group label {
    position: relative;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
}

.group label::before {
    content: "";
    background: url("../img/check-circle.svg");
    background-position: center;
    background-size: contain;
    width: calc(0.6vw + 0.6vh + 1.2vmin);
    height: calc(0.6vw + 0.6vh + 1.2vmin);
    position: absolute;
    left: -2.4vw;
    top: -0.3vh;
    transform: scale(0) rotateZ(180deg);
    transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}

input[type="checkbox"]:checked+label::before {
    transform: scale(1) rotateZ(0deg);
}

.group label::after {
    content: "";
    border: 2px solid #27ae60;
    width: calc(0.4vw + 0.4vh + 0.8vmin);
    height: calc(0.4vw + 0.4vh + 0.8vmin);
    position: absolute;
    left: -2.3vw;
    top: 0vh;
    border-radius: 50%;
}

img {
    width: 12vh;
    margin-left: 4vh;
}


/* Custom Scrollbar */


/* Cneter menu Scroll bar */


/* width */

 ::-webkit-scrollbar {
    width: 1vh;
}


/* Track */

 ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px grey;
    border-radius: 5vh;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
    background: #f62459;
    border-radius: 5vh;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: #60823e;
}


/* Custom Scroll bar End */


/* Right Side Container */


/* Catagory Container */

.catagory-container {
    padding-left: 1vw;
    position: flex;
    width: 100%;
}

.catagory-container h1 {
    font-size: calc(0.4vw + 0.4vh + 1.5vmin);
    margin: 16px 0;
    border-left: 5px solid #e74c3c;
    padding-left: 16px;
}

.catagory-container .group {
    display: flex;
    float: left;
    padding: 2vw 8vh;
    margin: 1%;
    width: 15vw;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 .5vw .5vh rgba(0, 0, 0, 0.1);
}


/* Question Type */


/* Bottom Float Button  */

#submit-button {
    margin-right: 2vw;
}

#submit-button button {
    float: right;
}

.btn-container button ul li:hover {
    color: #19BC9C;
    background-color: white;
}


/* Page 2 */


/* select-question Section */

.select-question-container {
    display: flex;
    margin-left: 2vw;
    height: 266px;
    overflow: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
}

table tr {
    padding: .35em;
}

table th,
table td {
    padding: .625em;
    text-align: left;
}

table td {
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* table {
    width: 100%;
}

th,
td {
    text-align: center!important;
    padding: 1vh;
    text-align: center;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2)
}

td:first-child {
    text-align: left!important;
} */


/* Custome Dropdown */

.custom-select {
    width: 5vw;
    height: 3vh;
    border-radius: 5px;
    font-size: calc(0.4vw + 0.4vh + 0.9vmin);
    padding-left: 1vw;
}

.custom-select:hover {
    width: 5vw;
    height: 3vh;
    background-color: rgba(184, 46, 46, 0.1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flot-btn {
    float: right;
    margin-right: 2vw;
    padding: 0.9vh;
    height: 6vh;
    border: 1px solid white;
    border-radius: 5vh;
    font-size: calc(0.5vw + 0.5vh + 0.8vmin);
    color: white;
    background-color: #60823E;
    transition: 0.3s;
    outline: none;
}

#submit-button {
    position: fixed;
    bottom: 2vh;
    right: 0;
}

#submit-button:hover {
    color: #19BC9C;
}

hr {
    width: 95%;
    margin-left: 2vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.test-marks {
    padding-left: 5vw;
    display: flex;
    width: 100%;
    align-items: center;
    background-color: rgba(137, 130, 138, 0.1);
    margin-bottom: 1vh;
}

.info-container h1 {
    font-size: calc(0.4vw + 0.4vh + 1.5vmin);
    margin: 16px 0;
    border-left: 5px solid #e74c3c;
    padding-left: 16px;
    margin-right: 12vw;
}

.select-option select {
    background-color: #19BC9C;
    color: white;
    padding: 1%;
    width: 100px;
    border: none;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    -webkit-appearance: button;
    appearance: button;
    outline: none;
}

.difficulty-select::before {
    content: "\f13a";
    font-family: FontAwesome;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    text-align: center;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    line-height: 5vh;
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.difficulty-select:hover::before {
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.2);
}

.difficulty-select select option {
    padding: 3%;
}


/* Custom Select Options START*/

.select-option {}

.select-option select {
    background-color: #60823e;
    color: white;
    padding: 1%;
    width: 100px;
    border: none;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    -webkit-appearance: button;
    appearance: button;
    outline: none;
}

.select-option::before {
    content: "\f13a";
    font-family: FontAwesome;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    text-align: center;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    line-height: 5vh;
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.select-option:hover::before {
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.2);
}

.select-option select option {
    padding: 3%;
}


/* Custom Select Options END*/

.testpaper-mark-container {
    display: flex;
    height: 10vh;
    width: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: white;
    box-shadow: 0 .5vw .5vh rgba(0, 0, 0, 0.1);
}

.marks-per-Question {
    width: 100%;
}

.marks-per-Question input[type=text] {
    width: 30%;
    padding: 2%;
    border: 1px solid #9B33CC;
    text-align: center;
}

.marks-per-Question input[type=text]:focus {
    outline: none;
    background-color: rgba(128, 128, 128, 0.2);
    text-align: center;
}

.total-marks p {
    font-size: calc(0.4vw + 0.4vh + 0.8vmin);
}

.mark-group {
    width: 50%;
}

.mark-group input[type=text] {
    width: 25%;
    padding: 1vw 1vh;
    border-radius: 4px;
    resize: vertical;
    border: 1px solid #9B33CC;
}

.mark-group input[type=text]:focus {
    outline: 0;
}

.mark-group label {
    display: inline-block;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
}

.catagory-container .group {}


/* Test Preview */

.left-option-container {
    float: left;
    width: 20%;
    height: 80vh;
    overflow: auto;
    border-right: 2px solid rgba(128, 128, 128, 0.4);
    margin-right: 2vw;
}

.test-paper-container {
    margin-left: 2%;
    overflow: auto;
    animation-name: rightToleftSwift;
    animation-duration: 4s;
}

@keyframes rightToleftSwift {
    0% {
        right: -50vw;
        top: 0vh;
    }
    50% {
        right: 0vw;
        top: 0vh;
    }
    100% {
        right: 0vh;
    }
}

.catagory-head {
    margin: auto;
    width: 100%;
}

.test-paper-container h1 {
    font-size: calc(0.4vw + 0.4vh + 1.5vmin);
    font-weight: 600;
    margin: auto;
}

.test-paper-container h2 {
    font-size: calc(0.4vw + 0.4vh + 0.8vmin);
    font-weight: 600;
    text-align: left;
}

.question-container {
    padding-left: 1vw;
    width: 100%;
}

.Question-container {
    padding-left: 1vw;
    margin: auto;
    display: flex;
    width: 100%;
    margin-bottom: 2vh;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.Question-container .question {
    width: 70%;
    padding: 1%;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
}

.question li {}

.answer-section {
    display: flex;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin-top: 3vh;
    font-size: calc(0.3vw + 0.3vh + 0.8vmin);
}

.answerss {
    display: flex;
    width: 50%;
    font-size: calc(0.3vw + 0.3vh + 0.6vmin);
}

.chaptername {
    display: flex;
    width: 50%;
    font-size: calc(0.3vw + 0.3vh + 0.6vmin);
}

.difficulty-level {
    display: flex;
    width: 25%;
    font-size: calc(0.3vw + 0.3vh + 0.6vmin);
}

.Question-container .marks {
    width: 10%;
    padding: 2%;
}

.marks label {
    display: block;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
    text-align: center;
    margin-bottom: 1vh;
}

.marks input[type=text] {
    width: 4vw;
    height: 3.5vh;
    margin-left: 1vw;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
    border: 1px solid #f62459;
    margin: auto;
    display: block;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);
}

.marks input[type=text]:focus {
    outline: 0;
}

.Question-container .edit-info {
    display: block;
    margin: auto;
    width: 20%;
    text-align: center;
}

.edit-info ul li {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 1vh 1vw;
    list-style: none;
    text-align: center;
    font-size: calc(0.5vw + 0.5vh + 1.0vmin);
    border-radius: 0.5vh;
    cursor: pointer;
}

.edit-info ul li:hover {
    display: inline-block;
    background-color: #9B33CC;
    box-shadow: rgba(0, 0, 0, 0.1);
    color: white;
}


/* Tool Tips Start */

.tooltip {
    position: relative;
}

.tooltip:after {
    position: absolute;
    padding: 10%;
    background-color: #19BC9C;
    border-radius: 5px;
    font-size: calc(0.3vw + 0.3vh + 0.7vmin);
    font-weight: 300;
    color: #fff;
    content: attr(data-tooltip);
    opacity: 0;
    min-width: 4vw;
    transition: all .2s ease-in-out .2s;
    visibility: hidden;
    z-index: 2;
}

.tooltip:hover:after {
    opacity: 1;
    visibility: visible;
}


/*Tooltip starting positions*/

.tooltip-top:after {
    bottom: 150%;
    left: 0;
}

.tooltip-top:hover:after {
    bottom: 120%;
}


/* Triangles */

.tooltip-top:before {
    content: "";
    display: block;
    position: absolute;
    border-width: 7px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all .2s ease-in-out .25s;
    visibility: hidden;
}

.tooltip-top:hover:before {
    opacity: 1;
    visibility: visible;
}


/*Triangle starter positions*/


/* .tooltip-top:before {
    top: -51%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #fff;
} */


/* Tool Tips End */


/* Selected items in Question Papers  */

.counter-card {
    width: 100%;
}

.card {
    background-color: #fff;
    border-radius: 1vh;
    box-shadow: 0 .2vw .2vh rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    width: 100%;
    margin: 3%;
    overflow: hidden;
}

.counter-preview {
    display: block;
    background-color: #19BC9C;
    color: #fff;
    padding: 3%;
    width: 30%;
}

.counter-preview h2 {
    letter-spacing: 1px;
    font-size: calc(1.2vw + 1.2vh + 2.5vmin);
    font-weight: 200;
    color: white;
    padding-top: 1vh;
    text-align: center;
}

.counter-info {
    padding: 4%;
    position: relative;
    width: 100%;
}

.counter-info h3 {
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    color: #383b3d;
    font-weight: 300;
    margin-top: 2.5vh;
}


/* Custome Popup Form */


/* The popup form - hidden by default */

.form-popup {
    position: absolute;
    background-color: #ffffff;
    border: 2px solid #f62459;
    border-radius: 10px;
    box-shadow: 0px -1px 22px -4px rgb(0 0 0 / 90%);
    z-index: 9;
    width: 79vh;
    height: auto;
    left: 60vh;
    top: 42%;
    padding-bottom: 10px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /* animation-name: ToptoBottom;
    animation-duration: 3s; */
}

@keyframes ToptoBottom {
    0% {
        right: -50vw;
        top: 2vh;
    }
    50% {
        right: 0vw;
        top: 0vh;
    }
    100% {
        right: 0vh;
    }
}

.form-navbar {
    background-color: #f62459;
    box-shadow: 0px -1px 22px -4px rgba(0, 0, 0, 0.27);
}

.form-navbar h1 {
    color: white;
    display: inline-block;
    font-size: calc(0.6vw + 0.6vh + 0.9vmin);
    font-weight: 400;
    margin-left: 1vw;
    padding: 5px;
}

.cancel-btn {
    float: right;
    display: block;
    background-color: transparent;
    padding: 1%;
    font-size: calc(0.6vw + 0.6vh + 0.9vmin);
    color: white;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    outline: none;
}


/* Add styles to the form container */

.form-container {
    float: left;
    padding: 30px;
    width: 50%;
}


/* Full-width input fields */

.form-container input[type=text] {
    width: 100%;
    padding: 5%;
    margin: 1% 0 2% 0;
    border: none;
    background: #f1f1f1;
}


/* When the inputs get focus, do something */

.form-container input[type=text]:focus {
    background-color: #ddd;
    outline: none;
}


/* form-popup bottom */

.form-bottom-navbar {
    float: right;
    display: flex;
    bottom: 0;
    margin-right: 122px;
}

.upload-btn {}


/* Set a style for the submit/login button */

.popup-btn button {
    margin-right: -25px;
    margin-top: 1vh;
    width: 10vw;
    height: 6vh;
    border: 1px solid white;
    border-radius: 5vh;
    font-size: calc(0.4vw + 0.64vh + 1.2vmin);
    color: white;
    background-color: #60823e;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    cursor: pointer;
    outline: none;
}

#breadcrums .breadLabel[data-link] {
    cursor: pointer;
}

#worksheet-section {
    float: left;
    width: 50%;
    display: block;
}

#testpaper-section {
    float: left;
    display: none;
    width: 100%;
}

.markContainer {
    display: none;
    float: left;
    margin: 1%;
    width: 35vw;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 .5vw .5vh rgba(0, 0, 0, 0.1);
}

.markContainer .markGroup {
    width: 50%;
    padding: 5%;
    display: flex;
}

.markGroup label {
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
    padding-top: .5vh;
}

.markGroup input[type=text] {
    width: 4vw;
    height: 3.5vh;
    margin-left: 1vw;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
    border: 1px solid #9B33CC;
    margin: auto;
    display: block;
    text-align: center;
}

.markGroup input[type=text]:focus {
    outline: 0;
}

._h2 {
    color: #f62459;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
    padding: 1%;
    width: 100%;
}

.summary-section {
    width: 100%;
}

.summaryTable {
    width: 100%;
}

.summary-section th,
.summary-section td {
    padding: .5vh;
    text-align: left !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2)
}

.paper-info {
    display: none;
    width: 98%;
    float: left;
    margin-bottom: 2vh;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 1%;
}

.paper-info table {
    width: 100%;
}

.paper-info th,
.paper-info td {
    padding: .5vh;
    text-align: left !important;
    border-bottom: none;
}

.paper-info th {
    width: 10%;
}

.custome-view {
    float: left;
    position: relative;
    padding: 2%;
    margin-top: 3vh;
    width: 90%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 .5vw .5vh rgba(0, 0, 0, 0.1);
    animation-name: leftToRightSwift;
    animation-duration: 4s;
}

.summary-view {
    float: left;
    position: relative;
    padding: 2%;
    margin-top: 3vh;
    width: 90%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 .5vw .5vh rgba(0, 0, 0, 0.1);
    animation-name: leftToRightSwift;
    animation-duration: 3s;
}

.summary-view table {
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
}

.download-section {
    position: relative;
    float: left;
    padding: 2%;
    margin-top: 3vh;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 .5vw .5vh rgba(0, 0, 0, 0.1);
    animation-name: leftToRightSwift;
    animation-duration: 2s;
}

@keyframes leftToRightSwift {
    0% {
        left: -50vw;
        top: 0vh;
    }
    50% {
        left: 2vw;
        top: 0vh;
    }
    100% {
        left: 0vh;
    }
}


/* Manual Page Side bar*/

.manual-sidebar-Container {
    position: relative;
    height: 80vh;
    overflow: auto;
}

.manual-sidebar-Container ul {
    display: block;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
}

.manual-sidebar-Container ul li {
    display: block;
    list-style: none;
    padding: 5%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
}

.manual-sidebar-Container ul li a:any-link {
    color: #3a3d3f;
}

.manual-sidebar-Container ul li {
    padding: 5%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(71, 70, 70, 0.1);
}

.manual-catagory-selection {
    float: left;
    display: flex;
    background-color: #6c757d;
    width: 15vw;
    border-radius: 10px;
    box-shadow: 0 .3vw .3vh rgba(0, 0, 0, 0.1);
    margin-left: 1vw;
    height: 15vh;
    cursor: pointer;
}

.manual-catagory-selection a {
    font-size: calc(0.4vw + 0.4vh + 0.8vmin);
    color: #fff;
    display: flex;
    align-items: center;
    margin: auto;
}

.manual-catagory-selection:hover {
    background-color: #9B33CC;
}

.manual-catagory-selection:hover:nth-of-type(2) {
    background-color: #f62459;
}

.manual-catagory-selection:hover:nth-of-type(3) {
    background-color: #64CC33;
}

.manual-catagory-selection:hover:nth-of-type(4) {
    background-color: #19BC9C;
}

.button-container {
    float: left;
    width: 95%;
    margin-left: 2vw;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.action-button {
    display: flex;
}

.question-counter {
    display: flex;
    width: 40%;
    align-items: center;
    float: right;
}

.input-container {
    background: #9B33CC;
    color: white;
    padding: 1%;
    align-items: center;
    margin-left: 1vw;
}

.question-counter input[type="text"] {
    display: inline-block;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    text-align: center;
    background-color: #9B33CC;
    color: white;
    width: 3vw;
    border: none;
    outline: none;
}

.question-action-btn {
    width: 60%;
    display: flex;
    justify-content: space-between;
}

.question-counter h3 {
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    font-weight: 600;
}

.button-container h1 {
    font-size: calc(0.4vw + 0.4vh + 1.5vmin);
    margin: 16px 0;
    border-left: 5px solid #e74c3c;
    padding-left: 16px;
    margin-right: 12vw;
}

button {
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    height: 5vh;
    width: 10vw;
    margin-left: .5vw;
    border-radius: 50px;
    background-color: #60823e;
    color: white;
    outline: none;
    border: 2px solid white;
    transition: 0.3s;
    cursor: pointer;
}

button:hover {
    box-shadow: -0.1vw 0.5vh 0.5vw 0.5vw rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: -0.1vw 0.5vh 0.5vw 0.5vw rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -0.1vw 0.5vh 0.5vw 0.5vw rgba(0, 0, 0, 0.1);
}


/* Mannul Page CSS */

#show-question-section {
    height: 80vh;
    overflow: auto;
    display: none;
}


/* Question Card */

.question-group-card {
    margin-left: 1vw;
    margin-top: 1vh;
    display: flex;
    width: 98%;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 .2vw .2vh rgba(0, 0, 0, 0.1);
    border-radius: 0px;
}

.question-group-card:hover {
    border-color: #9B33CC;
}

.question {
    width: 80%;
    padding: 1.5%;
}

.difficulty {
    display: flex;
    width: 24vh;
    margin: auto;
}

.select-question {
    margin-top: 3vh;
    margin-right: 6vh;
}

.select-question label {
    position: relative;
    font-size: calc(0.4vw + 0.4vh + 0.7vmin);
}

.select-question label::before {
    content: "";
    background: url("../img/check-circle.svg");
    background-position: center;
    background-size: contain;
    width: calc(0.7vw + 0.7vh + 1.4vmin);
    height: calc(0.7vw + 0.7vh + 1.4vmin);
    position: absolute;
    top: -1.5vh;
    left: 0.8vw;
    transform: scale(0) rotateZ(180deg);
    transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}

.select-question input[type="checkbox"]:checked+label::before {
    transform: scale(1) rotateZ(0deg);
}

.select-question label::after {
    content: "";
    border: 2px solid #27ae60;
    width: calc(0.5vw + 0.5vh + 0.9vmin);
    height: calc(0.5vw + 0.5vh + 0.9vmin);
    top: -1.1vh;
    left: 1vw;
    position: absolute;
    border-radius: 50%;
}


/* Manual difficulty filter check box */

.difficulty-filter-container {
    padding: 0.5% 0.5% 0.5% 1%;
    align-items: center;
    border-radius: 50px;
    background-color: #f62459;
    margin-top: 3px;
}

.difficulty-filter-container h4 {
    margin-left: 0.5vw;
    margin-right: 1vw;
    color: rgb(255, 255, 255);
    font-weight: 400;
}

.difficulty-filter-container input[type="checkbox"] {
    display: inline-block;
}

.difficulty-filter-container label {
    margin-left: 0.5vw;
    margin-right: 1vw;
    color: rgb(255, 255, 255);
}

.manual-difficulty {
    display: flex;
    border: none;
    outline: none;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
    color: #2c3e50;
}

.filter-checkbox {
    width: 25%;
}

.outline-none {
    border-bottom: none;
}

.filter-checkbox label {
    position: relative;
    font-size: calc(0.4vw + 0.4vh + 0.6vmin);
}

.filter-checkbox label::before {
    content: "";
    background: url("../img/check-circle.svg");
    background-position: center;
    background-size: contain;
    width: calc(0.6vw + 0.6vh + 1.2vmin);
    height: calc(0.6vw + 0.6vh + 1.2vmin);
    position: absolute;
    left: -3vw;
    top: -0.3vh;
    transform: scale(0) rotateZ(180deg);
    transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}

.filter-checkbox input[type="checkbox"]:checked+label::before {
    transform: scale(1) rotateZ(0deg);
}

.filter-checkbox label::after {
    content: "";
    border: 2px solid #27ae60;
    width: calc(0.4vw + 0.4vh + 0.8vmin);
    height: calc(0.4vw + 0.4vh + 0.8vmin);
    position: absolute;
    left: -2.9vw;
    top: 0vh;
    border-radius: 50%;
}


/* All Popup Form Design Start */

.add-question-form {
    display: flex;
    flex-direction: column;
    width: 25vw;
    top: 50%;
    left: 50%;
    border-radius: calc(0.3vw + 0.3vh + 0.6vmin);
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: -1vw 2vh 5vw 1vw rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: -1vw 2vh 5vw 1vw rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -1vw 2vh 5vw 1vw rgba(0, 0, 0, 0.3);
}

.form-title-container {
    border-bottom: 1px solid #9B33CC;
    align-items: center;
    padding: 3%;
}

.form-title-container h3 {
    color: #9B33CC;
    font-size: calc(0.4vw + 0.4vh + 0.8vmin);
    font-weight: 500;
}

.add-question-form label {
    font-size: calc(0.4vw + 0.4vh + 0.4vmin);
    font-weight: 600;
    align-items: center;
    display: inline-block;
    margin-top: 1vh;
    margin-bottom: 0.5vh;
}

.add-question-form select {
    font-family: 'Roboto', sans-serif;
    font-size: calc(0.4vw + 0.4vh + 0.4vmin);
    background-color: rgba(0, 0, 0, 0.1);
    padding: 1%;
    width: 100%;
    border: none;
    -webkit-appearance: button;
    appearance: button;
    outline: none;
}

.add-question-form textarea {
    font-family: 'Roboto', sans-serif;
    font-size: calc(0.4vw + 0.4vh + 0.4vmin);
    padding: 1%;
    align-items: center;
    display: inline-block;
    width: 100%;
    height: 10vh;
    outline: none;
}

.add-question-form .textbox {
    font-family: 'Roboto', sans-serif;
    font-size: calc(0.4vw + 0.4vh + 0.4vmin);
    padding: 1%;
    width: 100%;
    outline: none;
}

.message-box {
    padding: 2%;
    text-align: center;
    font-size: calc(0.4vw + 0.4vh + 0.4vmin);
    font-weight: 600;
}

.add-question-form button {
    float: left;
    margin-top: 0.5vh;
    width: 30%;
    outline: none;
}

.btn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 2%;
}

.form_btn {
    margin-top: 1vh;
}

#sContainIn {
    width: 98%;
    margin-bottom: 72px
}

.question-parent {
    margin-top: 6px;
}


/* All Popup Form Design End */


/* new css for manual test generator */

.manual-sidebar-Container ul li:hover {
    border-left: 10px solid #60823e;
}

/* mobile responsive ayush */
@media (max-width: 767px ){
    .title_container,
    .title_image_container{
        width: 100%;
        height: auto;
    } 
    .jconfirm-box {
        width: 41vh;
    }

}
@media (max-width: 991px ) {   
    body{
        overflow: hidden;
    }
    .title_container h1 {
        margin-top: 10vh;
    }
    #StartBtnContainer ul li{
        margin-top: 4vh;
    }
    #AutobtnContainer a{
        display: inline-block;
    }
    #AutobtnContainer ul li{
        width: auto;
        height: auto; 
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;    
    }
    #AutobtnContainer{
        margin-bottom: 50px;
    }
    .left-continer-main,
    .right-container-main{
        width: 100%;
    }
    .left-continer-main{
        padding: 10px;
        box-shadow: 0px 0px 11px #E8E8E8;

    }
    .sub-data-Container.chapterList{
        height: 200px;
        overflow: auto;
    }
    .sub-data-Container.chapterList label,
    .left-continer-main label,
    .catagory-container label,
    .data-Container,
    .select-all-text,
    #auto-worksheet-details label,
    #auto-testpaper-details label{
        font-size: 14px !important;
        padding: 0 10px;
    }
    .catagory-container .group{ 
        width: 47%;
        padding: 2vw 4vh;
    }
    .info-container h1,
    .catagory-container h1{
        font-size: 16px;
    }
    .sub-data-Container.chapterList .group label::before,
    .data-Container .group label::before{
        top: 0;
    }
    #worksheet-section{
        width: 100%;
    }
    .group.outline-none{
        padding: 0;
    }
    .markContainer{
        width: 100%;
        flex-direction: column;
    }
    .markGroup input[type=text]{
        width: auto;
    }
    .markContainer .markGroup{
        width: 100%;
    }
    .group.outline-none label{
       font-size: 14px;
    }
    .flot-btn{
        width: auto;
    }
    .manual-sidebar-Container ul li a:any-link{
        font-size: 14px;
    }
    .manual-sidebar-Container{
        height: 50vh;
    }
    .manual-catagory-selection {
        width: 47%;
        height: 7vh;
        margin-bottom: 10px;
    }
    .manual-catagory-selection a{
        font-size: 14px;
    }
    .main_Container{
        overflow: auto;
    }
    #stats button{
        width: auto;
        font-size: 14px;
        border-radius: 10px;
        padding: 5px;
        height: auto;
    }
    #questionsViewer .question-title {
        font-size: 14px;
    }
    #questionsViewer .image img{
        margin: 10px !important;
        max-width: 100px;
    }
    .select-question label::before{
        top: -1vh;
    }
    #pdfPreview .form-popup.fixinfo{
        width: 90%;
        left: 48%;
        top: 48%;
    }
    #pdfPreview .form-container{
       width: 100%;
       padding: 15px;
    }
    #pdfPreview .form-container label{
        font-size: 14px;
    }
    #pdfPreview button,
    .data-Container button.flot-btn,
    .auto-level-page button.flot-btn,
    #submit-button button{
        font-size: 14px;
        width: auto;
        height: auto;
        padding: 10px;
    }
    .summaryTable,
    .sub-data-Container ._h2{
        font-size: 14px !important;
    }
}