@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
:root {
  --body-color: #e4e9f7;
  --sidebar-color: #1C2B3E;
  --primary-color: #f4f2f2;
  --primary-color-light: #f4f2f2;
  --toggle-color: #ddd;
  --text-color: #707070;
  --dark-color: #000;
  --trans-02: all 0.2s ease;
  --trans-03: all 0.3s ease;
  --trans-04: all 0.4s ease;
  --trans-04: all 0.5s ease;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
.my_menu_bar .accordion-flush .accordion-item .accordion-button{
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    box-shadow: none !important;
    background-color: #1C2B3E;
    font-weight: 500;
    color: #fff;
    font-size: 18px;
}
.accordion-header{
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}
.accordion-flush .accordion-item{
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    background-color: #1C2B3E;
    border: none !important;
}
.accordion-body{
    padding: 0;
}
.accordion-button:not(.collapsed){
    background-color: #fff !important;
    color: #1C2B3E !important;
}
.accordion-button::after{
    filter: invert(1);
}
.accordion-button:not(.collapsed)::after{
    filter: invert(1);
    filter: brightness(0);
}
.sidebar {
  position: relative;
  top: 0;
  left: 0px;
  height: 100vh;
  overflow-y: auto;
  width: 330px;
  background-color: var(--sidebar-color);
  padding: 10px 0px;
  transition: var(--trans-02);
}
.sidebar::-webkit-scrollbar{
    width: 0;
    height: 0;
}
.image-text{
    text-align: center;
}
.sidebar_links_main{
    padding: 25px 20px 10px 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar_links_main a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}
.my_menu_bar{
    padding-left: 30px;
}
.image-text img{
    height: 120px;
    width: auto;
}
#main{
    background-color: #1C2B3E;
    display: flex;
}
#mycontent{
    padding: 0px 25px 0px 25px;
    width: 100%;
    background: #F2F2F2;
    border-top-left-radius: 20px;
    height: 100vh;
}
#my_innercontent{
    margin-top: 15px;
    box-shadow: 0px 5px 5px 0px #523F690D;
    background: #FFFFFF;
    padding: 15px 20px;
    height: calc(100vh - 120px);
    border-radius: 12px;
    overflow-y: auto;
}
#my_innercontent::-webkit-scrollbar{
    height: 10px;
    width: 10px;
}
#my_innercontent::-webkit-scrollbar-track{
    background-color: #fff;
    border-radius: 10px;
}
#my_innercontent::-webkit-scrollbar-thumb{
    background-color: #1C2B3E;
    border-radius: 10px;
}
.sidebar header .toggle {
  position: absolute;
  top: 40px;
  right: -12px;
  transform: translateY(-50%) rotate(180deg);
  height: 26px;
  width: 26px;
  background-color: var(--dark-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  display: none;
}
.sidebar.close {
  width: 0px;
}
.sidebar.close .my_menu_bar{
    opacity: 0;
}
.sidebar.close .toggle {
  transform: translateY(-50%);
}
.toggle2{
    transform: translateY(-50%) rotate(180deg);
    height: 26px;
    width: 26px;
    background-color: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    display: none;
}
.sidebar.close .toggle2{
    transform: translateY(-50%);
}
.header_right_content_main{
    display: flex;
    gap: 120px;
    justify-content: end;
    width: 100%;
}
.header_title_div h2{
    font-size: 28px;
    font-weight: 600;
    line-height: 42px;
    letter-spacing: 0em;
    width: max-content;
    margin-bottom: 0;
}
.my_contant_header{
    padding: 15px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header_two_icons_div{
    display: flex;
    gap: 20px;
    align-items: center;
}
.header_icons1{
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
}
.header_icons2{
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
}
.header_two_icons_div span{
    position: absolute;
    top: -4px;
    left: 0;
    background: #1C2B3E;
    box-shadow: 0px 0px 10px 3px #1C2B3E33;
    color: #fff;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.header_searchbar{
    position: relative;
    width: 100%;
    max-width: 340px;
}
.header_searchbar input{
    padding: 10px 45px 10px 25px;
    width: 100%;
    max-width: 500px;
    background: #E3E3E3;
    border-radius: 40px;
    border: none;
    color: #6C757D;
    outline: none;
}
.header_searchbar img{
    position: absolute;
    cursor: pointer;
    right: 20px;
    top: 13px;
}
.accordion-button::after{
    transform: rotate(270deg);
}
.accordion-button:not(.collapsed)::after{
    transform: rotate(0deg);
}
.header_profile_div{
    display: flex;
    gap: 10px;
    text-align: end;
}
.header_profile_div h6{
    margin-bottom: 0;
}
.header_profile_div img{
    height: 45px;
    width: 45px;
}
.header_icons_profile_main{
    display: flex;
    gap: 30px;
}
.header_profile_div h6{
    font-weight: 600;
}
.header_profile_div small{
    color: #464A53;
}
.card_title{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 10px;
}
.save_changes_button_main{
    display: flex;
    align-items: center;
    gap: 10px;
}
.save_btn{
    background: #1C2B3E;
    box-shadow: -4px 2px 10px 0px #27272740;
    border: none;
    color: #fff;
    padding: 8px 15px;
    border-radius: 40px;
    font-size: 16px;
}
.cancel_btn{
    background: #F1F1F1;
    border: none;
    color: #9F9F9F;
    padding: 8px 15px;
    border-radius: 40px;
    font-size: 16px;
}
.card_title h3{
    font-size: 24px;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: 0em;
    text-transform: capitalize;
    color: #000;
}
.input_title_text{
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding-top: 10px;
}
.input_title_text h2{
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: 0em;
    width: 100%;
    max-width: max-content;
    margin-bottom: 0;
    text-transform: capitalize;
    color: #000;
}
.title_border{
    background: #E7E7E7;
    height: 3px;
    width: 100%;
}
.input_main_div{
    margin-top: 10px;
}
.input_inner_div{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}
.input_inner_div label{
    color: #7E7E7E;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-transform: capitalize;
}
.input_inner_div input{
    width: 100%;
    border: none;
    color: #000;
    padding: 15px 15px;
    border-bottom: 1px solid #C2C2C2;
    outline: none; 
}
.input_inner_div input::placeholder{
    color: #BBBBBB;
} 
.input_inner_div h5{
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: 0em;
    width: 100%;
    max-width: max-content;
    margin-bottom: 0;
    text-transform: capitalize;
    color: #000;
}
.my_checkboxbar_main_div{
    margin-top: 25px;
    display: flex;   
    gap: 20px;
}
.checkbox_main_div{
    display: flex;
    gap: 30px;
}
.checkbox_title p{
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0em;
    color: #000;
    margin-bottom: 0;
}
.checkbox_main_inner_div{
    display: flex;
    align-items: center;
    gap: 5px;
}
.checkbox_main_inner_div input{
    border-color: #01DDBF !important;
    box-shadow: -4px 2px 10px 0px #27272738;
    background-position: unset;
    width: 24px; 
    height: 24px; 
    margin-top: 0;
    box-shadow: none !important;
}
.checkbox_main_inner_div label{
    user-select: none;
    font-size: 15px;
}
.form-check-input:checked{
    background-color: #01DDBF;
}
.all_forms_addmore_btn_main{
    text-align: center;
    margin: 40px 0px;
}
.all_forms_addmore_btn_main button{
    background: #1C2B3E;
    box-shadow: -4px 2px 10px 0px #27272740;
    border: none;
    color: #fff;
    padding: 12px 15px;
    border-radius: 40px;
    font-size: 16px;
    width: 100%;
    max-width: 240px;

}
.input_with_checkbox_inner_div{
    margin-top: 20px;
}
.input_with_checkbox_label_div label{
    color: #7E7E7E;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-transform: capitalize;
}
.my_ptext{
    padding-top: 20px;
    margin-bottom: 0;
    color: #7E7E7E;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-transform: capitalize;
}
.input_with_inner2_div{
    width: 100%;
}
.input_with_inner2_div input{
    width: 100%;
    border: none;
    color: #000;
    padding: 20px 12px;
    border-bottom: 1px solid #C2C2C2;
    outline: none;
}
.input_with_inner2_div input::placeholder{
    color: #BBBBBB;
}
.input_with_checkbox_main_div{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 0px 10px;
}
.input_with_inner2_main_div{
    display: flex;
    gap: 10px;
}
.input_with_checkbox{
    display: flex;
    align-items: center;
    gap: 10px;
}
.input_with_checkbox input{
    border-color: #01DDBF !important;
    box-shadow: -4px 2px 10px 0px #27272738;
    background-position: unset;
    width: 20px; 
    height: 20px; 
    margin-top: 0;
    box-shadow: none !important;
}
.input_with_checkbox label{
    user-select: none;
    color: #7E7E7E;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-transform: capitalize;
    width: max-content;
}
.mylast_checkbox_with_text{ 
    margin-top: 20px;
    display: flex;
    gap: 30px;
}
.mylast_checkbox2_with_text{
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}
.input_with_checkbox2_label_div{
    width: 100%;
    max-width: 1300px;
}
.input_with_checkbox2_label_div label{
    color: #7E7E7E;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-transform: capitalize;
}
.span_intext{
    color: #000;
}
.para_intext{
    padding-top: 30px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
}
.para4_intext{
    padding-top: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    color: #7E7E7E;
    width: 100%;
    max-width: 1300px;
}
.para2_intext{
    padding-top: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    color: #7E7E7E;
}
.my_ul_text{
    max-width: 1450px;
}
.my_ul_text li{
    padding-top: 5px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    color: #7E7E7E;
}
.terms_text_checkbox{
    padding-top: 20px;
    display: flex;
    gap: 50px;
}
.terms_text_checkbox input{
    border-color: #01DDBF !important;
    box-shadow: -4px 2px 10px 0px #27272738;
    background-position: unset;
    width: 20px; 
    height: 20px; 
    margin-top: 0;
    box-shadow: none !important;
}
.terms_text_checkbox label{
    user-select: none;
    color: #7E7E7E;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-transform: capitalize;
    width: max-content;
}

@media (max-width:1500px){
    .header_right_content_main {
        display: flex;
        gap: 20px;
        justify-content: end;
        width: 100%;
    }
    .header_icons_profile_main {
        display: flex;
        gap: 20px;
    }
    .header_title_div h2 {
        font-size: 24px;
    }
    .input_title_text h2 {
        font-size: 16px;
    }
    .sidebar {
        position: relative;
        top: 0;
        left: 0px;
        height: 100vh;
        overflow-y: auto;
        width: 300px;
        background-color: var(--sidebar-color);
        padding: 10px 0px;
        transition: var(--trans-02);
        z-index: 99;
    }
}
@media (max-width:992px){
    .sidebar{
        position: fixed;
    }
    .sidebar header .toggle{
        display: flex;
        position: fixed;
        top: 36px;
        left: 15px;
        height: 30px;
        width: 30px;
    }
    .header_right_content_main{
        padding-left: 30px;
    }
    .my_contant_header{
        flex-direction: column-reverse;
        align-items: start;
    }
}
@media (max-width:550px){
    .header_right_content_main{
        flex-direction: column-reverse;
        margin-bottom: 20px;
    }
    .card_title{
        flex-direction: column-reverse;
        align-items: start;
    }
    .save_changes_button_main{
        width: 100%;
        justify-content: end;
    }
    .header_searchbar{
        max-width: 550px;
    }
    .header_searchbar input{
        max-width: 550px;
    }
    .my_contant_header{
        padding-bottom: 0;
    }
    #my_innercontent {
        height: calc(100vh - 230px);
    }
    .header_icons_profile_main{
        justify-content: end;
    }
    .card_title h3 {
        font-size: 20px;
    }   
    .image-text img {
        height: 90px;
        width: auto;
    } 
    .input_title_text{
        flex-direction: column;
        align-items: start;
        gap: 2px;
    }
    .input_with_inner2_main_div{
        flex-direction: column;
    }
    #mycontent {
        padding: 0px 15px 0px 15px;
    }
    .my_checkboxbar_main_div{
        flex-direction: column;
    }
    .checkbox_main_div{
        flex-wrap: wrap;
    }
    .input_with_checkbox_main_div{
        width: 100%;
        flex-wrap: wrap;
    }
    .mylast_checkbox2_with_text{
        flex-wrap: wrap;
        gap: 10px;
    }
    .para2_intext{
        padding-top: 20px;
        font-size: 14px;
    }
    .sidebar_links_main {
        padding: 15px 15px 20px 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .my_menu_bar {
        padding-left: 5px;
    }
    .mylast_checkbox_with_text{
        flex-direction: column;
        gap: 5px;
    }
    .sidebar_links_main a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }
    .input_title_text h2{
        font-size: 15px;
    }
    .input_inner_div h5{
        font-size: 15px;
    }
    .my_ul_text li {
        padding-top: 5px;
        font-size: 13px;
    }
    .my_ul_text{
        padding-left: 10px;
    }
}
@media (max-width:340px){
    #my_innercontent{
        padding: 15px;
    }
    .header_icons_profile_main {
        display: flex;
        gap: 10px;
    }
    .sidebar{
        width: 275px;
    }
    .input_title_text h2 {
        font-size: 13px;
    }
    .card_title h3 {
        font-size: 15px;
    }
    .header_title_div h2 {
        font-size: 18px;
    }
    .card_title h3 {
        font-size: 15px;
    }
    .header_two_icons_div {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .save_btn {
        font-size: 10px;
    }
    .cancel_btn{
        font-size: 10px;
    }
    #my_innercontent{
        padding: 10px;
    }
    .header_profile_div h6{
        font-size: 13px;
    }
    .header_profile_div small{
        font-size: 12px;
    }
}

.wrapper {
    margin: 0 auto;
    /* border: 1px solid #000000; */
    width: 758px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


.btns a{
    text-decoration: none;
    color:black;
}

#loginbtn,
#register {
  text-decoration: none;
  border: none;
  background-color: white;
  cursor: pointer;
}

#loginbtn,#register{
    font-weight: bold;
}

#loginbtn.active,
#register.active {
  border-bottom: 2px solid #01DDBF;
}

.field{
    width: 429.38px;
    height: 46.09px;
    border: none;
    padding-left: 1rem;
    margin-left: 8rem;
}

.loginbutton{
    background-color: #1C2B3E;
    color: white;
    border: none;
    width: 113.64px;
    height: 42.15px;
    border-radius: 8px;
}

.forgetPass{
    margin-left: 2rem;
    text-decoration: none;
    color:black;
}

.auths{
    margin: 0.5rem;
    text-decoration: none;
    color: black;
    font-weight: bold;
}

input:focus{
    outline: none;
}

#success{
    background-color: white;
    color: black;
    width: 50%;
    height: 25px;
    margin: 0 auto;
    border-radius: 15px;
}

#error{
    background-color: white;
    color:red;
    width: 50%;
    height: 25px;
    margin: 0 auto;
    border-radius: 15px;
}