/* progress bar */
.visibility-hidden{
    visibility: hidden;
}

ul.form-stepper {
    counter-reset: section;
    padding: 6px;
}
ul.form-stepper .form-stepper-circle {
    position: relative;
}
ul.form-stepper .form-stepper-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.form-stepper-horizontal {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
ul.form-stepper div:not(:last-of-type) li {
    margin-bottom: 0.625rem;
    -webkit-transition: margin-bottom 0.4s;
    -o-transition: margin-bottom 0.4s;
    transition: margin-bottom 0.4s;
}
.form-stepper-horizontal div:not(:last-of-type) li {
    margin-bottom: 0 !important;
}
.form-stepper-horizontal li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.form-stepper-horizontal div:not(:last-child) li:after {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 8px;
    content: "";
    top: 32%;
    background-color: #F3EFFA;
    outline: 1px solid #F3EFFA;
}
.form-stepper-horizontal li:after {
    background-color: #dee2e6;
}
.form-stepper-horizontal div.form-stepper-completed li:after {
    background-color: var(--primary-color);
    outline: 1px solid var(--primary-color);
}
.form-stepper-horizontal div:last-child li {
    flex: unset;
}

.form-stepper a {
    z-index: 1;
    display: flex;
    cursor: default;
    width: fit-content;
    height: fit-content;
    margin: unset !important;
}

ul.form-stepper li a .form-stepper-circle {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 0;
    line-height: 1.7rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.38);
    border-radius: 50%;
}
.form-stepper .form-stepper-active .form-stepper-circle {
    background-color: var(--primary-color) !important;
    color: #fff;
}
.form-stepper .form-stepper-active .label {
    color: var(--primary-color) !important;
}
.form-stepper .form-stepper-active .form-stepper-circle:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
.form-stepper .form-stepper-unfinished .form-stepper-circle {
    background-color: #F3EFFA;
}
.form-stepper .form-stepper-completed .form-stepper-circle {
    background-color: var(--primary-color) !important;
    color: #fff;
}
.form-stepper .form-stepper-completed .label {
    color: var(--primary-color) !important;
}
.form-stepper .form-stepper-completed .form-stepper-circle:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.form-stepper .label {
    font-size: 1rem;
    margin-top: 0.5rem;
    width: 100%;
    display: flex;
    text-align: left;

    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    text-align: left;
}

.form-stepper div {
    width: 100%;
}

.form-stepper div:last-child {
    width: fit-content;
    flex-shrink: 0;
}

/* signin page styles */

.banner > .main-content {
    padding: 15px;
    width: 50%;
    /* height: 630px; */
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px 0px #D0D1D780;
    margin-bottom: 20px;

    justify-content: center;
    align-items: flex-start;
    position: relative;
    display: flex; /* or use 'grid' */
    /* min-height: 675px; */
}

.banner > .main-content > .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* gap: 20px; */
}

.banner > .main-content > .content > .header,

.banner > .main-content > .content > .footer  {
    width: 342px;
}
.banner > .main-content > .content > .body > section{
    width: 342px;
    display: flex;
}

.banner > .main-content > .content > .header-body-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner > .main-content > .content > .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.banner > .main-content > .content > .header > h3,
.banner > .main-content > .content > .header > h4 {
    margin: unset;
}

.banner > .main-content > .content > .header > h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    color: var(--main-heading-color);
}

.banner > .main-content > .content > .header > h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    color: var(--sub-heading-color);
}

.banner > .main-content > .content > .body > section form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1; 
    /* min-height: 600px; */
    /* overflow-y: auto;  */
    /* padding: 10px 20px; */
}

.banner > .main-content > .content > .body > section form > .input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    position: relative;
}

.banner > .main-content > .content > .body > section form > .input-wrapper.profile-picture {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner > .main-content > .content > .body > section form > .input-wrapper.profile-picture label {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.banner > .main-content > .content > .body > section form > .input-wrapper.profile-picture label img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.banner > .main-content > .content > .body > section form > .input-wrapper.profile-picture input {
    background-color: unset;
    box-shadow: unset;
    border: unset;
    width: unset;
    display: none;
}

.banner > .main-content > .content > .body > section form > .input-wrapper.profile-picture svg.edit-btn {
    position: absolute;
    right: 0;
    bottom: 0;
}

.banner > .main-content > .content > .body > section form > .input-wrapper.profile-picture label span{
    font-size: 12px;
    font-weight: 600;
    line-height: 16.8px;
    text-align: center;
    color: var(--sub-heading-color);
}

.banner > .main-content > .content > .body > section form > .input-wrapper > svg,
.banner > .main-content > .content > .body > section form > .input-wrapper > .password-input-div > svg:first-child {
    position: absolute;
    left: 10px;
    top: 7px;
}

.banner > .main-content > .content > .body > section form > .input-wrapper.dropdown svg.arrow-icon {
    position: absolute;
    right: 10px;
    left: unset;
}


.banner > .main-content > .content > .body > section form > .input-wrapper > input,
.banner > .main-content > .content > .body > section form > .input-wrapper > .password-input-div input,
.banner > .main-content > .content > .body > section form > .input-wrapper > textarea {
    padding-left: 46px !important;
    text-transform: capitalize;
}
/* .banner > .main-content > .content > .body > section form > .input-wrapper > #dob{
    text-transform: uppercase !important;
} */

.banner > .main-content > .content > .body > section form > .input-wrapper > input.dropdown-input {
    padding-right: 32px;
}

.banner > .main-content > .content > .body > section form > .input-wrapper > div {
    width: 100%;
    position: relative;
}

.banner > .main-content > .content > .body > section form > .input-wrapper.forgot-password {
    align-items: flex-end;
}

.banner > .main-content > .content > .body > section form > .input-wrapper > div {
    position: relative;
}

.banner > .main-content > .content > .body > section form > .input-wrapper > div > svg{
    position: absolute;
    top: 15px;
    right: 15px;
}

.input-wrapper.dropdown .dropdown-menu.show {
    display: block;
    padding: 0;
    width: 100%;
    border: 1px solid #ffffff;
    box-shadow: 0px 0px 20px 0px #D0D1D780;
    border-radius: 8px;
}

.input-wrapper.dropdown .dropdown-menu.show li{
    overflow: hidden;
}

.input-wrapper.dropdown .dropdown-menu.show li:not(li:last-child){
    overflow: hidden;
    border-bottom: 2px solid #F5F6F8;
}

.input-wrapper.dropdown .dropdown-menu.show li:first-child{
    border-radius: 8px 8px 0px 0px;
}

.input-wrapper.dropdown .dropdown-menu.show li:last-child{
    border-radius: 0px 0px 8px 8px;
}

.input-wrapper.dropdown .dropdown-menu.show > .dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active {
    color: #ffffff;
    background-color: var(--primary-color);
}

.input-wrapper.dropdown .dropdown-menu.show > .dropdown-item > label {
    height: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.input-wrapper.dropdown .dropdown-menu.show > .dropdown-item > label > input {
    appearance: none;
    border: 1px solid var(--primary-color);
    width: 14px;
    height: 14px;
    content: none;
    outline: none;
    margin: 0;
    border-radius: 4px;
    padding: unset;
}

.input-wrapper.dropdown .dropdown-menu.show > .dropdown-item:hover > label > input {
    background-color: #ffffff;
}

.input-wrapper.dropdown .dropdown-menu.show > .dropdown-item > label > input[type="radio"]:checked {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.input-wrapper.dropdown .dropdown-menu.show > .dropdown-item > label span {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    color: var(--sub-heading-color);
}

.input-wrapper.dropdown .dropdown-menu.show > .dropdown-item:hover span {
    color: #ffffff;
}

.input-wrapper > textarea {
    height: 90px;
    resize: none;
} 


.banner > .main-content > div.content > div.body > section > div.footer {
    border-top: unset;
    justify-content: center;
    margin-top: unset;
    padding: unset;
    background-color: unset;
}

.footer .main-footer-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer .main-footer-content > p {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 18.6px;
    margin: unset;
}

.footer .main-footer-content > p a{
    color: var(--primary-color) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 21.6px;
}  

.footer .main-footer-content > button {
  width: 100%;
  padding: 7px !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background-color: var(--primary-color) !important;
}

.footer .main-footer-content.next-footer {
    flex-direction: row;
}

.footer .main-footer-content.availability {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer .main-footer-content.availability > button {
    width: 342px
}

.footer .separator {
    width: 100%;
    display: flex;
    align-items: center;
}

hr {
    border: 1px solid #A6A7A8;
    margin: unset;
}

.footer .btn.social-btn {
    background-color: #F5F6F8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    border: 1px solid #ffffff !important;
}

section .footer {
    background-color: #ffffff;
    margin:  unset;
    padding: unset;
}

/* Education form */

.add-education {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-education button {
    width: 25%;
    background-color: var(--primary-color);
    border: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 26.99px;
    text-align: center;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.add-education > span {
    font-size: 14px;
    font-weight: 600;
    line-height: 21.6px;
    text-align: center;
}

.add-education button:hover,
.add-education button:active {
    background-color: var(--primary-color);
}

.education-wrapper {
    width: 100%;
    height: 160px;
    overflow: auto;
    border: 1px solid #00000026;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.education-wrapper .education-item {
    width: 100%;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px #D0D1D780;
}

.education-wrapper .education-item .info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.education-wrapper .education-item .info .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 200px;
}

.education-wrapper .education-item .info .content p {
    margin: unset;
    font-size: 12px;
    font-weight: 600;
    line-height: 12.8px;
    text-align: left;
}

.education-wrapper .education-item .info .content span{
    font-size: 10px;
    font-weight: 400;
    line-height: 12.4px;
    text-align: left;
}

.date-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-container .input-wrapper {
    display: flex;
    position: relative;
}

.date-container .input-wrapper input {
    padding-left: 40px;
}

.date-container .input-wrapper svg {
    position: absolute;
    left: 10px;
    top: 10px;
}

/* availablity style */

section.availablity {
    width: 650px !important;
}

.availablity-container {
    width: 100%;
    height: 385px;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0px 0px 20px 0px #D0D1D780;
    padding: 10px;
}

.availablity-container > .header {
    width: 100%;
}

.availablity-container > .header > h2 {
    font-size: 16px;
    font-weight: 700;
    line-height: 31.99px;
    text-align: left;

}

.availablity-container > .timelines {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.availablity-container > .timelines > .timeline-item {
    display: flex;
    justify-content: space-between;
    align-items:center;
    gap: 20px;
}

.availablity-container > .timelines > .timeline-item > .day-action-container {
    display: flex;
    justify-content: space-between;
    align-self: flex-start;
    padding-top: 7px;
    width: 100%;
}

.availablity-container > .timelines > .timeline-item > .day-action-container > .day {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.availablity-container > .timelines > .timeline-item > .day-action-container > .day svg{
    width: 22px;
    height: 22px;
}

.availablity-container > .timelines > .timeline-item > .day-action-container > .day > span {
    font-size: 14px;
    font-weight: 600;
    line-height: 31.99px;
    text-align: left;
}

.form-check-input{
    background-color: #949494;
    border-color: #949494;
    background-position: right center;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-check-input:checked{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.availablity-container > .timelines > .timeline-item > .hours {
    display: flex;
    /* flex-wrap: wrap; */
    width: 100%;
    gap: 10px;
}

.availablity-container > .timelines > .timeline-item > .hours > .timings-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.availablity-container > .timelines > .timeline-item > .hours > .timings-container > .time-slot {
    display: flex;
    gap: 10px;
}

.availablity-container > .timelines > .timeline-item > .hours > .timings-container > .time-slot > .actions {
    display: flex;
    align-items: center;
}

.availablity-container > .timelines > .timeline-item > .hours .input-wrapper {
    display: flex;
    position: relative;
}

.availablity-container > .timelines > .timeline-item > .hours .input-wrapper svg {
    position: absolute;
    right: 10px;
    top: 10px;
}


.delete-dialog{
    max-width: 550px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 200px;
}

.delete-modal-width{
    width: 100%;
}
.delete-modal-heading{
    color: #2A1284;
}

.modal-delete-btn{
    background-color: #D93D45;
    color: #FFFFFF;
}
.modal-cancel-btn{
    background-color: #2A1284;
    color: #FFFFFF;
}


.c-password-heading {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.c-password-heading span {
    color: #494949;
    font-weight: 600;
}

.c-password-body form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 55%;
}

.c-password-body form .input-div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.c-password-body form .input-div svg {
    position: absolute;
    top: 42px;
    left: 7px;
}
.c-password-body form .input-div input{
    padding-left: 40px;
}
.c-password-btn{
    margin-top: 40px;
}
.c-password-btn button{
    background-color: #2A1284;
    color: #ffffff;
    border: unset;
    border-radius: 8px;
    padding: 6px 40px;
    font-size: 20px;
    font-weight: 600;

}


.edit-dialog{
    max-width: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 200px; */
}

.edit-modal-width{
    width: 50%;
}


.error-messages {
    color: red;
    font-size: 13px;
    /* margin-bottom: 10px; */
  }


.timeDropdown{
    height: 200px;
    overflow: auto;
    min-width: 135px !important;
}

.currently_working_here {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.currently_working_here label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    font-size: 14px;

}

.currently_working_here label > input{
    width: 14px;
    height: 14px;
    appearance: none;
    border: unset;
    border-radius: 4px;
    padding: unset;
    border: 1px solid var(--primary-color);
}

.currently_working_here label > input[type="checkbox"]:checked {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}



[lang = "ar"] {
    .banner > .main-content > .content > .body > section form > .input-wrapper > input, .banner > .main-content > .content > .body > section form > .input-wrapper > .password-input-div input, .banner > .main-content > .content > .body > section form > .input-wrapper > textarea {
        padding-right: 46px !important;
        padding-left: unset !important;
    }

    .banner > .main-content > .content > .body > section form > .input-wrapper > svg, .banner > .main-content > .content > .body > section form > .input-wrapper > .password-input-div > svg:first-child {
        position: absolute;
        right: 10px !important;
        top: 10px;
        left: unset !important;
    }

    .banner > .main-content > .content > .body > section form > .input-wrapper > div > svg {
        position: absolute;
        top: 15px;
        left: 15px !important;
        right: unset !important;
    }
    .banner > .main-content > .content > .body > section form > .input-wrapper.dropdown svg.arrow-icon {
        left: 10px !important;
        right: unset !important;
    }
    .availablity-container > .timelines > .timeline-item > .hours .input-wrapper svg{
        position: absolute;
        left: 10px !important;
        /* right: unset !important; */
    }
    .banner > .main-content > .content > .body > section form > .input-wrapper.profile-picture svg.edit-btn {
        position: absolute;
        right: 15px;
        bottom: 0;
    } 

    .time-slot .input-wrapper input{
        text-align: left;
        direction: ltr;
    }
    .banner > .main-content > .back-btn-container {
        position: absolute;
        right: 30px;
       left: unset;
    }
    .banner > .main-content > .back-btn-container > button {
        transform: rotate(180deg);
    }
}