@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
:root {
    --parent-blue: #4FB0C2;
    --white: #ffffff;
    --black-color: #000000;
    --text-grey-color: #636363;
    --multishadecolor: linear-gradient(90deg, #4FB0C2 0%, #97CA49 95.52%);
    --tutor-green: #97CA49;
    --grey-background: #A8A8A8;
    --border-color: #D9D9D9;
    --btn-purple-color: #631B5D;
    --text-yellow: #F7B310;
}

* {
    margin: 0;
    padding: 0;
}

.required_error_msg {
    color: red !important;
}

html {
    font-size: 16px;
}


/* login section start */

.csm-show-error li {
    font-size: 12px;
    list-style-type: none;
    margin: 0;
    color: red;
}

.left-logo-pannel {
    position: fixed;
}

.set-logo-img {
    top: -45px;
    right: 0;
    left: -30px;
    position: fixed;
    background: #9E5F91;
    border-radius: 0% 50% 50% 0%;
    padding: 10px;
    height: 200px !important;
    width: 200px;
    object-fit: contain;
}

.csm-form-all {
    /* background: rgba(255,255,255,0.6); */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
}


/* login section end */


/* parent Registration start */

.custom-height {
    height: 100vh;
}

.csm-login-up {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/assets/backend/img/theme-bg-img-2.png);
    background-repeat: no-repeat;
    background: rgb(217, 189, 227);
    background: linear-gradient(135deg, rgba(217, 189, 227, 1) 32%, rgba(255, 244, 235, 1) 63%);
}

.csm-registration-up {
    background: rgb(255, 200, 239);
    background: linear-gradient(56deg, rgba(255, 200, 239, 1) 0%, rgba(216, 200, 228, 1) 100%);
}

.logoImg {
    max-width: 100%;
    padding: 20px;
    height: 100% !important;
}

.leftSide {
    padding: 20px 10px 20px 10px;
}

.leftSide h2 {
    padding-bottom: 20px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    color: #000000;
}

.leftSide>p {
    padding-top: 40px;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    font-weight: 500;
}

.btn-parent {
    background-color: var(--btn-purple-color);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: var(--white);
    padding: 20px 10px;
    border-radius: 10px;
    display: inline-block;
    width: 100%;
    transition: 0.3s all ease-in-out;
}

.btn-parent:hover {
    background-color: var(--text-yellow);
}

.btn-tutor {
    background-color: #631B5D;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    padding: 20px 10px;
    border-radius: 10px;
    border: none;
    display: inline-block;
    width: 100%;
    transition: 0.3s all ease-in-out;
}

.btn-tutor:hover {
    background-color: var(--text-yellow);
}

.signUp p a {
    text-decoration: none;
    color: #000000;
    font-weight: 700;
    text-align: center;
    margin-top: 80px;
}

.overlay-custom {
    top: 0;
    position: absolute;
    bottom: 0;
    background: #000000;
    opacity: 0.1;
    z-index: 99;
    left: 0;
    right: 0;
}

.signUp p {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
}

.here-signup p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}

.registration-img-bg {
    height: 100% !important;
    display: block;
    object-fit: cover;
    width: 100%;
}

.parent-img-bg {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    display: block;
}

.parent-img-icon {
    top: 35%;
}

.fg-input-label {
    font-weight: 600;
    font-size: 16px;
    padding-bottom: 5px;
}

.fg-psw p {
    padding: 21px 0px !important;
}

.fg-psw a {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    text-decoration-line: underline;
    color: #000000;
}

.sign-up-form label {
    font-size: 15px;
    font-weight: 600;
    padding: 5px 0px;
    color: #888;
}

.sign-up-form input {
    font-size: 14px;
}

.sign-up-form a {
    color: #000;
    background: #D9D9D9;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    display: block;
}

.sign-up-form button {
    color: var(--white) !important;
    padding: 7px 20px !important;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    display: block;
    border-radius: 50px;
    background: var(--btn-purple-color);
    border: 1px solid #D9D9D9;
}

.csm-steps-name {
    margin: 10px 0px 0px 0px !important;
}

.csm-steps-name li span {
    width: 100% !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    height: 0px !important;
    line-height: unset !important;
}

.csm-steps-name li::after {
    display: none !important;
}

.csm-steps-name li.active span {
    color: #000 !important;
}

.csm-steps-name li.activated span {
    color: #000 !important;
}

.registration {
    height: 100vh;
}

.close-class {
    position: absolute;
    top: 0;
    right: 0;
    text-decoration: none;
    color: red;
    font-size: 18px;
    font-weight: 900;
    padding: 0 !important;
    text-align: right;
    padding-right: 8px !important;
}

.btn-subscribe {
    background-color: transparent !important;
    color: #000 !important;
    padding: 10px;
    text-align: center;
    width: 100%;
    border-radius: 20px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
}

@media(max-width:991px) {
    .parent-img-icon {
        top: 12%;
    }
}

@media screen and (max-width: 769px) {
    .btn-parent {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px;
    }
    .btn-tutor {
        display: block !important;
    }
    .leftSide h2 {
        font-size: 30px;
    }
}

@media(max-width:767px) {
    .registration {
        height: auto!important;
    }
    .leftSide>p {
        padding-top: 0;
        font-size: 12px;
        line-height: 48px;
        text-align: center;
        font-weight: 500;
    }
    .parent-img-icon {
        top: 40%;
    }
}

@media screen and (max-width: 375px) {
    .leftSide h2 {
        font-size: 22px;
    }
}


/* parent registration end */


/* form header start */

.form-wizard-header {
    background: #F0F0F0;
    padding: 0px 0px 20px 0px;
}

.form-wizard-header p {
    background: var(--btn-purple-color);
    color: var(--white);
    padding: 8px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 10px 10px 0px 0px;
}


/* form header end */


/* Parent Registration Form Start */


/* body {
  background-color: #ffffff;
  color: #444444;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300;
  margin: 0;
  padding: 0;
} */

.wizard-content-left {
    background-blend-mode: darken;
    background-color: rgba(0, 0, 0, 0.45);
    background-image: url("https://i.ibb.co/X292hJF/form-wizard-bg-2.jpg");
    background-position: center center;
    background-size: cover;
    height: 100vh;
    padding: 30px;
}

.wizard-content-left h1 {
    color: #ffffff;
    font-size: 38px;
    font-weight: 600;
    padding: 12px 20px;
    text-align: center;
}

.form-wizard {
    color: #888888;
}

.form-wizard .wizard-form-radio {
    display: inline-block;
    margin-left: 5px;
    position: relative;
}

.form-wizard .wizard-form-radio input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-color: #dddddd;
    height: 25px;
    width: 25px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.form-wizard .wizard-form-radio input[type="radio"]:focus {
    outline: 0;
}

.form-wizard .wizard-form-radio input[type="radio"]:checked {
    background-color: #fb1647;
}

.form-wizard .wizard-form-radio input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ffffff;
    border-radius: 50%;
    left: 1px;
    right: 0;
    margin: 0 auto;
    top: 8px;
}

.form-wizard .wizard-form-radio input[type="radio"]:checked::after {
    content: "";
    display: inline-block;
    webkit-animation: click-radio-wave 0.65s;
    -moz-animation: click-radio-wave 0.65s;
    animation: click-radio-wave 0.65s;
    background: #000000;
    content: '';
    display: block;
    position: relative;
    z-index: 100;
    border-radius: 50%;
}

.form-wizard .wizard-form-radio input[type="radio"]~label {
    padding-left: 10px;
    cursor: pointer;
}

.form-wizard .form-wizard-header {
    text-align: center;
    border-radius: 10px 10px 0px 0px;
}

.form-wizard .form-wizard-next-btn,
.form-wizard .form-wizard-previous-btn,
.form-wizard .form-wizard-submit {
    background-color: #d65470;
    color: #ffffff;
    display: inline-block;
    min-width: 100px;
    min-width: 120px;
    padding: 10px;
    text-align: center;
}

.form-wizard .form-wizard-next-btn:hover,
.form-wizard .form-wizard-next-btn:focus,
.form-wizard .form-wizard-previous-btn:hover,
.form-wizard .form-wizard-previous-btn:focus,
.form-wizard .form-wizard-submit:hover,
.form-wizard .form-wizard-submit:focus {
    color: #ffffff;
    opacity: 0.6;
    text-decoration: none;
}

.form-wizard .wizard-fieldset {
    display: none;
}

.form-wizard .wizard-fieldset.show {
    display: block;
    padding: 30px 16px;
}

.form-wizard .wizard-form-error {
    display: none;
    background-color: #d70b0b;
    height: 2px;
    width: 100%;
    position: relative;
}

.form-wizard .form-wizard-previous-btn {
    background-color: #fb1647;
}

.form-wizard .form-control {
    /* font-weight: 300; */
    color: #888888;
}

.form-wizard .form-control:focus {
    box-shadow: none;
}

.form-wizard .form-group {
    position: relative;
    margin: 8px 0px 8px 0px;
}

.form-group input,
.form-group textarea {
    padding: 10px 12px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #A8A8A8;
}

.wizard-form-text-label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: #000;
}

.form-wizard .focus-input .wizard-form-text-label {
    color: #000;
    top: -18px;
    transition: 0.2s linear all;
    font-size: 12px;
}

.form-wizard .form-wizard-steps {
    /* margin: 30px 0; */
    margin: 30px 0px 0px 0px;
}

.form-wizard .form-wizard-steps li {
    width: 33%;
    float: left;
    position: relative;
}


/* .form-wizard .form-wizard-steps li::after {
  background-color: #f3f3f3;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
} */

.form-wizard .form-wizard-steps li::after {
    background-color: #f3f3f3;
    content: "";
    height: 5px;
    left: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
}

.form-wizard .form-wizard-steps li span {
    background-color: #dddddd;
    border-radius: 50%;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    position: relative;
    text-align: center;
    width: 40px;
    z-index: 1;
}


/* .form-wizard .form-wizard-steps li:last-child::after {
  width: 50%;
} */

.form-wizard .form-wizard-steps li:last-child::after {
    width: 0%;
}

.form-wizard .form-wizard-steps li.active span,
.form-wizard .form-wizard-steps li.activated span {
    background-color: var(--btn-purple-color);
    color: #ffffff;
}


/* .form-wizard .form-wizard-steps li.active::after,
.form-wizard .form-wizard-steps li.activated::after {
  background-color: #636363;
  left: 50%;
  width: 50%;
  border-color: #636363;
} */

.form-wizard .form-wizard-steps li.active::after,
.form-wizard .form-wizard-steps li.activated::after {
    background-color: #f3f3f3;
    left: 50%;
    width: 100%;
    border-color: #f3f3f3;
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
}


/* .form-wizard .form-wizard-steps li.activated::after {
  width: 100%;
  border-color: #636363;
} */

.form-wizard .form-wizard-steps li.activated::after {
    width: 100%;
    border-color: var(--btn-purple-color);
    background-color: var(--btn-purple-color);
}

.form-wizard .form-wizard-steps li:last-child::after {
    left: 0 !important;
    width: 0 !important;
}

.form-wizard .wizard-password-eye {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}


/* for password style */

#PasswordForm {
    max-width: 100%;
    padding: 5px 0px;
}

#password-strength {
    display: block;
    position: relative;
    font-size: 0px;
    top: 2px;
}

#PasswordForm .box {
    position: relative;
    width: 25%;
    height: 5px;
    display: inline-block;
    background-color: #e4e4e4;
    text-align: center;
}

#PasswordForm .box div.bar-text {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    font-size: 13px;
    z-index: 3;
    line-height: 25px;
}

#PasswordForm .box div.bar {
    position: absolute;
    width: 0%;
    height: 100%;
    z-index: 2;
    -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

#PasswordForm .normal .box.box1 div.bar {
    background: #FF0000;
    width: 100%;
}

.box.box1,
#PasswordForm .box.box1 div.bar {
    border-radius: 5px 0px 0px 5px;
}

.box.box4,
#PasswordForm .box.box4 div.bar {
    border-radius: 0px 5px 5px 0px;
}

#PasswordForm .normal .box.box1 div.bar-text,
#PasswordForm .medium .box.box1 div.bar-text,
#PasswordForm .strong .box.box1 div.bar-text,
#PasswordForm .vstrong .box.box1 div.bar-text {
    color: #fff;
}

#PasswordForm .medium .box.box1 div.bar {
    background: #E66C2C;
    width: 100%;
}

#PasswordForm .medium .box.box2 div.bar {
    background: #E66C2C;
    width: 100%;
}

#PasswordForm .strong .box.box1 div.bar {
    background: #2D98F3;
    width: 100%;
}

#PasswordForm .strong .box.box2 div.bar {
    background: #2D98F3;
    width: 100%;
}

#PasswordForm .strong .box.box3 div.bar {
    background: #2D98F3;
    width: 100%;
}

#PasswordForm .vstrong .box.box1 div.bar {
    background: #006400;
    width: 100%;
}

#PasswordForm .vstrong .box.box2 div.bar {
    background: #006400;
    width: 100%;
}

#PasswordForm .vstrong .box.box3 div.bar {
    background: #006400;
    width: 100%;
}

#PasswordForm .vstrong .box.box4 div.bar {
    background: #006400;
    width: 100%;
}

.terms-condition {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #333;
}
/* div#PasswordCriteria {
    display: flex;
    flex-wrap: wrap;
} */
a.btn.primary-btn-google {
    background-color: #631B5D;
    color: white;
    font-weight: 600;
}
a.btn.primary-btn-google:hover {
    background-color: #F9C013;
    color: #631B5D;
    font-weight: 600;
}

span.commonClass {
    color: #000;
}


.form-wizard-next-btn {
    background-color: transparent !important;
    color: #000 !important;
    padding: 10px;
    text-align: center;
    width: 100%;
    border-radius: 20px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-weight: 500;
}

.form-wizard-previous-btn {
    background-color: transparent !important;
    color: #000 !important;
    padding: 10px;
    text-align: center;
    width: 100%;
    border-radius: 20px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-weight: 500;
}


/* password end */


/* form 2 start */

.dropdown .level-dropdown {
    width: 100%;
    margin: 0;
    background: transparent;
    color: #000;
    border-color: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.child-section-wrap {
    border: 1px solid #ccc;
    padding: 0 !important;
}

.btn-secondary:hover {
    color: #888 !important;
    background-color: transparent !important;
    border-color: #ccc !important;
}

.csm-accordian a {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    background-color: #F9C013;
}

.csm-accordian a:hover {
    color: #000;
}

.csm-accordian a p {
    margin: 0;
    color: #631B5D;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
}
a.form-wizard-next-btn.submitForm.float-right {
    background-color: #631B5D!important;
    color: white!important;
}
.form-before-cu a.form-wizard-next-btn.submitForm.float-right {
width: 50%!important;
}
/* form 2 end */


/* form 3 start */

.csm-add-credit-btn {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 50px !important;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 12px !important;
    width: auto !important;
    color: #000 !important;
    font-weight: 600 !important;
}

.card-body {
    padding: 2rem 3rem !important;
}

.wizard-title h5 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
}


/* form 3 end */


/* form 4 start */

.confirm-table table tr td:nth-child(1) {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
}

.confirm-table table tr td:nth-child(2) {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #000000;
}

.confirm-table table tr td:nth-child(3) {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 10px;
    color: #000;
}

.confirm-table {
    padding: 20px;
    background: #F1F1F1;
    border-radius: 5px;
}

.confirm-table table tr td {
    padding: 15px 5px !important;
    border: none;
}

.confirm-table table tr td a {
    color: #000;
}

.csm-confirm-tbl tr {
    border-bottom: 1px solid #C6C6C6 !important;
}

.csm-confirm-tbl tr:last-child {
    border-bottom: none !important;
}


/* form 4 end */

@keyframes click-radio-wave {
    0% {
        width: 25px;
        height: 25px;
        opacity: 0.35;
        position: relative;
    }
    100% {
        width: 60px;
        height: 60px;
        margin-left: -15px;
        margin-top: -15px;
        opacity: 0.0;
    }
}

@media screen and (max-width: 767px) {
    .wizard-content-left {
        height: auto;
    }
}

@media(max-width:480px) {
    .card-body {
        padding: 2rem 1rem !important;
    }
}


/* Parent Registration Form end */


/* teacher registration start */

.custom-file-upload {
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 10px 23px !important;
    cursor: pointer;
}

.csm-requirment {
    font-size: 12px;
    font-weight: 400;
    color: #000;
    font-style: italic;
    padding-top: 6px;
}

.csm_thrive_fileup {
    font-size: 1rem !important;
    border: 1px solid #dee2e6 !important;
    width: 100%;
    padding: 10px 23px !important;
    color: #000 !important;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 !important;
    font-size: 12px !important;
}

.show-file-error span {
    font-size: 12px;
}

.csm-uploadmedia-btn {
    width: 100%;
    padding: 10px 28px !important;
    background: transparent !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 50px !important;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #000 !important;
}

.wizard-step-now li {
    width: 20% !important;
}

.year-levels {
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    padding: 17px;
}

.select-grade {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #A8A8A8;
}

.select-grade input {
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    margin-right: 5px;
}

.year-title {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: #000000;
    padding-top: 37px;
}

.year-levels .levels-title {
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #000000;
}

.curriculum-wrap {
    display: flex;
    gap: 1rem;
    padding-top: 20px;
    align-items: center;
}

#result {
    color: red;
    font-size: 10px;
    margin: 0;
}


/* teacher registration end */


/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
    height: 64px;
    margin-top: 12px;
}

.app-brand-logo.demo svg {
    width: 22px;
    height: 38px;
}

.app-brand-text.demo {
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    text-transform: lowercase;
}


/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */


/* Detached navbar */

.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 76px !important;
}


/* Default navbar */

.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}


/* Navbar page z-index issue solution */

.content-wrapper .navbar {
    z-index: auto;
}


/*
* Content
******************************************************************************/

.demo-blocks>* {
    display: block !important;
}

.demo-inline-spacing>* {
    margin: 1rem 0.375rem 0 0 !important;
}


/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */

.demo-vertical-spacing>* {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element> :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-lg>* {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element> :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-xl>* {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element> :first-child {
    margin-top: 0 !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir='rtl'] .rtl-only {
    display: block !important;
}


/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
}

.layout-demo-placeholder img {
    width: 900px;
}

.layout-demo-info {
    text-align: center;
    margin-top: 1rem;
}


/* tutor Registration start */

.teaching-quality-wrap {
    padding-top: 10px;
}

.teaching-quality-wrap p {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    font-family: 'Inter';
    margin: 0;
    padding-bottom: 13px;
}

.join-list-wrap .decided-to-join {
    list-style-type: none;
    padding: 0;
}

.decided-to-join li,
.sub-select-list li {
    padding-bottom: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.csm-tabs-selected label {
    border: 1px solid #b0b0b0;
    padding: 3px 5px;
    border-radius: 5px;
    background: #d9d9d9;
    color: #a8a8a8;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

.select-after-tabs {
    padding-top: 16px;
    margin-bottom: 24px;
}

.select-after-tabs h3 {
    color: #a8a8a8;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    font-family: 'Inter';
}

.decided-to-join li label {
    color: #A8A8A8;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    font-family: 'Inter';
    font-style: normal;
}

.csm-textarea {
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    padding: 11px 13px;
    font-size: 12px;
    font-weight: 400;
    font-family: 'Inter';
    outline: none;
}

.answer-here-wrap {
    padding-top: 12px;
}

.csm-decrement {
    position: absolute;
    bottom: 0;
    right: 13px;
    color: #a8a8a8 !important;
    font-style: italic;
    font-size: 10px !important;
    font-weight: 400 !important;
    margin-bottom: 6px;
}

.select-year-level-wrap.subject-list {
    margin-top: 10px;
}

.sub-select-list {
    padding: 0;
    list-style-type: none;
}

.sub-select-list li label {
    color: #a8a8a8;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    font-family: 'Inter';
}

.subject-list .answer-title {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    font-family: 'Inter';
    margin: 0;
    padding-bottom: 10px;
}

.select_and_search {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.select_and_search .csm-select {
    width: 20%;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    font-size: 12px;
    color: #000;
    font-weight: 600;
    font-family: 'Inter';
}

.select_and_search .csm-search {
    width: 80%;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 1px solid #d9d9d9;
    font-family: 'Inter';
}

.csm-input-search {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000 !important;
    font-family: 'Inter';
}

.select-tabs {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.76rem;
}

.select-tabs .showing-subject {
    border: 1px solid #631B5D;
    padding: 10px 12px;
    border-radius: 5px;
    background: transparent;
    color: #631B5D;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.select-tabs .showing-subject:hover {
    background: #631B5D;
    color: #fff;
}
.select-tabs .showing-subject.active {
    border: 1px solid #b0b0b0;
    padding: 12px 15px;
    border-radius: 5px;
    background: #631B5D;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
}

.subject-experience-wrap {
    margin-top: 34px;
}

.csm-select:focus {
    border-color: #adadad !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.online-title {
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    font-family: 'Inter';
    margin: 0;
    padding-bottom: 11px;
}

.online-tutoring-wrap {
    margin-top: 10px;
}

.csm-style {
    margin-top: 10px;
}

.csm-wizard-steps li {
    width: 20% !important;
}


/* tutor Registration end */


/* .wizard-fieldset {
  height: 500px;
  overflow: auto;
} */

.csm-tutor-bg {
    background-color: #45B549 !important;
}
.select-age-cu{
        display: flex!important;
        /* flex-wrap: wrap; */
}


h5.csm-wizard_title.cu-title-reg{
margin-top: 0px!important;

}
.alert-primary {
    --bs-alert-color: #631B5D!important;
    --bs-alert-bg: #631b5d2e!important;
    --bs-alert-border-color: #631b5d2b!important;
    --bs-alert-link-color: #631B5D!important;
}
.cu-form-5-wizert  .form-group.col-md-8 {
    margin: 0 auto;
    margin-top: 62px;
}
/* @media(min-width:1451px){
  .registration{
    overflow: hidden;
    z-index: 999999 !important;
    position: fixed ;
    width: 100% !important;
  }
  .img-section-wrap{
    position: fixed !important;
    width: 440px !important;
  }
  .csm-wizard-fieldset .csm-wizard_title{
    margin-top: 160px !important;
  }
  .detail-section-wrap{
    margin-left: 440px;
  }
  .form-wizard-header{
    position: fixed !important;
    width: 880px;
    z-index: 999;
  }
  .csm-wizard-fieldset{
    overflow: auto;
    height: 100vh;
  }
  .form-wizard .wizard-fieldset.show {  
    min-height: 100%;
    overflow: auto;
    max-height: 100% !important;
}
}

@media(max-width:1450px){
  .registration{
    overflow: hidden;
    z-index: 999999;
    position: fixed;
    width: 100%;
  }
  .img-section-wrap{
    position: fixed !important;
    width: 378px !important;
  }
  .csm-wizard-fieldset .csm-wizard_title{
    margin-top: 160px !important;
  }
  .detail-section-wrap{
    margin-left: 379px;
  }
  .form-wizard-header{
    position: fixed !important;
    width: 758px;
    z-index: 999;
  }
  .csm-wizard-fieldset{
    overflow: auto;
    height: 100vh;
  }
  .form-wizard .wizard-fieldset.show {
    min-height: 100%;
    overflow: auto;
    max-height: 500px !important;
}
}

@media(max-width:1200px){
  .registration{
    overflow: hidden;
  }
  .img-section-wrap{
    position: fixed ;
    width: 320px !important;
  }
  .csm-wizard-fieldset .csm-wizard_title{
    margin-top: 160px !important;
  }
  .detail-section-wrap{
    margin-left: 320px;
  }
  .form-wizard-header{
    position: fixed ;
    width: 640px !important;
    z-index: 999;
  }
  .csm-wizard-fieldset{
    overflow: auto;
    height: 100vh;
  }
  .form-wizard .wizard-fieldset.show {
    min-height: 100%;
    overflow: auto;
    max-height: 500px !important;
  }
}

@media(max-width:991px){
  .form-wizard .wizard-fieldset.show {
    display: block;
    padding: 30px 30px;
  }
  .registration{
    overflow: hidden;
  }
  .img-section-wrap{
    position: fixed ;
    width: 240px !important;
  }
  .csm-wizard-fieldset .csm-wizard_title{
    margin-top: 160px !important;
  }
  .detail-section-wrap{
    margin-left: 240px;
  }
  .form-wizard-header{
    position: fixed ;
    width: 480px !important;
    z-index: 999;
  }
  .csm-wizard-fieldset{
    overflow: auto;
    height: 100vh;
  }
  .form-wizard .wizard-fieldset.show {
    min-height: 100%;
    overflow: auto;
    max-height: 550px !important;
  }
} 

@media(max-width:767px){
  .form-wizard .wizard-fieldset.show {
    display: block;
    padding: 30px 30px;
  }
  .registration{
    overflow: unset !important;
    position: relative;
  }
  .csm-login-registration{
    position: relative !important;
    overflow: unset !important;
  } 
  .img-section-wrap{
    position: relative !important;
    width: 100% !important;
  }
  .csm-wizard-fieldset .csm-wizard_title{
    margin-top: 0 !important;
  }
  .detail-section-wrap{
    margin-left: 0px;
  }
  .form-wizard-header{
    position: relative !important;
    width: auto !important;
    z-index: 999;
  }
  .csm-wizard-fieldset{
    overflow: unset;
    height: auto;
  }
  .custom-height{
    height: auto !important;
  }
} */


/* new one */

@media(min-width:1400px) {
    .img-section-wrap {
        position: fixed !important;
        height: 100vh;
    }
    .csm-wizard-fieldset .csm-wizard_title {
        margin-top: 160px !important;
        margin-bottom: 28px !important;
    }
    .form-wizard-header {
        position: fixed;
        right: 19%;
        left: 19%;
        z-index: 999;
    }
    /* .csm-form-all {
        position: absolute;
        right: 0;
        left: 33.33%;
    } */
}

@media(max-width:1400px) {
    .img-section-wrap {
        position: fixed !important;
        height: 100vh;
    }
    .csm-wizard-fieldset .csm-wizard_title {
        margin-top: 160px !important;
        margin-bottom: 28px !important;
    }
    .form-wizard-header {
        position: fixed !important;
        right: 0;
        left: 33.33% !important;
        z-index: 999;
    }
    .csm-form-all {
        position: absolute;
        right: 0;
        left: 33.33%;
    }
}

@media(max-width:1200px) {
    .img-section-wrap {
        position: fixed !important;
        height: 100vh;
    }
    .csm-wizard-fieldset .csm-wizard_title {
        margin-top: 160px !important;
    }
    .form-wizard-header {
        position: fixed !important;
        right: 0;
        left: 33.33% !important;
        z-index: 999;
    }
    .csm-form-all {
        position: absolute;
        right: 0;
        left: 33.33%;
    }
}

@media(max-width:991px) {
    .img-section-wrap {
        position: fixed !important;
        height: 100vh;
    }
    .csm-wizard-fieldset .csm-wizard_title {
        margin-top: 160px !important;
    }
    .form-wizard-header {
        position: fixed !important;
        right: 0;
        left: 33.33% !important;
        z-index: 999;
    }
    .csm-form-all {
        position: absolute;
        right: 0;
        left: 33.33%;
    }
}

@media(max-width:768px) {
    .img-section-wrap {
        position: relative !important;
        height: auto;
    }
    .csm-wizard-fieldset .csm-wizard_title {
        margin-top: 0px !important;
    }
    .form-wizard-header {
        position: relative !important;
        right: 0;
        left: 0px !important;
        z-index: 999;
    }
    .csm-form-all {
        position: relative;
        right: 0;
        left: 0px;
    }
    .select_and_search .csm-select {
        width: 50%;
    }
}

@media(max-width:480px) {
    .form-wizard .wizard-fieldset.show {
        display: block;
        padding: 30px 20px;
    }
    .select_and_search {
        flex-direction: column;
    }
    .select_and_search .csm-select {
        width: 100%;
        border-radius: 50px;
        margin-bottom: 20px;
    }
    .csm-search .input-group input {
        border-top-left-radius: 50px !important;
        border-bottom-left-radius: 50px !important;
    }
    .select_and_search .csm-search {
        width: 100%;
        border-radius: 50px;
    }
    .csm-decrement {
        position: relative;
        text-align: end;
    }
    .select_and_search {
        width: 100%!Important;
    }
    .select-age-cu {
        display: flex!important;
        flex-wrap: wrap;
    }
    .form-before-cu {
        display: flex;
        flex-wrap: wrap;
    }
    .form-before-cu a.form-wizard-next-btn.submitForm.float-right {
        width: 100%!important;
        margin-bottom: 5px;
    }
    .cu-form-5-wizert  .form-group.col-md-8 {
        margin-top: 0px;
    }
    h5.csm-wizard_title.cu-title-reg {
        margin-top: 0px!important;
        margin-bottom: 0px!important;
    }

}