/*============================
 [Table of CSS]
 	1. Global variable css
	2. Background Color
	3. Color and Font
	4. Headings and Typographic Classes / .title, .uppercase etc
	5. Button
	6. Margins and Paddings
	7. Position
	8. Custom Checkbox and radio
	9. Reset Css
	10. Cus Scroll
	11. Ellipsis
    12. Animation
    13. FLOATING LABEL
    14. ACCORDION
========================================*/
/*-----------------
1. Global variable css
-----------------------*/
:root {
	--gradient-btn:  -webkit-linear-gradient(0deg, #394263 0%, #6373b1 100%);
    --primary-clr:#F58233;
    --primary: #F58233;
    --secondary-clr: #707070;
    --text-clr: #232426;
    --accent-clr: #8f8d8d;
    --lightgrey-clr: #ededed;
    --ff-heading: 'Roboto', sans-serif;
    --ff-para: 'Merriweather', serif;
}

@font-face { 
    font-family: 'rupeeregular';
    src: url('../Fonts/rupee-webfont.woff2') format('woff2'),
         url('../Fonts/rupee-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*<span class="ruppee-f">`</span>*/
.ruppee-f {font-family: 'rupeeregular';font-weight: 600;}

/*-----------------
2. Background Color
-----------------------*/
.bg-primary {background: var(--primary-clr) !important;}
.bg-secondary {background: var(--secondary-clr);}
.bg-lightgrey {background: var(--lightgrey-clr);}
.bg-lightgrey2 {background: #EBF0F5 !important;}
.bg-white {background: #fff !important;}
.bg-t {background: transparent !important;}
/*-----------------
3. Color and Fonts 
-----------------------*/
.primary-clr {color: var(--primary-clr);}
.secondary-clr {color: var(--secondary-clr);}
.text-clr {color: var(--text-clr) !important;}
.white {color: #fff !important;}
.blue-clr {color: #1F7DD8 !important;}
.green{color:#38BC68;}
.f-headind {font-family: var(--ff-heading);}
.f-para {font-family: var(--ff-para);}

.svg-text-clr {
  filter: brightness(0) saturate(100%) invert(8%) sepia(18%) saturate(0%) hue-rotate(0deg) brightness(99%) contrast(85%);
}

/*-----------------
4. Headings and Typographic Classes / .title, .uppercase etc
-----------------------*/
/* - Font size classes - */
.big {font-size: clamp(0.7rem, 0.0308rem + 2.9744vw, 3.6rem);}
.bigger {font-size: clamp(0.7rem, -0.2462rem + 4.2051vw, 4.8rem);}
.super {font-size: clamp(0.7rem, -0.5231rem + 5.4359vw, 6rem);}

.f-12 {font-size: clamp(0.6rem, 0.5654rem + 0.1538vw, 0.75rem);}
.f-13 {font-size: clamp(0.7rem, 0.6739rem + 0.1159vw, 0.813rem);}
.f-14 {font-size: clamp(0.7rem, 0.6596rem + 0.1795vw, 0.875rem);}
.f-16 {font-size: clamp(0.8rem, 0.7538rem + 0.2051vw, 1rem);}
.f-18 {font-size: clamp(0.8rem, 0.7077rem + 0.4103vw, 1.2rem);}
.f-20 {font-size: clamp(0.8rem, 0.6962rem + 0.4615vw, 1.25rem);}
.f-22 {font-size: clamp(0.8rem, 0.6673rem + 0.5897vw, 1.375rem);}
.f-24 {font-size: clamp(0.8rem, 0.6385rem + 0.7179vw, 1.5rem);}
.f-26 {font-size: clamp(0.8rem, 0.5692rem + 1.0256vw, 1.8rem);}
.f-28 {font-size: clamp(0.8rem, 0.5808rem + 0.9744vw, 1.75rem);}
.f-32 {font-size: clamp(0.8rem, 0.5231rem + 1.2308vw, 2rem);}

/* - Font weight classes - */
.bold {font-weight: bold;}
.regular {font-weight: normal;}
.bold-500 {font-weight: 500;}
.bold-600 {font-weight: 600;}
.bold-700 {font-weight: 700;}

/* - Text transform classes - */
.txt-upper {text-transform: uppercase;}
.txt-lower {text-transform: lowercase;}
.txt-capital {text-transform: capitalize;}
.l-h-1 {line-height: 1;}
.l-h-2 {line-height: 1.2;}
.l-h-3 {line-height: 1.3;}
.l-h-4 {line-height: 1.4;}
.l-h-5 {line-height: 1.5;}
.l-h-6 {line-height: 1.6;}
.l-h-7 {line-height: 1.7;}
.l-h-8 {line-height: 1.8;}
.l-h-9 {line-height: 1.9;}
.l-h2 {line-height: 2;}

.float-right {float: right !important;}

/*-----------------
5. Button  
-----------------------*/
.cus-primary-btn {
    color: #fff;
    background: var(--primary-clr);
    text-align: center;
    border: 1px solid var(--primary-clr);
    min-width: 100px;
    font-weight: 600;
    font-size: 14px;
    line-height: 34px;
    transition: all 0.3s;
}
.cus-primary-btn:hover {
    color: var(--primary-clr);
    background: var(--secondary-clr) ;
    border: 1px solid var(--secondary-clr);
}
.cus-primary-btn-outline {
    color: var(--primary-clr);
    background: transparent;
    text-align: center;
    border: 1px solid var(--primary-clr);
    min-width: 100px;
    font-weight: 600;
    font-size: 14px;
    line-height: 34px;
    transition: all 0.3s;
}
.cus-primary-btn-outline:hover {
    color: #fff !important;
    background: var(--secondary-clr) ;
    border: 1px solid var(--secondary-clr);
}
.btn-outline-primary {
  color: var(--primary-clr);
  border-color: var(--primary-clr);
}
.btn-outline-primary:hover {
  background-color: var(--primary-clr);
  border-color: var(--primary-clr);
}

/*-----------------
7. Position
-----------------------*/
.top-left {position: absolute;top: 8px;left: 16px;}
.top-right {position: absolute;top: 8px;right: 16px;}
.top-center {position: absolute;top: 0;left: 50%;transform: translate(-50%, 0);}  
.bottom-right {position: absolute;bottom: 8px;right: 16px;}
.bottom-left {position: absolute;bottom: 8px;left: 16px;}
.bottom-center {position: absolute;bottom: 0;left: 50%;transform: translate(-50%, -50%);}
.middle-left {position: absolute;top: 50%;left: 50%;transform: translate(0%, -50%);}
.middle-right {position: absolute;top: 50%;right: 0;transform: translate(0%, 0);}
.p-centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.v-center {-webkit-transform: translate(0,-50%);-o-transform: translate(0,-50%);transform: translate(0,-50%);top: 50%;margin: 0 auto;}
.modal-dialog-bottom {display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: flex-end; min-height: calc(100% - 0rem);}
.modal-rounded {border-radius: 8px 8px 0 0;}

/*-----------------
8. Custom Checkbox
-----------------------*/
.cus-checkbox [type="checkbox"]:checked,
.cus-checkbox [type="checkbox"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.cus-checkbox [type="checkbox"]:checked + label,
.cus-checkbox [type="checkbox"]:not(:checked) + label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #666;
}
.cus-checkbox [type="checkbox"]:checked + label:before,
.cus-checkbox [type="checkbox"]:not(:checked) + label:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border-radius: 0;
  background: #fff;
}
.cus-checkbox [type="checkbox"]:checked + label:after,
.cus-checkbox [type="checkbox"]:not(:checked) + label:after {
  content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--primary-clr);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg) !important;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.cus-checkbox [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.cus-checkbox [type="checkbox"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}


/*############ custom Select ########*/
.custom-select {
   background: transparent;
    background-image: url(../../assets/images/icons/arrow-down.svg);
    background-repeat: no-repeat;
    background-position: center right 12px;
    min-width: 100px;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
}


/*-----------------
9. Reset Css
-----------------------*/
/* body {font-size: 10px;}

@media screen and (min-width: 320px) {
  body {font-size: 10px;}
  html {font-size: 80%;}
}
@media screen and (min-width: 991px) {
  body {font-size: 14px;}
  html {font-size: 100%;}
}  */
::selection {
  background-color: var(--primary-clr);
  color: #fff;
}

/*-----------------
11.Ellipsis
-----------------------*/
.ellipsis-line1 {width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.ellipsis-line2 {width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.ellipsis-line3 {width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.ellipsis-line4 {width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.ellipsis-line5 {width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.ellipsis-line6 {width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;}

/*------------------------------
COMMON CSS
-------------------------------*/
.agree {color: #1F7DD8;}
.gap-3 {gap: 1rem!important;}
.flexChildEqual > div {flex-grow: 1;flex-basis: 0;min-width: 0;}
body {background: #eeeded;}
body,h1, h2, h3, h4, h5 {font-family: 'Sora', sans-serif;}

.heading-28 {font-family: Sora;font-size: 28px;font-weight: 700;text-transform: capitalize;}
.heading-20 {font-family: Sora;font-size: clamp(0.8rem, 0.6442rem + 0.6923vw, 1.25rem) !important;font-weight: 700;text-transform: capitalize;}
.heading-18 {font-family: Sora;font-size: clamp(0.8rem, 0.7538rem + 0.2051vw, 1rem) !important;font-weight: 700;text-transform: capitalize;}

.shadow-light2 {
  box-shadow: 8px 8px 19px 0px rgba(0,0,0,0.24);
  -webkit-box-shadow: 8px 8px 19px 0px rgba(0,0,0,0.24);
  -moz-box-shadow: 8px 8px 19px 0px rgba(0,0,0,0.24);
}
.cursor-pointer {cursor: pointer;}
.accordianArrow:after {content: "\ea57";font-family: boxicons!important;  font-weight: 500;float: right;color: var(--primary-clr);}
.accordianArrow.collapsed:after {content: "\ea4a";}

.accordianMinus:after {content: "\eb8d";font-family: boxicons!important;  font-weight: 500;float: right;color: var(--primary-clr);}
.accordianMinus.collapsed:after {content: "\ebc1";color: var(--text-clr);}

.form-control:active,.form-control:focus {border-color: var(--primary-clr);}
.active {color: var(--primary-clr) !important;}

.vw-100 {width: 100vw;}
.vh-100 {height: 100vh;}
.vh-48 {height: 48vh;}

.fit-image {object-fit: cover;}
.grayscale{filter: grayscale(100%);}
.editorsData ul,.editorsData ol {padding-left:20px;}
.checkList ul,.checkList ol{list-style: none;}
.outline-none {outline:none !important}

.checkList ul li, .checkList ol li {padding-left: 14px;position: relative;}
.checkList ul li:before, .checkList ol li:before {
  content: "\ea41";
  position: absolute;
  top: 3px;
  left: -20px;
  font-family: boxicons!important;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  display: inline-block;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--primary-clr);
  font-size: 23px;
}

.shadow-light {box-shadow: 0 0 10px rgba(0,0,0,.05);}
.zoom-hover {transition: all .5s ease;}
.zoom-hover:hover {transform: scale(1.2);-webkit-transform: scale(1.2);}
.img-hover-color {filter:grayscale(1);-webkit-filter: grayscale(1);-webkit-transition: all .8s ease-in-out;}
.img-hover-color:hover {filter: none;-webkit-filter: grayscale(0);-webkit-transform: scale(1.01);}

.on_hover_show .show_div {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(-25px);
    -moz-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    -o-transform: translateY(-25px);
    transform: translateY(-25px);
    text-align: center;
    width: 100%;
    visibility: hidden;
    display: table;
    opacity: 0;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.on_hover_show:hover .show_div {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
}
.rotated_180 {transform: rotate(180deg);}

.opacity-1 {opacity: 1;}
.opacity-75 {opacity: 0.75;}
.opacity-50 {opacity: 0.5;}
.opacity-25 {opacity: 0.25;}

.b-r-4 {border-radius: 6px;}
.b-r-5 {border-radius: 5px;}
.b-r-6 {border-radius: 6px;}
.b-r-8 {border-radius: 8px;}
.b-r-10{border-radius: 10px !important;}
.b-r-22{border-radius: 22px !important;}
.b-r-50{border-radius: 50px;}

.image-upload > label {pointer-events: inherit;}
.image-upload > input {display: none;}
.image-upload img {width: 40px;cursor: pointer;}

input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}


/* * STYLE 1 */
.style-1::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}
.style-1::-webkit-scrollbar {width: 6px;background-color: #F5F5F5;}
.style-1::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color: #555;}
button:focus {outline: 0px auto -webkit-focus-ring-color;}

.chack-btn-small {font-size: 14px !important;}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--secondary-clr);
  transform: scale(1.4);
}
.fontSizeInherit {font-size: inherit;}

/* FOR CELENDER */
.datepicker.dropdown-menu {
  padding: 10px 18px;
  font-family: Sora;
}
.datepicker table{position: relative;}
.datepicker.dropdown-menu table th.prev,
.datepicker.dropdown-menu table th.next {
  font-size: 0;
}
.datepicker.dropdown-menu table th.prev::after {
    content: "\ea2c";
    position: absolute;
    left: 6px;
    font-family: boxicons!important;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
}

.datepicker.dropdown-menu table th.next::after {
  content: "\ea2f";
  position: absolute;
  right: 6px;
  font-family: boxicons!important;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
}
.datepicker table tr td.active {
  color: #fff !important;
  text-shadow: none !important;
  border-radius: 20px;
  background-image: none !important;
  background-color: var(--primary-clr) !important;
}

.priceBreakupTable > .row div:last-child span {
  display: inline-block;
  margin-right: 13px;
}
.priceBreakupIncludesBox {
  min-height: 320px;
}

.priceBreakupTable > .row div:first-child {
  color: var(--text-clr);
  font-family: Sora;
  font-size: clamp(0.8rem, 0.7538rem + 0.2051vw, 1rem) !important;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.08px;
}
.priceBreakupTable > .row div:last-child {
  color: var(--text-clr);
}
.priceBreakupTable {
    overflow: hidden;
    border-radius: 0 0 20px 20px;
  & .row {
    margin: 0;
    padding-left: 14px;
    padding-right: 0px;
  }
  & .payableAmount {
    align-items: center;
    background: #FFF4E6;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 18px;
  }
}
.storeCredit {
  background: #FFF1C0;
  padding-top: 6px;
  padding-bottom: 6px;
  & .form-check {
    display: flex;
    align-items: center;
  }
  & input {
    max-width: 65px;
    display: inline-block;
    height: 34px;
  }
}

@media (max-width: 768px) {
  .w-m-100 {width: 100%;}
  .text-one h3 {font-size: 18px !important;}
}