/* front page design */

#quiz {
    background: url(../images/quiz/back.png);
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
}
.quiz-margin{
    margin-bottom: 80px;
}

.front-row {
    gap: 30px;
    margin-top: 50px;
}

.removePD {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.text-part {
    background: url(../images/quiz/back0.png);
    background-size: 96% 410px;
    background-repeat: no-repeat;
    width: 670.56px;
    height: 412.71px;
}

.img-part {
    width: 415px;
}

.quiz-content {
    margin-top: 90px;
    margin-left: 66px;
    width: 77%;
}

.quiz-content p {
    font-style: normal;
    font-size: 14px;
    line-height: 26px;
    color: #848680;
}

.quiz-image {
    /* border: 1px solid red; */
}

.quiz-image img {
    /* width: 318px; */
    height: 288px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.quiz-button a {
    background: #7CB732;
    color: #fff !important;
    border-radius: 4px;
    padding: 14px 55px;
    font-size: 16px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* display: block; */
    text-align: center;
    text-decoration: none;
}
.quiz-button .quiz-modal-content a {
    background: #7536B7;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
}

.quiz-button .quiz-modal-content .reg-btn2 {
    background: #EBFFD2;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    color: #5F931F !important;
}
.quiz-button .quiz-modal-content .reg-btn2:hover {
    color: #fff !important;
    background: #5F8D25 !important;
}

a.bd-gr-btn:hover {
    color: #fff !important;
    background: #5F8D25;
    text-decoration: none !important;

}
.quiz-button .quiz-modal-content a:hover {
    color: #7536B7 !important;
    background: #F4E9FF!important;
}
.modal-open .modal {
    overflow-y: hidden !important;
}
.modal-open {
    padding-right: 0 !important;
}
.modal-open{
    overflow-y: inherit !important;
}
.reg-error{
    display: block;
}
/* Shahanaz new login form design start here */
.new-login-background {
    margin-top: 90px;
}

.login-form-row {
    width: 100%;
}

.left-part {
    background: url(../images/login-bg.png) top center scroll no-repeat;
    background-size: cover;
    z-index: 10;
    height: 100vh;
    /* margin-top:90px; */

}

.left-part-new {
    height: 100vh;
}

.logo-back {
    background: linear-gradient(23.58deg, #571253 0%, #57125362 .42%, #571253 106.05%);
    opacity: 90%;
    height: 100vh;
    /* min-height: 800px; */
    width: 100%;
    display: flex;
}

.logo-back-new {
    height: 100vh;
}

.logo-back .logo a img {
    width: 260px;
    height: 122px;

}

.logo-back .logo {
    align-self: center;
    margin-right: auto;
    margin-left: auto;
}

.right-part {
    /* height: 100vh; */
    display: flex;
    /* margin-top:90px; */
}

.reg-part {
    background: url(../images/login-bg.png) top center scroll no-repeat;
    background-size: cover;
    z-index: 10;
    min-height: 800px;
}

.reg-back {
    background: linear-gradient(23.58deg, #571253 0%, #57125362 .42%, #571253 106.05%);
    opacity: 90%;
    min-height: 100%;
    width: 100%;
    display: flex;
}

.reg-right-part {
    margin-left: 42%;
}

.right-part-form {
    width: 70%;
    align-self: center;
    margin-right: auto;
    margin-left: auto;
    /* border: 1px solid rebeccapurple; */

}

.login-form-title h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    color: #230E39;
    margin-bottom: 20px;
    margin-top: 30px;
}

.user-id label {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 25px;
    color: #4D584C;
    display: block;
    margin-bottom: 10px
}

.user-icon {
    padding-left: 14px;
    /* margin-bottom: 6px; */
}

.lock-icon {
    padding-left: 14px;
    /* margin-bottom: 6px; */
}

.eye-icon {
    margin-right: 10px;
}

.user-pass label {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 25px;
    color: #4D584C;
    display: block;
    margin-bottom: 10px;
    margin-top: 30px
}

.input-div {
    width: 100%;
    height: 50px;
    background-color: #EFEFEF;
    border-radius: 4px;
    border: none;
    outline: none;
}

.user-id input {
    outline: none;
    border: none;
    background-color: #EFEFEF;
    border-radius: 4px;
    margin-top: 14px;
    width: 90%;
}

.user-id input::placeholder {
    color: #A08BB6 !important;
}

.user-pass input {
    outline: none;
    border: none;
    background-color: #EFEFEF;
    border-radius: 4px;
    margin-top: 14px;
    width: 85%;
}

.user-pass input::placeholder {
    color: #A08BB6 !important;
}

.forgot-pass {
    display: block;
    text-align: end;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 23px;
    color: #4D584C;
    margin-top: 10px;
    margin-bottom: 50px;
}

.bottom-part {
    justify-content: space-between;
}

.bottom-part p {
    margin-top: 10px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #4D584C;
}

.bottom-part p a {
    text-decoration: none;
    color: #34A03A;;
}

.bottom-part button {
    width: 140px;
    height: 50px;
    background: #7CB732;
    border-radius: 4px;
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    color: #F3FFF1;
}

/* Registration form */

.my-reg-form h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #111F0F;
    margin-bottom: 20px;

}

.reg-right-part-form {
    width: 70%;
    align-self: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}

input[name="optradio"] {
    accent-color: #34A03A;
}

.full-name {
    width: 100%;
    height: 50px;
    background-color: #EFEFEF;
    border-radius: 4px;
    border: none;
    outline: none;
    padding-left: 15px;
}

.full-name input {
    outline: none;
    border: none;
    background-color: #EFEFEF;
    border-radius: 4px;
    margin-top: 14px;
    width: 84%;
}
.pass-div input{
     width: 77%;
}
.pass-change-div input{
    width: 89%;
}

.full-name input::placeholder {
    color: #A08BB6 !important;
}

.full-name select {
    outline: none;
    border: none;
    background-color: #EFEFEF;
    border-radius: 4px;
    margin-top: 14px;
    width: 80%;
}

.full-name select:valid {
    color: #A08BB6 !important;
}

select:invalid {
    color: #A08BB6;
}

option img {
    display: inline;

}

.col-margin {
    margin-bottom: 30px;
}

.reg-right-part-form hr {
    margin-bottom: 40px;
}

.bottom-margin {
    margin-top: 40px;
    margin-bottom: 70px;
}

.reg-user-icon {
    margin-bottom: 6px;
}

.forget-form-title h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    color: #111F0F;
    margin-bottom: 10px;
}

.reset-form-title h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 32px;
    color: #111F0F;
    margin-bottom: 40px;
}

.forget-form-title p {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 25px;
    color: #8D948C;
    margin-bottom: 20px;
}

.forget-bottom {
    margin-top: 40px;
}

.forget-bottom button a {
    text-decoration: none;
    color: white;
}


.passcode-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    margin: 0 auto;
}

.passcode-wrapper input {
    width: 80px;
    height: 80px;
    padding: 0;
    margin-right: 5px;
    text-align: center;
    border: none;
    background: #EFEFEF;
    border-radius: 4px;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    color: #111F0F;
}

.wrong-otp-passcode-wrapper input {
    border: 1.8px solid #FF6262;
}

.passcode-wrapper input:focus {
    border: 1.8px solid #34A03A;;
    outline: none;
    box-shadow: none;
}

.reset-form-group {
    width: 65%;
}

.reset-bottom {
    margin-top: 40px;
}

.reset-bottom .wrong-pass {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
    color: #FF6262;
}

.reset-bottom .reset-time {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    color: #4D584C;
}

.reset-bottom .reset-time span {
    color: #34A03A;
    font-weight: 600;
    font-size: 20px;
}

.wrong-otp-form {

}

.forget-pass-div {
    width: 85%;
}

.forget-pass-div .full-name input {
    width: 85%;
}

.reset-bottom-part {
    width: 85%;
}

.tech-part img {
    height: 30px;
    width: 90px;
}

.tech-part a {
    position: absolute;
    bottom: 15px;
    right: 20px;
    text-decoration: none;
}

.tech-part a span {
    font-size: 14px;
    color: #8D948C;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Shahanaz new login form design end here */
.row > * {
    padding-right: 0px !important;
}

/* for new quiz page */
.quiz-banner {
    background: url(../../konnect/images/banner-10-new.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 0px;
    padding: 50px 0px !important;
    font-family: SolaimanLipi !important;
}

.quiz-banner h2 {
    color: white;
    font-weight: 700;
    font-size: 24px;
}

.mcq-question .ques-number h5 {
    color: #0aaa3f;
    margin-bottom: 25px;
    font-weight: 600;
}

.my-modal-header {
    border-bottom: none !important;
}

.my-modal-footer {
    border-top: none !important;
}

.modal-body p {
    font-size: 24px;
}

.modal-body img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

.congrate {
    color: rgb(17, 161, 17);
    font-weight: 500;
}

.my-btn-primary {
    background-color: rgb(17, 161, 17);
    color: white;
}

.my-btn-primary a {
    text-decoration: none;
    color: white;
}

.my-btn-primary:hover {
    background-color: rgb(80, 8, 48);
    color: white;
}

.modal-width {
    max-width: 800px;
}

.option {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 12px;
    padding-bottom: 12px;
    border-left: 4px solid #662d91;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    display: block;
    min-height: 2rem;
}

.option input {
    float: right;
    margin-left: 0em;
    width: 20px;
    height: 24px
}

.option label {
    font-size: 14px;
    line-height: 26px;
    color: #635274;

}

.form-label {
    color: #635274;
}

.next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.next-btn .button1 {
    border-radius: 4px;
}

.finish-button button {
    padding: 8px 27px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    color: #fff;
    background: #662d91;
    border-color: #662d91;
    float: right;
}

.finish-button button:hover {
    background: #764999;

}

.ques-title {
    color: #107415;
    margin-bottom: 20px;
    border-bottom: 1px solid lightgray;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
}

.my-time-counter {
    width: 80%;
}

.quiz-button {
    margin-top: 30px;
    cursor: pointer;
}

.quiz-row {
    margin-right: 0px !important;
}

.profile-btn {
    background-color: white;
    border: none;
}

.my-name {
    font-weight: bold;
    font-size: 16px;
    line-height: 26px;
    color: #635274;
}

.my-name:hover {
    color: #662d91;
}

.gap {
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
}

.my-profile {

}

.profile-name {
    background: url(../images/quiz/pro-bac.png);
    background-size: cover;
    width: 100%;
    height: 252px;
    padding-top: 28px;
    border-radius: 10px;
}

.profile-name img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.profile-name h2 {
    font-size: 20px;
    color: #213409;
    text-align: center;
    margin-top: 15px;
}

.profile-name img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.profile-container {
    min-height: 600px;
    margin-top: 130px;
}

.pro-update {
    background: #7536B7;
    border-radius: 10px;
    margin-top: 28px;
    margin-bottom: 28px;

}
.pro-update:hover {
    background: #45107e;
}

.pro-update a {
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    padding: 12px;
    display: inline-block;
    margin-bottom: 0px !important;
    text-decoration: none;
}

.pro-update img {
    background-color: white;
    padding: 10px;
    border-radius: 50%;
    margin-left: 30px;
    margin-bottom: 5px;

}

.pass-change {
    background: #FF6262;
    border-radius: 10px;
}
.pass-change:hover {
    background: #d14444;
    border-radius: 10px;
}

.pass-change img {
    background-color: white;
    padding: 10px;
    border-radius: 50%;
    margin-left: 30px;
    margin-bottom: 5px;
}

.pass-change a {
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    padding: 12px;
    display: inline-block;
    margin-bottom: 0px !important;
    text-decoration: none;
}

.profile-table {
    width: 90% !important;
}

.tab-title {
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    background: #7536B7;
    border-radius: 10px 10px 0px 0px;
    margin-bottom: 0px !important;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 20px;
}

.total-num {
    border: 1px solid #E8E6EB;
    padding-left: 0px !important;
    border-radius: 0px 0px 10px 10px;
}

.total-num p {
    border-bottom: 1px solid #E8E6EB;
    padding: 16px 32px;
    margin-bottom: 0px !important;
}

.total-num:last-child {
    /*border-bottom: none;*/
    padding-top: 20px;
}

.total-quiz h2 {
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    background: #7536B7;
    border-radius: 10px 10px 0px 0px;
    margin-bottom: 0px !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 20px;
}

.total-num ul {
padding-left: 18px;
}

.total-num ul li {

}

/* profile update page */
.edit-right-part-form {
    width: 80%;
    align-self: center;
    margin-right: auto;
    margin-left: 30px;
}

/* .edit-full select{
    width: 92%;
} */

.choose-btn button {
    background: #ECECEC;
    border-radius: 4px;
    width: 212px;
    border: none;
    padding: 10px 0px;
    color: #A08BB6;
}

.preview-img {
    border: 1px solid #ABA2B4;
    padding: 50px;
    width: 152px;
}

/* event page siam vaia */
.event-title {
    font-size: 30px;
    color: #7536B7;
}

.event-sub-title {
    font-size: 22px;
    color: #635274;
    margin: 40px 0px;
}

.events-row {
    margin-top: 65px;
}

.event-description span {
    font-size: 16px;
    color: #230E39;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

.event-description p {
    font-size: 16px;
    line-height: 26px;
    color: #635274;
}

.events-video iframe {
    border: 1px solid #E8E6EB;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 30px;
}

.group-button-row {
    margin-top: 60px;
    gap: 30px;
}

/* .contentBg{
    background:url(../images/quiz/back.png);
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
} */
.event-age-button {
    width: 31%;
    padding-left: 0px !important;
}

.event-age-button:nth-child(1) {
    background: #43A0E7;
    border-radius: 4px;
}

.event-age-button:nth-child(2) {
    background: #0CC690;
    border-radius: 4px;
}

.event-age-button:nth-child(3) {
    background: #EEAD4A;
    border-radius: 4px;
}

.timer {
    position: relative;
    top: -120px;
    /* right: 9.3rem; */
    font-size: 22px;
}

.img-clock {
    margin-top: 112px
}

.img-clock img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* quiz preview page */
.quiz-number h4 {
    font-size: 20px;
    line-height: 26px;
    color: #230E39;
}

.quiz-anser {
    font-size: 18px;
    line-height: 26px;
    color: #635274;
}

.right-ans {
    font-size: 16px;
    line-height: 26px;
    color: #635274;
}

.bottom-back {
    background: #F8F8F8;
    margin-top: 30px;
    --bs-gutter-x: 2rem !important;
}

.quiz-anser-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.preview-card {
    border-radius: 10px !important;
}

.go-back-btn {
    text-align: end;
}
.go-back-btn a{
      padding: 8px 27px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    color: #fff;
    background: #662d91;
    border-color: #662d91;
}

.card-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.top-card-row {
    margin-right: 0px !important;
}
.quiz-modal{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.quiz-modal-content{
    width: 570px !important;
    height: 400px !important;
    background: #FFFFFF;
    border-radius: 30px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.quiz-modal-content .mid-border{
    border: 1px solid #E8E6EB;;
    width: 70%;
    margin-top: 15px;
}
.quiz-modal-content h4{
    font-weight: 700;
    font-size: 18px;
    line-height: 40px;
    color: #635274;
}
/* for responsive */

@media only screen and (min-width: 1450px) and (max-width: 2000px) {
    .text-part {
        background: url(../images/quiz/back0.png);
        background-size: 100% 519px;
        background-repeat: no-repeat;
        height: 635px;
        /* border: 1px solid red; */
        width: 733.56px;
    }
.quiz-margin{
    margin-bottom: 120px;
    margin-top: 100px!important;
}
    .quiz-content {
        margin-top: 106px;
        margin-left: 84px;
        width: 83%;
    }

    .change-container {
        min-height: 500px;
    }
.quiz-image img {
    height: 500px;
   ;
}
}
@media only screen and (min-width: 589px) and (max-width: 1350px) {
    .pass-div input {
        width: 70%;
    }
}

@media (max-width: 588px) {
    .quiz-button a {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
    .quiz-nav{
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto;
        margin-left: auto;
    }
    .right-part-form {
    width: 90%;
}
    .reg-part {
    min-height: 400px;
}

.reg-back {
    min-height: 400px;
}
    .front-row {
        flex-direction: column-reverse;
    }
.login-bottom{
    flex-direction: column-reverse;
}
.login-bottom p{
    text-align: center;
}
.login-bottom button{
    width: 100%;
    margin-bottom: 20px;
}
.reg-right-part-form {
    width: 90%;
}
.pass-change-button{
    width: 100%;
}
    #quiz {
        background: url(../images/quiz/back.png);
        background-repeat: no-repeat;
        width: 100%;
        background-size: cover;
        /* height: 100vh; */
    }

    .text-part {
        background: none;
        background-size: 96% 450px;
        background-repeat: no-repeat;
        width: 380px;
        height: 412.71px;
    }

    .img-part {
        margin-top: 80px;
    }

    .quiz-content {
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .quiz-content h4{
      text-align: center;
    }
    .quiz-content {
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .quiz-button {
        margin-top: 50px;
    }

    .quiz-button a {
        padding: 16px 25px;
    }

    .quiz-content p {
        text-align: center;
    }

    .column-gap {
        margin-top: 30px;
    }

    .event-age-button {
        width: 100%;
    }

    .user-id input {
        width: 80%;
    }

    .user-pass input {
        width: 73%;
    }

    .left-part {
        height: 50vh;

    }

    .left-part-new {
        height: 50vh;
    }

    .logo-back {
        height: 50vh;
    }

    .logo-back-new {
        height: 50vh;
    }

    .login-form-row {
        --bs-gutter-x: 0rem !important;
    }

    .go-back-btn {
        text-align: center;
    }

    .card-row {
        grid-template-columns: repeat(1, 1fr);
    }

    .top-card-row {
        gap: 10px;
    }

    .img-clock {
        margin-top: 28px;
    }

    .quiz-row {
        flex-direction: column-reverse;
    }

    .pass-change {
        text-align: center;
    }

    .pass-change img {
        margin-left: 0px;
    }

    .pro-update {
        text-align: center;
    }

    .pro-update img {
        margin-left: 0px;
    }
    .pass-change-div input {
     width: 78%;
 }
}