.c ,.c-c > * {position: relative;box-sizing : border-box;display: inline-block;vertical-align: top;    }


/* need zubair help @Ahsan */

body .d-grid {display: grid;}
body .d-flex {display: flex;}

body .d-inline-flex {display: inline-flex;}

body .flow-col,
body .s-flow-col {grid-auto-flow: column;}
body .flow-row,
body .s-flow-row {grid-auto-flow: row;}

.flex-dir-col {flex-direction: column;}
.flex-dir-row {flex-direction: row;}

.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
.justify-evenly {justify-content: space-evenly;}
.justify-start {justify-content: start;}
.justify-end {justify-content: end;}
.justify-center {justify-content: center;}

.justify-item-between {justify-items: space-between;}
.justify-item-around {justify-items: space-around;}
.justify-item-evenly {justify-items: space-evenly;}
.justify-item-start {justify-items: start;}
.justify-item-end {justify-items: end;}
.justify-item-center {justify-items: center;}


.align-center {align-items: center;}
.align-right {align-items: right;}
.align-left {align-items: left;}

.align-end {align-items: end;}
.align-start {align-items: start;}
.align-baseline {align-items: baseline;}

/*.content-center {align-content: center;}
.content-center {align-content: center;}*/
.content-center {align-content: center;}

/*columns gaps  start*/

    body .column-gap-xs {column-gap: .25rem;}
    body .column-gap-sm {column-gap: .5rem;}
    body .column-gap-md {column-gap: 1rem;}
    body .column-gap-lg {column-gap: 1.5rem;}
    body .column-gap-xlg {column-gap: 2rem;}

    body .column-gap-1 {column-gap: .25rem;}
    body .column-gap-2 {column-gap: .5rem;}
    body .column-gap-3 {column-gap: 1rem;}
    body .column-gap-4 {column-gap: 1.5rem;}
    body .column-gap-5 {column-gap: 2rem;}


    body .row-gap-xs {row-gap: .25rem;}
    body .row-gap-sm {row-gap: .5rem;}
    body .row-gap-md {row-gap: 1rem;}
    body .row-gap-lg {row-gap: 1.5rem;}
    body .row-gap-xlg {row-gap: 1.5rem;}

    body .row-gap-1 {row-gap: .25rem;}
    body .row-gap-2 {row-gap: .5rem;}
    body .row-gap-3 {row-gap: 1rem;}
    body .row-gap-4 {row-gap: 1.5rem;}
    body .row-gap-5 {row-gap: 2rem;}

    body .gap-0 {gap: 0px !important; }
    body .gap-1 {gap: .25rem;}
    body .gap-2 {gap: .5rem;}
    body .gap-3 {gap: 1rem;}
    body .gap-4 {gap: 1.5rem;}
    body .gap-5 {gap: 2rem;}
    body .gap-40 {gap: 2.5rem;}


    
/*columns gaps  end*/


.overflow-hidden{overflow: hidden;}


/* paddings */
.p-1 {padding: .25em;}
.p-2 {padding: .5em;}
.p-3 {padding: 1em;}
.p-4 {padding: 1.5em;}
.p-5 {padding: 2em;}

.p-l-1 {padding-left: .25em;}
.p-l-2 {padding-left: .5em;}
.p-l-3 {padding-left: 1em;}
.p-l-4 {padding-left: 1.5em;}
.p-l-5 {padding-left: 2em;}

.p-r-1 {padding-right: .25em;}
.p-r-2 {padding-right: .5em;}
.p-r-3 {padding-right: 1em;}
.p-r-4 {padding-right: 1.5em;}
.p-r-5 {padding-right: 2em;}

.p-t-1 {padding-top: .25em;}
.p-t-2 {padding-top: .5em;}
.p-t-3 {padding-top: 1em;}
.p-t-4 {padding-top: 1.5em;}
.p-t-5 {padding-top: 2em;}

.p-b-1 {padding-bottom: .25em;}
.p-b-2 {padding-bottom: .5em;}
.p-b-3 {padding-bottom: 1em;}
.p-b-4 {padding-bottom: 1.5em;}
.p-b-5 {padding-bottom: 2em;}


.p , .c-p > * , 
.p1 , .c-p1 > *     {padding-right: 10px;padding-left: 10px;}
.p2 , .c-p2 > *     {padding-right: 20px;padding-left: 20px;}
.p25 , .c-p25 > *   {padding-right: 25px;padding-left: 25px;}
.p3 , .c-p3 > *     {padding-right: 30px;padding-left: 30px;}
.p35 , .c-p35 > *   {padding-right: 35px;padding-left: 35px;}
.p4 , .c-p4 > *     {padding-right: 40px;padding-left: 40px;}
.p45 , .c-p45 > *   {padding-right: 45px;padding-left: 45px;}
.p5 , .c-p5 > *     {padding-right: 50px;padding-left: 50px;}




/* margins */
.m-b-0 {margin-bottom: 0;}


/*   */

:root {
  --line-clamp-line-height: 1.3rem;
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-clamp-line-height) !important;
  height: calc(var(--line-clamp-line-height) * var(--lines));
}

.line-clamp-1 { --lines: 1; -webkit-line-clamp: 1; }
.line-clamp-2 { --lines: 2; -webkit-line-clamp: 2; }
.line-clamp-3 { --lines: 3; -webkit-line-clamp: 3; }
.line-clamp-4 { --lines: 4; -webkit-line-clamp: 4; }
.line-clamp-5 { --lines: 5; -webkit-line-clamp: 5; }


/* S */
/* S */


.weight-100 {font-weight: 100;}
.weight-200 {font-weight: 200;}
.weight-300 {font-weight: 300;}
.weight-400 {font-weight: 400;}
.weight-500 {font-weight: 500;}
.weight-600 {font-weight: 600;}
.weight-700 {font-weight: 700;}
.weight-800 {font-weight: 800;}
.weight-900 {font-weight: 900;}

/* border radius */

.radius-xs { border-radius:var(--cx-radius-xs); }
.radius-sm { border-radius:var(--cx-radius-sm); }
.radius-md { border-radius:var(--cx-radius-md); }
.radius-lg { border-radius:var(--cx-radius-lg); }
.radius-xl { border-radius:var(--cx-radius-xl); }
 



/* chappi  @cxtodo mkae it 1 column after 451 in mobile for collection_item_pt_item*/
/*@media screen and (max-width: 451px)  {
    body .xs-column-1-tempo {grid-template-columns: repeat(1, 1fr) !important;}
}*/

/* s */
@media screen and (min-width: 0px)  {

    body .s10,.c.s10,.c-c .s10,.c-s10 > * {width: 100%;}

    body .s95,.c.s95,.c-c .s95,.c-s95 > * {width: 90%;}
    body .s9,.c.s9,.c-c .s9,.c-s9 > * {width: 90%;}
    
    body .s85,.c.s85,.c-c .s85 ,.c-s85 > *{width: 85%;}
    body .s8,.c.s8,.c-c .s8 ,.c-s8 > *{width: 80%;}
    
    body .s75,.c.s75,.c-c .s75,.c-s75 > * {width: 75%;}
    body .s7,.c.s7,.c-c .s7,.c-s7 > * {width: 70%;}
    
    body .s66,.c.s66,.c-c .s66,.c-s66 > * {width: 66.66%;}
    body .s65,.c.s65,.c-c .s65,.c-s65 > * {width: 65%;}
    body .s6,.c.s6,.c-c .s6,.c-s6 > * {width: 60%;}
    
    body .s5,.c.s55,.c-c .s55,.c-s55 > * {width: 55%;}
    body .s5,.c.s5,.c-c .s5,.c-s5 > * {width: 50%;}
    body .s4,.c.s45,.c-c .s45,.c-s45 > * {width: 45%;}
    body .s4,.c.s4,.c-c .s4,.c-s4 > * {width: 40%;}
    body .s35,.c.s35,.c-c .s35,.c-s35 > * {width: 35%;}
    body .s3,.c.s3,.c-c .s3 ,.c-s3 > *{width: 30%;}
    body .s33,.c.s33,.c-c .s33,.c-s33 > * {width: 33.33%;}
    body .s25,.c.s25,.c-c .s25,.c-s25 > * {width: 25%;}
    body .s2,.c.s2,.c-c .s2,.c-s2 > * {width: 20%;}
    body .s15,.c.s15,.c-c .s15,.c-s15 > * {width: 15%;}
    body .s1,.c.s1,.c-c .s1,.c-s1 > * {width: 10%;}
    body .s05,.c.s05,.c-c .s05,.c-s05 > * {width: 5%;}


    body .till-xs-hide {display: inline-block;}

    body .onward-s-hide, 
    body .till-s-hide,body .till-t-hide,body .till-w-hide,body .till-l-hide,body .till-xl-hide,body .till-xxl-hide{display: none;}
    
    body .onward-s-txt-center,
    body .till-s-txt-center,body .till-t-txt-center,body .till-w-txt-center,body .till-l-txt-center,body .till-xl-txt-center,body .till-xxl-txt-center {text-align: center;}
    

    body .onward-s-txt-right,
    body .till-s-txt-right, body .till-t-txt-right, body .till-w-txt-right, body .till-l-txt-right, body .till-xl-txt-right, body .till-xxl-txt-right {text-align: right;}
    
    body .onward-s-txt-left,
    body .till-s-txt-left,body .till-t-txt-left,body .till-w-txt-left,body .till-l-txt-left,body .till-xl-txt-left,body .till-xxl-txt-left {text-align: left;}


    body .onward-s-flex, 
    body .till-s-flex,body .till-t-flex,body .till-w-flex,body .till-l-flex,body .till-xl-flex, body .till-xxl-flex {display: flex;}

    body .onward-s-r, 
    body .till-s-r,body .till-t-r,body .till-w-r,body .till-l-r,body .till-xl-r, body .till-xxl-r {display: flex;justify-content: flex-end;}
    
    body .onward-s-fr, 
    body .till-s-fr,body .till-t-fr,body .till-w-fr,body .till-l-fr,body .till-xl-fr, body .till-xxl-fr {float: right;}
    
    body .onward-s-fl, 
    body .till-s-fl,body .till-t-fl,body .till-w-fl,body .till-l-fl,body .till-xl-fl, body .till-xxl-fl {float: left;}



    body .s-column-1 {grid-template-columns: repeat(1, 1fr);}
    body .s-column-2,
    body .s-column-5-5 {grid-template-columns: repeat(2, 1fr);}
    body .s-column-3 {grid-template-columns: repeat(3, 1fr);}
    body .s-column-4 {grid-template-columns: repeat(4, 1fr);}
    body .s-column-5 {grid-template-columns: repeat(5, 1fr);}


    body .s-column-1-auto {grid-template-columns: repeat(1, auto);}
    body .s-column-2-auto {grid-template-columns: repeat(2, auto);}
    body .s-column-3-auto {grid-template-columns: repeat(3, auto);}
    body .s-column-4-auto {grid-template-columns: repeat(4, auto);}
    body .s-column-5-auto {grid-template-columns: repeat(5, auto);}

    body .s-column-4-6 {grid-template-columns: 40% 60%;}
    body .s-column-35-65 {grid-template-columns: 35% 65%;}
    body .s-column-33-66 {grid-template-columns: 33.5% 66.5%;}
    body .s-column-3-7 {grid-template-columns: 30% 70%;}
    body .s-column-2-8 {grid-template-columns: 20% 80%;}
    body .s-column-1-9 {grid-template-columns: 10% 90%;}

    body .s-column-6-4 {grid-template-columns: 60% 40%;}
    body .s-column-66-33 {grid-template-columns: 66.5% 33.5%;}
    body .s-column-65-35 {grid-template-columns: 65% 35%;}
    body .s-column-7-3 {grid-template-columns: 70% 30%;}
    body .s-column-75-25 {grid-template-columns: 75% 25%;}
    body .s-column-8-2 {grid-template-columns: 80% 20%;}
    body .s-column-9-1 {grid-template-columns: 90% 10%;}


    body .s-gap-0 {gap: 0px !important; }
    body .s-gap-1 {gap: .25rem;}
    body .s-gap-2 {gap: .5rem;}
    body .s-gap-3 {gap: 1rem;}
    body .s-gap-4 {gap: 1.5rem;}
    body .s-gap-5 {gap: 2rem;}

}

/* xs */
/* @cxtodo change min-width for xs */
@media screen and (min-width: 0px)  { 

    body .xs10,.c.xs10,.c-c .xs10,.c-xs10 > * {width: 100%;}

    body .xs95,.c.xs95,.c-c .xs95,.c-xs95 > * {width: 90%;}
    body .xs9,.c.xs9,.c-c .xs9,.c-xs9 > * {width: 90%;}
    
    body .xs85,.c.xs85,.c-c .xs85 ,.c-xs85 > *{width: 85%;}
    body .xs8,.c.xs8,.c-c .xs8 ,.c-xs8 > *{width: 80%;}
    
    body .xs75,.c.xs75,.c-c .xs75,.c-xs75 > * {width: 75%;}
    body .xs7,.c.xs7,.c-c .xs7,.c-xs7 > * {width: 70%;}
    
    body .xs66,.c.xs66,.c-c .xs66,.c-xs66 > * {width: 66.66%;}
    body .xs65,.c.xs65,.c-c .xs65,.c-xs65 > * {width: 65%;}
    body .xs6,.c.xs6,.c-c .xs6,.c-xs6 > * {width: 60%;}
    
    body .xs5,.c.xs55,.c-c .xs55,.c-xs55 > * {width: 55%;}
    body .xs5,.c.xs5,.c-c .xs5,.c-xs5 > * {width: 50%;}
    body .xs4,.c.xs45,.c-c .xs45,.c-xs45 > * {width: 45%;}
    body .xs4,.c.xs4,.c-c .xs4,.c-xs4 > * {width: 40%;}
    body .xs35,.c.xs35,.c-c .xs35,.c-xs35 > * {width: 35%;}
    body .xs3,.c.xs3,.c-c .xs3 ,.c-xs3 > *{width: 30%;}
    body .xs33,.c.xs33,.c-c .xs33,.c-xs33 > * {width: 33.33%;}
    body .xs25,.c.xs25,.c-c .xs25,.c-xs25 > * {width: 25%;}
    body .xs2,.c.xs2,.c-c .xs2,.c-xs2 > * {width: 20%;}
    body .xs15,.c.xs15,.c-c .xs15,.c-xs15 > * {width: 15%;}
    body .xs1,.c.xs1,.c-c .xs1,.c-xs1 > * {width: 10%;}
    body .xs05,.c.xs05,.c-c .xs05,.c-xs05 > * {width: 5%;}


    body .onward-xs-hide, 
    body .till-xs-hide, body .till-s-hide,body .till-t-hide,body .till-w-hide,body .till-l-hide,body .till-xl-hide,body .till-xxl-hide{display: none;}
    
    body .onward-xs-show, 
    body .till-xs-show, body .till-s-show,body .till-t-show,body .till-w-show,body .till-l-show,body .till-xl-show,body .till-xxl-show{display: block;}
    
    body .onward-xs-txt-center,
    body .till-xs-txt-center, body .till-s-txt-center,body .till-t-txt-center,body .till-w-txt-center,body .till-l-txt-center,body .till-xl-txt-center,body .till-xxl-txt-center {text-align: center;}
    

    body .onward-xs-txt-right,
    body .till-xs-txt-right, body .till-s-txt-right, body .till-t-txt-right, body .till-w-txt-right, body .till-l-txt-right, body .till-xl-txt-right, body .till-xxl-txt-right {text-align: right;}
    
    body .onward-xs-txt-left,
    body .till-xs-txt-left, body .till-s-txt-left,body .till-t-txt-left,body .till-w-txt-left,body .till-l-txt-left,body .till-xl-txt-left,body .till-xxl-txt-left {text-align: left;}


    body .onward-xs-flex, 
    body .till-xs-flex, body .till-s-flex,body .till-t-flex,body .till-w-flex,body .till-l-flex,body .till-xl-flex, body .till-xxl-flex {display: flex;}

    body .onward-xs-r, 
    body .till-xs-r, body .till-s-r,body .till-t-r,body .till-w-r,body .till-l-r,body .till-xl-r, body .till-xxl-r {display: flex;justify-content: flex-end;}
    
    body .onward-xs-fr, 
    body .till-xs-fr, body .till-s-fr,body .till-t-fr,body .till-w-fr,body .till-l-fr,body .till-xl-fr, body .till-xxl-fr {float: right;}
    
    body .onward-xs-fl, 
    body .till-xs-fl, body .till-s-fl,body .till-t-fl,body .till-w-fl,body .till-l-fl,body .till-xl-fl, body .till-xxl-fl {float: left;}


    body .column-1,
    body .xs-column-1 {grid-template-columns: repeat(1, 1fr);}
    body .column-2,
    body .xs-column-2,
    body .column-5-5,
    body .xs-column-5-5 {grid-template-columns: repeat(2, 1fr);}
    body .column-3,
    body .xs-column-3 {grid-template-columns: repeat(3, 1fr);}
    body .column-4,
    body .xs-column-4 {grid-template-columns: repeat(4, 1fr);}
    body .column-5,
    body .xs-column-5 {grid-template-columns: repeat(5, 1fr);}


    body .column-1-auto,
    body .xs-column-1-auto {grid-template-columns: repeat(1, auto);}
    body .column-2-auto,
    body .xs-column-2-auto {grid-template-columns: repeat(2, auto);}
    body .column-3-auto,
    body .xs-column-3-auto {grid-template-columns: repeat(3, auto);}
    body .column-4-auto,
    body .xs-column-4-auto {grid-template-columns: repeat(4, auto);}
    body .column-5-auto,
    body .xs-column-5-auto {grid-template-columns: repeat(5, auto);}

    body .column-4-6,
    body .xs-column-4-6 {grid-template-columns: 40% 60%;}
    body .column-35-65,
    body .xs-column-35-65 {grid-template-columns: 35% 65%;}
    body .column-33-66,
    body .xs-column-33-66 {grid-template-columns: 33.5% 66.5%;}
    body .column-3-7,
    body .xs-column-3-7 {grid-template-columns: 30% 70%;}
    body .column-2-8,
    body .xs-column-2-8 {grid-template-columns: 20% 80%;}
    body .column-1-9,
    body .xs-column-1-9 {grid-template-columns: 10% 90%;}

    body .column-6-4,
    body .xs-column-6-4 {grid-template-columns: 60% 40%;}
    body .column-66-33,
    body .xs-column-66-33 {grid-template-columns: 66.5% 33.5%;}
    body .column-65-35,
    body .xs-column-65-35 {grid-template-columns: 65% 35%;}
    body .column-7-3,
    body .xs-column-7-3 {grid-template-columns: 70% 30%;}
    body .column-75-25,
    body .xs-column-75-25 {grid-template-columns: 75% 25%;}
    body .column-8-2,
    body .xs-column-8-2 {grid-template-columns: 80% 20%;}
    body .column-9-1,
    body .xs-column-9-1 {grid-template-columns: 90% 10%;}


    body .xs-gap-0 {gap: 0px !important; }
    body .xs-gap-1 {gap: .25rem;}
    body .xs-gap-2 {gap: .5rem;}
    body .xs-gap-3 {gap: 1rem;}
    body .xs-gap-4 {gap: 1.5rem;}
    body .xs-gap-5 {gap: 2rem;}   

}

/* 650px - 950 == tablet */
@media screen and (min-width: 651px)  {    
    
    body .t10,.c.t10,.c-c .t10,.c-t10 > * {width: 100%;}

    body .t95,.c.t95,.c-c .t95,.c-t95 > * {width: 90%;}
    body .t9,.c.t9,.c-c .t9,.c-t9 > * {width: 90%;}
    
    body .t85,.c.t85,.c-c .t85 ,.c-t85 > *{width: 85%;}
    body .t8,.c.t8,.c-c .t8 ,.c-t8 > *{width: 80%;}
    
    body .t75,.c.t75,.c-c .t75,.c-t75 > * {width: 75%;}
    body .t7,.c.t7,.c-c .t7,.c-t7 > * {width: 70%;}
    
    body .t66,.c.t66,.c-c .t66,.c-t66 > * {width: 66.66%;}
    body .t65,.c.t65,.c-c .t65,.c-t65 > * {width: 65%;}
    body .t6,.c.t6,.c-c .t6,.c-t6 > * {width: 60%;}
    
    body .t5,.c.t55,.c-c .t55,.c-t55 > * {width: 50%;}
    body .t5,.c.t5,.c-c .t5,.c-t5 > * {width: 50%;}
    body .t4,.c.t45,.c-c .t45,.c-t45 > * {width: 40%;}
    body .t4,.c.t4,.c-c .t4,.c-t4 > * {width: 40%;}
    body .t35,.c.t35,.c-c .t35,.c-t35 > * {width: 35%;}
    body .t3,.c.t3,.c-c .t3 ,.c-t3 > *{width: 30%;}
    body .t33,.c.t33,.c-c .t33,.c-t33 > * {width: 33.33%;}
    body .t25,.c.t25,.c-c .t25,.c-t25 > * {width: 25%;}
    body .t2,.c.t2,.c-c .t2,.c-t2 > * {width: 20%;}
    body .t15,.c.t15,.c-c .t15,.c-t15 > * {width: 15%;}
    body .t1,.c.t1,.c-c .t1,.c-t1 > * {width: 10%;}
    body .t05,.c.t05,.c-c .t05,.c-t05 > * {width: 5%;}


    body .till-s-hide {display: inline-block;}
    body .till-s-txt-center {text-align: left;}
    body .till-s-txt-right {text-align: left;}
    body .till-s-txt-left {text-align: left;}
    /*body .till-s-flex {display: inline-block;}*/ /* only add proprty of flex when in range otherwise add no property */
    
    body .till-s-r {display: inline-block;justify-content: initial;}
    body .till-s-fr {float: none;}
    body .till-s-fl {float: none;}

    body .onward-t-hide {display: none;} 
    body .onward-t-show {display: block;} 
    body .onward-t-txt-center {text-align: center;}
    body .onward-t-txt-right {text-align: right;}
    body .onward-t-txt-left {text-align: left;}
    body .onward-t-flex {display: flex;} 
    body .onward-t-r {display: flex;justify-content: flex-end;} 
    body .onward-t-fr {float: right;} 
    body .onward-t-fl {float: left;} 
    

    body .t-flow-col {grid-auto-flow: column;}
    body .t-flow-row {grid-auto-flow: row;}

    body .t-column-1 {grid-template-columns: repeat(1, 1fr);}
    body .t-column-2,
    body .t-column-5-5 {grid-template-columns: repeat(2, 1fr);}
    body .t-column-3 {grid-template-columns: repeat(3, 1fr);}
    body .t-column-4 {grid-template-columns: repeat(4, 1fr);}
    body .t-column-5 {grid-template-columns: repeat(5, 1fr);}

    body .t-column-4-6 {grid-template-columns: 40% 60%;}
    body .t-column-35-65 {grid-template-columns: 35% 65%;}
    body .t-column-33-66 {grid-template-columns: 33.5% 66.5%;}
    body .t-column-3-7 {grid-template-columns: 30% 70%;}
    body .t-column-2-8 {grid-template-columns: 20% 80%;}
    body .t-column-1-9 {grid-template-columns: 10% 90%;}

    body .t-column-50-50 {grid-template-columns: 50% 50%;}    

    body .t-column-6-4 {grid-template-columns: 60% 40%;}
    body .t-column-58-38 {grid-template-columns: 58% 38%;}
    body .t-column-65-35 {grid-template-columns: 65% 35%;}
    body .t-column-66-33 {grid-template-columns: 66.5% 33.5%;}
    body .t-column-7-3 {grid-template-columns: 70% 30%;}
    body .t-column-75-25 {grid-template-columns: 75% 25%;}
    body .t-column-8-2 {grid-template-columns: 80% 20%;}
    body .t-column-9-1 {grid-template-columns: 90% 10%;}




    body .t-gap-0 {gap: 0px !important; }
    body .t-gap-1 {gap: .25rem;}
    body .t-gap-2 {gap: .5rem;}
    body .t-gap-3 {gap: 1rem;}
    body .t-gap-4 {gap: 1.5rem;}
    body .t-gap-5 {gap: 2rem;}

}

/* 950 - 1550 wide */
@media screen and (min-width: 951px) {

    body .w10,.c.w10,.c-c .w10,.c-w10 > * {width: 100%;}

    body .w95,.c.w95,.c-c .w95,.c-w95 > * {width: 90%;}
    body .w9,.c.w9,.c-c .w9,.c-w9 > * {width: 90%;}
   
    
    body .w85,.c.w85,.c-c .w85 ,.c-w85 > *{width: 85%;}
    body .w8,.c.w8,.c-c .w8 ,.c-w8 > *{width: 80%;}
    
    
    body .w75,.c.w75,.c-c .w75,.c-w75 > * {width: 75%;}
    body .w7,.c.w7,.c-c .w7,.c-w7 > * {width: 70%;}
    
    
    body .w66,.c.w66,.c-c .w66,.c-w66 > * {width: 66.66%;}
    body .w65,.c.w65,.c-c .w65,.c-w65 > * {width: 65%;}
    body .w6,.c.w6,.c-c .w6,.c-w6 > * {width: 60%;}
    
    body .w5,.c.w55,.c-c .w55,.c-w55 > * {width: 50%;}
    body .w5,.c.w5,.c-c .w5,.c-w5 > * {width: 50%;}
    body .w4,.c.w45,.c-c .w45,.c-w45 > * {width: 40%;}
    body .w4,.c.w4,.c-c .w4,.c-w4 > * {width: 40%;}
    body .w35,.c.w35,.c-c .w35,.c-w35 > * {width: 35%;}
    body .w3,.c.w3,.c-c .w3 ,.c-w3 > *{width: 30%;}
    body .w33,.c.w33,.c-c .w33,.c-w33 > * {width: 33.33%;}
    body .w25,.c.w25,.c-c .w25,.c-w25 > * {width: 25%;}
    body .w2,.c.w2,.c-c .w2,.c-w2 > * {width: 20%;}
    body .w15,.c.w15,.c-c .w15,.c-w15 > * {width: 15%;}
    body .w1,.c.w1,.c-c .w1,.c-w1 > * {width: 10%;}
    body .w05,.c.w05,.c-c .w05,.c-w05 > * {width: 5%;}

    
    

    

    body .till-t-hide {display: inline-block;}
    body .till-t-txt-center {text-align: left;}
    body .till-t-txt-right {text-align: left;}
    body .till-t-txt-left {text-align: left;}
   /* body .till-t-flex {display: inline-block;}*/
    body .till-t-r {display: inline-block;justify-content: initial;}
    body .till-t-fr {float: none;}
    body .till-t-fl {float: none;}

    body .onward-w-hide {display: none;} 
    body .onward-w-show {display: block;} 
    body .onward-w-txt-center {text-align: center;}
    body .onward-w-txt-right {text-align: right;}
    body .onward-w-txt-left {text-align: left;}
    body .onward-w-flex {display: flex;} 
    body .onward-w-r {display: flex;justify-content: flex-end;} 
    body .onward-w-fr {float: right;} 
    body .onward-w-fl {float: left;} 


    body .w-flow-col {grid-auto-flow: column;}
    body .w-flow-row {grid-auto-flow: row;}

    body .w-column-1 {grid-template-columns: repeat(1, 1fr);}
    body .w-column-2 {grid-template-columns: repeat(2, 1fr);}
    body .w-column-3 {grid-template-columns: repeat(3, 1fr);}
    body .w-column-4 {grid-template-columns: repeat(4, 1fr);}
    body .w-column-5 {grid-template-columns: repeat(5, 1fr);}

    body .w-column-7-3 {grid-template-columns: 70% 30%;}
    body .w-column-6-4 {grid-template-columns: 60% 40%;}
    body .w-column-58-38 {grid-template-columns: 58% 38%;}
    body .w-column-65-35 {grid-template-columns: 65% 35%;}
    body .w-column-66-33 {grid-template-columns: 66.5% 33.5%;}
    body .w-column-7-3 {grid-template-columns: 70% 30%;}
    body .w-column-75-25 {grid-template-columns: 75% 25%;}
    body .w-column-8-2 {grid-template-columns: 80% 20%;}
    body .w-column-9-1 {grid-template-columns: 90% 10%;}

    body .w-gap-0 {gap: 0px !important; }
    body .w-gap-1 {gap: .25rem;}
    body .w-gap-2 {gap: .5rem;}
    body .w-gap-3 {gap: 1rem;}
    body .w-gap-4 {gap: 1.5rem;}
    body .w-gap-5 {gap: 2rem;}

}

/* 1200px --- 15  large */
@media screen and (min-width: 1201px)  {    

    body .l10,.c.l10,.c-c .l10,.c-l10 > * {width: 100%;}

    body .l95,.c.l95,.c-c .l95,.c-l95 > * {width: 90%;}
    body .l9,.c.l9,.c-c .l9,.c-l9 > * {width: 90%;}
   
    
    body .l85,.c.l85,.c-c .l85 ,.c-l85 > *{width: 85%;}
    body .l8,.c.l8,.c-c .l8 ,.c-l8 > *{width: 80%;}
    
    
    body .l75,.c.l75,.c-c .l75,.c-l75 > * {width: 75%;}
    body .l7,.c.l7,.c-c .l7,.c-l7 > * {width: 70%;}
    
    
    body .l66,.c.l66,.c-c .l66,.c-l66 > * {width: 66.66%;}
    body .l65,.c.l65,.c-c .l65,.c-l65 > * {width: 65%;}
    body .l6,.c.l6,.c-c .l6,.c-l6 > * {width: 60%;}
    
    body .l5,.c.l55,.c-c .l55,.c-l55 > * {width: 50%;}
    body .l5,.c.l5,.c-c .l5,.c-l5 > * {width: 50%;}
    body .l4,.c.l45,.c-c .l45,.c-l45 > * {width: 40%;}
    body .l4,.c.l4,.c-c .l4,.c-l4 > * {width: 40%;}
    body .l35,.c.l35,.c-c .l35,.c-l35 > * {width: 35%;}
    body .l3,.c.l3,.c-c .l3 ,.c-l3 > *{width: 30%;}
    body .l33,.c.l33,.c-c .l33,.c-l33 > * {width: 33.33%;}
    body .l25,.c.l25,.c-c .l25,.c-l25 > * {width: 25%;}
    body .l2,.c.l2,.c-c .l2,.c-l2 > * {width: 20%;}
    body .l15,.c.l15,.c-c .l15,.c-l15 > * {width: 15%;}
    body .l1,.c.l1,.c-c .l1,.c-l1 > * {width: 10%;}
    body .l05,.c.l05,.c-c .l05,.c-l05 > * {width: 5%;}


    body .till-w-hide {display: inline-block;}
    body .till-w-txt-center {text-align: left;}
    body .till-w-txt-right {text-align: left;}
    body .till-w-txt-left {text-align: left;}
    /*body .till-w-flex {display: inline-block;}*/
    body .till-w-r {display: inline-block;justify-content: initial;}
    body .till-w-fr {float: none;}
    body .till-w-fl {float: none;}

    body .onward-l-hide {display: none;} 
    body .onward-l-txt-center {text-align: center;}
    body .onward-l-txt-right {text-align: right;}
    body .onward-l-txt-left {text-align: left;}
    body .onward-l-flex {display: flex;} 
    body .onward-l-r {display: flex;justify-content: flex-end;} 
    body .onward-l-fr {float: right;} 
    body .onward-l-fl {float: left;} 


    body .l-flow-col {grid-auto-flow: column;}
    body .l-flow-row {grid-auto-flow: row;}

    body .l-column-1 {grid-template-columns: repeat(1, 1fr);}
    body .l-column-2 {grid-template-columns: repeat(2, 1fr);}
    body .l-column-3 {grid-template-columns: repeat(3, 1fr);}
    body .l-column-4 {grid-template-columns: repeat(4, 1fr);}
    body .l-column-5 {grid-template-columns: repeat(5, 1fr);}


    body .l-gap-0 {gap: 0px !important; }
    body .l-gap-1 {gap: .25rem;}
    body .l-gap-2 {gap: .5rem;}
    body .l-gap-3 {gap: 1rem;}
    body .l-gap-4 {gap: 1.5rem;}
    body .l-gap-5 {gap: 2rem;} 
}


/* 1200px --- 15  large */
@media screen and (min-width: 1371px)  {    

    body .xl10,.c.xl10,.c-c .xl10,.c-xl10 > * {width: 100%;}

    body .xl95,.c.xl95,.c-c .xl95,.c-xl95 > * {width: 90%;}
    body .xl9,.c.xl9,.c-c .xl9,.c-xl9 > * {width: 90%;}
    
    body .xl85,.c.xl85,.c-c .xl85 ,.c-xl85 > *{width: 85%;}
    body .xl8,.c.xl8,.c-c .xl8 ,.c-xl8 > *{width: 80%;}
    
    body .xl75,.c.xl75,.c-c .xl75,.c-xl75 > * {width: 75%;}
    body .xl7,.c.xl7,.c-c .xl7,.c-xl7 > * {width: 70%;}

    body .xl66,.c.xl66,.c-c .xl66,.c-xl66 > * {width: 66.66%;}
    body .xl65,.c.xl65,.c-c .xl65,.c-xl65 > * {width: 65%;}
    body .xl6,.c.xl6,.c-c .xl6,.c-xl6 > * {width: 60%;}
    
    body .xl5,.c.xl55,.c-c .xl55,.c-xl55 > * {width: 50%;}
    body .xl5,.c.xl5,.c-c .xl5,.c-xl5 > * {width: 50%;}
    body .xl4,.c.xl45,.c-c .xl45,.c-xl45 > * {width: 40%;}
    body .xl4,.c.xl4,.c-c .xl4,.c-xl4 > * {width: 40%;}
    body .xl35,.c.xl35,.c-c .xl35,.c-xl35 > * {width: 35%;}
    body .xl3,.c.xl3,.c-c .xl3 ,.c-xl3 > *{width: 30%;}
    body .xl33,.c.xl33,.c-c .xl33,.c-xl33 > * {width: 33.33%;}
    body .xl25,.c.xl25,.c-c .xl25,.c-xl25 > * {width: 25%;}
    body .xl2,.c.xl2,.c-c .xl2,.c-xl2 > * {width: 20%;}
    body .xl15,.c.xl15,.c-c .xl15,.c-xl15 > * {width: 15%;}
    body .xl1,.c.xl1,.c-c .xl1,.c-xl1 > * {width: 10%;}
    body .xl05,.c.xl05,.c-c .xl05,.c-xl05 > * {width: 5%;}

    body .till-l-hide {display: inline-block;}
    body .till-l-txt-center {text-align: left;}
    body .till-l-txt-right {text-align: left;}
    body .till-l-txt-left {text-align: left;}
    /*body .till-l-flex {display: inline-block;}*/
    body .till-l-r {display: inline-block;justify-content: initial;}
    body .till-l-fr {float: none;}
    body .till-l-fl {float: none;}

    body .onward-xl-hide {display: none;} 
    body .onward-xl-txt-center {text-align: center;}
    body .onward-xl-txt-right {text-align: right;}
    body .onward-xl-txt-left {text-align: left;}
    body .onward-xl-flex {display: flex;} 
    body .onward-xl-r {display: flex;justify-content: flex-end;} 
    body .onward-xl-fr {float: right;} 
    body .onward-xl-fl {float: left;} 
   

    body .xl-flow-col {grid-auto-flow: column;}
    body .xl-flow-row {grid-auto-flow: row;}

    body .xl-column-1 {grid-template-columns: repeat(1, 1fr);}
    body .xl-column-2 {grid-template-columns: repeat(2, 1fr);}
    body .xl-column-3 {grid-template-columns: repeat(3, 1fr);}
    body .xl-column-4 {grid-template-columns: repeat(4, 1fr);}
    body .xl-column-5 {grid-template-columns: repeat(5, 1fr);}


    body .xl-gap-0 {gap: 0px !important; }
    body .xl-gap-1 {gap: .25rem;}
    body .xl-gap-2 {gap: .5rem;}
    body .xl-gap-3 {gap: 1rem;}
    body .xl-gap-4 {gap: 1.5rem;}
    body .xl-gap-5 {gap: 2rem;}

}


@media screen and (min-width: 1701px)  {   

    body .xxl10,.c.xxl10,.c-c .xxl10,.c-xxl10 > * {width: 100%;}

    body .xxl95,.c.xxl95,.c-c .xxl95,.c-xxl95 > * {width: 90%;}
    body .xxl9,.c.xxl9,.c-c .xxl9,.c-xxl9 > * {width: 90%;}
    
    body .xxl85,.c.xxl85,.c-c .xxl85 ,.c-xxl85 > *{width: 85%;}
    body .xxl8,.c.xxl8,.c-c .xxl8 ,.c-xxl8 > *{width: 80%;}
    
    body .xxl75,.c.xxl75,.c-c .xxl75,.c-xxl75 > * {width: 75%;}
    body .xxl7,.c.xxl7,.c-c .xxl7,.c-xxl7 > * {width: 70%;}

    body .xxl66,.c.xxl66,.c-c .xxl66,.c-xxl66 > * {width: 66.66%;}
    body .xxl65,.c.xxl65,.c-c .xxl65,.c-xxl65 > * {width: 65%;}
    body .xxl6,.c.xxl6,.c-c .xxl6,.c-xxl6 > * {width: 60%;}
    
    body .xxl5,.c.xxl55,.c-c .xxl55,.c-xxl55 > * {width: 50%;}
    body .xxl5,.c.xxl5,.c-c .xxl5,.c-xxl5 > * {width: 50%;}
    body .xxl4,.c.xxl45,.c-c .xxl45,.c-xxl45 > * {width: 40%;}
    body .xxl4,.c.xxl4,.c-c .xxl4,.c-xxl4 > * {width: 40%;}
    body .xxl35,.c.xxl35,.c-c .xxl35,.c-xxl35 > * {width: 35%;}
    body .xxl3,.c.xxl3,.c-c .xxl3 ,.c-xxl3 > *{width: 30%;}
    body .xxl33,.c.xxl33,.c-c .xxl33,.c-xxl33 > * {width: 33.33%;}
    body .xxl25,.c.xxl25,.c-c .xxl25,.c-xxl25 > * {width: 25%;}
    body .xxl2,.c.xxl2,.c-c .xxl2,.c-xxl2 > * {width: 20%;}
    body .xxl15,.c.xxl15,.c-c .xxl15,.c-xxl15 > * {width: 15%;}
    body .xxl1,.c.xxl1,.c-c .xxl1,.c-xxl1 > * {width: 10%;}
    body .xxl05,.c.xxl05,.c-c .xxl05,.c-xxl05 > * {width: 5%;}

    body .till-xl-hide {display: inline-block;}
    body .till-xl-txt-center {text-align: left;}
    body .till-xl-txt-right {text-align: left;}
    body .till-xl-txt-left {text-align: left;}
   /* body .till-xl-flex {display: inline-block;}*/
    body .till-xl-r {display: inline-block;justify-content: initial;}
    body .till-xl-fr {float: none;}
    body .till-xl-fl {float: none;}

    body .onward-xxl-hide {display: none;} 
    body .onward-xxl-txt-center {text-align: center;}
    body .onward-xxl-txt-right {text-align: right;}
    body .onward-xxl-txt-left {text-align: left;}
    body .onward-xxl-flex {display: flex;} 
    body .onward-xxl-r {display: flex;justify-content: flex-end;} 
    body .onward-xxl-fr {float: right;} 
    body .onward-xxl-fl {float: left;} 

    body .xll-gap-0 {gap: 0px !important; }
    body .xll-gap-1 {gap: .25rem;}
    body .xll-gap-2 {gap: .5rem;}
    body .xll-gap-3 {gap: 1rem;}
    body .xll-gap-4 {gap: 1.5rem;}
    body .xll-gap-5 {gap: 2rem;}
   
   
}


/* code from front.css starts */


/* custom component START */
@media (min-width: 0px) {

    .s-10 {width: 10%;}
    .s-20 {width: 20%;}
    .s-25 {width: 25%;}
    .s-30 {width: 30%;}
    .s-33 {width: 33%;}
    .s-40 {width: 40%;}
    .s-50 {width: 50%;}
    .s-60 {width: 60%;}
    .s-65 {width: 65%;}
    .s-70 {width: 70%;}
    .s-75 {width: 75%;}
    .s-80 {width: 80%;}
    .s-90 {width: 90%;}
    .s-100 {width: 100%;}

    /*  */
    .hidden-xs-up {display: none;}

}

@media (min-width: 768px) {

    .t-10 {width: 10%;}
    .t-20 {width: 20%;}
    .t-25 {width: 25%;}
    .t-30 {width: 30%;}
    .t-33 {width: 33%;}
    .t-40 {width: 40%;}
    .t-50 {width: 50%;}
    .t-60 {width: 60%;}
    .t-65 {width: 65%;}
    .t-70 {width: 70%;}
    .t-75 {width: 75%;}
    .t-80 {width: 80%;}
    .t-90 {width: 90%;}
    .t-100 {width: 100%;}

    /*  */
    .hidden-sm-up {display: none;}

}

@media (min-width: 992px) {

    .w-10 {width: 10%;}
    .w-20 {width: 20%;}
    .w-25 {width: 25%;}
    .w-30 {width: 30%;}
    .w-33 {width: 33%;}
    .w-40 {width: 40%;}
    .w-50 {width: 50%;}
    .w-60 {width: 60%;}
    .w-65 {width: 65%;}
    .w-70 {width: 70%;}
    .w-75 {width: 75%;}
    .w-80 {width: 80%;}
    .w-90 {width: 90%;}
    .w-100 {width: 100%;}

    /*  */
    .hidden-md-up {display: none;}

}

@media (min-width: 1200px) {
    .hidden-lg-up {display: none;}
}

/* max queries */
@media (max-width: 1199px) {
    .hidden-lg-down {display: none;}
}

@media (max-width: 991px) {
    .hidden-md-down {display: none;}
}

@media (max-width:  767px) {
    .hidden-sm-down {display: none;}
}

/* code from front.css ends */



/* for hiding elem at specfic screen size */
@media (min-width:0px) and (max-width:650px) {
    .s-hide-only{display: none !important;}
}
@media (min-width:651px) and (max-width:950px) {
    .t-hide-only{display: none !important;}    
}
@media (min-width:951px) and (max-width:1200px) {
    .w-hide-only{display: none !important;}
}
@media (min-width:1201px) and (max-width:1370px) {
    .l-hide-only{display: none !important;}
}
@media (min-width:1371px) and (max-width:1700px) {
    .xl-hide-only{display: none !important;}
}
@media (min-width:1701px){
    .xxl-hide-only{display: none !important;}
}

    

.grid-box > * {padding-right: 5px;padding-left: 5px;}



button.type-confirm.hs-false.pop-up-close-btn {display: block;width: 100%;height: 100%;background: none;border: 0px;border-left: 1px solid silver;outline: none;color: #8d8d8d;}
p.popup-sub-heading {margin-bottom: 0px;font-size: 0.85em;color: #a4a4a4;}



.hs-pop-up.has-heading .hs-pop-up-header{border-bottom: 1px solid silver}
.hs-pop-up.has-subHeading {}
.hs-pop-up.has-body {}
/* only heading no body */
.hs-pop-up.has-heading.no-body .hs-pop-up-header{ border-bottom: 0px; }
/* only heading */


/*   functional classes   */


.hp {padding-right: calc( 50vw - 670px );padding-left: calc( 50vw - 670px );box-sizing: border-box;}
.hp {padding-right: calc( 50vw - 665px );padding-left: calc( 50vw - 665px );box-sizing: border-box;}
.c, .c-c > * {position: relative;box-sizing: border-box;display: inline-block;vertical-align: top;}
.inlined > * {display: inline-block;vertical-align: top;margin-right: 1em;}
.inlined > *:last-child {margin-right: 0px; }


.sep > *::after {content: '';position: absolute;top: 0%;bottom: 0%;width: 1px;background: white;right: 0;    }
.sep > *:last-child::after {content: none;background: none;}
.sep > * {margin-right: 0.7em;padding-right: 0.7em;align-self: center;}
.sep > *:last-child {margin-right: 0;padding-right: 0;}
.img img {max-width: 100%;}
.icon-text > * {vertical-align: middle;} /*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.c-box > *, .box {background: #F4F5F9;}
body .hide {display: none;}
.border  {border-top: 1px solid silver;border-left:1px solid silver; }
.border > * {border-right: 1px solid silver;border-bottom: 1px solid silver;}
.mauto {margin-right: auto;margin-left: auto;}


.fn_hover_container {position: relative;z-index: 1;}
.fn_hover_container .fn_hover_show {display: none;}
.fn_hover_container .fn_hover_show.dropdown {position: absolute;list-style: none;padding: 5px;background: #2b2b2b;color: white;box-sizing: border-box;}
.fn_hover_container:hover .fn_hover_show {display: block;}
.fn_hover_container .fn_hover_show.dropdown li {padding: 10px;box-sizing: border-box;border-bottom: 1px solid;font-size: 0.8em;}


.muted-text {display: block;font-size: 9px;text-transform: uppercase;color: gray;min-height: 24px;line-height: 12px;}
.ct {text-align: center;}
.block {display: block;}

.text-small {font-size: 80%;}
.txt-center {text-align: center;}
.txt-right {text-align: right;}
.txt-left {text-align: left;}

.txt-capitalize {text-transform: capitalize;}
.txt-uppercase {text-transform: uppercase;}

/* cursor styles */
.cursor-pointer {cursor: pointer;}
body .pointer-events-none {pointer-events: none;}


@media (max-width: 1360px) {
    .hp {padding-right: 20px;padding-left: 20px;}
}

/* need zubair help @Ahsan */
/* button styles*/
.button-input {position: relative;}
.button-input .actions {position: absolute;top: 0;right: 0;bottom: 0;}
button.disabled {cursor: no-drop;opacity: 0.5;}
.btn-hollow {background: none;border: 1px solid #2781AD;color: #2781AD;}

input.no-btn {background: none;border: 0px;color: black;padding: 0px;cursor: pointer;}
input.no-btn:hover {background: none;color: black;}
body .alter-text {color: red;}

form li label {display: inline-block;vertical-align: top;}
form label ~ *[name] {display: inline-block;vertical-align: top;border: 1px solid #d4d4d4;border-radius: 3px;box-sizing: border-box;}
form li {margin-bottom: 10px}



.msg-box.msg-session p {padding: 5px 15px;border: 1px solid;margin: 0px;margin-bottom: 10px;border-radius: 8px;text-transform: capitalize;}

.msg-box.msg-session.error p {background: #ff00006b;border-color: #cc3131;color: #b72727;}

.msg-box.msg-session.sucess p {background: #27b7326b;border-color: #1d8425;color: #1d8425;}



.form-field label {text-transform: capitalize;}
.form-field label .red {color: red;}

.form-field > div {display: inline-block;vertical-align: top;}
.form-field label {width: 200px;display: inline-block;vertical-align: top;}
.form-field li label {width: initial;}
.form-field label + * {width: calc(100% - 250px);min-width: 200px;}

.form-field label + textarea {width: 100%;}

.form-field label + input[type='radio'],
.form-field label + input[type='checkbox'] {width: 20px;min-width: 20px;}

.field-wraper span.comment {display: block;}

.form-field label + textarea {min-height: 180px;width: 100%}
.form-field.hs-form-field {margin-bottom: 10px;}
.form-field.hs-form-field .field-wraper ul {padding:0}
.field-wraper input,.field-wraper select,.field-wraper textarea {width: 100%;}
.field-wraper input[type="radio"],
.field-wraper input[type="checkbox"] {width: initial;}

.field-wraper .radio-container {padding: 0px;display: grid;list-style: none;grid-template-columns: 20% 20% 20% 20% 20%;}
.field-wraper .radio-container {font-size: 0.9em;}
.field-wraper .radio-container label {display: block;padding: 5px;border: 1px solid silver;border-radius: 4px;margin: 5px;}

.field-wraper .radio-container input:checked + label {border: 3px solid #0075ff;}
.field-wraper .radio-container input {display: none;}
.field-wraper .radio-container span {font-size: 0.8rem;line-height: 1.2rem;display: block;text-align: center;}


.hs-form-field.validated-success::after {content: "\f00c";width: 10px;height: 10px;position: absolute;right: 20px;font-family: "Font Awesome 5 Free";font-weight: 900;font-size: 14px;color: #76308e;top: calc(50% - 3px);}
.hs-form-field.validated-success {position: relative;}


.slidecontainer {width: 100%;}
.slider {-webkit-appearance: none;appearance: none;width: 100%; min-height: 25px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;}
.slider:hover {opacity: 1;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;width: 25px; min-height: 25px; background: #4CAF50; cursor: pointer;}
.slider::-moz-range-thumb {width: 25px; height: 25px; background: #4CAF50; cursor: pointer;}



.dynamic-content-container .hs-field-repeter-row.hs-field-repeter-row-style-default {display: grid;grid-auto-columns: min-content;grid-gap: 10px;grid-template-columns: 33% 33% 33%;justify-content: space-between;border: 1px solid silver;border-radius: 10px;padding: 10px 20px;margin-bottom: 10px;background: #00000005;box-sizing: border-box;}
.dynamic-content-container .hs-field-repeter-row.hs-field-repeter-row-style-default > div {width: 25%;}

.dynamic-content-container .repeter-item-wraper.type-hidden {display: none;}

.dynamic-content-container .hs-field-repeter-row label {display: block;font-size: 0.85em;}
.dynamic-content-container .hs-field-repeter-row label + * {width: 100%;}

.dynamic-content-container .btns button {margin-right: 10px;display: inline-block;border-radius: 10px;border: 1px solid #2b8dc6;padding: 0px 15px;background: #3d9fd8;color: white;cursor: pointer;outline: none;}
.dynamic-content-container .btns {text-align: right;margin-bottom: 15px;}


.dynamic-content-container .hs-field-repeter-row.hs-field-repeter-row-style-table_popup {border: 1px solid silver;box-sizing: border-box;}
.dynamic-content-container .hs-field-repeter-row.hs-field-repeter-row-style-table_popup .header-container {background: #e9e9e9;border: 1px solid silver;box-sizing: border-box;}
.hs-field-repeter-row.data-row.hs-field-repeter-row-style-table_popup .table-row > span {display: inline-block;max-width: 100%;word-wrap: break-word;}

.form-field.hs-form-field.cx-repeater .sublisting-single-box.sublisting-view-full {position: fixed;width: 100%;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 9999;background: #0000007d;}
.form-field.hs-form-field.cx-repeater .sublisting-single-box.sublisting-view-full .sublisting-single-box-inner {width: 80%;margin: auto;background: white;margin-top: 10ch;border: 1px solid silver;max-height: 75vh;overflow-y: scroll;padding: 10px;box-sizing: border-box;border-radius: 4px;z-index: 9999;}
.form-field.hs-form-field.cx-repeater .repeter-item-wraper {padding: 0px 10px;}

.form-field.hs-form-field.cx-repeater span.btn-edit,
.form-field.hs-form-field.cx-repeater span.btn-delete {  }

.form-field.hs-form-field.cx-repeater span.btn-edit { color: #21d4ff;}
.form-field.hs-form-field.cx-repeater span.btn-delete { color: red;}


.hs-form-field .field-wraper{position:relative;}

.hs-form-field span.loading-icon-container{position:absolute;right:10px;color: var(--e-primary);top:10px;}

/*for  show password*/
.hs-form-field.password-wraper .show_password-icon-container {position: absolute;right: 10px;color: var(--e-primary);top: 10px;cursor: pointer;}

.hs-form-field.cx-password .show_password-icon-container {position: absolute;right: 10px;color: var(--e-primary);top: 10px;cursor: pointer;}


.hs-form-field.password-wraper span.loading-icon-container {position: absolute;right: 30px !important;color: var(--e-primary);top: 10px;}


header.template-default-header li {display: block;margin: 0px;padding: 0px;}
header.template-default-header ul {list-style: none;padding: 0px;margin: 0px;background: #efefef;}
header.template-default-header li a {display: block;background: #efefef;padding: 10px 20px;color: #8e8e8e;text-transform: capitalize;}
header.template-default-header li.active a {background: white;color: black;}


/*.owl-dots button {width: 10px;background: #00000052 !important;height: 10px;opacity: 1;border-radius: 10px;margin: 10px;}*/



.front-view .form-field.hs-form-field.show_in_admin {display: none;}