@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates: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');


body {
/*    background:linear-gradient(
    50deg,
    hsl(189deg 41% 13%) 0%,
    hsl(187deg 36% 20%) 7%,
    hsl(185deg 31% 26%) 15%,
    hsl(183deg 26% 33%) 26%,
    hsl(182deg 21% 41%) 39%,
    hsl(180deg 17% 49%) 53%,
    hsl(178deg 18% 57%) 67%,
    hsl(177deg 19% 66%) 78%,
    hsl(177deg 20% 72%) 86%,
    hsl(179deg 21% 75%) 91%,
    hsl(180deg 23% 79%) 95%,
    hsl(182deg 26% 82%) 98%,
    hsl(184deg 29% 86%) 99%,
    hsl(186deg 34% 89%) 100%,
    hsl(187deg 44% 93%) 100%,
    hsl(189deg 76% 97%) 100%
  );*/
    background-color: #cfcbc6;
    font-family: "Plus Jakarta Sans", serif;
     overflow-x: hidden;
     width: 100%;
}
.container { max-width: 1360px; }
.font-montserrat-alt {   font-family: "Montserrat Alternates", sans-serif; }
.bg-login{
    background-image: url('../images/new-mirror-img.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
html {
    width: 100%;
    overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Plus Jakarta Sans", serif;
}

p {
    font-family: "Plus Jakarta Sans", serif;
}
.fs14px { font-size: 14px; }
.fs15px { font-size: 15px; }
.fs16px { font-size: 16px; }
.fs17px { font-size: 17px; }
.fs18px { font-size: 18px; }
.border-frame {
    border-radius: 38px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 3.25%, rgba(255, 255, 255, 0.04) 96.75%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(27px);
    -webkit-backdrop-filter: blur(27px);
    padding: 24px;
    max-width: 72%;
    margin: auto;
}

.banner-sec {
    /*background-image: url(../images/bg-new-h-nogrid.webp);*/
    background-size: cover;
    background-position: bottom;
    position: relative;
}

.banner-sec:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg-grid-hero-m.svg');
    background-size: cover;
    background-position: bottom;
    z-index: -1;
}

.left-banner {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 22%;
    height: auto;
    border-radius: 40px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 7.27%, rgba(255, 255, 255, 0.02) 92.73%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transform: rotateZ(-15deg);
    backdrop-filter: blur(27px);
    -webkit-backdrop-filter: blur(27px);
    padding: 16px;
    left: -47px;
    bottom: 81px;
    z-index: -1;
}

.left-banner img,
.right-banner img {
    margin: auto;
    height: 100%;
    object-fit: cover;
    width: 99%;
    border-radius: 30px 30px;
}

.right-banner {
    width: 23%;
    height: auto;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 7.27%, rgba(255, 255, 255, 0.02) 92.73%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(27px);
    transform: rotateZ(15deg);
    -webkit-backdrop-filter: blur(27px);
    position: absolute;
    padding: 16px;
    right: -47px;
    bottom: 81px;
    z-index: -1;
}

.icon-sec-wp li img {
    filter: invert(1);
    -webkit-filter: invert(1);
    width: 51px;
    margin-bottom: 11px;
}

.icon-sec-wp {
    border: 2px solid #fff;
    border-radius: 50px 50px;
    max-width: 90%;
    background-color: rgb(255 255 255 / 17%);
}

.icon-sec-wp li h5 {
    font-size: 17px;
}

.generate-btn, .buy-btn {
    background: linear-gradient(90deg, rgb(24 51 55) 16%, rgb(83 125 127) 80%);
    color: #fff;
    border-radius: 30px 30px;
    padding: 13px 31px;
    margin-top: 4px;
    font-weight: 600;
    border: 1px solid #406a6c;
    font-size: 14px;
}

.text-field-sec {
    height: 91px;
    resize: none;
    background-color: rgb(255 255 255 / 1%);
    border-color: #dfdfdf;
    padding: 16px 20px;
    color: #4d4d4d;
    outline: none;
    font-size: 16px;
    box-shadow: 0px 0px;
    font-weight: 400;
    border-radius: 6px 6px;
}
.chat-box ::-webkit-input-placeholder { font-size: 16px; }
.cc-btn {
    background-color: rgb(121 109 109 / 14%);
   padding: 9px;
    font-weight: 600;
    font-size: 16px;
    margin: 1px 0px -11px;
    border-radius: 6px 6px;
}

.cc-btn:hover,
.cc-btn:active,
.cc-btn:focus {
    background: #fff;
    color: #333 !important;
}

.icon-img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

.btn-submit {
    font-size: 17px;
}

.log-field {
    background-color: rgb(255 255 255 / 23%);
    outline: none;
    height: 47px;
}
.bg-gradiant {
    background: linear-gradient(135deg, rgb(255 255 255 / 25%) 0%, rgb(24 51 55 / 81%) 38%, #6f8d8c 98%);
    background-color: rgb(34 34 34 / 29%);
    padding: 20px;
    border-radius: 30px 30px;
    box-shadow: 1px 1px 10px 2px #1b363a;
}
.sec-gradiant {
    background: linear-gradient(135deg, #f8f2e2 0%, #658286 48%, #022f34 100%);
}
.text-link {
    color: #5f5a5a;
}

.text-link a {
    color: #ffffff;
}
.leftside-form { 
        background: #adaba6 !important;
        border-radius: 20px 20px;
        /*box-shadow: 1px 1px 6px 7px #461276;*/
}
.leftside-form .form-label {
    font-size: 14px;
    font-weight: 500;
}

.leftside-form select.form-select {
    background-color: rgb(0 0 0 / 14%) !important;
    border-color: #515151 !important;
    padding: 10px 17px !important;
    border-radius: 6px 6px !important;
    --bs-form-select-bg-img: url(https://www.freeiconspng.com/uploads/arrow-down-icon-png-3.png);
    background-size: 17px;
}
.leftside-form select.form-select option { font-size: 13px; }
.radio-container {
        position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    background-color: rgb(0 0 0 / 14%);
    border: 1px solid rgb(215 215 215 / 20%);
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 5px 5px;
    width: auto;
    display: inline-block;
    margin: 0px 2px 6px;
    padding-right: 6px;
}
.radio-container:hover, .leftside-form select.form-select:hover {
    border-color: #36595c !important;
}
/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
   padding: 10px !important;
    left: 3px;
}

/* Create a custom radio button */
.radio-container .checkmark {
    position: absolute;
    top: 0px;
    left: 8px;
    height: 12px;
    width: 12px;
    background-color: #fff;
    border-radius: 50%;
    bottom: 0;
    margin: auto;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
  background-color: #36595c;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
/*.radio-container .checkmark:after {*/
/* 	top: 9px;*/
/*	left: 9px;*/
/*	width: 8px;*/
/*	height: 8px;*/
/*	border-radius: 50%;*/
/*	background: white;*/
/*}*/
.chat-box .text-field-sec::-webkit-input-placeholder {
    color: #fff;
    font-size: 16px;
}
}
.tools-top{
    border-color: rgb(255 255 255 / 20%) !important;
}
.tools-box-side {
    height: 100vh;
    overflow-y: auto;
    background-color: #aca7a1;
    position: fixed;
    left: 0;
    top: 0;
    max-width: 16.5%;
    z-index: 1;
    transition: all 0.4s ease;
}
 .top-text ul.dropdown-menu li a {
    color: #fff;
    font-size: 15px;
}
.top-text ul.dropdown-menu li a:hover, .top-text ul.dropdown-menu li a:active, .top-text ul.dropdown-menu li a:focus,
.top-text ul.dropdown-menu li .btn-link:hover, .top-text ul.dropdown-menu li .btn-link:active {
    background-color: #000000 !important;
}
.top-text ul.dropdown-menu li .btn-link {
    font-size: 15px;
    padding: 4px 18px 7px !important;
    display: block;
}

.tools-box-side::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #8e8984;
}

.tools-box-side::-webkit-scrollbar
{
	width: 4px;
	background-color: #8e8984;
}

.tools-box-side::-webkit-scrollbar-thumb
{
	background-color: #2f4e4e;
}
.tools-top .bg-static-frame {
    height: 305px;
    margin: 0px;
}
.tools-top .bg-static-frame #loader img {
    height: 194px;
    border-radius: 18px 18px;
}
/* .tools-top .bg-static-frame #output img {
    height: 179px;
    border-radius: 18px 18px;
} */
#output {
    position: relative;
    /* To make sure the loader is positioned relative to this container */
    width: 100%;
    /* Ensure it occupies the full width */
    height: 100%;
    /* Ensure it occupies the full height */
    overflow: hidden;
    /* Prevent content from overflowing */
}

#loader {
    max-width: 100%;
    /* Ensure loader fits within the container */
    max-height: 100%;
    /* Ensure loader fits within the container */
    object-fit: contain;
    /* Maintain aspect ratio */
}
ul.attachment-img li {
    width: 19%;
    display: inline-block;
    margin: 0px 3px 5px 1px;
}
h1.typewriter {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-align: center;
    /* Matches text-center */
    overflow: hidden;
    white-space: nowrap;
    border-right: 4px solid white;
    animation: typing 5s steps(50, end) forwards, blink-caret 0.7s step-end infinite;
    margin-bottom: 1rem;
}
.leftside-form .number-field {
    border-color: #515151 !important;
    border-radius: 6px 6px !important;
    padding: 10px 13px !important;
}
.leftside-form ::-webkit-input-placeholder{ color: #fff; }
.gallery-box-wp {
    border: 2px solid #938d81;
    border-radius: 20px 20px;
    overflow: hidden;
    text-align: center;
    padding: 0px;
    /* height: 100%; */
}
.gallery-box-wp .h-equal a {
    display: block;
    height: 100%;
}
 
 .inner-overlay {
    background-color: #fff;
    width: 100%;
    margin-top: 0px;
    position: relative;
    border-radius: 0px;
    padding: 13px 18px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    height: 100%;
}
.inner-overlay h5 {
    font-size: 17px;
    width: 100%;
    margin: 0px auto 4px;
    font-weight: 500;
    font-weight: 700;
}
.inner-overlay p {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 0px;
    height: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.img-height { height: 587px; object-fit: cover;  }
.sidebar-cal {
    background-color: rgb(255 255 255 / 61%);
    position: sticky;
    top: 0;
    padding: 34px 20px;
    text-align: center;
    border-radius: 30px 30px;
    box-shadow: 1px 1px 10px 2px #1b363a;
}
.sidebar-cal h4 {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 19px;
}
.sidebar-cal span {
    margin: 0px 6px;
    font-size: 15px;
}
#output {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background-image: url(../images/loader-frame.png);*/
    /*padding: 20% 59px;*/
    /*background-size: 100%;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
}
/* #output img {
    border-radius: 37px 40px;
    width: 62%;
    height: 458px;
    object-fit: cover;
    position: relative;
    top: 3px;
    margin: 23% 0px;
} */
.navbar ul.navbar-nav li.nav-item a.nav-link {
    padding: 6px 17px; 
    font-size: 15px;
    color: #222;
}
.chat-box {  
 /*  box-shadow: 1px 1px 10px 2px rgb(4 4 4 / 56%);*/
    border-color: rgb(46 50 50 / 69%) !important;
}
.loader-frame {
    /*background-image: url(https://ai.takshila.co/public/assets/images/loader-frame.png);*/
    /*background-size: 80%;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center 27%;*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.loader-frame img {
    filter: invert(1);
    max-width: 59.6%;
    margin: 22.7% auto 12%;
    border-radius: 39px 38px;
    height: 462px;
}
.bg-static-frame {
    height: 708px;
    background-image: url(https://ai.takshila.co/public/assets/images/loader-frame.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto;
    position: relative;
}
.carousel-control-prev span, .carousel-control-next span {  height: 22px; }
.output-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.order-btn {
    background: linear-gradient(90deg, rgb(24 51 55) 16%, rgb(61 98 98) 80%);
    color: #fff;
    border-radius: 30px 30px;
    padding: 12px 27px;
    border-color: #6d9797;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.45px;
    margin: 0px 4px;
    transition: all 0.4s ease;
}
.order-btn:hover, .order-btn:active, .order-btn:focus  { color: #fff; }
.sidebar-cal .btn, .btn-primary, .btn-secondary {
    background: linear-gradient(90deg, rgb(24 51 55) 16%, rgb(61 98 98) 80%);
    color: #fff;
    border-radius: 30px 30px;
    margin-top: 15px;
    width: 93%;
    font-size: 15px;
    font-weight: 500;
    padding: 13px;
}
.emptyspace {
    margin-top: 56px;
}
.img-generate {
    border-radius: 6px 6px;
    border: 1px solid #938d81;
    height: 395px;
    width: 100%;
    object-fit: cover;
}
ul.review-list {
    list-style: none;
    padding: 0px;
    overflow-y: auto;
    height: 270px;
    margin: 0px;
    color: #fff;
}
ul.review-list li { margin-top: 8px; }
ul.review-list li span {
    display: block;
    font-size: 14px;
    color: #fff;
}
ul.review-list li i {
    font-size: 13px;
    color: #f0e530;
    margin: 0px 1px;
}
.form-generate {
    /*background-color: rgb(255 255 255 / 43%);*/
    border-radius: 12px 12px;
    padding: 5px;
    overflow: hidden;
}
.details-generate h3 {
    text-align: center;
    font-weight: 700;
    color: #d6c324;
    font-size: 18px;
    border: 2px solid #d6c324;
    padding: 8px;
    border-radius: 7px 6px;
}
.details-generate h5 {
    font-size: 16px;
    margin-top: 14px;
    font-weight: 400;
    color: #fff;
}
.details-generate p {
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
}
.billing-box {
    background-color: rgb(255 255 255 / 0%);
    border: 1px solid #1a1818a1;
    border-radius: 6px 6px;
    padding: 22px 24px;
}
.billing-box h4 {
    color: #fff;
    text-shadow: 0px 0px;
    text-transform: capitalize;
    font-size: 27px;
    font-weight: 600;
}
.billing-box form label {
    font-size: 14px;
    margin-bottom: 6px;
    color: #fff;
}
.billing-box form .form-control, .billing-box form .custom-select  {
    width: 100%;
    border: 1px solid rgb(255 255 255 / 42%) !important;
    border-radius: 6px 6px !important;
    font-size: 15px !important;
    color: #333 !important;
    background-color: rgb(255 255 255) !important;
    padding: 13px !important;
}
.billing-box form .custom-checkbox .custom-control-input {
    vertical-align: middle;
    margin-right: 11px;
    appearance: auto;
}
.billing-box form .custom-checkbox {
    margin-bottom: 11px;
}
.custom-control .custom-control-input {
    appearance: auto !important;
    margin-right: 0px;
    margin-bottom: 4px !important;
}
.btn.btn-primary {
    border: 1px solid #3d6262;
    max-width: 240px;
}
.promo-box .form-control {
    background-color: #e2e2e2 !important;
    border: 1px solid #b1b1b1 !important;
    border-radius: 4px 4px !important;
    height: 45px;
    padding: 0px 13px !important;
    margin: auto;
}
.checkout-form-wp ul.list-group li.list-group-item {
    background-color: rgb(255 255 255 / 42%);
}
.jewelry-modal button.btn-close {
    position: absolute;
    right: -8px;
    outline: none;
    top: -10px;
    background-color: #fff;
    border-radius: 50% 50%;
    padding: 8px;
    box-shadow: 1px 1px 10px #979797;
    font-size: 13px;
    opacity: 1;
    z-index:1;
    filter: invert(1);
}
.pignation-box p.small {  margin-right: 19px; }
.pignation-box ul.pagination .page-link {
    color: #ffffff;
    background: rgb(255 255 255 / 34%);
    outline: none;
    border-color: #fff;
}
.pignation-box ul.pagination li.active .page-link {
    background-color: #171717;
    color: #fff;
}
.jewellry-col img {
    height: 18vmax;
    object-fit: cover;
    width: 100%;
}
/*.aipage header .container {  display: none; }*/
.top-text h4 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 2px;
}
.top-text .dropdown-toggle  {
    background: transparent !important;
    color: #000;
    margin-left: 5px;
   padding: 0px !important;
   border: 0px !important;
}
.top-text .dropdown-toggle i {
    font-size: 21px;
}
.top-text ul.dropdown-menu {  background-color: #1d393d !important; }
.upg-btn {
    font-size: 12px;
    border-radius: 17px 17px !important;
   padding: 2px 10px;
    font-weight: 600;
}
.svg-upg svg path {
    fill: #537d7f;
}
.svg-upg svg {
    width: 21px;
}
.svg-upg {
    font-size: 14px;
    font-weight: 500;
}
.ai-right-generate nav.navbar ul.navbar-nav li.nav-item a { font-size: 14px !important; }

.box-switch {
  --bg: #fff;
  --text: #000;
  color: var(--text);
  width: 58px;
  height: 23px;;
  background: #474747;
  border-radius: 30px;
  position: relative;
}
.box-switch .switch {
  background: #fff;
    width: 20px;
    height: 20px;
   background: var(--bg);
   border-radius: 100%;
   position: absolute;
   top: 1.5px;
  left: 5px;
  transition: 0.5s all ease;
}
.light {
  --bg: #1a1919;
  --text: #0d0d0d;
  background: var(--bg);
}
.light .box-switch {
  background: var(--text);
}
.light .box-switch .switch {
  transform: translateX(31px);
}
.light .tools-box-side{
    background: var(--bg);
}
/*.light form#ringForm h2, .light form#ringForm label, .light .light-box h4, .light .light-box span { color: #222 !important;}*/
/*.light .text-field-sec::-webkit-input-placeholder{ color: #222 !important; } */
/*.light nav.navbar ul.navbar-nav li.nav-item a, .light .dropdown .dropdown-toggle { color: #222 !important; }*/
.small-date {
    color: #373737;
    font-size: 16px;
    font-family: 'Atlassian Sans';
}
/*.light .cc-btn{ background-color: #333; }*/
 .width-box { margin-bottom: 21px; }
 .right-home-sec nav.navbar ul.navbar-nav li a, .light-box {  color: #333; }
 .light .right-home-sec nav.navbar ul.navbar-nav li a, .light .light-box {
     color: #fff; }
.light .top-text button, .light .copyright-text { color: #fff !important; }
.light .div-wrapper .text-dark {  color: #fff !important; }
.light nav.navbar ul.navbar-nav li.nav-item a { color: #fff; }
.pignation-box {
    width: 100%;
    text-align: center;
}
.pignation-box nav {
    margin: auto;
    max-width: 511px;
}
.modal-body table.table tr {
    text-align: left;
}
.modal-body table.table tr td {
    background: transparent;
    text-align: left;
    padding: 10px 20px !important;
    width: 43%;
    text-transform: capitalize;
}
.btn-close {
    filter: invert(1);
    opacity: 1;
    outline: none;
    box-shadow: 0px 0px;
}
.post-btn {
    background: #484742;
    margin-right: 0;
    margin-left: auto;
    border: 1px solid #b3b3b3;
    border-radius: 5px 5px;
}
.post-modal .form-generate ::-webkit-input-placeholder { color: #ccc; }
.post-modal .form-generate textarea {
    background-color: rgba(124, 124, 124, 0.3);
    border-color: #252525;
    padding: 16px 20px;
    color: #fff;
    outline: none;
    font-size: 14px;
    box-shadow: none;
    font-weight: 400;
    border-radius: 0;
}
form#ringForm .form-select, form#ringForm .number-field {
    border-color: #3a5e61 !important;
    border-radius: 6px 6px !important;
}
.post-btn{
    background: linear-gradient(90deg, rgb(24 51 55) 16%, rgb(83 125 127) 80%);
    border-radius: 30px 30px;
}
.text-gradiant{
    background: linear-gradient(135deg, #3c5551 0%, #324a4e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aipage header a.navbar-brand {   visibility: hidden; }
.nav-item.dropdown .dropdown-menu li a{ font-size: 15px !important; }
.buy-btn {
    display: inline-block;
    text-align: center;
    width: 90px;
    float: right;
    margin-top: 7px;
    font-size: 14px;
    padding: 10px;
    text-decoration: none;
}
.ques-icon {
    width: 17px;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    margin-left: 3px;
    height: 18px;
    padding: 0;
    line-height: 1.4;
    background-color: #36595c;
}
.modal-details .modal-dialog {
    display: flex;
    height: 100%;
    margin: auto;
    align-items: center;
}
/*.field-design input[type="range"] {*/
/*    width: 100%;*/
/*    background-color: #454545 !important;*/
/*    appearance: auto;*/
/*    padding: 0px !important;*/
/*}*/
 
 
.rangeWrap input[type=range] {
  display: flex;
  width: 100%;
  height: auto;
  -webkit-appearance: none;
  background: #9d9a95;
  border-radius: 1.5rem;
  outline: 2px ridge hsl(45, 80%, 35%);
  outline-offset: 1rem;
  padding: 8px !important;
  box-shadow: 0 3px 2px -1px rgba(255, 255, 255, 0.25) inset, 0 0 10px 0 rgba(0, 0, 0, 0.5), 0 0 10px 2px rgba(0, 0, 0, 0.25), 0 8px 4px -3px rgba(0, 0, 0, 0.15);
}
.rangeWrap input[type=range]::-webkit-slider-runnable-track,
.rangeWrap input[type=range]::-moz-range-track {
  background: #222;
  width: 100%;
  height: 0.35rem;
  border: 1px solid #fff;
  border-radius: 8rem;
  cursor: pointer;
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 2px 2px 0 rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.rangeWrap input[type=range]::-webkit-slider-runnable-track {
  background: #222;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 30px 30px;
  height: 0.35rem;
  margin: 0 0.5rem;
}
.rangeWrap input[type=range]::-webkit-slider-thumb,
.rangeWrap input[type=range]::-moz-range-thumb {
  width: 2rem;
  height: 2rem;
  background: radial-gradient(#444 45%, #555 50%, #222 55%, #8C7853 57.5%, #8C7853 100%), conic-gradient(#4b4b4b 10deg, #777 45deg, #5b5b6b 70deg, #9f9f9f 105deg, #444 140deg, #AAA 185deg, #666 210deg, #999 245deg, #777 285deg, #9f9f9f 320deg, #4b4b4b);
  background-blend-mode: overlay;
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.35) inset, 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset, 0 0 2px 2px rgba(0, 0, 0, 0.15) inset, 0 1px 1px 1px rgba(0, 0, 0, 0.35), 0 3px 2px 1px rgba(0, 0, 0, 0.25), 0 6px 4px 3px rgba(0, 0, 0, 0.15);
  border-radius: 1.5rem;
  cursor: pointer;
}
.rangeWrap input[type=range]::-webkit-slider-thumb {
  transform: translatey(-1.075rem);
  width: 2rem;
  height: 2rem;
  background: radial-gradient(#444 45%, #555 50%, #222 55%, #8C7853 57.5%, #8C7853 100%), conic-gradient(#4b4b4b 10deg, #777 45deg, #5b5b6b 70deg, #9f9f9f 105deg, #444 140deg, #AAA 185deg, #666 210deg, #999 245deg, #777 285deg, #9f9f9f 320deg, #4b4b4b);
  background-blend-mode: overlay;
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.35) inset, 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset, 0 0 2px 2px rgba(0, 0, 0, 0.15) inset, 0 1px 1px 1px rgba(0, 0, 0, 0.35), 0 3px 2px 1px rgba(0, 0, 0, 0.25), 0 6px 4px 3px rgba(0, 0, 0, 0.15);
  border-radius: 1.5rem;
  cursor: pointer;
  -webkit-appearance: none;
}
.cut-range{
    border-top: 1px solid #36595c;
}
.cut-range li {
    color: #36595c;
    font-size: 10px;
    width: 25%;
    position: relative;
    text-align: center;
}
.cut-range li:before {
    content: "";
    position: absolute;
    top: -7px;
    width: 1px;
    height: 7px;
    background-color: #36595c;
    margin: auto;
    left: 0;
    right: 0;
}
.col-3 li{  width: 33%; }


.custom-select {
  position: relative;
}

.custom-select-options {
    background: #36595c;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 9;
    max-height: 0;
    overflow: hidden;
    border-radius: 1px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    margin-top: -4px;
}
.custom-select-options ul {
    margin: 0px;
    padding: 0px;
 }
.custom-select-options li {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid rgb(235 235 235 / 7%);
  cursor: pointer;
  color: #fff;
  list-style: none;
}
.custom-select-options li .custom-select-img-container {
  width: 23px;
  height: 23px;
  margin-right: 15px;
  display: inline-block;
  position: absolute;
  left: 12px;
  top: 47%;
  transform: translateY(-50%);
  overflow: hidden;
}
.custom-select-options li .custom-select-img-container img {
  width: 100%;
}
.custom-select-options li.is-highlighted {
  background: #183337;
  color: #fff;
}
.custom-select-options li.is-highlighted:hover {
  color: #f0f0f0;
}
.custom-select-options li.label {
  color: #333;
}
.custom-select-options li:last-of-type {
  border-bottom: none;
}
.custom-select-options li:hover {
  color: #183337;
}
.custom-select-options.is-active {
  transition: max-height 0.8s;
  max-height: 800px;
  font-size: 14px;
}
.custom-select-options.has-images li {
  padding-left: 39px;
}

.custom-select-active {
    background: #9d9a95;
    background-position: calc(100% - 15px) center;
    border-radius: 0px;
    height: 48px;
    padding-right: 45px;
    padding-left: 15px;
    border: 1px solid #252525;
    line-height: 47px;
    cursor: pointer;
}

.custom-select-searchbox {
  background: #fff url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#888" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" xml:space="preserve"><path d="M79.1,76.2L63,60.1c7.9-9.4,7.5-23.4-1.3-32.2c-9.3-9.3-24.4-9.3-33.7,0c-9.3,9.3-9.3,24.4,0,33.7  c4.6,4.6,10.8,7,16.9,7c5.5,0,10.9-1.9,15.4-5.6l16.1,16.1L79.1,76.2z M30.8,58.8c-7.7-7.7-7.7-20.3,0-28c3.9-3.9,8.9-5.8,14-5.8  c5.1,0,10.2,1.9,14,5.8c7.7,7.7,7.7,20.3,0,28C51.1,66.5,38.5,66.5,30.8,58.8z"/></svg>') no-repeat;
  background-position: calc(100% - 10px) center;
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 5px 5px 0 0;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
}

.select2-container--default .select2-selection--single {
  border-color: #fff;
  height: 60px;
  padding: 7.5px 0;
  border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 58px;
}

.select2-dropdown {
  border-radius: 0;
  box-shadow: #444 0px 3px 5px;
  border: 0;
}
.img-flag {
    width: 30px;
    align-items: center;
    margin-top: -3px;
    margin-right: 4px;
}
.select2-container .select2-selection {
    background-color: #9d9a95 !important;
    border: 1px solid #252525 !important;
    padding: 6px;
    height: auto !important;
    font-weight: 400 !important;
    color: #fff;
    border-radius: 1px !important;
    outline: none;
}


.process-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0 0 0 / 84%); /* Semi-transparent background */
}

.process-modal .modal-content {
  background-color: #2e2e2e;
  margin: 15% auto;
  padding: 20px;
  width: 100%;
  max-width: 730px;
  text-align: left;
}

.process-modal .modal-close {
    color: #aaa;
    float: right;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    right: -10px;
    top: -13px;
    background-color: #fff;
    border-radius: 50% 50%;
    width: 29px;
    height: 29px;
    padding: 0px;
    line-height: 1;
    text-align: center;
}

.modal-close:hover,
.modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.instruc-btn {
    background-color: #537d7f;
    border: 2px solid #2d4d51;
    color: #fff;
    border-radius: 50% 50%;
    width: 26px;
    font-size: 15px;
    font-weight: 600;
    height: 26px;
    vertical-align: top;
    padding: 0px;
}
.process-modal .modal-content h3 {
    font-size: 30px;
    font-weight: 600;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
    padding-bottom: 11px;
    text-align: center;
}
.instruction-steps .step h2 {
    font-size: 23px;
    padding-top: 9px;
    padding-bottom: 5px;
    font-weight: 600;
}
.instruction-steps .step p {
    font-size: 16px;
    line-height: 1.6;
}
.process-modal button#nextStep, .process-modal button#prevStep {
    display: inline-block;
    width: 122px;
    padding: 7px;
    font-size: 15px;
    border-radius: 6px 6px;
}
.text-tooltip h3 {
    font-size: 16px;
    font-weight: 700;
}
.text-tooltip p {  font-size: 13px; }
.step-two-tip:after {
    content: "";
    position: absolute;
    left: 17.65%;
    border-right: 11px solid #ee0b0b00;
    border-bottom: 11px solid #ee0b0b;
    top: -12px;
    transform: rotate(-45deg);
    z-index: 1;
}
.step-two-tip:before {
    content: "";
    position: absolute;
    left: 18.9%;
    top: -29%;
    width: 3px;
    height: 26px;
    background-color: #ee0b0b;
}
.step-one-tip:before, .step-third-tip:before {
    content: "";
    position: absolute;
    left: -30px;
    width: 27px;
    height: 4px;
    background: #ee0b0b;
    top: 7.7px;
}
.step-one-tip:after, .step-third-tip:after {
    content: "";
    position: absolute;
    left: -10px;
    border-right: 12px solid #ee0b0b;
    border-bottom: 12px solid rgb(255 0 51 / 0%);
    top: 3.3px;
    transform: rotate(45deg);
}
.step-third-tip:before {
    top: 44px;
    left: -38px;
    width: 35px;
}
.step-third-tip:after { bottom: -6.5px; }
.step-third-tip:after {
    top: 40px;
    width: auto;
    height: 0;
}
#GuidedTourIconSet { display:none; }
.show-sidebar {
    background-color: transparent;
    border: 1px solid #fff;
    padding: 0px 24px;
    font-size: 29px;
    color: #fff;
    border-radius: 28px 29px;
    margin: 4px 14px;
    display:none;
}
.close-sidebar {
    right: 25px;
    top: 25px;
    border-radius: 50% 50%;
    border: 1px solid #222;
    width: 26px;
    z-index: 1;
    background-color: #333;
    color: #fff;
    display: none;
}



@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
        /* Adjust to match the full text width */
    }
}

@keyframes blink-caret {
    50% {
        border-color: transparent;
        /* Makes the cursor "blink" */
    }
}




@media only screen and (max-width : 710px) {
.tools-box-side { 
    max-width: 100%;
    left: -100%;
}
.gallery-box-wp div:first-child {
    height: auto !important;
}
button.navbar-toggler {
    border: 0px;
    outline:none;
}
.width-box {  max-width: 50%; }
.text-tooltip p {  font-size: 10px; }
.text-tooltip h3 { font-size: 13px; }
.aipage header a.navbar-brand {  visibility: visible; }
.show-sidebar, .close-sidebar {   display:block; }
.light button.navbar-toggler {  filter: invert(1); }
.chat-box { justify-content: center; }
	}