body {
    font-family: "CerebriSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #25282C;
    text-align: left;
    min-height: 100vh;
}

.dark {
    background: #041831 !important;
}

.inter-v {
    margin-bottom: 0;
}

.action-button {
    width: auto;
    background: #36a5fa ;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 15px;
    margin: 10px 5px;
    border-radius: 5px;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #36a5fa  100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 15%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
}

.flex-p {
    display: flex;
    justify-content: space-between;
}

.section-products .single-product {
    margin-bottom: 26px;
    border-radius: 16px;
}

.section-products .single-product .part-1 {
    position: relative;
    height: 190px;
    max-height: 190px;
    margin-bottom: 5px;
    overflow: hidden;
    border-radius: 7px;
}

.part-2 {
    margin-top: 10px;
    font-size: 18px;
}

.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
    --bs-offcanvas-width: 300px !important;
}

.section-products .single-product .part-1::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.3s;
}

.section-products .single-product:hover .part-1::before {
    transform: scale(1.1, 1.1);
    transition: all 0.5s;
}

.section-products #product-11 .part-1::before {
    background: url("../../assets/img/s1.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
    transition: all 0.3s;
}

.section-products #product-12 .part-1::before {
    background: url("../../assets/img/s2.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
}

.section-products #product-13 .part-1::before {
    background: url("../../assets/img/s3.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
}

.section-products #product-14 .part-1::before {
    background: url("../../assets/img/s4.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
}

.section-products #product-15 .part-1::before {
    background: url("../../assets/img/s5.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
}

.section-products #product-16 .part-1::before {
    background: url("../../assets/img/s6.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
}

.section-products #product-17 .part-1::before {
    background: url("../../assets/img/s7.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
}

.section-products #product-18 .part-1::before {
    background: url("../../assets/img/s8.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
}

.section-products #product-19 .part-1::before {
    background: url("../../assets/img/s9.png") no-repeat center;
    background-size: cover;
    height: 200px;
    width: 100%;
}

.section-products .single-product .part-1 .discount,
.section-products .single-product .part-1 .new {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #ffffff;
    background-color: #fe302f;
    padding: 2px 8px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.section-products .single-product .part-1 .new {
    left: 0;
    background-color: #444444;
}

.section-products .single-product .part-1 ul {
    position: absolute;
    bottom: -41px;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transition: bottom 0.5s, opacity 0.5s;
    width: 100%;
}

.section-products .single-product:hover .part-1 ul {
    bottom: 30px;
    opacity: 1;
}

.section-products .single-product .part-1 ul li {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.section-products .single-product .part-1 ul li a {
    display: inline-block;
    background-color: #ffffff;
    color: #444444;
    text-align: center;
    transition: color 0.2s;
    width: 100%;
    width: auto;
    padding: 4px 15px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
}

.section-products .single-product .part-1 ul li a:hover {
    color: #fe302f;
}

.section-products .single-product .part-2 .product-title {
    font-size: 1rem;
}

.section-products .single-product .part-2 h4 {
    display: inline-block;
    font-size: 1rem;
}

.section-products .single-product .part-2 .product-old-price {
    position: relative;
    padding: 0 7px;
    margin-right: 2px;
    opacity: 0.6;
}

.section-products .single-product .part-2 .product-old-price::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #444444;
    transform: translateY(-50%);
}

.section-products #product-2 .part-1::before {
    background: url("../../assets/img/jober1.jpg") no-repeat center;
    background-size: cover;
}

.section-products #product-3 .part-1::before {
    background: url("../../assets/img/jober2.jpg") no-repeat center;
    background-size: cover;
}

.nav-style {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9;
    box-shadow: 0 1px 7px 0 #eee;
    background: #fff;
    height: 72px;
}

.mt-100 {
    margin-top: 100px !important;
}

.bg-t {
    background: transparent !important;
    box-shadow: none;
}

.row-boxx img {
    border-radius: 50%;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
}

.row-box {
    max-width: 800px !important;
    margin: auto !important;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 35px;
}

.row-boxx {
    padding: 15px;
    max-width: 800px !important;
    margin: auto !important;
    justify-content: center;
    margin-top: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 11px 2px #eee;
}

.btn-group {
    gap: 5px !important;
}

.row-boxx:hover {
    background: #f0f8ff;
}

.top-4 {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    height: 245px;
}

.fs-15 {
    font-size: 15px;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.top-4 p {
    color: #555;
}

.top-4 i {
    font-size: 80px;
    color: #34a4fd;
    text-shadow: 0 2px 3px;
}

.top-4:hover {
    cursor: pointer;
    transition: all 0.4s;
}

.a-s-c {
    align-self: center;
}

.fu-logo img {
    width: 100px;
} 

.pass-word {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.pass-word:focus {
    box-shadow: 0 0 .25rem rgba(13, 110, 253, .25);
    border: 1px solid #ced4da !important;
}

.eye {
    position: absolute;
    right: 13px;
    top: 9px;
    color: #333;
    font-size: 22px;
}

.position-r {
    position: relative;
}

.text-right {
    text-align: right;
}

.b-0 {
    border: 0;
}

.ou-p {
    border-bottom: 1px solid #ccc;
    line-height: 5px;
    text-align: center;
    margin: 25px 0 !important;
}

.ou-p span {
    background: #fff;
    padding: 5px 10px;
}

.pl-0 {
    padding-left: 0;
}

.btn-face {
    background: transparent;
    border: 1px solid #ccc;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    margin: 15px 0;
    color: #0279fa;
}

.btn-facebook {
    background: #3b5998 !important;
    color: #fff !important;
}

.btn-googl {
    background: #36a5fa !important;
    color: #fff !important;
}

.btn-face:focus,
.btn-face:hover {
    background: #e9e9e9 !important;
    color: #0279fa !important;
}

.input-ri {
    position: absolute;
    left: 1px;
    top: 1px;
    color: #999;
    height: 36px;
    background: aliceblue;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px 50px 50px 17px;
    box-shadow: 0 0px 3px -1px #ddd;
}

a {
    text-decoration: none;
}

.fs-14 {
    font-size: 14px;
}

.banner-ul li {
    display: inline-block;
    margin-bottom: 15px;
}

.banner-ul li a {
    color: #000;
    padding: 10px 15px;
    font-weight: 500;
    font-size: 16px;
    border-radius: 50px 8px 50px 25px;
    color: #fff;
    background: #ffbd84;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #e96024 100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 20%);
    box-shadow: 0 10px 15px 0 rgb(175 0 87 / 20%);
}

.banner-ul li a:hover {
    text-decoration: underline;
}

.o2:hover.o2 img {
    padding: 22px;
    transition: all 0.6s;
}

.banner-ul {
    position: absolute;
    top: 100px;
    width: 100%;
    text-align: center;
    right: 0;
}

.banr-h1 {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 15px;
}

header {
    position: relative;
}

.top-navi .nav-item .nav-link {
    color: #000;
    font-size: 17px;
    font-weight: 500;
}

.navbar {
    padding: 0;
}

.co-position {
    position: absolute;
    top: 29%;
    padding-left: 122px;
}

.banr-srch {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    height: 40px;
}

.banr-srch:focus {
    box-shadow: none !important;
    border: 0 !important;
}

.banr-in {
    width: 100%;
    border-radius: 50px !important;
    height: 50px;
    padding-left: 28px !important;
}

.con-tain {
    background: #ffbd84;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #36a5fa  100%);
    -webkit-box-shadow: 10px 15px 0 rgb(175 0 87 / 20%);
    box-shadow: 10px 15px 0 rgb(175 0 87 / 20%);
    padding: 40px 25px;
    color: #fff;
    border-radius: 5px;
}

h1 {
    font-size: 1.55rem !important;
}

.oragne-h6 {
    font-size: 17px !important;
}

.p-w {
    max-width: 700px !important;
    margin: auto !important;
}

.modal-footer {
    justify-content: center !important;
}

.btn-hedr {
    color: #fff !important;
    background: #33a3fc;
    background: -moz-linear-gradient(left, #33a3fc 0, #71aa72 100%);
    background: -webkit-linear-gradient(left, #33a3fc 0, #71aa72 100%);
    background: linear-gradient(to right, #33a3fc 0, #71aa72 100%);
    -webkit-box-shadow: 0 6px 9px 0 #af005733;
}

.form-trol {
    padding-left: 55px !important;
}
input.form-control.input-style.form-trol {
    height: 39px;
}
.btn-hedr:focus,
.btn-hedr:hover {
    color: #fff !important;
    border-color: #36a5fa ;
}

.section-products .single-product:hover .part-11::before {
    transform: scale(1.2, 1.2);
    transition: all 0.5s;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #f05c1c;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
}

#myBtn:hover {
    background-color: #555;
}

.nav-link:focus,
.nav-link:hover {
    color: #34a4fd !important;
}

.srch-div {
    max-width: 350px !important;
    position: relative;
    margin: auto !important;
}

.btn-srch {
    border-radius: 50%;
    position: absolute;
    right: 7px;
    color: #fff;
    top: 5px;
    background: #33a3fc;
    background: -moz-linear-gradient(left, #33a3fc 0, #71aa72 100%);
    background: -webkit-linear-gradient(left, #33a3fc 0, #71aa72 100%);
    background: linear-gradient(to right, #33a3fc 0, #71aa72 100%);
    -webkit-box-shadow: 0 10px 15px 0 #af005733;
    box-shadow: 0 10px 15px 0 rgb(175 0 87 / 20%);
}

.btn-theme {
    background: #33a3fc;
    background: -moz-linear-gradient(left, #33a3fc 0, #71aa72 100%);
    background: -webkit-linear-gradient(left, #33a3fc 0, #71aa72 100%);
    color: #fff !important;
    width: 100%;
}

.theme-clr {
    color: #34a4fd !important;
}

.des-3 {
    padding: 25px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    box-shadow: 0 2px 7px 2px #eee;
    margin-bottom: 15px;
}

.des-3 img {
    height: 150px;
    object-fit: cover;
}

.para-d {
    font-size: 14px;
}

.das-cat li {
    list-style-type: none;
    display: inline-block;
}

.das-cat li a {
    color: #000;
    margin-right: 15px;
}

.das-cat li a i {
    padding-right: 6px;
    color: #36a5fa ;
    font-size: 20px;
}

.das-cat {
    padding-left: 0;
}

.cours {
    font-size: 11px;
    padding-left: 15px;
}

.das-cat li a span.bel {
    position: absolute;
    font-size: 10px;
    left: 20px;
    background: #36a5fa;
    color: #fff !important;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    text-align: center;
    top: 3px;
    padding: 1px;
}

.das-cat li a.book-m {
    background: #f9f8f8;
    padding: 10px;
    border-radius: 6px;
}

.das-cat li a.f-btn-a {
    color: #fff !important;
    padding: 10px;
    border-radius: 6px;
    border-radius: 20px;
    background: #71aa72 ;
    box-shadow: 0 2px 5px 0 rgb(175 0 87 / 15%);
}

.das-cat li a.f-btn-a:active,
.das-cat li a.f-btn-a:focus,
.das-cat li a.f-btn-a:hover {
    color: #fff !important;
    padding: 10px;
    border-radius: 6px;
    border-radius: 20px;
    background: #36a5fa;
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
    opacity: 0.8;
}

.clr-white {
    color: #fff !important;
}

.nav-searchbar-wrapper~#nav-gwbar1.nav-gwbar-single-row.nav-genz {
    height: 45px;
}

#nav-gwbar1.nav-gwbar-scroll {
    display: flex;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}

#nav-gwbar1.nav-genz {
    height: 40px;
    padding: 0 0;
}

#nav-gwbar1.nav-gwbar-single-row {
    height: 38px;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
}

#nav-gwbar1 {
    display: block;
    height: 42px;
    width: 100%;
    background: transparent;
    overflow: hidden;
    flex-wrap: nowrap;
}

.nav-searchbar-wrapper~#nav-gwbar1.nav-gwbar-single-row.nav-genz.nav-gwbar-scroll li a.nav-a {
    margin: 0 0 20px 15px;
    padding-right: 3px;
}

.nav-searchbar-wrapper~#nav-gwbar1.nav-gwbar-single-row.nav-genz li a.nav-a {
    margin: 0 10px 20px 15px;
}

.nav-searchbar-wrapper~#nav-gwbar1.nav-gwbar-single-row li a.nav-a {
    margin: 5px 10px 10px 14px;
}

#nav-gwbar1.nav-genz li a.nav-a {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    font-family: inherit;
}

.nav-searchbar-wrapper~#nav-gwbar1 li a.nav-a {
    margin: 20px 10px 0 14px;
}

#nav-gwbar1.nav-gwbar-single-row li a.nav-a {
    margin-right: 15px;
}

#nav-gwbar1 li a.nav-a {
    white-space: nowrap;
}

#nav-gwbar1 li a.nav-a {
    position: relative;
    color: #000;
    float: left;
    margin: 24px 10px 0 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
}

#navbar1 * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#nav-gwbar1 {
    width: 100%;
    overflow-x: scroll;
}

#nav-gwbar1::-webkit-scrollbar {
    display: none;
}

#nav-gwbar2 li a i {
    padding-right: 15px;
}

#nav-gwbar1 {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bread li {
    display: inline-block;
    list-style-type: none;
}

.bread li+li:before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    padding: 10px;
    font-size: 12px;
}

.bread li a {
    font-size: 14px;
    color: #444;
}

ul {
    padding-left: 0 !important;
}

.chien-spn {
    float: right;
}

.chien-spn a {
    color: #974b00;
    padding-left: 5px;
}

.fs-5px {
    font-size: 5px !important;
    position: absolute;
    top: 50%;
    left: 0;
}

.son-ul li {
    display: inline-block;
    list-style-type: none;
    margin-right: 25px;
}

.son-ul li a {
    color: #444;
}

.son-ul li a span {
    background: #f0f8ff;
    width: 40px;
    display: inline-block;
    height: 40px;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
    line-height: 38px;
}

.son-ul li a span i {
    color: #36a5fa ;
}

.walk {
    max-width: 300px !important;
}

.float-right {
    float: right;
}

.dis-ul li {
    list-style-type: none;
    display: inline-block;
    background: #efefef;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 3px 6px;
    margin: 0 0 5px 0;
    color: #333;
    font-size: 12px;
}

.dis-ul {
    margin-bottom: 0;
}

.btn-blank {
    color: #70aa76;
    border: 1px solid #70aa76 !important;
    border-radius: 25px !important;
}

.btn-fill {
    color: #fff !important;
    padding: 7px 15px !important;
    border-radius: 25px !important;
    background: #33a3fc;
    background: -moz-linear-gradient(left, #33a3fc 0, #71aa72 100%);
    background: -webkit-linear-gradient(left, #33a3fc 0, #71aa72 100%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
}

.btn-fill:focus {
    background: #36a5fa  !important;
    color: #fff !important;
}

.btn-blank-s {
    color: #36a5fa  !important;
    border: 1px solid #36a5fa  !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
}

.btn-fill-s {
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #36a5fa  100%);
    color: #fff !important;
    padding: 5px 10px;
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.sec-6 {
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 3.4px 2.7px -30px rgb(0 0 0 / 6%), 0 8.2px 8.9px -30px rgb(0 0 0 / 7%), 0 25px 40px -30px rgb(0 0 0 / 20%);
    box-shadow: 0 3.4px 2.7px -30px rgb(0 0 0 / 6%), 0 8.2px 8.9px -30px rgb(0 0 0 / 7%), 0 25px 25px -30px rgb(0 0 0 / 20%);
}

.sec-6 img {
    border-radius: 5px;
}

.clr-7 {
    color: #777;
}

.clr-9 {
    color: #999;
}

.pr-5 {
    padding-right: 5px;
}

.mb-8 {
    margin-bottom: 8px;
}

.green {
    color: #09aa10;
    font-size: 16px;
}

.hrt {
    color: #999;
    text-shadow: 0px 1px 1px #ccc;
}

hr {
    border-top: 1px solid #000 !important;
}

.rate {
    height: 46px;
    position: relative;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: left;
    width: 16px;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 20px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #ffc700;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #ffc700;
}

.p-t-4 {
    padding-top: 4px;
}

.rate-no {
    position: absolute;
    top: 4px;
    padding-left: 7px;
}

.third {
    background: #f9f8f8;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.btn-clr-cyan {
    background: #fff9f1 !important;
    color: #008b8b !important;
    width: 100% !important;
    text-align: center;
    border: 1px solid #fff;
}

.btn-clr-cyan:hover,
.btn-bg-cyan:hover {
    border-color: #008b8b !important;
    background: transparent !important;
    color: #008b8b !important;
}

.btn-bg-cyan {
    background: #008b8b !important;
    color: #fff !important;
    font-size: 15px !important;
    border: 1px solid #fff;
}

.third-ul li {
    list-style-type: none;
    padding: 5px 0;
}

.third-ul li a {
    color: #000;
    font-size: 14px;
}

.third-ul li a span {
    color: #777;
    padding-left: 5px;
}

.evalu {
    background: #fff9f1;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 6px 1px #eeee;
    border: 1px solid #eee;
}

.evalu h5 {
    color: #008b8b;
}

.star li {
    display: inline-block;
    list-style-type: none;
    color: #ffc107;
}

.card-spn {
    position: absolute;
    right: 3px;
    top: 27px;
}

.yellow {
    color: #ffc107;
}

.bb {
    border-bottom: 1px solid #ddd;
}

.six {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.mt-75 {
    padding-top:82px !important;
}
 

.ou-p1 {
    border-bottom: 2px solid #34a4fd;
    line-height: 5px;
    text-align: center;
}

.ou-p1 span {
    background: #fff;
    padding: 5px 10px;
}

.third1 {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 11px 2px #ddd;
}

.noti-fication li {
    list-style-type: none;
    border: 1px solid #f1f1f1;
    border-radius: 27px;
    padding: 20px 35px;
    position: relative;
    box-shadow: 0 1px 8px 4px #f1f1f1;
    margin-bottom: 15px;
    border-right: 3px solid #36a5fa ;
}

.noti-fication li:hover {
    cursor: pointer;
    border-right: 7px solid #36a5fa ;
    transition: all 0.3s;
}

.noti-fication {
    max-width: 600px !important;
    margin: auto !important;
}

.noti-fication li span {
    position: absolute;
    left: -13px;
    top: 39%;
    color: #36a5fa ;
    background: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
}

.accou-nt {
    border-radius: 8px;
    padding: 35px 20px;
    margin-bottom: 25px;
    border: 1px solid #eee;
    box-shadow: 0 2px 9px 2px #eee;
    display: flex;
    align-items: center;
    height: 100px;
}

.accou-nt h6 {
    margin-bottom: 0;
    padding-left: 10px;
}

.accou-nt:hover {
    cursor: pointer;
    box-shadow: 0 9px 15px 6px #eee;
    transition: all 0.5s;
}

.accou-nt i {
    font-size: 30px;
    color: #36a5fa ;
    margin-bottom: 0;
    padding-right: 8px;
}

.br-0 {
    border-right: 0;
}

.r-50 {
    border-radius: 50%;
}

.modi-fier1 li {
    position: relative;
    list-style-type: none;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

.modi-fier1 li:last-child {
    border-bottom: none !important;
}

.modi-fier1 li span {
    position: absolute;
    right: 5px;
    top: 20px;
}

.modi-fier li {
    position: relative;
    list-style-type: none;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.modi-fier li span {
    position: absolute;
    right: 0;
    top: 20px;
}

.modi-fier li span a {
    color: #36a5fa  !important;
    font-weight: 500;
}

.theme-a {
    color: #36a5fa  !important;
    font-weight: 500;
}

.modi-fier li span a i {
    font-size: 10px;
    padding-left: 5px;
}

.modi-fier li p {
    font-size: 14px;
}

.row-box2 {
    max-width: 500px !important;
    margin: auto !important;
}

.row-boxs {
    box-shadow: 0 3px 13px 2px #eee;
    padding: 15px;
}

.form-check {
    padding-left: 0 !important;
}

a.active {
    color: #36a5fa  !important;
}

ul {
    padding-left: 0 !important;
}

#msform {
    margin: 10px auto;
    position: relative;
}

#msform fieldset:not(:first-of-type) {
    display: none;
}

#msform input,
#msform textarea {
    padding: 10px;
    border: 1px solid #ccc !important;
    border-radius: 3px;
    margin-bottom: 13px;
    box-sizing: border-box;
    font-family: sans-serif;
    color: #2C3E50;
    font-size: 13px;
}

#msform .action-button {
    width: auto;
    background: #36a5fa ;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 15px;
    margin: 10px 5px;
    border-radius: 5px;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #36a5fa  100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 15%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #36a5fa ;
}

.fs-title {
    font-size: 26px;
    text-transform: inherit;
    color: #2C3E50;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
    font-weight: 600;
}

#progressbar {
    margin-bottom: 0;
    overflow: hidden;
    counter-reset: step;
    display: flex;
    justify-content: center;
    text-align: center;
}

#progressbar li {
    list-style-type: none;
    color: #888;
    text-transform: uppercase;
    font-size: 9px;
    float: left;
    position: relative;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 21px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
    border: 1px solid #ddd;
    border-radius: 50%;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #ddd !important;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1;
}

#progressbar li:first-child:after {
    content: none;
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #ffbd84;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #36a5fa  100%);
    -webkit-box-shadow: 0 4px 8px 0 rgb(175 0 87 / 15%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
    color: white;
    border-radius: 50%;
}

.br-50 {
    border-radius: 50% !important;
}

.btn-profil {
    border-radius: 25px !important;
    /* border-left: 4px solid #36a5fa  !important;
    border-right: 4px solid #36a5fa  !important;
    border-top: 1px solid #36a5fa  !important;
    border-bottom: 1px solid #36a5fa  !important; */
    color: #777;
    padding: 4px 10px !important;
    box-shadow: 0 2px 10px 2px #ddd !important;
    display:flex;
    gap: 6px;
    border: 0 !important;
    outline: 0 !important;
}
.btn-profil:hover, .btn-profil:active{
    color: #777;
    padding: 4px 10px !important;
    box-shadow: 0 2px 10px 2px #ddd !important;
    display:flex;
    gap: 6px;
    opacity: .8;
    border: 0 !important;
    outline: 0 !important;
}
.first li {
    list-style-type: none;
    border-bottom: 1px dashed #ccc;
    padding: 15px 0;
}

.first li h6 {
    font-size: 16px !important;
}

.first li p {
    font-size: 13px;
    color: #444;
}

.container-rb {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 7px;
}

.container-rb input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark-rb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
}

.container-rb:hover input~.checkmark-rb {
    background-color: #ccc;
}

.container-rb input:checked~.checkmark-rb {
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #36a5fa  100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 15%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
    color: #fff;
}

.checkmark-rb:after {
    content: "";
    position: absolute;
}

.container-rb input:checked~.checkmark1-r:after {
    display: block;
}

.container-rb .checkmark-r1:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
}

.container-r {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container-r input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark-r {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #ddd 0, #ccc 100%);
    background: linear-gradient(to right, #ddd 0, #ccc 100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 15%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
    border-radius: 50%;
}

.checkmark-r1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    width: 25px;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #ddd 0, #ccc 100%);
    background: linear-gradient(to right, #ddd 0, #ccc 100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 15%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
    border-radius: 50%;
}

.container-r:hover input~.checkmark-r {
    background-color: #ccc;
}

.container-r:hover input~.checkmark-r1 {
    background-color: #ccc;
}

.container-r input:checked~.checkmark-r {
    background: #6da97a;
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
}

.container-r input:checked~.checkmark-r1 {
    background: #6da97a;
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
}

.checkmark-r:after {
    content: "";
    position: absolute;
    display: none;
}

.checkmark-r1:after {
    content: "";
    position: absolute;
    display: none;
}

.container-r input:checked~.checkmark-r:after {
    display: block;
}

.container-r input:checked~.checkmark-r1:after {
    display: block;
}

.container-r .checkmark-r:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.container-r .checkmark-r1:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.container-t {
    display: block;
    position: relative;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 52px;
    height: 52px;
    background: #ececec;
    border-radius: 50%;
}

.container-t input {
    opacity: 0;
    cursor: pointer;
    margin-bottom: 15px !important;
}

.checkmark-t {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #ccc;
    width: 52px !important;
    height: 52px !important;
    /* color: #fff !important; */
    border-radius: 49% !important;
    line-height: 39px;
    background: #fdfdfd;
    border-color: #999;
    /* background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #ddd 0, #aaa 100%);
    background: linear-gradient(to right, #ddd 0, #aaa 100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 10%); */
}

.container-t:hover input~.checkmark-t {
    background-color: #ccc;
}

.container-t input:checked~.checkmark-t {
    background-color: #36a5fa ;
    color: #fff;
    width: 70px;
    height: 70px;
    background: #36a5fa  !important;
    border-radius: 50% !important;
}

.checkmark-t:after {
    content: "";
    position: absolute;
    display: none;
}

.container-t input:checked~.checkmark-t:after {
    display: block;
}

.container-t .checkmark-t:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
}

.theme-a {
    color: #36a5fa  !important;
    font-weight: 500;
    font-size: 18px;
}

.p-lr-10 {
    padding-left: 5px;
    padding-right: 5px;
}

.position-a {
    position: absolute;
    padding-top: 16px;
}

.p-20 {
    padding: 20px !important;
}

.cen-ter {
    justify-content: center;
    display: flex;
    width: 100%;
}

.time-il li {
    list-style-type: none;
    display: inline-block;
    line-height: 1px;
    margin-bottom: 10px;
    margin-right: 15px;
}

.coment {
    margin: auto !important;
    text-align: left;
    background: #fff9f1;
    border-radius: 8px;
    padding: 15px;
    color: #5f9ea0;
    margin-top: 20px;
}

.coment2 {
    max-width: 457px !important;
    margin: auto !important;
    text-align: left;
    background: #fff7ed;
    border-radius: 8px;
    padding: 15px;
    color: #999;
    margin-top: 20px;
}

.lh-20 {
    line-height: 20px;
}
.lh-normal{
    line-height: normal !important;
}
.fs-17 {
    font-size: 17px;
}

.caret-spn {
    position: absolute;
    right: 13px;
    top: 15px;
    font-size: 12px;
}

.fi {
    position: absolute;
    top: -4px;
}

.pl-35 {
    padding-left: 35px !important;
}

.modl-srch {
    position: absolute;
    left: 12px;
    top: 5px;
}

.modl-ul li {
    display: block !important;
    list-style-type: none;
}

.modl-ul li a {
    display: block;
    color: #666;
    font-size: 14px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    margin-bottom: 5px;
}

.modl-ul li a:hover {
    background: #fafafa;
}

.phoneNumber {
    margin-bottom: 0 !important;
}

#btn-country:focus {
    box-shadow: none !important;
}

.form-label {
    width: 100% !important;
}

.justi {
    align-self: center;
    justify-content: center;
    display: flex;
}

.sms {
    font-size: 50px;
    color: #36a5fa ;
}

.mt-40 {
    margin-top: 40px !important;
}

.plr-20 {
    padding: 20px;
    padding-bottom: 0;
}

.fs-20 {
    font-size: 20px;
}

.ig {
    box-shadow: 0 4px 2px -1px #ccc;
    border-radius: 0 !important;
}

.clr-4 {
    color: #444;
}

.title {
    color: #000 !important;
    margin-bottom: 0;
    font-size: 17px;
}

.text-muted {
    margin-bottom: 0;
}

.form-chck:hover {
    background: #f9f9f9;
}

.sms-no {
    background-color: #36a5fa  !important;
    line-height: 13px;
}

.mesag {
    width: 150px;
    height: 25px;
    overflow: hidden;
}

.en-vlop {
    font-size: 22px;
    padding-right: 7px;
}

.w-70 {
    width: 70%;
}

.atach {
    background: #e2e2e2;
    width: 40px;
    height: 40px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #000 !important;
    flex: none;
}

.send {
    background: #36a5fa ;
    width: 40px;
    height: 40px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    flex: none;
}

.ml-5 {
    margin-left: 5px;
}

.assis {
    background: #f9fcff;
    padding: 15px;
    width: 100%;
    border-radius: 8px !important;
}

.mx-100-px {
    max-width: 100px !important;
}

.cate li {
    list-style-type: none;
    box-shadow: 0 1px 3px 0px #ddd;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.cate li a {
    display: block;
    cursor: pointer;
}

.cate li:hover {
    box-shadow: 0 2px 11px 2px #ddd;
    text-align: center;
}

.cate li a .f-spn {
    padding-left: 15px;
}

.pt-6 {
    padding-top: 6px;
}

.cate li a span {
    color: #000;
}

.cam-ra {
    position: absolute;
    top: 5px;
    color: #36a5fa ;
    left: 10px;
    font-size: 20px;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.for-a a {
    color: #000;
}

.visi {
    visibility: hidden;
}

.lead {
    font-size: 14px;
    font-family: system-ui;
    margin-bottom: 0;
    font-weight: 400;
    margin-top: 8px;
}

.lst {
    background: #36a5fa ;
    border: 0;
    width: 35px;
    height: 35px;
}

.lst:hover,
.lst:focus,
.lst:active {
    background: #b2826f;
}

.hedr-ul li {
    list-style-type: none;
    border-bottom: 1px solid #ddd;
}

.hedr-ul li a {
    display: block;
    padding: 10px;
    color: #666;
}

.hedr-ul li a:hover {
    background: #fafafb;
    color: #000;
}

.hedr-ul li a i {
    padding-right: 10px;
    font-size: 20px;
    color: #36a5fa ;
}

.noti-no {
    position: absolute;
    top: -9px;
    left: 11px;
    background: #71aa72;
    color: #fff !important;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 17px;
    font-size: 13px;
    font-weight: 600;
}

.chat-h {
    box-shadow: 0 2px 8px 2px #ccc;
    padding: 15px;
}

.p-15 {
    padding: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.send-a {
    position: absolute;
    right: 6px;
    top: 6px;
    background: #36a5fa ;
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    border-radius: 50%;
    font-size: 13px;
}

.send-sec {
    position: relative;
    width: 100%;
}

.chat-f {
    box-shadow: 0 -4px 5px 0px #ccc;
    padding: 10px;
}

.chat-in {
    padding-left: 10px;
    font-size: 16px;
}

.br-10 {
    border-radius: 10px;
}

.btn-cancl {
    float: right;
    font-size: 27px;
    line-height: 0;
    position: absolute;
    top: 7px;
    right: 1px;
    color: #333;
}

.btn-cancl:hover {
    border: 0;
}

.lh-23 {
    line-height: 23px;
}

.fs-13 {
    font-size: 13px;
}

.ma {
    margin: auto !important;
}

/*.modal-dialog {
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 20%);
    box-shadow: 0 10px 15px 0 rgb(175 0 87 / 20%);
}*/

#buttonbt {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    background: #ffbd84;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #36a5fa  100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 20%);
    box-shadow: 0 10px 15px 0 rgb(175 0 87 / 20%);
}

#buttonbt::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    line-height: 37px;
    color: #fff;
}

#buttonbt:hover {
    cursor: pointer;
    background-color: #b2826f;
}

#buttonbt:active {
    background-color: #b2826f;
}

#buttonbt.show {
    opacity: 1;
    visibility: visible;
}

.custom-drop-zone {
    width: 500px;
    height: 380px;
    border-style: dashed;
    border-color: gray;
    background: cadetblue;
}

.button {
    color: #fff !important;
    background: #ffbd84;
    background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
    background: -webkit-linear-gradient(left, #b2826f 0, #36a5fa  100%);
    background: linear-gradient(to right, #b2826f 0, #36a5fa  100%);
    -webkit-box-shadow: 0 10px 15px 0 rgb(175 0 87 / 15%);
    box-shadow: 0 5px 10px 0 rgb(175 0 87 / 15%);
    cursor: pointer;
    color: white;
    width: 40px;
    height: 40px;
    text-align: center;
    display: inline-block;
    font-size: 30px;
    /* line-height: 40px; */
    border-radius: 3px;
}

.buttonm {
    line-height: 37px;
}

.button:hover {
    background: #974B00;
}

.no-input {
    max-width: 40px !important;
    margin: auto !important;
    text-align: center;
    border: 0 !important;
    height: 35px;
    font-size: 25px !important;
    font-weight: 600;
    font-family: sans-serif !important;
    color: #000 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.bg-my {
    background: #f0f8ff;
    color: #000;
}

.clr-g {
    color: #09aa10;
}

.pl-0 {
    padding-left: 5px;
}

.pl-13 {
    padding-left: 13px;
}

.p-all-5 {
    padding: 5px !important;
}

.m-lr-0 {
    margin-left: 0;
    margin-right: 0;
}

.w-a {
    width: auto !important;
}

.row-boxp {
    max-width: 650px !important;
    margin: auto !important;
    justify-content: center;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px 0 #eee;
}

.row-box100 {
    margin: auto !important;
    justify-content: center;
    margin-bottom: 35px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px 0 #eee;
}

.m-tb {
    margin-top: 25px;
    margin-bottom: 27px;
}

.theme-aa {
    color: #36a5fa;
    font-weight: 500;
}

.pl-15 {
    padding-left: 15px !important;
}

.eye1 {
    position: absolute;
    right: 13px;
    top: 37px;
    color: #999;
}

.pr-15 {
    padding-right: 15px !important;
}

.row-boxp1 {
    max-width: 500px !important;
    margin: auto !important;
}

.nt-check {
    position: absolute;
    right: 10px;
    top: 9px;
    border: 1px solid #4caf50;
    border-radius: 50%;
    height: 22px;
    width: 22px;
    text-align: center;
    padding: 0px 3px;
    line-height: 21px;
}

.nt-check i {
    font-size: 16px;
    color: #4caf50 !important;
    text-align: center;
}

.nt-ex {
    position: absolute;
    right: 10px;
    top: 12px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    padding: 0px 0px;
}

.nt-ex i {
    color: #fa3636 !important;
    font-size: 19px;
    border: 6px solid #f0f8ff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}

.top-navp li a.icn {
    color: #fff !important;
    font-size: 19px;
    background: #36a5fa;
    border-radius: 50%;
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin-left: 5px;
    box-shadow: 0 5px 4px 0 rgb(175 0 87 / 15%)
}

a {
    text-decoration: none !important;
}

.top-navp li a.icn:hover,
.top-navp li a.icn:active {
    box-shadow: none;
}

.prs-nal li {
    list-style-type: none;
    position: relative;
}

.prs-nal li a span.an-gl {
    position: absolute;
    top: 21px;
    right: 4px;
}

.prs-nal li a span.an-gl1 {
    position: absolute;
    top: 10px;
    right: 4px;
}

.prs-nal li a {
    display: block;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.prs-nal li a:hover {
    color: #36a5fa  !important;
}

.prs-nal li a p {
    font-size: 17px !important;
}

.prs-nal li a p small {
    color: #666;
    font-size: 14px !important;
}

.pr-0 {
    padding-right: 0;
}

.supri-mr {
    padding: 10px;
    border-radius: 10px;
    color: #36a5fa  !important;
}

.m-b-40 {
    margin-bottom: 40px;
}

.s-cap {
    font-size: 13px;
    color: #777;
}

.eye-p {
    position: absolute;
    right: 12px;
    top: 39px;
    color: #999;
}

.lh-24 {
    line-height: 24px;
}

.statut-r li {
    list-style: none;
    border-bottom: 1px solid #eee;
    padding-top: 10px;
}

.con-r {
    padding-left: 0;
    font-size: 18px;
}

.div-pmb0 p {
    margin-bottom: 0 !important;
}

.s-nam {
    font-size: 19px;
    color: #000;
    padding-left: 15px;
    font-weight: 500;
    text-transform: capitalize;
}

.br-n {
    border-radius: 0 !important;
}

.check-l li {
    list-style: none;
    padding: 6px 0px;
    position: relative;
}

.check-l li label {
    line-height: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 0;
}

.check-l li span {
    float: right;
}

.fs-20 {
    font-size: 20px !important;
}

.containerc {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.containerc input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmarkc {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.containerc:hover input~.checkmarkc {
    background-color: #ccc;
}

.containerc input:checked~.checkmarkc {
    background: #33a3fc;
    border-radius: 5px;
}

.checkmarkc:after {
    content: "";
    position: absolute;
    display: none;
}

.containerc input:checked~.checkmarkc:after {
    display: block;
}

.containerc .checkmarkc:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.chk-list li {
    list-style: none;
    display: inline-block;
    margin-bottom: 27px;
}

.chk-list li a {
    background: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
    color: #000;
    text-decoration: none;
}

.chk-list li a:hover,
.chk-list li a:active {
    text-decoration: none;
    background: #36a5fa ;
    color: #fff;
}

.text-left {
    text-align: left;
}

.m-a {
    margin: auto !important;
}

.btn-clos {
    background-image: none;
    font-weight: 500;
    color: #fff !important;
    font-size: 20px;
    line-height: 10px;
    padding: 16px;
    opacity: 1;
    float: right;
    padding: 6px;
    background: transparent;
    border: 0;
}

.alrt-bx {
    background: #008000 !important;
    color: #fff !important;
    padding: 10px !important;
}

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

.edit-compte li {
    list-style: none;
    position: relative;
}

.edit-compte li a p {
    margin-bottom: 0;
}

.edit-compte li a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.edit-compte li a span.f2 {
    position: absolute;
    right: 0;
    top: 31%;
}

.edit-compte li a span.f1 {
    float: left;
    padding-right: 12px;
    font-size: 22px;
}

.edit-compte li a span.f1 i {
    color: #36a5fa;
}

.scon-p {
    padding-left: 25px;
    color: #777;
}

.edit-a {
    float: right;
    padding-top: 10px;
    color: #36a5fa ;
    font-weight: 500;
}

.s-mall {
    font-size: 13px;
    color: #666;
    display: block;
}

.check-l li .a-l {
    float: right;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);        
}

.time-slot li {
    list-style: none;
    padding: 10px 0px;
    border-bottom: 1px solid #eee;
}

.time-slot li a {
    float: right;
    color: #36a5fa;
}

.time-slot li i {
    padding-right: 10px;
    color: #36a5fa;
}

.pink-i {
    background: antiquewhite;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
}

.nv-pill .nav-link.active,
.nv-pill .show>.nav-link {
    background-color: #36a5fa  !important;
    color: #fff !important;
    border-radius: 0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.nv-pill {
    border-bottom: 1px solid #36a5fa ;
}

.nvv-pill .nav-link.active,
.nvv-pill .show>.nav-link {
    background-color: transparent !important;
    color: #36a5fa  !important;
    border-radius: 0;
    border-bottom: 4px solid #36a5fa ;
}

.nvv-pill {
    border-bottom: 0 !important;
}

.chck {
    font-size: 20px;
    color: #008000;
}

.ts-fill {
    padding: 10px;
    border: 1px solid #dddd;
    border-radius: 10px;
}

.bank-detail li {
    list-style-type: none;
}

.bank-detail li a {
    display: block;
    color: #000;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.idendity-ul li i {
    float: right;
    padding-top: 5px;
}

.idendity-ul li {
    list-style: none;
}

.idendity-ul li a {
    display: block;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.idendity-ul li a:hover {
    background: #f9f9f9;
}

.idendity-ul li a span i {
    float: none;
    padding-right: 10px;
    font-size: 18px;
    color: #36a5fa;
}

.up-load {
    display: inline-block !important;
    border: 1px solid #ccc;
    padding: 5px 20px;
    border-radius: 35px;
    background: #f1f1f1;
    font-size: 17px !important;
    font-weight: 500;
    color: #000 !important;
}

.lbl-img {
    border-radius: 10px !important;
    border: 2px dashed #d9ebfa;
}

.p-10 {
    padding: 10px;
}

.activity-ul {
    display: flex;
    align-items: center;
    gap: 2%;
    flex-wrap: wrap;
}

.activity-ul li {
    display: block;
    width: 32%;
}

.activity-ul li a {
    display: block;
    background: #f6f6f6;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    height: 100px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.activity-ul li a p {
    margin-bottom: 0;
}

.activity-ul li a.active,
.activity-ul li a:hover {
    background: #f0f8ff;
}

.w-80 {
    width: 72%;
}

.map-d {
    border: 1px solid #ddd;
    border-radius: 15px;
}

.cir-cle {
    float: left;
    padding-right: 10px;
    color: #36a5fa ;
    font-size: 13px;
}

.lbl-rh {
    line-height: 25px;
    font-size: 18px;
}

.alrt-s {
    background: #f8fcff !important;
    border: none !important;
    padding: 10px 15px;
    border-color: #36a5fa;
}

.alrt-s a {
    color: #36a5fa;
    display: block;
}

.nv-pill-m {
    border: 1px solid #ddd;
    border-radius: 10px;
}

.nv-pill-m li {
    width: 50%;
    text-align: center;
}

.nv-pill-m .nav-link.active,
.nv-pill-m .show>.nav-link {
    border-radius: 10px;
    background: #f9f9f9 !important;
    color: #000 !important;
}

.nv-pill-m li a {
    font-weight: 500;
    border-radius: 10px;
}

.nv-pil-c li {
    width: 50%;
    text-align: center;
    font-weight: 500;
}

.nv-pil-c {
    border-bottom: 2px solid #ddd !important;
}

.inr-f {
    border: 2px dashed #ddd;
    padding: 10px;
    border-radius: 5px;
}

.radius li {
    list-style-type: none;
}

.radius li a {
    display: block;
    padding: 5px 12px;
}

.radius li a:hover {
    background: #f9f9f9;
}

.radius li a i {
    background: #e9f6ff;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    color: #36a5fa;
    font-size: 18px;
    margin-right: 5px;
}

.joblist li,
.ans li,
.job-follo li {
    list-style-type: none;
}

.joblist li a .s-nam {
    font-size: 18px;
}

.joblist li a {
    display: block;
    padding: 10px;
    border-radius: 6px;
}

.ans li a {
    display: block;
    padding: 15px 10px;
    border-radius: 6px;
    border-bottom: 1px solid #eee;
}

.joblist li a img,
.ans li a img,
.job-follo li a img {
    margin-bottom: 5px;
    background: #f8fcff;
    border-radius: 6px;
}

.joblist li a:hover,
.ans li a:hover {
    background: #f9fcff  !important;
}

.job-follo li a .s-nam {
    font-size: 16px;
}

.job-follo li a {
    border-bottom: 1px solid #eee !important;
    display: block;
    padding: 10px;
    position: relative;
}

.job-follo li a:hover {
    background: #fff9f1 !important;
}

.job-follo li a i {
    position: absolute;
    right: 15px;
    top: 51px;
    font-size: 20px;
}

.btn-s {
    padding: 4px 8px !important;
    font-size: 12px;
}

.float-left {
    float: left;
}

.map-i {
    float: left;
    height: 50px;
    margin-right: 9px;
    color: #36a5fa ;
    font-size: 20px;
}

.job-i1 {
    color: #36a5fa;
    font-size: 22px;
    margin-right: 5px;
}

.job-i2 {
    color: #f0f8ff;
    font-size: 13px;
    border: 3px solid #36a5fa;
    border-radius: 50%;
    margin-right: 5px;
}

.inter-v li {
    list-style-type: none;
}

.inter-v li a {
    display: block;
    padding: 15px 10px;
}

.inter-v li {
    border-bottom: 1px solid #eee;
}

.das-cat li a.active {
    background: #f0f8ff;
    border-radius: 5px;
    color: #36a5fa ;
}

.das-cat li a:hover {
    background: #f0f8ff;
    border-radius: 5px;
    color: #36a5fa ;
}

.fo-rm {
    max-width: 400px !important;
    margin: auto !important;
}

.jcc {
    justify-content: center;
}

.job-l-p1 {
    line-height: 15px;
    margin-top: 5px;
}

.map-lay {
    height: 45px;
    width: 45px;
    background: #36a5fa;
    display: block;
    text-align: center;
    line-height: 34px;
    border-radius: 50%;
    color: #fff;
    border: 5px solid #f8fcff;
    position: absolute;
    top: 10%;
    right: 41%;
}

.joblist {
    margin-bottom: 0;
}

.m-titl {
    text-align: center;
    display: block;
    width: 100%;
}

.clos-a {
    background-image: none !important;
    background: none !important;
    border: none !important;
    font-size: 22px;
    padding: 0;
    height: auto;
}

.w-45 {
    width: 45%;
}

.side-r {
    font-weight: 600;
    font-size: 20px;
}

.gm-style .place-card,
.gm-style .default-card,
.gm-style .directions-card {
    display: none !important;
}

.map-ld {
    display: block;
    background: #fff;
    position: absolute;
    top: 10%;
    right: 31%;
    padding: 15px;
    border-radius: 10px;
    width: 180px;
}

.map-ld img {
    margin-bottom: 5px;
    background: antiquewhite;
    border-radius: 6px;
    float: left;
    margin-right: 7px;
}

.btn-elli {
    background: transparent;
    border: 0;
    content: none;
}

.sti-ky {
    position: sticky;
    bottom: 0;
    background: #fff;
}

.scro-l {
    height: 600px;
    overflow: auto;
    padding-bottom: 0;
}

.bg-f9 {
    background: #f9f9f9;
    display: block;
    padding: 10px;
}

.fw-5 {
    font-weight: 500;
}

.city-div {
    padding: 15px 20px;
}

.city-div p {
    text-align: center;
}

.br-10 {
    border-radius: 10px;
}

.ad-w {
    width: 50%;
}

.bx-n {
    box-shadow: none !important;
}

.modal-content {
    padding:1rem 1.5rem !important;
}

.containern {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 600;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.containern input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmarkn {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.6rem;
    width: 1.6rem;
    background-color: #eee;
    border-radius: 50%;
}

.containern:hover input~.checkmarkn {
    background-color: #ccc;
}

.containern input:checked~.checkmarkn {
    background-color: #fff;
    border: 1px solid #2196F3;
}

.checkmarkn:after {
    content: "";
    position: absolute;
    display: none;
}

.containern input:checked~.checkmarkn:after {
    display: block;
}

.containern .checkmarkn:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 50%;
    background: #2196F3;
}
.nodata{
    max-width: 500px;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    margin: 2rem auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}


ul.breadcrumb {
    margin-bottom: 0 !important;
}
ul.breadcrumb li {
  display: inline;
  font-size: 17px;
  text-transform: capitalize;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "\f101";
  font-family: "Font Awesome 6 free";
  font-weight: 700;
  font-size: 14px;
}
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}
@media (max-width:1400px) {
    .img-mob {
        float: left;
        /* margin-right: 8px; */
    }
}

@media (max-width:575px) {
    .mob-r {
        text-align: right;
    }

    .flex-d {
        display: flex;
        flex-direction: column-reverse;
    }

    .mob-mb-0 {
        margin-bottom: 0 !important;
    }

    .activity-ul li {
        width: 49%;
    }

    .mob-p01 {
        padding: 0;
    }
}

@media (max-width:523px) {
    .mob-w {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .row-boxp {
        margin-top: 0 !important;
    }
}

@media (max-width:768px) {
     #nav-gwbar1 li a.nav-a{
        font-size: 12px !important;
     }
}
@media (min-width:768px) {
   

    .modal-dialog {
        max-width: 520px !important; 
    }
    .c-c-n,
    .c-c-p {
        width: 3%;
    }

    .ci {
        padding: 0;
    }

    .scr-mtb {
        margin-top: 40px;
    }

    .profile-content {
        padding: 25px;
        border-radius: 4px
    }

    .timeline:before {
        content: '';
        position: absolute;
        top: 5px;
        bottom: 5px;
        width: 4px;
        background: #ddd;
        left: 20%;
        margin-left: -1.6px
    }

    .timeline .timeline-body {
        margin-left: 23%;
        margin-right: 17%;
    }

    .chat-box {
        position: relative;
        height: 400px;
        overflow-y: auto;
    }

    .bl-1 {
        border-right: 1px solid #ccc;
    }

    .src-mt-5 {
        margin-top: 3rem;
    }

    .src-mb-5 {
        margin-bottom: 3rem;
    }

    .section-products .single-product .part-11 {
        position: relative;
        height: 500px;
        max-height: 500px;
        margin-bottom: 5px;
        overflow: hidden;
        -webkit-box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #fff;
        box-shadow: -20px 20px 35px #dcdcdc, 20px -40px 35px #fff;
        -webkit-border-radius: 8px;
    }

    #msform fieldset {
        background: white;
        border: 0 none;
        border-radius: 3px;
        padding: 0px;
        box-sizing: border-box;
    }

    .left-sec {
        position: relative;
        height: 500px;
        overflow-y: auto;
    }

    #progressbar li {
        width: 5% !important;
    }
}

.asc {
    align-self: center;
}
.contan {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 25px;
  height: 0.2rem;
  background-color: #666;
  margin: 5px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 8px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -8px) rotate(45deg);
}
@media (max-width:767px) {
    .scr-mtb[_ngcontent-ng-c888775292] h1{
            font-size: 1.5rem !important;
    }
    .modal-title {
        font-size: 18px !important;
    }
    .mt-75{
        padding-top: 72px !important;
    }
    .flex-p h6,
    .flex-p p {
        font-size: 14px;
    }

    .btn-fill {
        padding: 7px !important;
    }

    .time-il li {
        margin-bottom: 0px;
        margin-right: 11px;
    }

    .ad-w {
        width: 100% !important;
    }

    .c-c-n,
    .c-c-p {
        width: 8%;
    }

    .mob-m10 {
        margin: 0 10px;
    }

    .mob-asc-n {
        align-self: unset;
    }

    .mob-100 {
        width: 100% !important;
    }

    .mob-p10 {
        padding: 10px;
    }

    .mob-w-100 {
        width: 100% !important;
    }

    .scr-mtb {
        margin-bottom: 20px;
    }

    .mob-mt-0 {
        margin-top: 0 !important;
    }

    .banner-ul li a {
        font-size: 12px !important;
    }

    .table-date {
        line-height: 0 !important;
    }

    .hero-section {
        height: 510px !important;
    }

    .visi {
        visibility: visible;
    }

    .pl-3e {
        padding-left: 1rem !important;
    }

    .tbl-res {
        width: 500px;
        margin: auto !important;
    }

    .mob-pl-5 {
        padding-left: 5px !important;
    }

    .li-st li {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mob-pr-0 {
        padding-right: 0;
    }

    .mob-mb-0 {
        margin-bottom: 0;
    }

    #progressbar li {
        width: 10% !important;
    }

    .mob-btn-2 {
        padding: 5px;
        font-size: 13px;
    }

    .pr-0 {
        padding-right: 0;
    }

    .row-boxx {
        padding: 20px;
    }

    .accou-nt {
        margin-bottom: 15px;
    }

    .mob-spac {
        padding-top: 20px !important;
        margin-top: 0 !important;
    }

    .mob-mb-3 {
        margin-bottom: 15px;
    }

    .mob-mt-3 {
        margin-top: 15px;
    }

    .navbar-collapse {
        background: #fff;
        padding: 20px;
        min-height: 90vh;
    }

    .mob-rvs {
        display: flex;
        flex-direction: column-reverse;
    }

    .right-sec {
        padding: 20px;
        text-align: center;
        display: block;
        width: 100%;
        border-top: 1px solid #ccc;
    }

    .mob-p {
        padding: 6px 10px;
    }

    .ou-m {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .mob-fs-14 {
        font-size: 14px;
    }

    .mob-p0 {
        padding: 0 !important;
    }

    .btn-hedr {
        margin-bottom: 15px;
    }

    .son-ul li {
        display: block;
        list-style-type: none;
        margin-bottom: 15px;
    }

    .sec-6 {
        padding: 10px 8px;
    }

    .btn-fill-s,
    .btn-blank-s {
        padding: 5px 4px;
    }

    .mob-mb-20 {
        margin-bottom: 20px !important;
    }

    .mob-mt-74 {
        margin-top: 74px !important;
    }
}

@media (min-width:500px) {
    .table-date {
        width: 40px;
        height: 40px;
    }
}

@media (max-width:499px) {
    .table-date {
        line-height: 30px;
    }
    .mobg2{
        gap: 1rem !important;
    }

    .modal-content {
        padding: 1rem !important;
    }
}

@media (min-width:992px) {
    .row-box1 {
        max-width: 1100px;
        margin: auto !important;
    }

    #msform fieldset {
        width: 50%;
        margin: auto !important;
    }
}

@media (max-width:992px) {
    .btn-fill-s {
        padding: 5px 4px;
    }

    .des-3 {
        padding: 10px;
    }
}
@media(max-width:600px)
{
    .row-boxp{
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        padding-top: 0 !important;
    }
    .mob-p0{
        padding: 0 !important;
    }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 
input[type=number] {
  -moz-appearance: textfield;
}