body {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #777777;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/*--------- Body End -------*/

/*---------- Normal Css Start -------*/

a {
    color: #777777;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

a:hover,
a:focus {
    color: #535465;
    text-decoration: none;
}

a:focus {
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Philosopher', sans-serif;
    font-weight: 600;
    line-height: 1.1;
    color: #333333;
}

img {
    max-width: 100%;
}

input,
textarea,
select,
button {
    outline: none;
    box-shadow: none;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none;
    box-shadow: none;
}

.ast_toppadder10 {
    padding-top: 10px;
}

.ast_toppadder20 {
    padding-top: 20px;
}

.ast_toppadder30 {
    padding-top: 30px;
}

.ast_toppadder40 {
    padding-top: 40px;
}

.ast_toppadder50 {
    padding-top: 50px;
}

.ast_toppadder60 {
    padding-top: 60px;
}

.ast_toppadder70 {
    padding-top: 70px;
}

.ast_toppadder80 {
    padding-top: 80px;
}

.ast_toppadder90 {
    padding-top: 90px;
}

.ast_toppadder100 {
    padding-top: 100px;
}

.ast_bottompadder10 {
    padding-bottom: 10px;
}

.ast_bottompadder20 {
    padding-bottom: 20px;
}

.ast_bottompadder30 {
    padding-bottom: 30px;
}

.ast_bottompadder40 {
    padding-bottom: 40px;
}

.ast_bottompadder50 {
    padding-bottom: 50px;
}

.ast_bottompadder60 {
    padding-bottom: 60px;
}

.ast_bottompadder70 {
    padding-bottom: 10px;
}

.ast_bottompadder80 {
    padding-bottom: 80px;
}

.ast_bottompadder90 {
    padding-bottom: 90px;
}

.ast_bottompadder100 {
    padding-bottom: 100px;
}

.ast_padderboth120 {
    padding: 120px 0px;
}

.ast_slider_wrapper {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url(/assets/header/slider1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-top: 70px;
}




.appointmentastro{
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url(/assets/header/slider1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-bottom: 70px;
}
.ast_banner_text {
    float: left;
    width: 100%;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 50px 0px;
}
.ast_waves3 {
    position: absolute;
    width: 900px;
    bottom: 15px;
    right: -400px;
}
.ast_banner_text {
    float: left;
    width: 100%;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 50px 0px;
}
.ast_wave {
    width: 700px;
    height: 700px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin-left: 50%;
    left: -350px;
    position: absolute;
    bottom: -350px;
    z-index: -1;
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -webkit-animation: pulse 3000ms ease-out infinite;
    -moz-animation: pulse 3000ms ease-out infinite;
    -ms-animation: pulse 3000ms ease-out infinite;
    -o-animation: pulse 3000ms ease-out infinite;
    animation: pulse 3000ms ease-out infinite;
}
.ast_wave:nth-of-type(2) {
    -webkit-animation-delay: 600ms;
    -moz-animation-delay: 600ms;
    -ms-animation-delay: 600ms;
    -o-animation-delay: 600ms;
    animation-delay: 600ms;
}
.ast_wave:nth-of-type(3) {
    -webkit-animation-delay: 1200ms;
    -moz-animation-delay: 1200ms;
    -ms-animation-delay: 1200ms;
    -o-animation-delay: 1200ms;
    animation-delay: 1200ms;
}

/*--- responsive css start ---*/

@media(max-width:1400px) {
    .ast_contact_form {
        width: 60%;
    }
    .ast_product_section:hover .ast_product_info {
        transform: translateY(-55px);
    }
}

@media(max-width:1199px) {
    .ast_product_section {
        max-height: 275px;
    }
    .ast_related_pro .owl-carousel .ast_product_section {
        max-height: 285px;
    }
    .about_slider .btn-wrap {
        right: 25px;
    }
    .about_slider.slider_half .btn-wrap {
        bottom: 12px;
    }
    .ast_contact_form {
        width: 65%;
    }
}

@media(max-width:991px) {
    .woocommerce_checkout_receipt {
        padding: 0;
    }
    .ast_product_section {
        max-height: 380px;
    }
    .ast_related_pro .owl-carousel .ast_product_section {
        max-height: 393px;
    }
    .ast_palm_section {
        text-align: center;
    }
    .ast_palm_section .ast_palm_img,
    .ast_palm_section.ast_palm_right .ast_palm_img {
        position: relative;
        display: inline-block;
        top: auto;
        left: auto;
        right: auto;
    }
    .ast_palm_section .ast_palm_content,
    .ast_palm_section.ast_palm_right .ast_palm_content {
        padding: 20px;
        text-align: center;
    }
    .about_slider,
    .about_slider.slider_half {
        margin-bottom: 30px;
        height: 282px;
    }
    .about_slider .card,
    .about_slider.slider_half .card {
        left: 35%;
        width: auto;
    }
    .about_slider.slider_half img,
    .about_slider.slider_half .card {
        width: 300px;
    }
    .ast_menu ul li.as_submenu_li:after {
        position: absolute;
        content: '';
        border-left: 5px solid #ef1f1f00;
        border-right: 5px solid #ff000000;
        border-top: 5px solid #ffffff;
        top: 20px;
        right: 10px;
        z-index: 1;
    }
    .ast_contact_form {
        width: 80%;
    }
    .ast_heading p {
        width: 100%;
    }
    .about_slider .card {
        height: auto;
    }
    .product_description .ad_wishlist {
        padding-left: 25px;
    }
    /*.ast_menu ul li ul.submenu {
	position: static;
}*/
}

@media(max-width:767px) {
    .about_slider .card {
        height: 207px;
    }
    .ast_top_header .ast_contact_details,
    .ast_top_header .ast_autho_wrapper ul li {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .ast_top_header {
        text-align: center;
    }
    .ast_autho_wrapper {
        display: inline-block;
        float: none;
        width: auto;
    }
    .table-responsive>.table {
        margin-bottom: 30px;
    }
    .table-responsive {
        border: none;
    }
    .ast_product_section,
    .ast_related_pro .owl-carousel .ast_product_section {
        max-height: 100%;
    }
    .ast_product_section:hover .ast_product_info,
    .ast_related_pro .ast_product_section:hover .ast_product_info {
        transform: translateY(0);
    }
    .product_description {
        margin-top: 50px;
    }
    .about_slider,
    .about_slider.slider_half {
        height: 325px;
    }
    .about_slider .btn-wrap {
        bottom: 6%;
        right: 50%;
    }
    .ast_tarot_box a .terot_content {
        max-width: 213px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .product_detail_cover {
        text-align: center;
    }
    .product_slider {
        max-width: 90%;
        display: inline-block;
    }
    .product_description {
        text-align: left;
    }
    .ast_search .ast_search_field {
        width: 100%;
    }
    .ast_product_section .ast_product_image {
        display: flex;
        justify-content: center;
    }
}

@media(max-width:479px) {
    .checkout_wrapper_box {
        padding: 20px;
    }
    .woocommerce_billing .form-group.checkbox {
        width: 100%;
    }
    .about_slider .card,
    .about_slider.slider_half .card {
        left: 25%;
        height: 0;
    }
}

/*================Responsive Style==================*/

/*@media(max-width:575px){
	.ast_menu_btn {
	    top: -65px !important;
	}
}*/

@media(max-width:500px) {
    .ast_bannertext_wrapper {
        padding-top: 30px;
    }
    .ast_error_info h1 {
        margin-top: 50px;
        font-size: 24px;
    }
    .ast_error_info p {
        font-size: 16px;
        margin-bottom: 40px;
    }
    .ast_contact_details ul li:last-child {
        margin: 10px;
    }
    .ast_contact_form {
        width: 100%;
        padding: 40px;
    }
}

@media(max-width:420px) {
    .about_slider.slider_half img,
    .about_slider.slider_half .card {
        width: 200px;
    }
    .about_slider img {
        margin-top: 0;
    }
}

@media(max-width:380px) {
    .woocommerce_billing .next {
        margin-top: 30px;
    }
    .ast_header_bottom {
        margin-top: 130px;
    }
}

.ast_bannertext_wrapper h1 {
    float: left;
    width: 100%;
    text-transform: capitalize;
    margin: 50px 0px 20px 0px;
    font-size: 60px;
    color: #ffffff;
    font-weight: 400;
}

.ast_bannertext_wrapper ul li {
    list-style: none;
    display: inline-block;
    margin-right: 30px;
    position: relative;
    text-transform: capitalize;
    font-family: 'Philosopher', sans-serif;
    font-size: 24px;
}
#astrologom {
    animation: spin 9s infinite linear;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .appointmentastro {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url("https://hips.hearstapps.com/hmg-prod/images/solar-system-royalty-free-image-1649969440.jpg?crop=1xw:0.75xh;center,top&resize=1200:*");
    background-size: cover;
    background-attachment: fixed;
  }


  .appointmoibile{
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url("https://res.allmacwallpaper.com/get/macbook-air-wallpapers/Alone-in-the-universe/1115-720.jpg");
    background-size: cover;
  }


  .appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
  }
  .appheading h2 {
    font-family: "Philosopher", sans-serif;
    font-weight: 600;
    font-size: 36px;
    color: white;
  }
  .homeapp {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
  }
  .homeapp li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0;
  }
  .homeapp li a {
    color: #ffffff;
    font-size: 18px;
    padding: 0px 10px;
    text-decoration: none;
  }
  .hh2appoint {
    color: #ff7010 !important;
  }

  .status{
    background-color: red;
    color: white !important;
    padding: 2px 7px;
    font-size: smaller;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
.action{
    background-color: rgb(114, 118, 115);
    color: white !important;
    padding: 2px 7px;
    font-size: smaller;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
.accept{
    background-color: #28513c;
    color: white !important;
    padding: 2px 7px;
    font-size: smaller;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
.generate{
    /* background-color: #006fff; */
    color: white !important;
    padding: 2px 7px;
    font-size: smaller;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}

.mainpanditimage{
    background-image: url({{ asset('website_dashboard_assets/images/astrobuddy_pandit.png') }});
}
.clients.active {
    scale: 1;
    opacity: 1;
}

.clients {
    transition: all 0.25s ease;
    scale: 0.5;
    opacity: 0;
    width: 80%;
    left: 0% !important;
    cursor: pointer;
}

.jobbox-grid-item {
    max-width: 28% !important;
    border-radius: 8px;
    border: 1px solid #E0E6F7;
    overflow: hidden;
    height: 100%;
    position: relative;
    background: #ffffff;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 7px;
    border-radius: 15px;
}

.astrouppercards {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(19 31 88), rgb(42 209 109));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.astrouppercards h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.profilebox {
    position: absolute;
    bottom: -31%;
    left: 10%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* overflow: hidden; */
    border: 3px solid white;
}

.newcircle {
    left: 7% !important;
    width: 63px !important;
    height: 63px !important;
}

.newcircle {
    left: 7% !important;
    width: 63px !important;
    height: 63px !important;
}

.circle {
    background-color: #1a585f;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.lowerbox {
    margin-top: 0px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.astroname {
    margin-top: 40px !important;
    margin: 0 auto;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.name {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.name h3 {
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 500;
    color: black !important;
}

.chataap {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap button {
    background: #1a585f;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.chataap a {
    background: #1a585f;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}


.minstar {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rate-reviews-small {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.minutes {
    width: 50%;
    display: flex;
    align-items: center;
    padding-right: 12px;
    justify-content: end;
}

.minutes p {
    margin: 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #29292a;
}

.upperbox2 {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(19 31 88), rgb(42 209 109));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.circle2 {
    background-color: #353949;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.upperbox2 h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.chataap2 {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap2 button {
    background: #353949;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.upperbox3 {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(22 19 15), rgb(227 20 20));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.circle3 {
    background-color: #681311;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.chataap3 {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap3 button {
    background: #681311;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.upperbox3 h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.lowertransaction {
    margin: 15px auto;
}

.alltransaction {
    width: 90%;
    margin: 10px auto;
    margin-bottom: 22px;
}
 /* ************************************************************************************************ */

.rightusername2 {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh; */
}

.upcomingappointment {
text-align: center;
margin-left:8%;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#up{
color: #fff !important;
overflow: hidden !important;
font-size: 21px;
padding-bottom: 20px;
}
.countdown-timer {
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
font-family: 'Arial', sans-serif;
font-size: 20px;
}

.firstboxes {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
}

.firstboxes div {
font-size: 1.5em;
margin-bottom: 5px;
}

.firstboxes label {
font-size: 0.7em;
color: #fff;
}

#timing{
color: #fff;
font-size: 2em;
margin: 0 5px;
position: relative;
bottom: 18px !important;
}

.countdown-label {
margin-top: 10px;
font-size: 1.2em;
color: #333;
}



.appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}

.appheading h2 {
    font-family: "Philosopher", sans-serif;
    font-weight: 600;
    font-size: 36px;
    color: white;
}

.homeapp {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
}

.homeapp li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0;
}

.homeapp li a {
    color: #ffffff;
    font-size: 18px;
    padding: 0px 10px;
    text-decoration: none;
}

.hh2appoint {
    color: #ff7010 !important;
}

.jobbox-grid-item {
    border-radius: 8px;
    border: 1px solid #E0E6F7;
    overflow: hidden;
    height: 100%;
    position: relative;
    background: #ffffff;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 7px;
    border-radius: 15px;
}

.astrouppercards {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(19 31 88), rgb(42 209 109));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.upperbox2 {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(2 21 76), rgb(221 173 64));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.upperbox2 h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.circle2 {
    background-color: #353949;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.chataap2 {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap2 button {
    background: #353949;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.upperbox3 {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(22 19 15), rgb(227 20 20));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.upperbox3 h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.circle3 {
    background-color: #681311;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.chataap3 {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap3 button {
    background: #681311;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.upperbox4 {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(8 8 8), rgb(32 163 213));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.upperbox4 h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.circle4 {
    background-color: #14526a;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.chataap4 {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap4 button {
    background: #14526a;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.profilebox {
    position: absolute;
    bottom: -31%;
    left: 10%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* overflow: hidden; */
    border: 3px solid white;
}

.profilebox img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.astrouppercards h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.lowerbox {
    margin-top: 0px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.astroname {
    margin-top: 40px !important;
    margin: 0 auto;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.name {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.name h3 {
    font-size: 15px;
    margin-bottom: 0;
}

.chataap {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.circle {
    background-color: #1a585f;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.chataap button {
    background: #1a585f;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.description {
    width: 100%;
}

.description p {
    width: 90%;
    margin: 5px auto;
    text-align: left;
    font-size: 14px;
}

.description p span {
    font-weight: 500;
}

.minstar {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rate-reviews-small {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.minutes {
    width: 50%;
    display: flex;
    align-items: center;
    padding-right: 12px;
    justify-content: end;
}

.minutes p {
    margin: 0 0;
    font-size: 14px;
    font-weight: 600;
}

.starnumber {
    font-size: 14px;
    font-weight: 600;
    margin-left: 5px;
}

.searchastro {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 10px auto;
    margin-bottom: 25px;
}

.headingastro {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-right: 15px;
    box-shadow: 0 0 3px -2px #a3a3a3;
    color: #323246 !important;
    border: 1px solid #d1d2d5;
}

.headingastro h3 {
    font-size: 19px;
    font-weight: 500;
    width: 50%;
    color: #323246 !important;
    border-radius: 5px;
    height: 45px;
    display: flex;
    align-items: center;
    margin: 0 0;
    padding-left: 7%;
}

.headingastro2 {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 50%;
}

.headingastro2 p {
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    border-radius: 5px;
    margin: 0 auto;
    height: 45px;
    color: #323246 !important;
    display: flex;
    align-items: center;
    margin: 0 0;
    padding-left: 5%;
}

.headingastro2 p span {
    font-weight: 500;
    font-size: 15px;
    margin-right: 5px;
}

.mysearchastro {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.mysearchastro input {
    width: 55%;
    border: 1px solid #c1c1c5;
    height: 38px;
    padding-left: 20px;
    font-size: 16px;
}

.mysearchastro button {
    height: 38px;
    border: none;
    background: #ffcd3a;
    width: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #010101;
    transition: all 400ms ease-in-out;
}

.mysearchastro button:hover {
    background: #20252c;
    color: white !important;
}

.rate-reviews-small {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: end;
}

/* Astrologers css end  */

#astrologom {
    animation: spin 9s infinite linear;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .mobilecontact{
    float: left;
    width: 100%;
    position: relative;
    z-index: 1;
    background: url("https://img.freepik.com/premium-photo/fantasy-landscape-with-lake-mountains-night-generative-ai-i_841229-8453.jpg");
    /* background: rgba(0, 0, 0, 0.1) url("https://img.freepik.com/free-photo/glowing-spaceship-orbits-planet-starry-galaxy-generated-by-ai_188544-9655.jpg"); */
    /* background-blend-mode: darken; */
    background-size: cover;
    margin-bottom: 70px;
    margin-top: 70px;
  }


  .contform {
    float: left;
    width: 100%;
    position: relative;
    z-index: 1;
    background: url("https://www.fonstola.ru/images/202004/fonstola.ru_380722.jpg");
    /* background: rgba(0, 0, 0, 0.1) url("https://img.freepik.com/free-photo/glowing-spaceship-orbits-planet-starry-galaxy-generated-by-ai_188544-9655.jpg"); */
    /* background-blend-mode: darken; */
    background-size: cover;
    background-attachment: fixed;
    margin-bottom: 70px;
    margin-top: 70px;

  }

  .appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
  }
  .hidden {
    display: none;
  }

  .increesnum {
    background: url('{{ asset('website/uploads/sites/3/2021/08/astrology-banner.jpg') }}') !important;
}

.our-team {
    background-image: url("{{ asset('website/assets/Zodiac/panditback.webp') }}");
}

.as-customer-box p {
    color: #000;
}

.as-customer-box h3 {
    color: #000
}


.vc_column_container>.vc_column-inner {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center
}

.wrapper {
    max-width: 1100px;
    width: 100%;
    position: relative;
}

.fa-angle-left {
    height: 50px;
    width: 50px;
    background: #fbe216;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 50%;
    font-size: 1.25 rem;
    transform: translateY(-50%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}

.fa-angle-right {
    height: 50px;
    width: 50px;
    background: #fbe216;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 50%;
    font-size: 1.25 rem;
    transform: translateY(-50%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}

.wrapper i:first-child {
    left: -60px;
}

.wrapper i:last-child {
    right: -50px;
}

.wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3) - 12px);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: 0;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel :where(.card, .img) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carousel.no-transition {
    scroll-behavior: auto;
}

.carousel.dragging .card {
    cursor: grab;
    user-select: none;
}

.carousel .card {
    scroll-snap-align: start;
    height: 100%;
    list-style: none;
    background: #fff;
    / border-radius: 8px;/ display: flex;
    cursor: pointer;
    width: 98%;
    / padding-bottom: 15px;/ align-items: center;
    justify-content: center;
    flex-direction: column;
}

.card .img {
    background: green;
    width: 145px;
    height: 145px;
    border-radius: 50%;

}

.card .img img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
}

.card h2 {
    font-weight: 500;
    font-size: 1.56rem;
    margin: 30px 0 5px;
}

.card span {
    color: #6a6d78;
    font-size: 1rem;

}



@media screen and (max-width: 900px) {
    .wrapper .carousel {
        grid-auto-columns: calc((100% / 2) - 9px);

    }
}

@media screen and (max-width: 600px) {
    .wrapper .carousel {
        grid-auto-columns: 100%;
    }
}

.wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.carousel .card{
    background-color: #ff7010
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.wrapper .box {
    background: #fff;
    / width: calc(33% - 10px);/ height: 100%;
    padding: 25px;
    / margin-bottom: 25px;/ border-radius: 3px;
    /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); */
}

.wrapper .box i.quote {
    font-size: 20px;
    color: #fbe216;
}

.wrapper .box .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
}

.box .info .name {
    font-weight: 600;
    font-size: 17px;
}

.box .info .job {
    font-size: 16px;
    font-weight: 500;
    color: #fbe216;
}

.box .info .stars {
    margin-top: 2px;
}

.box .info .stars i {
    color: #fbe216;
}

.box .content .image {
    height: 75px;
    width: 75px;
    padding: 3px;
    background: #fbe216;
    border-radius: 50%;
}

.content .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
}

.box:hover .content .image img {
    border-color: #fff;
}

@media (max-width: 1045px) {
    .wrapper .box {
        width: calc(50% - 10px);
        margin: 10px 0;
    }
}

@media (max-width: 702px) {
    .wrapper .box {
        width: 100%;
    }
}

.rr-appointment-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    max-width: 300px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s, background-color 1.5s ease-in-out;
    position: relative;
    overflow: hidden;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.rr-appointment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    transition: left 0.5s;
}

.rr-appointment-card:hover::before {
    left: 100%;
}

.rr-appointment-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #f0e68c;
}

.rr-astrologer-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
    transition: transform 0.3s;
    animation: photoFadeIn 1.5s ease-in-out;
}

@keyframes photoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.rr-appointment-card:hover .rr-astrologer-photo {
    transform: scale(1.1);
}

.rr-astrologer-name {
    font-size: 15px;
    color: #333333;
    font-family: "Poppins", sans-serif;
    position: relative;
    font-weight: 500;
    z-index: 1;
    width: 100%;
    animation: textFadeIn 2s ease-in-out;
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

hr {
    width: 80%;
    border: none;
    border-top: 2px solid rgb(255, 230, 0);
    margin: 10px auto;
}

.rr-appointment-details p {
    font-size: 17px;
    color: #ff7010;
    display: block;

    margin: 0px 0;
    font-family: "Philosopher", sans-serif;

    transition: color 0.3s;

    animation: textFadeIn 2s ease-in-out;
}

.rr-appointment-card:hover .rr-appointment-details p {
    color: #333333;
}

.increesnum {
    background: url('{{ asset('website/uploads/sites/3/2021/08/astrology-banner.jpg') }}') !important;
}

.our-team {
    background-image: url("{{ asset('website/assets/Zodiac/panditback.webp') }}");
}

.as-customer-box p {
    color: #000;
}

.as-customer-box h3 {
    color: #000
}

.vc_column_container>.vc_column-inner {
    color: #000
}

.active-tab {
    background-color: #f0f0f0;
    /* Example active tab background color */
}
#astrologom {
    animation: spin 9s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ast_slider_wrapper {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url("{{ asset('website/assets/Zodiac/contact.jpg') }}");
    background-size: cover;
}

.appointment {

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}

.hidden {
    display: none;
}

.same {
    display: flex;
}



@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

.as-sign-box {
    width: 150px;
    padding: 12px 20px 20px;
    margin-left: 25px
}

.as-sign-box h5 {
    font-size: 15px;
    white-space: nowrap;
}

.blink {
    animation: blink 1s infinite;
}

.col-2 {
    flex: 0 0 auto;
    width: 94%;
}

.progress-card {
    transition: transform 250ms;
    --color-accent: #333;
    --color-border: #e4e4e4;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1em;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-bottom: 0;
}

.progress-card-head {
    --color-accent: #333;
    --color-border: #e4e4e4;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1em;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-bottom: 0;
}

.progress-title {
    color: #000;
    font-weight: 600;
    font-size: 19px;
    font-family: 'poppins', sans-serif;
}

.progress-card:hover {
    background-color: #fbe01617 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
}

.progress-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    opacity: 0.05;
}

.progress-description {
    font-size: 1rem;
    font-weight: 400;
    font-size: 18px;
    font-family: 'poppins', sans-serif;
}

.as-sign-box {
    margin-bottom: 15px;
    margin-top: 0px;
}

.progress-card {
    --color-accent: #333;
    --color-border: #e4e4e4;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1em;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-bottom: 0;
}

.progress-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    opacity: 0.05;
}

.progress-card.orange {
    --color-accent: #ffc48b;
}

.progress-card.purple {
    --color-accent: #b4b3ff;
}

.progress-card.pink {
    --color-accent: #ffb3c0;
}

.progress-card-content {
    padding: 0.7em;
}

.progress-card .progress-bar {
    background-color: var(--color-border);
    display: block;
    width: 100%;
    height: 5px;
    position: relative;
}

.progress-card .progress-bar::before {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    background-color: var(--color-accent);
    opacity: 0.15;
}

.progress-card .progress-bar::after {
    content: '';
    width: var(--value);
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    background-color: var(--color-accent);
}

.progress-title {
    font-weight: 600;
    margin-bottom: 0.25em;

        {
            {
            -- opacity: 0.9;
            --
        }
    }
}

.progress-description {
    font-size: 0.9rem;
    font-weight: 400;

        {
            {
            -- opacity: 0.85;
            --
        }
    }

    color: black;
}

.progress-card span {
    display: block;
}

.as-sign-box {

    margin-bottom: 15px;
    margin-top: 0px;
}

.ast_slider_wrapper {
    margin-bottom: 45px;
}

.ariesdescription {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-right: 0 !important;
    margin: 0 auto;
}

/* Preloader styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: blur;
    /* Semi-transparent white */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
}

.as_loader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.as_loader img {
    animation: spin 7s infinite linear;
    -webkit-animation: spin 7s infinite linear;
    -moz-animation: spin 7s infinite linear;
}

.as_loader img {
    animation: spin 7s infinite linear;
    -webkit-animation: spin 7s infinite linear;
    -moz-animation: spin 7s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.nav-link.active {
    background-color: #ccc;
}

.nav-pills .nav-link {
    color: #555;
    font-family: 'poppins', sans-serif;
}

.text-uppercase {
    letter-spacing: 0.1em;
}

ol li,
ul li {
    margin-bottom: 0px;
}

.tableliner {
    width: 95%;
    margin: 40px auto;
}

.tab-betail .nav-tabs {
    border-bottom: 0px solid #dee2e6;
}

.tab-betail .nav {
    display: flex;
    justify-content: center;
    column-gap: 10px;
}

.tab-betail .nav-tabs .nav-item {
    margin-bottom: 0px;
}

.tab-betail .nav-tabs .nav-item.show .nav-link,
.tab-betail .nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #fbe216;
    border-color: #fbe216;
}

.tab-betail .nav-tabs .nav-link:hover {
    color: #ffffff;
    background-color: #f9a72e;
    border-color: #fbe216;
}

.tab-betail .nav-tabs .nav-link {
    border: 1px solid #fff;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-radius: 10px;
    color: #000;
    background-color: #f0f0ec78;
    box-shadow: 0px 1px 3px #ddd;
    font-size: 15px;
    font-weight: 600;
    transition: 0.5s;
}

.slider-tabs .tab-betail .nav,
.panchang-datail-sec .tab-betail .nav {
    margin: 20px 0px;
    overflow-x: auto;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    overflow-y: hidden;
    flex-wrap: unset;
}

.slider-tabs .nav-tabs .nav-link {
    border: 1px solid #fff;
    color: #000;
    background-color: transparent;
    box-shadow: 0px 0px 0px #fbe216;
    font-size: 16px;
    font-weight: 600;
    transition: 0.5s;
    border: 1px solid #fbe216;
    margin-bottom: 1px;
}

.appointmentastro {
    background-image: url("{{ asset('website/assets/header/slider1.jpg') }}") !important;
}

.appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}

.appheading h2 {
    font-family: 'Philosopher', sans-serif;
    font-weight: 600;
    font-size: 36px;
    color: white;
}

.homeapp {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
}

.homeapp li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0;
}

.homeapp li a {
    color: #ffffff;
    font-size: 18px;
    padding: 0px 10px;
    text-decoration: none;
}

.hh2appoint {
    color: #ff7010 !important;
}
.appointfirst h3 {
width: 90%;
}

#astrologom {
    animation: spin 9s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ast_slider_wrapper {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url('https://hips.hearstapps.com/hmg-prod/images/solar-system-royalty-free-image-1649969440.jpg?crop=1xw:0.75xh;center,top&resize=1200:*');
    background-size: cover;
}

.mainpanditimage{
    background-image: url({{ asset('website_dashboard_assets/images/astrobuddy_pandit.png') }});
}
.clients.active {
    scale: 1;
    opacity: 1;
}

.clients {
    transition: all 0.25s ease;
    scale: 0.5;
    opacity: 0;
    width: 80%;
    left: 0% !important;
    cursor: pointer;
}

/* .jobbox-grid-item do not switch this class */
.jobbox-grid-item {
    max-width: 28% !important;
    border-radius: 8px;
    border: 1px solid #E0E6F7;
    overflow: hidden;
    height: 100%;
    position: relative;
    background: #ffffff;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 7px;
    border-radius: 15px;
}

.astrouppercards {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(19 31 88), rgb(42 209 109));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.astrouppercards h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.profilebox {
    position: absolute;
    bottom: -31%;
    left: 10%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* overflow: hidden; */
    border: 3px solid white;
}

.newcircle {
    left: 7% !important;
    width: 63px !important;
    height: 63px !important;
}

.newcircle {
    left: 7% !important;
    width: 63px !important;
    height: 63px !important;
}

.circle {
    background-color: #1a585f;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.lowerbox {
    margin-top: 0px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.astroname {
    margin-top: 40px !important;
    margin: 0 auto;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.name {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.name h3 {
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 500;
    color: black !important;
}

.chataap {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap button {
    background: #1a585f;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}
    .chatbtn{
        background: #1a585f;
        width: 83px;
        height: 25px;
        color: white;
        font-size: 14px;
        border: none;
        border-radius: 13px;
        font-weight: 500;
    }
.minstar {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rate-reviews-small {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.minutes {
    width: 50%;
    display: flex;
    align-items: center;
    padding-right: 12px;
    justify-content: end;
}

.minutes p {
    margin: 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #29292a;
}

.upperbox2 {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(19 31 88), rgb(42 209 109));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.circle2 {
    background-color: #353949;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.upperbox2 h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.chataap2 {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap2 button {
    background: #353949;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.upperbox3 {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(-13deg, rgb(22 19 15), rgb(227 20 20));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

.circle3 {
    background-color: #681311;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 0;
    z-index: 1000;
}

.chataap3 {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.chataap3 button {
    background: #681311;
    width: 83px;
    height: 25px;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 13px;
    font-weight: 500;
}

.upperbox3 h2 {
    color: white !important;
    font-size: 15px;
    width: 70%;
    margin-right: 0;
    text-transform: uppercase;
}

.lowertransaction {
    margin: 15px auto;
}

.alltransaction {
    width: 90%;
    margin: 10px auto;
    margin-bottom: 22px;
}
/* ************************************************************************************************ */

.rightusername2 {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh; */
}

.upcomingappointment {
text-align: center;
margin-left:8%;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#up{
color: #fff !important;
overflow: hidden !important;
font-size: 21px;
padding-bottom: 20px;
}
.countdown-timer {
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
font-family: 'Arial', sans-serif;
font-size: 20px;
}

.firstboxes {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
}

.firstboxes div {
font-size: 1.5em;
margin-bottom: 5px;
}

.firstboxes label {
font-size: 0.7em;
color: #fff;
}

#timing{
color: #fff;
font-size: 2em;
margin: 0 5px;
position: relative;
    bottom: 18px !important;
}

.countdown-label {
margin-top: 10px;
font-size: 1.2em;
color: #333;
}

#astrologom {
    animation: spin 9s infinite linear;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .ast_slider_wrapper {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url("https://www.coventry.ac.uk/globalassets/media/global/05-research-section-assets/news/2023/space-news-story-767x460.jpg");
    background-size: cover;
  }

  .appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
  }
  .hidden {
    display: none;
  }

  #astrologom {
    animation: spin 9s infinite linear;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  #astrologom {
    animation: spin 9s infinite linear;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .signature-contain {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url("https://i.pinimg.com/originals/6e/45/50/6e455092c18189888006b8380c2b29a6.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: 70px !important;
  }

  .appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
  }
  .hidden {
    display: none;
  }

  #astrologom {
    animation: spin 9s infinite linear;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .vastushastra {
float: left;
width: 100%;
position: relative;
background-color: #111111;
z-index: 1;
background-image: url('https://kamleshyadav.com/html/astrology/version-1/images/content/index/Vastu-shashtra1-.jpg');
background-size: cover;
background-attachment: fixed;
margin-bottom: 70px;
}

.vastumobile{
float: left;
width: 100%;
position: relative;
background-color: #111111;
z-index: 1;
background-image: url('https://www.thepackersmovers.com/blog/wp-content/uploads/2021/09/vastu-tips-2.jpg');
background-size: cover;
margin-bottom: 70px;
}

.appointment{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}
.appheading h2{
    font-family: 'Philosopher', sans-serif;
font-weight: 600;
font-size: 36px;
color: white;
}
.homeapp{
    width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 15px auto;
}
.homeapp li{
    display: flex;
align-items: center;
justify-content: center;
margin: 0 0;
}
.homeapp li a{
    color: #ffffff;
font-size: 18px;
padding: 0px 10px;
text-decoration: none;
}
.hh2appoint{
    color: #ff7010 !important;
}

#rev_slider_1_1_wrapper .hephaistos.tparrows {
    cursor: pointer;
    background: rgba(80, 79, 83, 0.5);
    width: 40px;
    height: 40px;
    position: absolute;
    display: block;
    z-index: 1000;
    border-radius: 50%;
}

#rev_slider_1_1_wrapper .hephaistos.tparrows.rs-touchhover {
    background: #ff7010;
}

#rev_slider_1_1_wrapper .hephaistos.tparrows:before {
    font-family: "revicons";
    font-size: 18px;
    color: #ffffff;
    display: block;
    line-height: 40px;
    text-align: center;
}

#rev_slider_1_1_wrapper .hephaistos.tparrows.tp-leftarrow:before {
    content: "\e82c";
    margin-left: -2px;
}

#rev_slider_1_1_wrapper .hephaistos.tparrows.tp-rightarrow:before {
    content: "\e82d";
    margin-right: -2px;
}

#rev_slider_1_1_wrapper .hebe_copy24 .tp-tab-title {
    color: #a8d8ee;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    margin-bottom: 5px;
}

#rev_slider_1_1_wrapper .hebe_copy24 .tp-tab-desc {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    line-height: 25px;
    font-family: "Roboto", sans-serif;
}

#rev_slider_1_1[data-slideactive="rs-1"] .hebe_copy24 .tp-tab-title {
    font-size: 18px !important;
}

#rev_slider_1_1[data-slideactive="rs-1"] .hebe_copy24 .tp-tab-desc {
    font-size: 18px !important;
}

#rev_slider_1_1[data-slideactive="rs-2"] .hebe_copy24 .tp-tab-title {
    font-size: 18px !important;
}

#rev_slider_1_1[data-slideactive="rs-2"] .hebe_copy24 .tp-tab-desc {
    font-size: 18px !important;
}



/*!
 * astro-fontv1.0.0
 */

 @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */


/* Gaurav Cards Start  */

.astroteam {
    background-image: url('/assets/Zodiac/panditback.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -6px -51px;
    background-color:white;
    text-align: center;
    overflow: hidden;
    position: relative;
cursor: pointer;
  }

  .upperastro {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .cardpanditpro {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 25%;
    margin: 20px 20px;
  }


  .team-content {
    margin-top: 15px;
    margin-bottom: 50px;
  }

  .astroteam .picture {
    display: inline-block;
    height: 130px;
    width: 130px;
    margin-bottom: 20px;
    z-index: 1;
    position: relative;
  }


  .astroteam .picture::before {
    content: "";
    width: 100%;
    height: 0;
    border-radius: 50%;
    background-color: #ffab10;
    position: absolute;
    bottom: 135%;
    right: 0;
    left: 0;
    opacity: 0.9;
    transform: scale(3);
    transition: all 0.3s linear 0s;
  }

  .astroteam:hover .picture::before {
    height: 100%;
  }

  .astroteam .picture::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .astroteam .picture img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.9s ease 0s;
  }

  .name {
    font-family: 'poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    margin: 5px auto !important;
  }

  .astroteam:hover .picture img {
    box-shadow: 0 0 0 14px #f7f5ec;
    transform: scale(0.7);
  }

  .astroteam .title {
    display: block;
    font-size: 17px;
    margin: 5px;
    color: #ff7010;
    text-transform: capitalize;
  }

  .astroteam .social {
    width: 100%;
    padding: -20px;
    margin: 0;
    background-color: #ffab10;
    position: absolute;
    bottom: -100px;
    left: 0;
    transition: all 0.5s ease 0s;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 15px 0;
  }

  .astroteam:hover .social {
    bottom: 0;
  }

  .astroteam .social li {
   width: 100%;
   margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .astroteam .social li a {
    width: 35% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: white;
    margin: 0 auto;
    transition: all 0.3s ease 0s;
    text-decoration: none;
  }

  .astroteam .social li a:hover {
    color: #ff7010;
    background-color: #f7f5ec;
  }

  .slider {
    display: flex;
    animation: slideAnimation 20s linear infinite;

  }

  .picture {
    margin-top: 40px;

  }

  @keyframes slideAnimation {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  .suncard {
    width: 100%;
  /* box-shadow: 0px 0px 8px #c7c7c7; */
  border: 1px solid #ebebeb;

  }

  .controls {
    margin-top: 20px;
    text-align: center;
  }

  .control-btn {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
  }

  /* Gaurav Cards End  */

  .astroteamcards{
    background-color: white;
    width: 100%;
    padding: 50px 10px;
}

.astroteamcards h3{
    width: 90%;
    margin: 35px auto;
    text-align: center;
    color: #1c1f25;
}


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

body{
    font-family: "Noto Sans", sans-serif;
}

.astroprofile {
    width: 100%;
    background-color: #fff9f9;
}


.progress-card {
    transition: transform 250ms;
    --color-accent: #333;
    --color-border: #e4e4e4;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1em;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-bottom: 0;
}

.progress-card-head {
    --color-accent: #333;
    --color-border: #e4e4e4;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1em;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-bottom: 0;
}

.progress-title {
    color: #000;
    font-weight: 600;
    font-size: 15px;
    font-family: 'poppins', sans-serif;
}

.progress-card:hover {
    background-color: #fbe01617 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
}

.progress-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    opacity: 0.05;
}
.astrojd {
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);
    border-radius: 10px;
}
.jd-one {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oneimg {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto;
}

.jd-img {
    width: 230px;
    border-radius: 2%;
    overflow: hidden;
}
.jd-img img {
    width: 100%;
}
.jdbutton {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: start;
}
.jd-des {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
.jd-des h3 {
    width: 100%;
    text-align: left;
    font-family: "Philosopher", sans-serif;
    /* font-family: "Poppins", sans-serif; */
    color: #ff7010;
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 13px;
}
.jd-des h3 i {
    font-size: 20px;
}
.jd-des p {
    width: 100%;
    text-align: left;
    color: #171717;
    font-size: 15px;
    font-weight: 400;
    margin: 2px 0;
    font-family: "Poppins", sans-serif;
}
.jd-des p span {
    color: #000;
    font-weight: 500;
    font-size: 15px;
    font-family: "Poppins", sans-serif;
    /* font-weight: 600; */
}

.minutes {
    margin-top: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}
.minutes p {
    width: 125px;
    text-align: left;
    color: #171717;
    font-size: 15px;
    font-weight: 400;
    margin: 2px 0;
    font-family: "Poppins", sans-serif;
}
.minutes p span {
    color: #000;
    font-weight: 500;
    font-size: 18px;
    font-family: "Poppins", sans-serif;
    margin-right: 5px;
    /* font-weight: 600; */
}
.minutes p span i {
    color: #ff7010;
    font-size: 18px;
    margin-right: 7px;
}

.jd-two {
    width: 100%;
}
.chatbutton {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    margin-bottom: -19px;
}
.perminute {
}
.callchat {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    margin-top: 7px;
}
.callchat a button {
    width: 180px;
    margin: 8px 0;
    height: 40px;
    border: none;
    /* border: 1px solid black; */
    /* background: #234a64; */
    /* background: linear-gradient(90deg, rgb(225 155 45), rgb(233 93 24)); */

    color: white;
    border-radius: 4px;
    font-weight: 500;
    font-size: 15px;
    font-family: "Poppins", sans-serif;
    box-shadow: 3px 3px 6px #bcbfc1;
}
.callchat button i {
    margin-right: 10px;
}
.chat {
    /* background: linear-gradient(90deg, rgb(243 131 35), rgb(241 91 17)); */
    background-color: #ed6104;
}
.chat:hover {
    transform: scale(1.05);
    background: #222222 !important;
    transition: all 500ms ease-in-out;
}
.call {
    background: #234a64 !important;
}
.call:hover {
    background: #ed6104 !important;
    transform: scale(1.05);
    transition: all 500ms ease-in-out;
}

.jd-two {
    width: 95%;
    margin: 20px auto;
}
.jd-two h3 {
    width: 90%;
    font-size: 27px;
    margin: 10px auto;
    color: black;
}
.jd-two h3 hr {
    color: #f1711c;
    width: 123px;
    margin-left: -4px;
    margin-top: 6px;
    opacity: 1;
    height: 2px;
}
.jd-two p {
    width: 90%;
    margin: 10px auto;
    padding-right: 10%;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

.callcharge {
    position: absolute;
    right: 0;
}

.appointment {
    width: 86%;
    display: flex;
    align-items: start;
    justify-content: start;
    margin: 30px auto;
}
.bookA {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}
.bookA a {
    width: 90%;
}
.bookA a button {
    width: 100%;
    height: 45px;
    border-radius: 21px;
    background: #ff7010;
    color: white;
    font-size: 16px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    border: none;
}
.bookA a button:hover {
    transform: scale(1.05);
    transition: all 600ms ease-in-out;
    background: #191b1d;
}
.Review {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    border: 1px solid #f5dab2;
}
.ourusers {
    padding-top: 15px;
    height: 45px;
    width: 90%;
    text-align: left;
    font-family: "Philosopher", sans-serif;
    /* font-family: "Poppins", sans-serif; */
    color: #222222;
    font-weight: 600;
    font-size: 28px;
}

.userrview {
    width: 100%;
    margin: 30px auto;
    height: 50vh;
    overflow-y: auto;
}
.users {
    width: 90%;
    margin: 22px auto;
    /* border: 1px solid #f7cd99; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    box-shadow: 0px 0px 5px -2px #d5b391;
    border-radius: 10px;
    padding-bottom: 15px;
}
.userhead {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
}
.usimg {
    width: 45px;
    height: 45px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fd6e00;
    margin-right: 15px;
}
.usimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.userhead {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 90%;
    margin-top: 9px;
}
.userpara {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 90%;
    margin-top: 9px;
}
.userhead h4 {
    width: 65%;
    font-size: 17px;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: start;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
}
.fa-star {
    color: #ff6000;
}

.rating {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 23px 0;
    border: 1px solid rgb(245, 218, 178);
}
.ratehead {
    width: 90%;
    margin: 10px auto;
}
.ratehead h3 {
    width: 90%;
    margin: 10px auto;
    color: #222222;
    font-size: 20px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
}
.reviewratings {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pointrate {
    width: 40%;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pointrate h3 {
    width: 100%;
    text-align: center;
    color: #222222;
    font-size: 35px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
}
.pointrate p {
    color: #222222;
    font-size: 17px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    margin-top: 10px;
}
.linerate {
    width: 60%;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fivenumbers {
    width: 90%;
    margin: 5px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fivenumbers h3 {
    width: 20px;
    color: rgb(83 84 86);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    font-family: Poppins, sans-serif;
}
.backcol {
    background-color: #222222;
    width: 70%;
    height: 13px;
    border-radius: 20px;
    margin: 0 auto;
}
.darkcol5 {
    background-color: #f5a606;
    width: 100%;
    height: 13px;
    border-radius: 20px;
}
.darkcol4 {
    background-color: #f5a606;
    width: 80%;
    height: 13px;
    border-radius: 20px;
}
.darkcol3 {
    background-color: #f5a606;
    width: 50%;
    height: 13px;
    border-radius: 20px;
}
.darkcol2 {
    background-color: #f5a606;
    width: 30%;
    height: 13px;
    border-radius: 20px;
}
.darkcol1 {
    background-color: #f5a606;
    width: 10%;
    height: 13px;
    border-radius: 20px;
}

.nameastro {
    width: 90%;
    margin: 4px auto;
    display: flex;
    align-items: center;
    justify-content: start;
}
.panditimg {
    width: 45px;
    height: 45px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fd6e00;
    margin-right: 15px;
}
.panditimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.astrologinn {
    width: 64%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
.astrologinn h3 {
    width: 100%;
    font-size: 17px;
    color: #444648;
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 0 0;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
}
.astrologinn p {
    margin: 4px 0;
    width: 100%;
    font-size: 14px;
    color: #444648;
    display: flex;
    align-items: center;
    justify-content: start;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
}
.astrologinn h3 i {
    color: #ff7010;
    font-size: 18px;
    margin-left: 10px;
}
.adminimg {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #ff7010;
    margin-right: 10px;
}
.adminimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-leftsidebar {
    min-width: 380px;
    border: none;
}
.search-box .form-control {
    border-radius: 30px;
    padding-left: 40px;
}
.search-box .search-icon {
    font-size: 16px;
    position: absolute;
    left: 13px;
    fill: #7f838b;
    line-height: 38px;
    top: 29%;
    width: 18px;
    height: 18px;
}
.search-box .search-icon {
    font-size: 16px;
    position: absolute;
    left: 13px;
    fill: #7f838b;
    line-height: 38px;
}
.chat-list li a {
    position: relative;
    display: block;
    padding: 14px 16px;
    color: rgba(40, 63, 92, 0.75);
    border-top: 1px solid #eff0f2;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    font-size: 13px;
}
.chat-list li .user-img {
    position: relative;
}
.avatar-sm {
    height: 2rem;
    width: 2rem;
}

.chat-list li .user-img.online .user-status {
    background-color: #63ad6f;
}

.chat-list li .user-img .user-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #eff0f2;
    position: absolute;
    left: 0;
    bottom: 0;
}
.font-size-13 {
    font-size: 13px !important;
    color: #141b2b !important;
    font-weight: 500 !important;
}
.font-size-11 {
    font-size: 11px !important;
}
.text-body {
    text-decoration: none;
}
.chat-leftsidebar-nav {
    height: 313px;
    /* overflow-y: auto; */
}
.list-unstyled {
    height: 197px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(220 222 225) #ffffff;
}

.userproimg {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
}
.userproimg img {
    width: 100%;
    object-fit: cover;
}
.text-body {
    font-size: 1rem;
}
.text-muted {
    font-size: 0.9rem;
}
.nav-pills .nav-link.active {
    color: rgba(0, 0, 0, 0.76) !important;
    background-color: #fbe31b;
    font-weight: 500;
}
.nav-link {
    color: #3b3938;
    font-weight: 500;
    font-size: 0.9rem;
}
.nav-link:hover {
    color: #db770c;
}
.text-muted {
    color: rgb(32 33 34 / 75%) !important;
    font-weight: 500;
}
.unread-message {
    position: absolute;
    right: 6%;
    bottom: 25%;
}
.bg-danger {
    background-color: rgb(255 112 16) !important;
}

.dropdown-menu {
    -webkit-box-shadow: 0 5px 6px rgba(26, 41, 60, 0.1);
    box-shadow: 0 5px 6px rgba(26, 41, 60, 0.1);
    -webkit-animation-name: DropDownSlide;
    animation-name: DropDownSlide;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    z-index: 1000;
    font-size: 0.875rem;
    color: #283f5c;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #eff0f2;
    border-radius: 1rem;
}
.input-box input:focus {
    outline: 0;
}
.text-end {
    text-align: right !important;
    position: absolute;
    right: 7%;
}
.rounded {
    position: relative;
}
.timerDisplay {
    background: rgb(255 112 16);
    /* color: #3b3938; */
    color: #f8f9fa !important;
    width: 100px;
    font-weight: 500;
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.timerDisplay2 {
    background: rgb(255 112 16);
    /* color: #3b3938; */
    color: #f8f9fa !important;
    width: 100px;
    font-weight: 500;
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.starttimer {
    width: 100px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: end;
}
.backbutton {
    width: 100px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: 10px;
}

.backbutton a button {
    background: rgb(36 38 53);
    color: #ffffff !important;
    width: 100px;
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #dbd2cc;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 400ms ease-in-out;
}
.backbutton a button:hover {
    transform: scale(1.05);
    background-color: transparent;
    color: #ff6f00 !important;
    border: 1px solid #ff6f00;
}
.upload-icon {
    cursor: pointer;
    background: #242635;
    border-radius: 6px;
    color: #ffffff;
    /* font-weight: 500; */
    /* font-size: 12px; */
    font-family: "Poppins", sans-serif;
    width: 54px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 400ms ease-in-out;
}

.upload-icon:hover {
    transform: scale(1.05) !important;
    background-color: transparent;
    color: #ff6f00;
    border: 1px solid #ff6f00;
}

/* extraContent start  */

/* extraContent end  */

.appointfirst {
    width: 90%;
    margin: 70px auto;
}
.appointfirst h3 hr {
    color: #fbe216 !important;
    width: 53%;
    margin-left: -3px;
    margin-top: 14px;
    opacity: 1;
    height: 2px;
}
.appointfirst h3 {
    /* width: 90%; */
    font-size: 27px;
    margin: 10px auto;
    color: black;
}
.freeOnlieKundli{
    margin: 25px auto !important;
}
.appointfirst p {
    width: 90%;
    margin: 10px auto;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    margin-bottom: 15px !important;
}
.appointastrojd {
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.appform {
    /* background-color: white; */
    width: 100%;
}
.oldform {
    display: flex;
    flex-direction: column;
}
.appform h3 {
    width: 90%;
    margin: 35px auto;
    text-align: center;
    color: #1c1f25;
}

.userform {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 0 auto;
}
.username {
    width: 100%;
    margin: 12px auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.userdate {
    width: 100%;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.dateofbirth {
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.fullname {
    width: 45%;
    margin: 0px auto;
    text-align: left;
}
.dateofname {
    width: 25%;
    margin: 0px 0;
}
.dateofname label {
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    margin-bottom: 3px;
    font-family: "Poppins", sans-serif;
    text-transform: capitalize;
    padding-left: 5px;
    margin-bottom: 7px;
}
.fullname label {
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    margin-bottom: 3px;
    font-family: "Poppins", sans-serif;
    text-transform: capitalize;
    padding-left: 5px;
    margin-bottom: 7px;
}
.fullname,
.googleemail label {
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    margin-bottom: 3px;
    font-family: "Poppins", sans-serif;
    text-transform: capitalize;
    padding-left: 5px;
    margin-bottom: 7px;
}

.fullname input {
    border-radius: 7px;
    color: #333333;
    border: 1px solid #a0a1a380;
    background: transparent;
    border-radius: 3px;
}
.fullname select {
    border-radius: 7px;
    color: #333333;
    border: 1px solid #a0a1a380;
    background: transparent;
    border-radius: 3px;
    margin-bottom: 7px;
}
.googleemail select {
    border-radius: 7px;
    color: #333333;
    border: 1px solid #a0a1a380;
    background: transparent;
    border-radius: 3px;
    margin-bottom: 7px;
}
.googleemail input {
    border-radius: 7px;
    color: #333333;
    border: 1px solid #a0a1a380;
    background: transparent;
    border-radius: 3px;
}

.googleemail {
    width: 45%;
    margin: 0px auto;
    text-align: left;
}
.textmessage {
    height: auto;
    padding: 10px 15px;
    resize: vertical;
    color: #333333;
    border: 1px solid #a0a1a380;
    background: transparent;
    border-radius: 3px;
}
.makeappointment {
    width: 95%;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: 40px !important;
}

.astrooverlay {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    background: rgba(0, 0, 0, 0.6);
}
.birth {
    text-align: left;
    width: 95%;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    margin-bottom: 3px;
    font-family: "Poppins", sans-serif;
    text-transform: capitalize;
    margin-bottom: -15px;
}
.birthplace {
    text-align: left;
    width: 95%;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    margin-bottom: 3px;
    font-family: "Poppins", sans-serif;
    text-transform: capitalize;
}
#placs {
    width: 95%;
    margin-top: 7px;
}
.details {
    width: 97px;
    color: #fbe216 !important;
    margin-left: -2px;
    margin-top: 7px;
    opacity: 1;
    height: 2px !important;
}
.kundlitag {
    color: #f1711c;
    margin-left: -2px;
    margin-top: 7px;
    opacity: 1;
    height: 2px !important;
}
.generate {
    margin-right: 44px;
}
.pull-right {
    font-weight: 500;
}

.basicdetails {
    /* width: 90%; */
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 12px 0px 12px;
    margin: 0 auto;
    margin-top: 20px !important;
    display: flex;
    justify-content: space-between;
}

.kudlibutton {
    padding: 10px 20px;
    width: 24%;
    border: 1px solid #fbe216;
    color: #000000 !important;
    font-weight: 500;
    background: white;
    font-size: 12px;
    box-shadow: 2px 2px 7px -2px #cccdcf;
    font-family: "Poppins", sans-serif;
}
.kudlibutton:hover {
    /* color: #ffffff !important; */
    background: #fbe216;
    transition: all 0.5s;
}
.clickedpage {
    color: #ffffff !important;
    background: #fbe216 !important;
    transition: all 0.5s;
}
.tagline {
    font-family: "Roboto", sans-serif;
    line-height: 1.1;
    font-weight: 400;
    color: #222222;
    margin: 0 auto;
    padding: 0;
    /* width: 90%; */
    margin-top: -5px;
}
.tagline span {
    width: 8px;
    height: 8px;
    background: #fbe216 !important;
    display: inline-block;
    position: relative;
    margin-top: 10px;
}

.tagline span:after {
    content: "";
    border: 1px solid #d8d8d8;
    width: 40px;
    position: absolute;
    left: 15px;
    top: 3px;
}
.innerforms {
    width: 90%;
    margin: 0px auto;
    /* display: flex; */
    align-items: start;
    justify-content: center;
}

.tableliner {
    width: 37%;
    margin: 40px auto;
}
.tableliner table {
    margin-top: 40px;
    border: 1px solid #c7c7c77e;

}

.tableliner table td {
    border: 1px solid #c7c7c7;
    font-family: "Noto Sans", sans-serif;
    padding: 10px 10px;
    text-align: left;
    padding-left: 31px;
    color: #101010;
    font-weight: 400;

    background: white;
}
.kundliimg {
    margin-top: 50px;
}
.kundliimg img {
    width: 85%;
}
.dashasolution {
    text-align: left;
    width: 90%;
    font-weight: 500;
    font-size: 17px;
    color: #191919;
    font-family: "Poppins", sans-serif;
    text-transform: capitalize;
    margin: 20px auto;
    margin-top: 40px;
}
.betpara {
    margin: 40px auto;
}


.appheading h2 {
    font-family: "Philosopher", sans-serif;
    font-weight: 600;
    font-size: 36px;
    color: white;
}
.homeapp {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
}
.homeapp li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0;
}
.homeapp li a {
    color: #ffffff;
    font-size: 18px;
    padding: 0px 10px;
    text-decoration: none;
}
.hh2appoint {
    color: #fbe216 !important;
}
.hidden {
    display: none;
}

/* horoscope start  */

.horoscope {
    /* display: flex; */
    flex-direction: row-reverse;
    width: 85%;
    margin: 0px auto;
    /* margin-top: 60px !important; */
    padding-top: 50px;
}

.horofirst {
    width: 80%;
    margin: 0px auto;
}
.horosection {
    width: 100%;
    padding: 10px 100px;
}
.uppersign {
    width: 25%;
    /* background: #fbe216 !important; */
    padding: 15px;
    white-space: nowrap;
}
.rashidetails {
    width: 100%;
    margin: 0px auto;
}
.horofirst h3 hr {
    color: #f1711c;
    width: 53%;
    margin-left: -3px;
    margin-top: 14px;
    opacity: 1;
    height: 2px;
}
.horofirst h3 {
    width: 90%;
    font-size: 22px;
    margin: 0px auto;
    color: rgba(0, 0, 0, 0.808);
    letter-spacing: 2px;
}
.horofirst p {
    width: 90%;
    margin: 10px auto;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    margin-bottom: 15px !important;
}
.horosecond {
    width: 92%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.horochart {
    /* width: 25%; */
    margin: 20px auto;
}

.tagchart1 {
    /* width: 25%; */
    display: flex;
    /* padding: 15px; */
    /* margin: 85px auto; */
}

.tagchart2 {
    /* width: 25%; */
    display: flex;
    /* padding: 15px; */
    /* margin: 85px auto; */
}

.kchart h3 hr {
    color: #f1711c;
    width: 53%;
    margin-left: -3px;
    margin-top: 14px;
    opacity: 1;
    height: 2px;
}
.kchart h3 {
    width: 90%;
    font-size: 22px;
    margin: 0px auto;
    color: white;
    letter-spacing: 2px;
}
.kchart p {
    width: 90%;
    margin: 10px auto;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    margin-bottom: 15px !important;
}

.chartbutton {
    text-align: center;
    padding: 5px 30px;
    margin-bottom: 14px;
    width: 50vh;
    margin: 5px;
    white-space: nowrap;
    border: 1px solid #fbe216;
    color: #000000 !important;
    font-weight: 500;
    background: white;
    box-shadow: 1px 1px 4px -2px #cccdcf;
    font-family: "Poppins", sans-serif;
}

.chartbutton:hover {
    color: #000000 !important;
    background: #fbe216 !important;
    transition: all 0.5s;
}

.appform h3 {
    width: 90%;
    margin: 35px auto;
    text-align: center;
    color: #1c1f25;
}

.ast_slider_wrapper {
    margin-bottom: 100px;
}
.rashitag {
    width: 100%;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 12px 0px 12px;
    margin: 0 auto;
    margin-top: 20px !important;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
}
.rashibutton {
    text-align: left;
    padding: 10px 30px;
    margin-bottom: 14px;
    width: 100vh;
    margin: 5px;
    white-space: nowrap;
    border: 1px solid #fbe216;
    color: #000000 !important;
    font-weight: 500;
    background: white;
    box-shadow: 1px 1px 4px -2px #cccdcf;
    font-family: "Poppins", sans-serif;
}
.rashibutton:hover {
    color: #000000 !important;
    background: #fbe216 !important;
    transition: all 0.5s;
}

.hs_sign_left_tabs_wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    cursor: pointer;
}
.hs_sign_left_tabs_wrapper .hs_slider_tabs_icon_wrapper {
    float: left;
    width: 80px;
    height: 80px;
    border: 8px solid rgba(0, 0, 0, 0.0784313725490196);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
.hs_sign_left_tabs_wrapper .hs_slider_tabs_icon_wrapper img {
    width: 65px;
    height: 65px;
    float: left;
    text-align: center;
    line-height: 65px;
    background: #fbe216 !important;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.hs_sign_left_tabs_wrapper .hs_slider_tabs_icon_wrapper img:before {
    margin-left: 0;
    color: #ffffff;
    font-size: 40px;
}
.hs_sign_left_tabs_wrapper .hs_slider_tabs_icon_cont_wrapper {
    float: left;
    width: calc(100% - 80px);
    padding-top: 0px;
    padding-left: 15px;
}
.hs_sign_left_tabs_wrapper .hs_slider_tabs_icon_cont_wrapper ul {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}
.hs_sign_left_tabs_wrapper .hs_slider_tabs_icon_cont_wrapper ul li {
    margin: 0 0;
    line-height: 1.5;
}
.hs_ar_tabs_heading_wrapper li:first-child a {
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
    color: black;
}
.hs_sign_left_tabs_wrapper .hs_slider_tabs_icon_cont_wrapper li:last-child {
    font-size: 16px;
}
.flaticon-aries-sign:before {
    content: "\f11d";
}
.hs_sign_left_tabs_wrapper:hover .hs_slider_tabs_icon_wrapper img {
    background: #000000;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
}
.description-horo {
    width: 100%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.rashidescripton {
    width: 100%;
    margin: 40px auto;
}
.imgpara {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
}
.imgrashi {
    width: 250px;
    height: 240px;
    overflow: hidden;
    border-radius: 10px;
}
.imgnumlogy {
    width: 200px;
    height: 118px;
    overflow: hidden;
    border-radius: 10px;
}
.imgnumlogy img {
    width: 100%;
    height: 118px;
    object-fit: cover;
}

.imgrashi img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.ariesdescription {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin-right: 0 !important;
    margin: 0 auto;
}
.numdesc {
    display: flex;
    justify-content: start;
    flex-direction: column;
    width: 70%;
    margin-right: 0 !important;
    margin: 0 auto;
}
.numdesc p {
    width: 88%;
    margin-bottom: 20px;
    color: #383839;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 23px;
}
.ariesdescription p {
    margin-bottom: 20px;
    color: #383839;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 23px;
}
.ontherpara {
    width: 98%;
    margin: 20px auto;
}
.ontherpara p {
    color: #383839;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 23px;
}
.pointdes {
    width: 98%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}
.hs_pr_second_cont_wrapper {
    float: left;
    width: 100%;
    padding-top: 10px;
}
.hs_pr_icon_wrapper {
    float: left;
    width: 10px;
    font-size: 14px;
    color: #fbe216 !important;
}
.hs_pr_icon_cont_wrapper {
    float: left;
    width: calc(100% - 10px);
    padding-left: 15px;
}
.hs_ar_icon_cont_wrapper span {
    color: #000000;
    font-weight: bold;
}
.hs_ar_second_sec_cont_list_wrapper li {
    display: table;
    margin-top: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
}
.hs_sign_left_tabs_wrapper:hover ul li {
    color: #000000;
}
/* horoscope end  */

.numlobox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.numankr {
    text-align: left;
    margin: 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 124px;
    height: 88px;
    border: 1px solid #d9d8d6;
    color: #171818 !important;
    font-weight: 600;
    font-size: 2.85rem;
    background: #fffdf7;
    box-shadow: 1px 1px 4px -2px #cccdcf;
    font-family: "Philosopher", sans-serif;
    border-radius: 5px;
}
.generate button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 207px;
    height: 42px;
    border: none;
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-size: 1rem;
    background: #222222;
    box-shadow: 1px 1px 4px -2px #cccdcf;
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
}
.generate button:hover {
    color: #ffffff !important;
    background: #ff7010;
    transition: all 0.5s;
    animation: money-making-1 0.3s forwards;
}
.kundlilogin button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 42px;
    border: none;
    color: #000000 !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-size: 1rem;
    background: #fbe216 !important;
    box-shadow: 1px 1px 4px -2px #cccdcf;
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
}
.kundlilogin button:hover {
    color: #ffffff !important;
    background: #222222;
    transition: all 0.5s;
    animation: login-making-1 0.3s forwards;
}
@keyframes login-making-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes money-making-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.numankr:hover {
    color: #ffffff !important;
    background: #fbe216 !important;
    transition: all 0.5s;
    animation: anim-moema-1 0.3s forwards;
}
@keyframes anim-moema-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.numrashitag {
    width: 94%;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 12px 0px 12px;
    margin: 0 auto;
    margin-top: 20px !important;
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
}

.lifepath {
    font-size: 26px;
    font-weight: 600;
    text-transform: none !important;
    padding-bottom: 5px;
    color: black;
    margin-bottom: 0;
}
.lifeunder {
    font-family: "Roboto", sans-serif;
    line-height: 1.1;
    font-weight: 400;
    color: #222222;
    margin: 0;
    padding: 0;
}
.lifeunder span:after {
    content: "";
    border: 1px solid #d8d8d8;
    width: 40px;
    position: absolute;
    left: 8px;
    top: 3px;
}

.lifeunder span {
    width: 8px;
    height: 8px;
    border-radius: 50px;
    background: #fbe216 !important;
    display: inline-block;
    position: relative;
    margin-top: 10px;
}

.intronum {
    width: 98%;
    margin: 5px auto;
}
.intronum p {
    width: 95%;
    margin-bottom: 15px;
    color: #383839;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 23px;
}

.introdescripton {
    width: 98%;
    margin: 0px auto;
}
.numbold {
    font-weight: 600;
}

.hs_num_input_wrapper {
    float: left;
    width: 65%;
    position: relative;
    margin-top: 13px;
}
.hs_num_input_wrapper input {
    width: 100%;
    height: 50px;
    border: 1px solid #d0d1d1;
    padding-left: 35px;
    padding-right: 20px;
    font-family: "Roboto", sans-serif;
    font-size: 17px;
}
.hs_num_input_wrapper.i-date:after {
    position: absolute;
    content: "\f073";
    left: 14px;
    top: 12px;
    /* font-size: 15px; */
    font-family: "FontAwesome";
    color: #95969d;
}

.submitbtn {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 13px;
}
.submitbtn button {
    width: 170px;
    height: 50px;
    border: none;
    background: #fbe216 !important;
    color: rgb(0, 0, 0);
    font-size: 1rem;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    letter-spacing: 1px;
}

.submitbtn button:hover {
    animation: anim-moema-1 0.3s forwards;
}
@keyframes anim-moema-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.leadpoint {
    color: #383839;
}
.phone-img {
    display: inline-block;
    cursor: pointer;
}
.phone-img span {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 75px;
    font-size: 36px;
    border-radius: 100%;
    border: 5px solid #ffffff;
    background-color: #ffffff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.phone-img span i {
    font-size: 36px;
    color: #fbe216 !important;
}

.contact-info {
    width: 100%;
    background-color: #f9f9f9;
}
.con-details {
    margin: 100px auto;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.touch-head {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.get-touch {
    width: 90%;
    margin: 30px auto;
    display: flex;
    align-items: start;
    justify-content: center;
    margin-top: 60px !important;
}
.touch-head h1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    font-size: 30px;
    font-family: "Philosopher", sans-serif;
    font-weight: 600;
}
.touch-head p {
    width: 60%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #302e2e;
    font-weight: 400;
    margin-top: 25px;
}

.phone-det {
    display: inline-block;
    cursor: pointer;
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.phone-det .phone-img span {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 3px 3px rgb(245, 245, 245);
    transition: transform all 0.5s ease;
}

.phone-img span i {
}

.phone-det:hover .phone-img span i {
    color: white;
}

.phone-det:hover .phone-img span {
    transform: rotateY(180deg);
    background-color: #ff6f00;
    box-shadow: 0px 0px 30px -10px #000000;
}

/* Ensuring smoothness */
.phone-det .phone-img {
    transform-style: preserve-3d;
}

.number-details {
    margin: 30px auto;
}
.number-details h3 {
    font-size: 1.3rem;
    letter-spacing: 1px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.number-details p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #686869;
    margin: 0px auto;
    text-align: center;
}

iframe {
    width: 100%;
    border: none;
    margin-bottom: -8px;
}
.contuserform {
    width: 100%;
    background-image: url(/uploads/sites/3/2021/08/bg2.jpg?id=33) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    margin-top: -50px;
}
.findcolor {
    color: #fbe216 !important;
}
.innerform {
    width: 90%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.findmsg {
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.findmsg h1 {
    width: 90%;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
}
.findmsg p {
    width: 60%;
    text-align: center;
    margin: 15px auto;
    font-size: 16px;
    color: #302e2e;
    margin-top: 25px;
}
.lowerform {
    width: 90%;
    margin: 0px auto;
    margin-top: -15px;
}
.lowerform form {
    background-color: white;
    width: 90%;
    margin: 50px auto;
    box-shadow: 2px 2px 7px 0px #bebebe;
    /* box-shadow: 0px 0px 7px 2px #d5d6d6; */
    border-radius: 20px;
}
.multiform {
    width: 90%;
    margin: 15px auto;
    padding: 25px 0 25px 0;
}
.inputforms {
    margin: 20px auto;
}

.inputforms label {
    font-size: 15px;
    font-family: "Poppins", sans-serif;
    color: #202022;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 6px;
}

.vc_custom_1632907904450 {
    background-image: url(/uploads/sites/3/2021/08/bg2.jpg?id=33) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.makeappointment a button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 42px;
    border: none;
    color: #000000c2 !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-size: 1rem;
    box-shadow: 1px 1px 4px -2px #cccdcf;
    border-radius: 5px;
    background: #fbe216 !important;
    font-family: "Poppins", sans-serif;
}
.makeappointment a button:hover {
    color: rgba(0, 0, 0, 0.747) !important;
    background: #222222;
    transition: all 0.5s;
    animation: makeappointment-1 0.3s forwards;
}

@keyframes makeappointment-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.housevastu {
    margin: 0;
    width: 100%;
    float: left;
    margin-top: 0px;
    padding-left: 30px;
}
.housevastu li {
    list-style: none;
    position: relative;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}
.housevastu li:after {
    position: absolute;
    content: "";
    top: 11px;
    left: -30px;
    width: 6px;
    height: 6px;
    background-color: #fbe216 !important;
    border-radius: 100%;
}

.vastufeatures {
    width: 90%;
    margin: 0px auto;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);
    border-radius: 10px;
    margin-bottom: 50px;
}

.vastucards {
    width: 95%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}
.vastuone {
    width: 300px;
    border: 1px solid #e1e1e1;
    margin: 20px auto;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 1px 0px 5px -1px #e4e5e9;
    transition: all 500ms ease;
    cursor: pointer;
}
.vastuone:hover .card-body h5 {
    color: #fbe216 !important;
}
.vastuone .card-body p {
    width: 100%;
    color: #5e5e5e;
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
    font-family: "Poppins", sans-serif;
}
.zodiacimg {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zodiacimg img {
    object-fit: cover;
    width: 100%;
    height: 200px;
}

.vastuone:hover {
    transform: scale(1.05);
    transition: all 600ms ease-in-out;
}

.astropfirst {
    width: 90%;
    margin: 70px auto;
}

section.as_testimonial_wrapper {
    padding: 70px 0px 65px;
}
.as_testimonial_slider_inner {
    padding: 15px 12px 0;
}
.as_testimonial_inner_content {
    text-align: center;
    border-radius: 5px;

    padding: 30px;
    border: 1px solid rgb(255 255 255 / 27%);
}
.as_testimonial_slider_inner
    .swiper.as_testimonialSlider
    .swiper-slide.swiper-slide-active {
    background-color: #420d86;
    border-radius: 5px;
}
.as_testimonial_slider_inner
    .swiper.as_testimonialSlider
    .swiper-slide.swiper-slide-active
    .as_testimonial_inner_content {
    border: none;
}
.as_testimonial_slider_inner
    .swiper.as_testimonialSlider
    .swiper-slide.swiper-slide-active
    .as_testimonial_inner_content
    h6 {
    background-color: #ffffff;
    color: #420d86;
}
.as_testimonial_inner_content img {
    border-radius: 50%;
    margin: 0px 0px 20px;
}
.as_testimonial_inner_content p {
    font-size: 16px;
}
.as_testimonial_inner_content h5 {
    padding: 0px 0 22px;
    font-size: 20px;
}
.as_testimonial_inner_content h6 {
    padding: 15px 0px;
    font-size: 18px;
    background-color: #420d86;
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
}
.as_testimonial_slider_inner
    .swiper
    span.swiper-pagination-bullet.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}
.as_testimonial_slider_inner
    .swiper
    span.swiper-pagination-bullet.swiper-pagination-bullet {
    background: white;
}
/* product slider css */
.swiper.mySwiper2 .swiper-slide {
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 170px;
}
.as_flex_divide {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.swiper.mySwiper2 {
    border: 1px solid rgb(118 118 118 / 30%);
    border-radius: 5px;
}
.as_shop_single_slider .mySwiper .swiper-slide {
    border: 1px solid rgb(118 118 118 / 30%);
    border-radius: 5px;
}
.as_shop_single_slider .swiper.mySwiper {
    margin: 10px 0 0 0;
}
.as_tab_wrapper {
    padding: 30px 0 0 0;
}
.as_tab_wrapper ul.nav.nav-tabs {
    margin-bottom: 30px;
}

/* Responsive css */
@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
}
@media (min-width: 1400px) and (max-width: 1810px) {
    .as_header_detail {
        width: calc(100% - 220px);
    }
    .as_info_detail {
        padding-right: 50px;
    }
    .as_menu_wrapper {
        padding-right: 50px;
    }

    .as_info_detail ul li,
    .as_right_info,
    .as_menu > ul > li {
        font-size: 14px;
    }
}

@media (max-width: 1800px) {
    .as_banner_slider .slick-arrow.slick-next {
        right: -750px;
    }
    .as_banner_slider .slick-arrow.slick-prev {
        left: -120px;
    }
    .as_whychoose_wrapper:before,
    .as_footer_wrapper:before {
        top: -1px;
    }
}
@media (max-width: 1560px) {
    .as_banner_slider .slick-arrow.slick-next {
        right: -700px;
    }
}
@media (max-width: 1560px) {
    .as_banner_slider .slick-arrow.slick-next {
        right: -650px;
    }
    .as_banner_slider .slick-arrow.slick-prev {
        left: -60px;
    }
}

@media (max-width: 1450px) {
    .as_error_detail_box .as_circle {
        width: 75%;
        display: inline-block;
        margin: -36% 0 0 -38%;
    }
    .as_error_detail_box img {
        width: 60%;
        display: inline-block;
    }
}

.astropfirst h3 {
    width: 90%;
    font-size: 27px;
    margin: 10px auto;
    color: black;
}

.logo {
    display: flex;
}

.astropfirst h3 hr {
    color: #f1711c;
    width: 195px;
    margin-left: -3px;
    margin-top: 14px;
    opacity: 1;
    height: 2px;
}

.astropfirst p {
    width: 90%;
    margin: 10px auto;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    margin-bottom: 15px !important;
}

.signatureverlay {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    background: rgba(0, 0, 0, 0.3);
}

.signreading {
    display: flex;
    flex-direction: column-reverse;
    width: 85%;
    margin: 20px auto;
    margin-top: 60px !important;
}

.signsection {
    width: 100%;
    margin-top: 70px;
}

.signdescription {
    width: 99%;
    margin: 5px auto;
}

.signdescription p {
    width: 95%;
    margin-bottom: 15px;
    color: #383839;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 23px;
}

.signfirst {
    width: 100%;
    margin: 20px auto;
    margin-top: 65px;
}

.signfirst h3 {
    width: 96%;
    font-size: 22px;
    margin: 0px auto;
    color: rgba(0, 0, 0, 0.692);
    letter-spacing: 2px;
}

.signtag {
    text-align: left;
    margin: 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    width: 20%;
    height: 52px;
    border: 1px solid #d9d8d6;
    color: #171818;
    font-weight: 600;
    font-size: 1.25rem;
    box-shadow: 1px 1px 4px -2px #cccdcf;
    font-family: "Philosopher", sans-serif;
    border-radius: 5px;
}
.signActive {
    background-color: #f1711c !important;
    color: white;
}
.signtag:hover {
    animation: signature-1 0.3s forwards;
    background-color: #fbe216 !important;
    color: rgb(0, 0, 0);
}

@keyframes signature-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.readingsection {
    width: 96%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.registerd {
    width: 100%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.signupper {
    width: 100%;
    background: #fbe216 !important;
    padding: 15px;
    margin: 0 auto;
}

.signheading {
    width: 97%;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 12px 0px 12px;
    margin: 0 auto;
    margin-top: 20px !important;
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
}

.signdesc {
    display: flex;
    justify-content: start;
    flex-direction: column;
    width: 86%;
    margin-right: 0 !important;
    margin: auto 0;
    padding-top: 10px;
}

.signdesc p {
    width: 85%;
    margin-bottom: 20px;
    color: #383839;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    margin: auto 0;
}

.signalogyimg {
    width: 160px;
    overflow: hidden;
    border-radius: 10px;
}
.signalogyimg img {
    width: 100%;
    object-fit: cover;
}

.typessignature {
    width: 100%;
    margin: 0 auto;
}

.rupeemint {
    margin-top: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.rupeemint p {
    width: 125px;
    text-align: left;
    color: #171717;
    font-size: 15px;
    font-weight: 400;
    margin: 2px 0;
    font-family: "Poppins", sans-serif;
}

.rupeemint p span {
    color: #000;
    font-weight: 500;
    font-size: 18px;
    font-family: "Poppins", sans-serif;
    margin-right: 5px;
    /* font-weight: 600; */
}

.resignature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.panditprofile {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url(/assets/header/slider1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-top: 50px;
    margin-bottom: 70px;
}

.panditmobilepro {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url("https://res.allmacwallpaper.com/get/macbook-air-wallpapers/Alone-in-the-universe/1115-720.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 50px;
    margin-bottom: 70px;
}

.tabs {
    display: flex;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15),
        0 6px 12px 0 rgba(24, 94, 224, 0.15);
    padding: 0.75rem;
    border-radius: 99px;
}
.tabs * {
    z-index: 2;
}

input[type="radio"] {
    display: none;
}

.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: 200px;
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color 0.15s ease-in;
}

.notification {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.75rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    transition: 0.15s ease-in;
}

input[type="radio"]:checked + label {
    color: var(--primary-color);
}
input[type="radio"]:checked + label > .notification {
    background-color: var(--primary-color);
    color: #fff;
}

input[id="radio-1"]:checked ~ .glider {
    transform: translateX(0);
}

input[id="radio-2"]:checked ~ .glider {
    transform: translateX(100%);
}

input[id="radio-3"]:checked ~ .glider {
    transform: translateX(200%);
}

.glider {
    position: absolute;
    display: flex;
    height: 54px;
    width: 200px;
    background-color: var(--secondary-color);
    z-index: 1;
    border-radius: 99px;
    transition: 0.25s ease-out;
}

@media (max-width: 700px) {
    .tabs {
        transform: scale(0.6);
    }
}

#astrologom {
    animation: spin 9s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.kundlidetailsfirst {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url("https://hips.hearstapps.com/hmg-prod/images/solar-system-royalty-free-image-1649969440.jpg?crop=1xw:0.75xh;center,top&resize=1200:*");
    background-size: cover;
    margin-bottom: 70px;
}

.appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}

table th {
    color: #2c2c2c;
    font-weight: 600;
}



        /* Rounded tabs */

        @media (min-width: 576px) {
            .rounded-nav {
                border-radius: 50rem !important;
                box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);
            }
        }

        @media (min-width: 576px) {
            .rounded-nav .nav-link {
                border-radius: 50rem !important;
            }
        }

        /* With arrow tabs */

        .with-arrow .nav-link.active {
            position: relative;
        }

        .with-arrow .nav-link.active::after {
            content: '';
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #2b90d9;
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            display: block;
        }

        /* lined tabs */

        .lined .nav-link {
            border: none;
            border-bottom: 3px solid transparent;
        }

        .lined .nav-link:hover {
            border: none;
            border-bottom: 3px solid transparent;
        }

        .lined .nav-link.active {
            background: none;
            color: #555;
            border-color: #2b90d9;
        }




/*!
 * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
 *
 * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 */

 .datepicker {
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    direction: ltr
}

.datepicker-inline {
    width: 220px
}

.datepicker-rtl {
    direction: rtl
}

.datepicker-rtl.dropdown-menu {
    left: auto
}

.datepicker-rtl table tr td span {
    float: right
}

.datepicker-dropdown {
    top: 0;
    left: 0
}

.datepicker-dropdown:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #999;
    border-top: 0;
    border-bottom-color: rgba(0, 0, 0, .2);
    position: absolute
}

.datepicker-dropdown:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-top: 0;
    position: absolute
}

.datepicker-dropdown.datepicker-orient-left:before {
    left: 6px
}

.datepicker-dropdown.datepicker-orient-left:after {
    left: 7px
}

.datepicker-dropdown.datepicker-orient-right:before {
    right: 6px
}

.datepicker-dropdown.datepicker-orient-right:after {
    right: 7px
}

.datepicker-dropdown.datepicker-orient-bottom:before {
    top: -7px
}

.datepicker-dropdown.datepicker-orient-bottom:after {
    top: -6px
}

.datepicker-dropdown.datepicker-orient-top:before {
    bottom: -7px;
    border-bottom: 0;
    border-top: 7px solid #999
}

.datepicker-dropdown.datepicker-orient-top:after {
    bottom: -6px;
    border-bottom: 0;
    border-top: 6px solid #fff
}

.datepicker table {
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.datepicker td,
.datepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
    background-color: transparent
}

.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
    background: #eee;
    cursor: pointer
}

.datepicker table tr td.new,
.datepicker table tr td.old {
    color: #999
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: 0 0;
    color: #999;
    cursor: default
}

.datepicker table tr td.highlighted {
    background: #d9edf7;
    border-radius: 0
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background-color: #fde19a;
    background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
    background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
    border-color: #fdf59a #fdf59a #fbed50;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #000
}

.datepicker table tr td.today.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today.disabled:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today[disabled] {
    background-color: #fdf59a
}

.datepicker table tr td.today.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today:hover:active {
    background-color: #fbf069\9
}

.datepicker table tr td.today:hover:hover {
    color: #000
}

.datepicker table tr td.today.active:hover {
    color: #fff
}

.datepicker table tr td.range,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover,
.datepicker table tr td.range:hover {
    background: #eee;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.datepicker table tr td.range.today,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today:hover {
    background-color: #f3d17a;
    background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
    background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
    background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
    background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
    background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
    border-color: #f3e97a #f3e97a #edde34;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today.disabled:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today[disabled] {
    background-color: #f3e97a
}

.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today:hover:active {
    background-color: #efe24b\9
}

.datepicker table tr td.selected,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected:hover {
    background-color: #9e9e9e;
    background-image: -moz-linear-gradient(to bottom, #b3b3b3, grey);
    background-image: -ms-linear-gradient(to bottom, #b3b3b3, grey);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(grey));
    background-image: -webkit-linear-gradient(to bottom, #b3b3b3, grey);
    background-image: -o-linear-gradient(to bottom, #b3b3b3, grey);
    background-image: linear-gradient(to bottom, #b3b3b3, grey);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
    border-color: grey grey #595959;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}

.datepicker table tr td.selected.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected.disabled:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected[disabled] {
    background-color: grey
}

.datepicker table tr td.selected.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected:hover:active {
    background-color: #666\9
}

.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(to bottom, #08c, #04c);
    background-image: -ms-linear-gradient(to bottom, #08c, #04c);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));
    background-image: -webkit-linear-gradient(to bottom, #08c, #04c);
    background-image: -o-linear-gradient(to bottom, #08c, #04c);
    background-image: linear-gradient(to bottom, #08c, #04c);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
    border-color: #04c #04c #002a80;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled] {
    background-color: #04c
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover:active {
    background-color: #039\9
}

.datepicker table tr td span {
    display: block;
    width: 23%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 1%;
    cursor: pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.datepicker table tr td span.focused,
.datepicker table tr td span:hover {
    background: #eee
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    background: 0 0;
    color: #999;
    cursor: default
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(to bottom, #08c, #04c);
    background-image: -ms-linear-gradient(to bottom, #08c, #04c);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));
    background-image: -webkit-linear-gradient(to bottom, #08c, #04c);
    background-image: -o-linear-gradient(to bottom, #08c, #04c);
    background-image: linear-gradient(to bottom, #08c, #04c);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
    border-color: #04c #04c #002a80;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}

.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled] {
    background-color: #04c
}

.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover:active {
    background-color: #039\9
}

.datepicker table tr td span.new,
.datepicker table tr td span.old {
    color: #999
}

.datepicker .datepicker-switch {
    width: 145px
}

.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker tfoot tr th {
    cursor: pointer
}

.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
    background: #eee
}

.datepicker .next.disabled,
.datepicker .prev.disabled {
    visibility: hidden
}

.datepicker .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle
}

.input-append.date .add-on,
.input-prepend.date .add-on {
    cursor: pointer
}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
    margin-top: 3px
}

.input-daterange input {
    text-align: center
}

.input-daterange input:first-child {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px
}

.input-daterange input:last-child {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0
}

.input-daterange .add-on {
    display: inline-block;
    width: auto;
    min-width: 16px;
    height: 18px;
    padding: 4px 5px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    vertical-align: middle;
    background-color: #eee;
    border: 1px solid #ccc;
    margin-left: -5px;
    margin-right: -5px
}/*!* Datetimepicker for Bootstrap
*
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
**/

.datetimepicker {
    padding: 4px;
    margin-top: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    direction: ltr
}

.datetimepicker-inline {
    width: 220px
}

.datetimepicker.datetimepicker-rtl {
    direction: rtl
}

.datetimepicker.datetimepicker-rtl table tr td span {
    float: right
}

.datetimepicker-dropdown,
.datetimepicker-dropdown-left {
    top: 0;
    left: 0
}

[class*=" datetimepicker-dropdown"]:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, .2);
    position: absolute
}

[class*=" datetimepicker-dropdown"]:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    position: absolute
}

[class*=" datetimepicker-dropdown-top"]:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ccc;
    border-top-color: rgba(0, 0, 0, .2);
    border-bottom: 0
}

[class*=" datetimepicker-dropdown-top"]:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    border-bottom: 0
}

.datetimepicker-dropdown-bottom-left:before {
    top: -7px;
    right: 6px
}

.datetimepicker-dropdown-bottom-left:after {
    top: -6px;
    right: 7px
}

.datetimepicker-dropdown-bottom-right:before {
    top: -7px;
    left: 6px
}

.datetimepicker-dropdown-bottom-right:after {
    top: -6px;
    left: 7px
}

.datetimepicker-dropdown-top-left:before {
    bottom: -7px;
    right: 6px
}

.datetimepicker-dropdown-top-left:after {
    bottom: -6px;
    right: 7px
}

.datetimepicker-dropdown-top-right:before {
    bottom: -7px;
    left: 6px
}

.datetimepicker-dropdown-top-right:after {
    bottom: -6px;
    left: 7px
}

.datetimepicker>div {
    display: none
}

.datetimepicker.minutes div.datetimepicker-minutes {
    display: block
}

.datetimepicker.hours div.datetimepicker-hours {
    display: block
}

.datetimepicker.days div.datetimepicker-days {
    display: block
}

.datetimepicker.months div.datetimepicker-months {
    display: block
}

.datetimepicker.years div.datetimepicker-years {
    display: block
}

.datetimepicker table {
    margin: 0
}

.datetimepicker td,
.datetimepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none
}

.table-striped .datetimepicker table tr td,
.table-striped .datetimepicker table tr th {
    background-color: transparent
}

.datetimepicker table tr td.minute:hover {
    background: #eee;
    cursor: pointer
}

.datetimepicker table tr td.hour:hover {
    background: #eee;
    cursor: pointer
}

.datetimepicker table tr td.day:hover {
    background: #eee;
    cursor: pointer
}

.datetimepicker table tr td.old,
.datetimepicker table tr td.new {
    color: #999
}

.datetimepicker table tr td.disabled,
.datetimepicker table tr td.disabled:hover {
    background: 0 0;
    color: #999;
    cursor: default
}

.datetimepicker table tr td.today,
.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today.disabled:hover {
    background-color: #fde19a;
    background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
    background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: linear-gradient(top, #fdd49a, #fdf59a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
    border-color: #fdf59a #fdf59a #fbed50;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today:hover:hover,
.datetimepicker table tr td.today.disabled:hover,
.datetimepicker table tr td.today.disabled:hover:hover,
.datetimepicker table tr td.today:active,
.datetimepicker table tr td.today:hover:active,
.datetimepicker table tr td.today.disabled:active,
.datetimepicker table tr td.today.disabled:hover:active,
.datetimepicker table tr td.today.active,
.datetimepicker table tr td.today:hover.active,
.datetimepicker table tr td.today.disabled.active,
.datetimepicker table tr td.today.disabled:hover.active,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today:hover.disabled,
.datetimepicker table tr td.today.disabled.disabled,
.datetimepicker table tr td.today.disabled:hover.disabled,
.datetimepicker table tr td.today[disabled],
.datetimepicker table tr td.today:hover[disabled],
.datetimepicker table tr td.today.disabled[disabled],
.datetimepicker table tr td.today.disabled:hover[disabled] {
    background-color: #fdf59a
}

.datetimepicker table tr td.today:active,
.datetimepicker table tr td.today:hover:active,
.datetimepicker table tr td.today.disabled:active,
.datetimepicker table tr td.today.disabled:hover:active,
.datetimepicker table tr td.today.active,
.datetimepicker table tr td.today:hover.active,
.datetimepicker table tr td.today.disabled.active,
.datetimepicker table tr td.today.disabled:hover.active {
    background-color: #fbf069
}

.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active.disabled:hover {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(top, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
    border-color: #04c #04c #002a80;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}

.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active:hover:hover,
.datetimepicker table tr td.active.disabled:hover,
.datetimepicker table tr td.active.disabled:hover:hover,
.datetimepicker table tr td.active:active,
.datetimepicker table tr td.active:hover:active,
.datetimepicker table tr td.active.disabled:active,
.datetimepicker table tr td.active.disabled:hover:active,
.datetimepicker table tr td.active.active,
.datetimepicker table tr td.active:hover.active,
.datetimepicker table tr td.active.disabled.active,
.datetimepicker table tr td.active.disabled:hover.active,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active:hover.disabled,
.datetimepicker table tr td.active.disabled.disabled,
.datetimepicker table tr td.active.disabled:hover.disabled,
.datetimepicker table tr td.active[disabled],
.datetimepicker table tr td.active:hover[disabled],
.datetimepicker table tr td.active.disabled[disabled],
.datetimepicker table tr td.active.disabled:hover[disabled] {
    background-color: #04c
}

.datetimepicker table tr td.active:active,
.datetimepicker table tr td.active:hover:active,
.datetimepicker table tr td.active.disabled:active,
.datetimepicker table tr td.active.disabled:hover:active,
.datetimepicker table tr td.active.active,
.datetimepicker table tr td.active:hover.active,
.datetimepicker table tr td.active.disabled.active,
.datetimepicker table tr td.active.disabled:hover.active {
    background-color: #039
}

.datetimepicker table tr td span {
    display: block;
    width: 23%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 1%;
    cursor: pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.datetimepicker .datetimepicker-hours span {
    height: 26px;
    line-height: 26px
}

.datetimepicker .datetimepicker-hours table tr td span.hour_am,
.datetimepicker .datetimepicker-hours table tr td span.hour_pm {
    width: 14.6%
}

.datetimepicker .datetimepicker-hours fieldset legend,
.datetimepicker .datetimepicker-minutes fieldset legend {
    margin-bottom: inherit;
    line-height: 30px
}

.datetimepicker .datetimepicker-minutes span {
    height: 26px;
    line-height: 26px
}

.datetimepicker table tr td span:hover {
    background: #eee
}

.datetimepicker table tr td span.disabled,
.datetimepicker table tr td span.disabled:hover {
    background: 0 0;
    color: #999;
    cursor: default
}

.datetimepicker table tr td span.active,
.datetimepicker table tr td span.active:hover,
.datetimepicker table tr td span.active.disabled,
.datetimepicker table tr td span.active.disabled:hover {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(top, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
    border-color: #04c #04c #002a80;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}

.datetimepicker table tr td span.active:hover,
.datetimepicker table tr td span.active:hover:hover,
.datetimepicker table tr td span.active.disabled:hover,
.datetimepicker table tr td span.active.disabled:hover:hover,
.datetimepicker table tr td span.active:active,
.datetimepicker table tr td span.active:hover:active,
.datetimepicker table tr td span.active.disabled:active,
.datetimepicker table tr td span.active.disabled:hover:active,
.datetimepicker table tr td span.active.active,
.datetimepicker table tr td span.active:hover.active,
.datetimepicker table tr td span.active.disabled.active,
.datetimepicker table tr td span.active.disabled:hover.active,
.datetimepicker table tr td span.active.disabled,
.datetimepicker table tr td span.active:hover.disabled,
.datetimepicker table tr td span.active.disabled.disabled,
.datetimepicker table tr td span.active.disabled:hover.disabled,
.datetimepicker table tr td span.active[disabled],
.datetimepicker table tr td span.active:hover[disabled],
.datetimepicker table tr td span.active.disabled[disabled],
.datetimepicker table tr td span.active.disabled:hover[disabled] {
    background-color: #04c
}

.datetimepicker table tr td span.active:active,
.datetimepicker table tr td span.active:hover:active,
.datetimepicker table tr td span.active.disabled:active,
.datetimepicker table tr td span.active.disabled:hover:active,
.datetimepicker table tr td span.active.active,
.datetimepicker table tr td span.active:hover.active,
.datetimepicker table tr td span.active.disabled.active,
.datetimepicker table tr td span.active.disabled:hover.active {
    background-color: #039
}

.datetimepicker table tr td span.old {
    color: #999
}

.datetimepicker th.switch {
    width: 145px
}

.datetimepicker thead tr:first-child th,
.datetimepicker tfoot tr:first-child th {
    cursor: pointer
}

.datetimepicker thead tr:first-child th:hover,
.datetimepicker tfoot tr:first-child th:hover {
    background: #eee
}

.input-append.date .add-on i,
.input-prepend.date .add-on i,
.input-group.date .input-group-addon span {
    cursor: pointer;
    width: 14px;
    height: 14px
}

.t-check-in,
.t-check-out,
.t-datepicker {
    display: inline-block;
    position: relative;
    float: left
}

.t-datepicker {
    clear: both;
    width: 100%;
    font-size: 14px;
    line-height: 1.4em;
    max-width: 650px
}

.t-check-in,
.t-check-out {
    border-width: 1px;
    border-style: solid;
    width: 50%;
    box-sizing: border-box
}

.t-check-in .t-date-info-title,
.t-check-out .t-date-info-title {
    position: absolute;
    top: 12px;
    left: 33px;
    display: block;
    font-weight: 400;
    opacity: .5;
    font-size: 13px;
    cursor: pointer
}

.t-check-in .fa,
.t-check-out .fa {
    top: -1px;
    position: relative
}

.t-check-in {
    border-right-width: 1px;
    border-radius: 4px 0 0 4px
}

.t-picker-only {
    border-radius: 4px;
    width: 100%
}

.t-check-out {
    border-left-width: 0;
    border-radius: 0 4px 4px 0
}

.t-check-out .t-datepicker-day {
    left: -100%
}

.t-arrow-top {
    top: 32px;
    z-index: 9999
}

.t-arrow-top,
.t-arrow-top::after {
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #ddd;
    display: inline-block;
    position: absolute
}

.t-arrow-top::after {
    top: -9px;
    left: -10px;
    content: '';
    border-width: 10px;
    border-bottom-color: #fff
}

.t-dates {
    padding: 10px 15px;
    height: 38px;
    box-sizing: border-box
}

.t-datepicker-day {
    border-width: 1px;
    border-style: solid;
    top: 51px;
    overflow: hidden;
    position: absolute;
    z-index: 9998;
    padding: 10px 0;
    border-radius: 4px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, .25)
}

.t-table-wrap {
    width: 100%;
    padding: 0 10px;
    font-size: inherit;
    display: inline-block;
    vertical-align: top
}

.t-datepicker-days {
    width: 650px
}

.t-datepicker-days .t-table-wrap {
    padding: 0;
    width: 47%;
    margin-left: 2%
}

@media (max-width:480px) {
    .t-datepicker-days {
        width: 300px
    }
    .t-datepicker-days .t-table-wrap {
        margin-left: 0;
        width: 100%;
        padding: 0 10px
    }
}

@media (max-width:320px) {
    .t-datepicker-days {
        width: 290px
    }
    .t-datepicker-days .t-table-wrap {
        padding: 0 5px
    }
}

.t-table-condensed {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    vertical-align: top
}

.t-next,
.t-prev,
.t-table-condensed td,
.t-table-condensed th {
    text-align: center;
    padding: 10px
}

.t-date-title {
    clear: both;
    width: 100%;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 15px 0 10px
}

.t-day,
.t-disabled,
.t-end,
.t-range,
.t-start {
    border-width: 2px;
    border-style: solid
}

.t-arrow {
    border: none
}

.t-hover-day::after,
.t-special-day:before {
    content: '';
    border-style: solid
}

.t-arrow,
.t-dates,
.t-day,
.t-end,
.t-end-limit,
.t-range,
.t-start {
    cursor: pointer
}

.t-special-day {
    position: relative
}

.t-special-day:before {
    height: 3px;
    width: 3px;
    top: 0;
    right: 0;
    position: absolute;
    display: block;
    border-width: 3px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.t-hover-day {
    position: relative
}

.t-hover-day-content {
    top: -30px;
    width: 70px;
    right: calc(50% - 35px);
    position: absolute;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 5px;
    border-radius: 4px;
    z-index: 9999
}

.t-hover-day::after {
    position: absolute;
    top: -8px;
    right: calc(50% - 7px);
    border-width: 7px
}

.t-today .t-hover-day-content {
    z-index: 9998
}

.t-check-in .t-end-limit,
.t-disabled {
    opacity: .25;
    cursor: auto
}

/* * Note that this is toastr v2.1.3, the "latest" version in url has no more maintenance, * please go to https://cdnjs.com/libraries/toastr.js and pick a certain version you want to use, * make sure you copy the url from the website since the url may change between versions. * */

.toast-title {
    font-weight: 700
}

.toast-message {
    -ms-word-wrap: break-word;
    word-wrap: break-word
}

.toast-message a,
.toast-message label {
    color: #FFF
}

.toast-message a:hover {
    color: #CCC;
    text-decoration: none
}

.toast-close-button {
    position: relative;
    right: -.3em;
    top: -.3em;
    float: right;
    font-size: 20px;
    font-weight: 700;
    color: #FFF;
    -webkit-text-shadow: 0 1px 0 #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: .8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    line-height: 1
}

.toast-close-button:focus,
.toast-close-button:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: alpha(opacity=40)
}

.rtl .toast-close-button {
    left: -.3em;
    float: left;
    right: .3em
}

button.toast-close-button {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none
}

.toast-top-center {
    top: 0;
    right: 0;
    width: 100%
}

.toast-bottom-center {
    bottom: 0;
    right: 0;
    width: 100%
}

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%
}

.toast-bottom-full-width {
    bottom: 0;
    right: 0;
    width: 100%
}

.toast-top-left {
    top: 12px;
    left: 12px
}

.toast-top-right {
    top: 12px;
    right: 12px
}

.toast-bottom-right {
    right: 12px;
    bottom: 12px
}

.toast-bottom-left {
    bottom: 12px;
    left: 12px
}

#toast-container {
    position: fixed;
    z-index: 9999999;
    pointer-events: none
}

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

#toast-container>div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 0 12px #999;
    -webkit-box-shadow: 0 0 12px #999;
    box-shadow: 0 0 12px #999;
    color: #FFF;
    opacity: .8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80)
}

#toast-container>div.rtl {
    direction: rtl;
    padding: 15px 50px 15px 15px;
    background-position: right 15px center
}

#toast-container>div:hover {
    -moz-box-shadow: 0 0 12px #000;
    -webkit-box-shadow: 0 0 12px #000;
    box-shadow: 0 0 12px #000;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    cursor: pointer
}

#toast-container>.toast-info {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=) !important
}

#toast-container>.toast-error {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=) !important
}

#toast-container>.toast-success {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==) !important
}

#toast-container>.toast-warning {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=) !important
}

#toast-container.toast-bottom-center>div,
#toast-container.toast-top-center>div {
    width: 300px;
    margin-left: auto;
    margin-right: auto
}

#toast-container.toast-bottom-full-width>div,
#toast-container.toast-top-full-width>div {
    width: 96%;
    margin-left: auto;
    margin-right: auto
}

.toast {
    background-color: #030303
}

.toast-success {
    background-color: #51A351
}

.toast-error {
    background-color: #BD362F
}

.toast-info {
    background-color: #2F96B4
}

.toast-warning {
    background-color: #F89406
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: #000;
    opacity: .4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: alpha(opacity=40)
}

@media all and (max-width:240px) {
    #toast-container>div {
        padding: 8px 8px 8px 50px;
        width: 11em
    }
    #toast-container>div.rtl {
        padding: 8px 50px 8px 8px
    }
    #toast-container .toast-close-button {
        right: -.2em;
        top: -.2em
    }
    #toast-container .rtl .toast-close-button {
        left: -.2em;
        right: .2em
    }
}

@media all and (min-width:241px) and (max-width:480px) {
    #toast-container>div {
        padding: 8px 8px 8px 50px;
        width: 18em
    }
    #toast-container>div.rtl {
        padding: 8px 50px 8px 8px
    }
    #toast-container .toast-close-button {
        right: -.2em;
        top: -.2em
    }
    #toast-container .rtl .toast-close-button {
        left: -.2em;
        right: .2em
    }
}

@media all and (min-width:481px) and (max-width:768px) {
    #toast-container>div {
        padding: 15px 15px 15px 50px;
        width: 25em
    }
    #toast-container>div.rtl {
        padding: 15px 50px 15px 15px
    }
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

#primary {
  width: 100vw;
  overflow: hidden;
}
.scrollContainer {
  display: flex;
  width: max-content;
  transition: all 0.3s ease-in-out;
}
.loginContainer {
  min-width: 100vw;
  width: 100vw;
  min-height: max(calc(100vh - 0px), 400px);
  display: flex;
}
.overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.loginContainer .images {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-grow: 1;
  background-position: 80% center;
  background-size: cover;
  background-image: url(/assets/personBg.png);
}
.otpContainer .images,
.passwordContainer .images {
  background-image: url(/assets/mobileNumberBg.jpg) !important;
}
.nameNdPasswordContainer .images {
  background-image: url(/assets/nameNdPassword.jpg) !important;
}
.loginContainer .loginFormParent > img {
  position: absolute;
  top: calc(50% - 140px);
  left: calc(50% - 140px);
  transform: scale(1.8);
  opacity: 0.06;
  z-index: 1;
  animation: rotate 15000ms linear 0s infinite forwards;
  transform-origin: center;
}
.loginContainer .loginFormParent {
  overflow: hidden;
  background-color: #f9f6f0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 400px;
  max-width: 400px;
  box-shadow: inset 0 8px 10px -10px grey;
  transition: all 0.25s ease-in-out;
}
.loginContainer .loginFormParent .logoContainer {
  display: none !important;
}
.loginContainer .images .overlay {
  backdrop-filter: blur(0px);
}
.loginFormParent .parent {
  min-width: 70%;
  max-width: 70%;
  z-index: 5;
}
.loginFormParent .parent > h3 {
  font-weight: 800;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #3d3d3d;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 17px;
}
.loginFormParent .parent > .form {
  padding: 5px;
}
.loginFormParent .parent > .form .group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.loginFormParent .parent > .form .group:not(:last-child) {
  margin-bottom: 10px;
}
.loginFormParent .parent > .form .group label.label {
  font-size: 12px;
  color: #525252;
  font-weight: 600;
  display: none;
}
.loginFormParent .parent > .form .group label.label.show {
  display: block;
}
.loginFormParent .parent > .form .group .input {
  /* display: flex;
  gap: 0px !important;
  align-items: center;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #c9c9c9;
  overflow: hidden;
  background-color: white; */
  display: flex;
  gap: 0px !important;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  /* border: 1px solid #ffd5b9; */
  border-bottom: 2px solid #ff8533;
  background-color: #ffffffef;
  box-shadow: 0px 0px 10px -7px grey;
}
.loginFormParent .parent > .form .group .input input::placeholder {
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}
.loginFormParent .parent > .form .group .otpInputGroup {
  display: flex;
  gap: 6.5%;
  width: 100%;
  position: relative;
  align-items: center;
}
.loginFormParent .parent > .form .group .otpInputGroup .input {
  flex: 1;
  width: 20%;
  max-width: 20%;
}
.loginFormParent .parent > .form .group .placeContainer {
  display: flex;
  gap: 6%;
  width: 100%;
  position: relative;
  align-items: center;
}
.loginFormParent .parent > .form .group .placeContainer .input {
  flex: 1;
  width: 47%;
  max-width: 47%;
}
.loginFormParent .parent > .form .group .otpInputGroup .input input,
.loginFormParent .parent > .form .group .otpInputGroup .input select {
  text-align: center;
}
.loginFormParent .parent > .form .group .input input,
.loginFormParent .parent > .form .group .input select {
  all: unset;
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  padding: 10px 8px;
  max-width: calc(100% - 16px);
}
.loginFormParent .parent > .form .group .input .icon {
  all: unset;
  margin: 3px;
  background-color: #00000000;
  padding: 6px 8px;
  border-radius: 4px;
  color: #212121 !important;
  aspect-ratio: 1 / 1;
  /* display: grid;
  place-content: center; */
  cursor: pointer;
  transition: all 0.25s ease-out;
}

.loginFormParent .parent > .form .group .input .icon i {
  transform: translateY(1px);
}
.loginFormParent .parent > .form .group .input .icon:hover {
  background-color: #00000019;
}
.loginFormParent .parent > .form .button {
  margin-top: 20px;
  background-color: #ff7010;
  width: 100%;
  color: white;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  transition: all 0.25s ease-in;
}
.clickable:hover {
  box-shadow: 5px 5px 10px calc(-1 * calc(10px - var(--shadowOffset, 5px))) grey !important;
}
.clickable:active {
  transform: translateY(2px) !important;
  scale: 0.99 !important;
}
.clickable:focus,
.clickable:has(button:focus),
.input:has(input:focus) {
  outline: 1px solid black !important;
  outline-offset: 3px;
}
.loginFormParent .parent > .form .button button {
  all: unset;
}

.logo {
  /* animation: rotate 5s linear 0s infinite forwards; */
}
.relative {
  position: relative;
}
@keyframes rotate {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@media screen and (max-width: 800px) {
  .loginContainer .loginFormParent {
    min-width: 300px;
  }
}
@media screen and (max-width: 600px) {
  .loginContainer .images {
    display: none;
  }
  .loginContainer .loginFormParent {
    min-width: 100vw;
  }
  .loginFormParent .parent > h3 {
    display: none;
    /* font-size: 14px;
    font-weight: 500;
    color: #454545;
    opacity: 0.4; */
  }
  .loginContainer .loginFormParent .logoContainer {
    display: flex !important;
  }
  .loginFormParent .parent > .form .group label.label {
    display: block;
  }
}
.backButton {
  all: unset;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 55;
  padding: 2px 15px !important;
  color: #fff;
  border-radius: 2px;
}
body.compensate-for-scrollbar {
    overflow: hidden
}

.fancybox-active {
    height: auto
}

.fancybox-is-hidden {
    left: -9999px;
    margin: 0;
    position: absolute !important;
    top: -9999px;
    visibility: hidden
}

.fancybox-container {
    -webkit-backface-visibility: hidden;
    height: 100%;
    left: 0;
    outline: none;
    position: fixed;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    transform: translateZ(0);
    width: 100%;
    z-index: 99992
}

.fancybox-container * {
    box-sizing: border-box
}

.fancybox-bg,
.fancybox-inner,
.fancybox-outer,
.fancybox-stage {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.fancybox-outer {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto
}

.fancybox-bg {
    background: #1e1e1e;
    opacity: 0;
    transition-duration: inherit;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.47, 0, .74, .71)
}

.fancybox-is-open .fancybox-bg {
    opacity: .9;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1)
}

.fancybox-caption,
.fancybox-infobar,
.fancybox-navigation .fancybox-button,
.fancybox-toolbar {
    direction: ltr;
    opacity: 0;
    position: absolute;
    transition: opacity .25s ease, visibility 0s ease .25s;
    visibility: hidden;
    z-index: 99997
}

.fancybox-show-caption .fancybox-caption,
.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-nav .fancybox-navigation .fancybox-button,
.fancybox-show-toolbar .fancybox-toolbar {
    opacity: 1;
    transition: opacity .25s ease 0s, visibility 0s ease 0s;
    visibility: visible
}

.fancybox-infobar {
    color: #ccc;
    font-size: 13px;
    -webkit-font-smoothing: subpixel-antialiased;
    height: 44px;
    left: 0;
    line-height: 44px;
    min-width: 44px;
    mix-blend-mode: difference;
    padding: 0 10px;
    pointer-events: none;
    top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.fancybox-toolbar {
    right: 0;
    top: 0
}

.fancybox-stage {
    direction: ltr;
    overflow: visible;
    transform: translateZ(0);
    z-index: 99994
}

.fancybox-is-open .fancybox-stage {
    overflow: hidden
}

.fancybox-slide {
    -webkit-backface-visibility: hidden;
    display: none;
    height: 100%;
    left: 0;
    outline: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: absolute;
    text-align: center;
    top: 0;
    transition-property: transform, opacity;
    white-space: normal;
    width: 100%;
    z-index: 99994
}

.fancybox-slide:before {
    content: "";
    display: inline-block;
    font-size: 0;
    height: 100%;
    vertical-align: middle;
    width: 0
}

.fancybox-is-sliding .fancybox-slide,
.fancybox-slide--current,
.fancybox-slide--next,
.fancybox-slide--previous {
    display: block
}

.fancybox-slide--image {
    overflow: hidden;
    padding: 44px 0
}

.fancybox-slide--image:before {
    display: none
}

.fancybox-slide--html {
    padding: 6px
}

.fancybox-content {
    background: #fff;
    display: inline-block;
    margin: 0;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: relative;
    text-align: left;
    vertical-align: middle
}

.fancybox-slide--image .fancybox-content {
    animation-timing-function: cubic-bezier(.5, 0, .14, 1);
    -webkit-backface-visibility: hidden;
    background: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: 0;
    max-width: none;
    overflow: visible;
    padding: 0;
    position: absolute;
    top: 0;
    transform-origin: top left;
    transition-property: transform, opacity;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99995
}

.fancybox-can-zoomOut .fancybox-content {
    cursor: zoom-out
}

.fancybox-can-zoomIn .fancybox-content {
    cursor: zoom-in
}

.fancybox-can-pan .fancybox-content,
.fancybox-can-swipe .fancybox-content {
    cursor: grab
}

.fancybox-is-grabbing .fancybox-content {
    cursor: grabbing
}

.fancybox-container [data-selectable=true] {
    cursor: text
}

.fancybox-image,
.fancybox-spaceball {
    background: transparent;
    border: 0;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.fancybox-spaceball {
    z-index: 1
}

.fancybox-slide--iframe .fancybox-content,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--pdf .fancybox-content,
.fancybox-slide--video .fancybox-content {
    height: 100%;
    overflow: visible;
    padding: 0;
    width: 100%
}

.fancybox-slide--video .fancybox-content {
    background: #000
}

.fancybox-slide--map .fancybox-content {
    background: #e5e3df
}

.fancybox-slide--iframe .fancybox-content {
    background: #fff
}

.fancybox-iframe,
.fancybox-video {
    background: transparent;
    border: 0;
    display: block;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%
}

.fancybox-iframe {
    left: 0;
    position: absolute;
    top: 0
}

.fancybox-error {
    background: #fff;
    cursor: default;
    max-width: 400px;
    padding: 40px;
    width: 100%
}

.fancybox-error p {
    color: #444;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    padding: 0
}

.fancybox-button {
    background: rgba(30, 30, 30, .6);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    height: 44px;
    margin: 0;
    padding: 10px;
    position: relative;
    transition: color .2s;
    vertical-align: top;
    visibility: inherit;
    width: 44px
}

.fancybox-button,
.fancybox-button:link,
.fancybox-button:visited {
    color: #ccc
}

.fancybox-button:hover {
    color: #fff
}

.fancybox-button:focus {
    outline: none
}

.fancybox-button.fancybox-focus {
    outline: 1px dotted
}

.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
    color: #888;
    cursor: default;
    outline: none
}

.fancybox-button div {
    height: 100%
}

.fancybox-button svg {
    display: block;
    height: 100%;
    overflow: visible;
    position: relative;
    width: 100%
}

.fancybox-button svg path {
    fill: currentColor;
    stroke-width: 0
}

.fancybox-button--fsenter svg:nth-child(2),
.fancybox-button--fsexit svg:first-child,
.fancybox-button--pause svg:first-child,
.fancybox-button--play svg:nth-child(2) {
    display: none
}

.fancybox-progress {
    background: #ff5268;
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0;
    transition-property: transform;
    transition-timing-function: linear;
    z-index: 99998
}

.fancybox-close-small {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #ccc;
    cursor: pointer;
    opacity: .8;
    padding: 8px;
    position: absolute;
    right: -12px;
    top: -44px;
    z-index: 401
}

.fancybox-close-small:hover {
    color: #fff;
    opacity: 1
}

.fancybox-slide--html .fancybox-close-small {
    color: currentColor;
    padding: 10px;
    right: 0;
    top: 0
}

.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
    overflow: hidden
}

.fancybox-is-scaling .fancybox-close-small,
.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
    display: none
}

.fancybox-navigation .fancybox-button {
    background-clip: content-box;
    height: 100px;
    opacity: 0;
    position: absolute;
    top: calc(50% - 50px);
    width: 70px
}

.fancybox-navigation .fancybox-button div {
    padding: 7px
}

.fancybox-navigation .fancybox-button--arrow_left {
    left: 0;
    left: env(safe-area-inset-left);
    padding: 31px 26px 31px 6px
}

.fancybox-navigation .fancybox-button--arrow_right {
    padding: 31px 6px 31px 26px;
    right: 0;
    right: env(safe-area-inset-right)
}

.fancybox-caption {
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .15) 65%, rgba(0, 0, 0, .075) 75.5%, rgba(0, 0, 0, .037) 82.85%, rgba(0, 0, 0, .019) 88%, transparent);
    bottom: 0;
    color: #eee;
    font-size: 14px;
    font-weight: 400;
    left: 0;
    line-height: 1.5;
    padding: 75px 44px 25px;
    pointer-events: none;
    right: 0;
    text-align: center;
    z-index: 99996
}

@supports (padding:max(0px)) {
    .fancybox-caption {
        padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left))
    }
}

.fancybox-caption--separate {
    margin-top: -50px
}

.fancybox-caption__body {
    max-height: 50vh;
    overflow: auto;
    pointer-events: all
}

.fancybox-caption a,
.fancybox-caption a:link,
.fancybox-caption a:visited {
    color: #ccc;
    text-decoration: none
}

.fancybox-caption a:hover {
    color: #fff;
    text-decoration: underline
}

.fancybox-loading {
    animation: a 1s linear infinite;
    background: transparent;
    border: 4px solid #888;
    border-bottom-color: #fff;
    border-radius: 50%;
    height: 50px;
    left: 50%;
    margin: -25px 0 0 -25px;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 50px;
    z-index: 99999
}

@keyframes a {
    to {
        transform: rotate(1turn)
    }
}

.fancybox-animated {
    transition-timing-function: cubic-bezier(0, 0, .25, 1)
}

.fancybox-fx-slide.fancybox-slide--previous {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
}

.fancybox-fx-slide.fancybox-slide--next {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
}

.fancybox-fx-slide.fancybox-slide--current {
    opacity: 1;
    transform: translateZ(0)
}

.fancybox-fx-fade.fancybox-slide--next,
.fancybox-fx-fade.fancybox-slide--previous {
    opacity: 0;
    transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}

.fancybox-fx-fade.fancybox-slide--current {
    opacity: 1
}

.fancybox-fx-zoom-in-out.fancybox-slide--previous {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1.5)
}

.fancybox-fx-zoom-in-out.fancybox-slide--next {
    opacity: 0;
    transform: scale3d(.5, .5, .5)
}

.fancybox-fx-zoom-in-out.fancybox-slide--current {
    opacity: 1;
    transform: scaleX(1)
}

.fancybox-fx-rotate.fancybox-slide--previous {
    opacity: 0;
    transform: rotate(-1turn)
}

.fancybox-fx-rotate.fancybox-slide--next {
    opacity: 0;
    transform: rotate(1turn)
}

.fancybox-fx-rotate.fancybox-slide--current {
    opacity: 1;
    transform: rotate(0deg)
}

.fancybox-fx-circular.fancybox-slide--previous {
    opacity: 0;
    transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0)
}

.fancybox-fx-circular.fancybox-slide--next {
    opacity: 0;
    transform: scale3d(0, 0, 0) translate3d(100%, 0, 0)
}

.fancybox-fx-circular.fancybox-slide--current {
    opacity: 1;
    transform: scaleX(1) translateZ(0)
}

.fancybox-fx-tube.fancybox-slide--previous {
    transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg)
}

.fancybox-fx-tube.fancybox-slide--next {
    transform: translate3d(100%, 0, 0) scale(.1) skew(10deg)
}

.fancybox-fx-tube.fancybox-slide--current {
    transform: translateZ(0) scale(1)
}

@media (max-height:576px) {
    .fancybox-slide {
        padding-left: 6px;
        padding-right: 6px
    }
    .fancybox-slide--image {
        padding: 6px 0
    }
    .fancybox-close-small {
        right: -6px
    }
    .fancybox-slide--image .fancybox-close-small {
        background: #4e4e4e;
        color: #f2f4f6;
        height: 36px;
        opacity: 1;
        padding: 6px;
        right: 0;
        top: 0;
        width: 36px
    }
    .fancybox-caption {
        padding-left: 12px;
        padding-right: 12px
    }
    @supports (padding:max(0px)) {
        .fancybox-caption {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right))
        }
    }
}

.fancybox-share {
    background: #f4f4f4;
    border-radius: 3px;
    max-width: 90%;
    padding: 30px;
    text-align: center
}

.fancybox-share h1 {
    color: #222;
    font-size: 35px;
    font-weight: 700;
    margin: 0 0 20px
}

.fancybox-share p {
    margin: 0;
    padding: 0
}

.fancybox-share__button {
    border: 0;
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    margin: 0 5px 10px;
    min-width: 130px;
    padding: 0 15px;
    text-decoration: none;
    transition: all .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.fancybox-share__button:link,
.fancybox-share__button:visited {
    color: #fff
}

.fancybox-share__button:hover {
    text-decoration: none
}

.fancybox-share__button--fb {
    background: #3b5998
}

.fancybox-share__button--fb:hover {
    background: #344e86
}

.fancybox-share__button--pt {
    background: #bd081d
}

.fancybox-share__button--pt:hover {
    background: #aa0719
}

.fancybox-share__button--tw {
    background: #1da1f2
}

.fancybox-share__button--tw:hover {
    background: #0d95e8
}

.fancybox-share__button svg {
    height: 25px;
    margin-right: 7px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 25px
}

.fancybox-share__button svg path {
    fill: #fff
}

.fancybox-share__input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 0;
    color: #5d5b5b;
    font-size: 14px;
    margin: 10px 0 0;
    outline: none;
    padding: 10px 15px;
    width: 100%
}

.fancybox-thumbs {
    background: #ddd;
    bottom: 0;
    display: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 2px 2px 4px;
    position: absolute;
    right: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 0;
    width: 212px;
    z-index: 99995
}

.fancybox-thumbs-x {
    overflow-x: auto;
    overflow-y: hidden
}

.fancybox-show-thumbs .fancybox-thumbs {
    display: block
}

.fancybox-show-thumbs .fancybox-inner {
    right: 212px
}

.fancybox-thumbs__list {
    font-size: 0;
    height: 100%;
    list-style: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    position: relative;
    white-space: nowrap;
    width: 100%
}

.fancybox-thumbs-x .fancybox-thumbs__list {
    overflow: hidden
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
    width: 7px
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px
}

.fancybox-thumbs__list a {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0, 0, 0, .1);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    float: left;
    height: 75px;
    margin: 2px;
    max-height: calc(100% - 8px);
    max-width: calc(50% - 4px);
    outline: none;
    overflow: hidden;
    padding: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    width: 100px
}

.fancybox-thumbs__list a:before {
    border: 6px solid #ff5268;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .2s cubic-bezier(.25, .46, .45, .94);
    z-index: 99991
}

.fancybox-thumbs__list a:focus:before {
    opacity: .5
}

.fancybox-thumbs__list a.fancybox-thumbs-active:before {
    opacity: 1
}

@media (max-width:576px) {
    .fancybox-thumbs {
        width: 110px
    }
    .fancybox-show-thumbs .fancybox-inner {
        right: 110px
    }
    .fancybox-thumbs__list a {
        max-width: calc(100% - 10px)
    }
}


.active-tab {
    background-color: #f0f0f0;
    /* Example active tab background color */
}

#astrologom {
    animation: spin 9s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.horoScopeDive {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url("{{ asset('public/website/assets/Zodiac/contact.jpg') }}");
    background-size: cover;
}

.appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}

tr{
    color: #000 !important;
}

.hidden {
    display: none;
}

.same {
    display: flex;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

.as-sign-box {
    width: 150px;
    padding: 12px 20px 20px;
    margin-left: 25px
}

.as-sign-box h5 {
    font-size: 15px;
    white-space: nowrap;
}

.blink {
    animation: blink 1s infinite;
}

.col-2 {
    flex: 0 0 auto;
    width: 94%;
}

.progress-card {
    --color-accent: #333;
    --color-border: #e4e4e4;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1em;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-bottom: 0;
}

.progress-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    opacity: 0.05;
}

.progress-card.orange {
    --color-accent: #ffc48b;
}

.progress-card.purple {
    --color-accent: #b4b3ff;
}

.progress-card.pink {
    --color-accent: #ffb3c0;
}

.progress-card-content {
    padding: 0.7em;
}

.progress-card .progress-bar {
    background-color: var(--color-border);
    display: block;
    width: 100%;
    height: 5px;
    position: relative;
}

.progress-card .progress-bar::before {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    background-color: var(--color-accent);
    opacity: 0.15;
}

.progress-card .progress-bar::after {
    content: '';
    width: var(--value);
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    background-color: var(--color-accent);
}

.progress-title {
    font-weight: 600;
    margin-bottom: 0.25em;
    font-family: "Noto Sans", sans-serif !important;

   
}

.progress-description {
    /* font-size: 0.9rem; */
    font-weight: 400;
    font-family: "Noto Sans", sans-serif !important;
      font-size: 1rem ;

    color: black;
}

.progress-card span {
    display: block;
}

th{
    color: #000 !important;
}



.as-sign-box {

    margin-bottom: 15px;
    margin-top: 0px;
}

.ast_slider_wrapper {
    margin-bottom: 45px;
}

.ariesdescription {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-right: 0 !important;
    margin: 0 auto;
    font-family: "Noto Sans", sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: #ffffaf !important;
    ;
    color: var(--bs-table-striped-color);
}

.tableliner table td {
    border: transparent !important;
    padding: 10px 10px;
    text-align: left;
    padding-left: 31px;
    color: #101010;
    font-weight: 400;
    background: white;
    font-family: "Noto Sans", sans-serif;
}

.tableliner table {
    margin-top: 0 !important;
}

:root {
    --font-fam: "Satoshi", sans-serif;
    --text-color: #212529;
    --bar-color: #36f31d;
    --transition-effect: all 90ms linear;
}



.load {
    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
    padding: 8px;
    border-radius: 10px;

}

#loader {

    z-index: 999;
    height: 40px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 10%;
    position: relative;

}

.wrap {
    margin: 500px;
}

#text {
    font-family: var(--font-fam);
    color: var(--text-color);
    font-size: 20px;
    padding: 0 10px;

    font-weight: 500;
}

#percent {
    border: 1px solid black;
    font-family: var(--font-fam);
    color: var(--text-color);
    transition: var(--transition-effect);
    font-size: 16px;
    padding: 0 10px;
    font-weight: 500;
}

#bar {
    position: absolute;
    height: 40px;
    width: 100%;
    z-index: -1;
    border-top: 4px solid var(--bar-color);
    transform-origin: left;
    transform: scalex(0%);
    transition: var(--transition-effect);
}

#help {
    font-family: var(--font-fam);
    color: var(--text-color);
    font-size: 20px;
    position: absolute;
    top: 20px;
    font-weight: 600;
}

.table-wrap {
    margin: 10px;
    /* border: 1px solid rgba(0, 0, 0, 0.425); */
    border-radius: 10px;
}



th {
    text-align: inherit;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.table {
    width: 100%;
    color: #212529;
}

.custom-list {
    list-style-type: disc;
    margin-left: 20px;
    margin-top: 10px;
}
#astrologom {
    animation: spin 9s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.kundlitag {
    color: #fbe216 !important;
    ;
}

.kundlidetailsfirst {
    float: left;
    width: 100%;
    position: relative;
    background-color: #111111;
    z-index: 1;
    background-image: url('https://hips.hearstapps.com/hmg-prod/images/solar-system-royalty-free-image-1649969440.jpg?crop=1xw:0.75xh;center,top&resize=1200:*');
    background-size: cover;
    margin-bottom: 70px;
}

.appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}

.tableliner {
    width: 90%;
    margin: 40px auto;
}

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

th,
td {
    padding: 20px;
}

.progress {
    height: 30px;
    margin-top: 20px;
}

.progress-bar {
    font-size: 0.8rem;
    font-weight: 600;
}

.bg-danger {
    background-color: #dc3545 !important;
}

.bg-success {
    background-color: #ffc107 !important;
}

.kundlimatching{
    background: url('/images/freekundli.jpg') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}