:root {
        --hi1: calc(var(--vh, 1vh) * 1);
        --hi2: calc(var(--vh, 1vh) * 2);
        --hi3: calc(var(--vh, 1vh) * 3);
        --hi4: calc(var(--vh, 1vh) * 4);
        --hi5: calc(var(--vh, 1vh) * 5);
        --hi6: calc(var(--vh, 1vh) * 6);
        --hi7: calc(var(--vh, 1vh) * 7);
        --hi8: calc(var(--vh, 1vh) * 8);
        --hi9: calc(var(--vh, 1vh) * 9);
        --hi10: calc(var(--vh, 1vh) * 10);
        --hi11: calc(var(--vh, 1vh) * 11);
        --hi12: calc(var(--vh, 1vh) * 12);
        --hi13: calc(var(--vh, 1vh) * 13);
        --hi14: calc(var(--vh, 1vh) * 14);
        --hi15: calc(var(--vh, 1vh) * 15);
        --hi16: calc(var(--vh, 1vh) * 16);
        --hi17: calc(var(--vh, 1vh) * 17);
        --hi18: calc(var(--vh, 1vh) * 18);
        --hi19: calc(var(--vh, 1vh) * 19);
        --hi20: calc(var(--vh, 1vh) * 20);
        --hi21: calc(var(--vh, 1vh) * 21);
        --hi22: calc(var(--vh, 1vh) * 22);
        --hi23: calc(var(--vh, 1vh) * 23);
        --hi24: calc(var(--vh, 1vh) * 24);
        --hi25: calc(var(--vh, 1vh) * 25);
        --hi26: calc(var(--vh, 1vh) * 26);
        --hi27: calc(var(--vh, 1vh) * 27);
        --hi28: calc(var(--vh, 1vh) * 28);
        --hi29: calc(var(--vh, 1vh) * 29);
        --hi30: calc(var(--vh, 1vh) * 30);
        --hi31: calc(var(--vh, 1vh) * 31);
        --hi32: calc(var(--vh, 1vh) * 32);
        --hi33: calc(var(--vh, 1vh) * 33);
        --hi34: calc(var(--vh, 1vh) * 34);
        --hi35: calc(var(--vh, 1vh) * 35);
        --hi36: calc(var(--vh, 1vh) * 36);
        --hi37: calc(var(--vh, 1vh) * 37);
        --hi38: calc(var(--vh, 1vh) * 38);
        --hi39: calc(var(--vh, 1vh) * 39);
        --hi40: calc(var(--vh, 1vh) * 40);
        --hi41: calc(var(--vh, 1vh) * 41);
        --hi42: calc(var(--vh, 1vh) * 42);
        --hi43: calc(var(--vh, 1vh) * 43);
        --hi44: calc(var(--vh, 1vh) * 44);
        --hi45: calc(var(--vh, 1vh) * 45);
        --hi46: calc(var(--vh, 1vh) * 46);
        --hi47: calc(var(--vh, 1vh) * 47);
        --hi48: calc(var(--vh, 1vh) * 48);
        --hi49: calc(var(--vh, 1vh) * 49);
        --hi50: calc(var(--vh, 1vh) * 50);
        --hi51: calc(var(--vh, 1vh) * 51);
        --hi52: calc(var(--vh, 1vh) * 52);
        --hi53: calc(var(--vh, 1vh) * 53);
        --hi54: calc(var(--vh, 1vh) * 54);
        --hi55: calc(var(--vh, 1vh) * 55);
        --hi56: calc(var(--vh, 1vh) * 56);
        --hi57: calc(var(--vh, 1vh) * 57);
        --hi58: calc(var(--vh, 1vh) * 58);
        --hi59: calc(var(--vh, 1vh) * 59);
        --hi60: calc(var(--vh, 1vh) * 60);
        --hi61: calc(var(--vh, 1vh) * 61);
        --hi62: calc(var(--vh, 1vh) * 62);
        --hi63: calc(var(--vh, 1vh) * 63);
        --hi64: calc(var(--vh, 1vh) * 64);
        --hi65: calc(var(--vh, 1vh) * 65);
        --hi66: calc(var(--vh, 1vh) * 66);
        --hi67: calc(var(--vh, 1vh) * 67);
        --hi68: calc(var(--vh, 1vh) * 68);
        --hi69: calc(var(--vh, 1vh) * 69);
        --hi70: calc(var(--vh, 1vh) * 70);
        --hi71: calc(var(--vh, 1vh) * 71);
        --hi72: calc(var(--vh, 1vh) * 72);
        --hi73: calc(var(--vh, 1vh) * 73);
        --hi74: calc(var(--vh, 1vh) * 74);
        --hi75: calc(var(--vh, 1vh) * 75);
        --hi76: calc(var(--vh, 1vh) * 76);
        --hi77: calc(var(--vh, 1vh) * 77);
        --hi78: calc(var(--vh, 1vh) * 78);
        --hi79: calc(var(--vh, 1vh) * 79);
        --hi80: calc(var(--vh, 1vh) * 80);
        --hi81: calc(var(--vh, 1vh) * 81);
        --hi82: calc(var(--vh, 1vh) * 82);
        --hi83: calc(var(--vh, 1vh) * 83);
        --hi84: calc(var(--vh, 1vh) * 84);
        --hi85: calc(var(--vh, 1vh) * 85);
        --hi86: calc(var(--vh, 1vh) * 86);
        --hi87: calc(var(--vh, 1vh) * 87);
        --hi88: calc(var(--vh, 1vh) * 88);
        --hi89: calc(var(--vh, 1vh) * 89);
        --hi90: calc(var(--vh, 1vh) * 90);
        --hi91: calc(var(--vh, 1vh) * 91);
        --hi92: calc(var(--vh, 1vh) * 92);
        --hi93: calc(var(--vh, 1vh) * 93);
        --hi94: calc(var(--vh, 1vh) * 94);
        --hi95: calc(var(--vh, 1vh) * 95);
        --hi96: calc(var(--vh, 1vh) * 96);
        --hi97: calc(var(--vh, 1vh) * 97);
        --hi98: calc(var(--vh, 1vh) * 98);
        --hi99: calc(var(--vh, 1vh) * 99);
        --hi100: calc(var(--vh, 1vh) * 100);
        --hi101: calc(var(--vh, 1vh) * 101);
        --hi102: calc(var(--vh, 1vh) * 102);
        --hi103: calc(var(--vh, 1vh) * 103);
        --hi104: calc(var(--vh, 1vh) * 104);
        --hi105: calc(var(--vh, 1vh) * 105);
        --hi106: calc(var(--vh, 1vh) * 106);
        --hi107: calc(var(--vh, 1vh) * 107);
        --hi108: calc(var(--vh, 1vh) * 108);
        --hi109: calc(var(--vh, 1vh) * 109);
        --hi110: calc(var(--vh, 1vh) * 110);
        --hi111: calc(var(--vh, 1vh) * 111);
        --hi112: calc(var(--vh, 1vh) * 112);
        --hi113: calc(var(--vh, 1vh) * 113);
        --hi114: calc(var(--vh, 1vh) * 114);
        --hi115: calc(var(--vh, 1vh) * 115);
        --hi116: calc(var(--vh, 1vh) * 116);
        --hi117: calc(var(--vh, 1vh) * 117);
        --hi118: calc(var(--vh, 1vh) * 118);
        --hi119: calc(var(--vh, 1vh) * 119);
        --hi120: calc(var(--vh, 1vh) * 120);
        --icon_bnb_height: 45px;
    --height_head: 75px;
    --height_head_neg: -75px;
    --height_foot: 150px;
    --height_foot_neg: -150px;
    --height_bar_bottom: 65px;
    --safe-area-inset-top: 0px;
    --safe-area-inset-bottom: 0px;
    --view-mobile: 0;
    
    --color-head: #107a8a;     --color-head-mobile: #606060;      --box-shadow-head: none;
    --box-shadow-head-mobile: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px !important;
    --background-color_head: #FFFFFF;
    
    --last-scroll-top: 0px;
    --negative-scroll-top: 0;
    --positive-scroll-top: 0;
    
    --bg-pp2-height: 100%;  
    --topBarHeight:             calc(60px + var(--safe-area-inset-top));       --topBarHeightFullModalBox: calc(60px + var(--safe-area-inset-top));
    --topBarHeightInsie: 0px;       --marginTopModal: calc(3vw + var(--safe-area-inset-top));
    
    
    --topBarHeightModal: 60px;          --footBarHeightModal: 60px;
    
    --preBodyTagBGC: #ffffff;
    
    --smartBannerHeight: 0px;
        
}

@media screen and (max-width: 600px){
    :root {
        --view-mobile: 1;
    }
}


.currency-amount{
    white-space: nowrap;
}

pre{
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: break-spaces;
}


@supports (padding-top: constant(safe-area-inset-top)) {
    :root {
        --system-safe-area-inset-top: constant(safe-area-inset-top);
        --system-safe-area-inset-bottom: constant(safe-area-inset-bottom);
    }
}
@supports (padding-top: env(safe-area-inset-top)) {
    :root {
        --system-safe-area-inset-top: env(safe-area-inset-top);
        --system-safe-area-inset-bottom: env(safe-area-inset-bottom);
    }
}

:root {
    --safe-area-inset-top: calc(var(--smartBannerHeight) + var(--system-safe-area-inset-top));
    --safe-area-inset-bottom: var(--system-safe-area-inset-bottom);
}

@media screen and (max-width: 600px){
    :root {
        --height_head: calc(60px + var(--safe-area-inset-bottom) );
        --height_head_neg: calc(-60px - var(--safe-area-inset-bottom) );
    }
}



:focus {outline:none;}
::-moz-focus-inner {border:0;}

* {
    margin: 0px;
    padding: 0px;
    position: relative;
    letter-spacing: 0.2px;
    outline: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-touch-callout: none;
    background-clip: padding-box;
    
    -webkit-tap-highlight-color: transparent;       touch-action: pan-y;
}

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


ul, ul * {
    padding: revert;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: unset;
    margin-bottom: unset;
    display: unset;
    font-size: unset;
    margin-block-start: unset;
    margin-block-end: unset;
    margin-inline-start: unset;
    margin-inline-end: unset;
    font-weight: unset;
}


@media screen and (max-width: 600px){
    #body-head *{
        -webkit-touch-callout: none; /* Safari Touch */
        -webkit-user-select: none;   /* Webkit */
        -khtml-user-select: none;    /* Konqueror HTML */
        -moz-user-select: none;      /* Firefox */
        -ms-user-select: none;       /* Edge*/
        user-select: none;       /* Future-proof*/
    }
    
    .documents,
    .documents *{           user-select: text !important;
    }
}

.container_frjmap{
    opacity: 0;
    width: 1px;
    height: 1px;
    positon: fixed;
    top: 0px;
    right: 0px;
    overflow: hidden;
}
.container_frjmap.initialized{
    display: none;
    width: 0px;
    height: 0px;
}

.frjmap *{
    position: unset;
    margin: unset;
    padding: unset;
    letter-spacing: unset;
}
.frjmap .gm-style-iw-chr {
    position: absolute !important;
    width: 100%;
}
.gm-style-pbt{
    position: relative;
}
.gm-fullscreen-control {
    display: none;
}
.gm-style-mot{
    position: relative;
}


.max-content{
    width: -moz-max-content !important;    /* Firefox/Gecko */
    width: -webkit-max-content !important; /* Chrome */
    width: max-content !important; 
}

input[type=text], input[type=password] {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    appearance: none;
}

ul{
  list-style-position: outside;
}

a, a:active, a:focus{
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
@media (hover: hover) {
    a:hover{
      color: inherit; /* blue colors for links too */
      text-decoration: inherit; /* no underline */
    }
} 



select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
select {
    background: transparent;
}

button{
    font-size: 0px;
    background: none;
    border: solid 0px;
}

button > span{
    display:inline-block;
    vertical-align:middle;
}

html:not([data-clarity-id]).heighvh,
html:not([data-clarity-id]) .heighvh{
    height: var(--hi100) !important;
}
html:not([data-clarity-id]).heighvh.maxvh,
html:not([data-clarity-id]) .heighvh.maxvh{
    max-height: var(--hi100) !important;
}
html:not([data-clarity-id]).heighvh.overvh,
html:not([data-clarity-id]) .heighvh.overvh{
    overflow: hidden;
}

html:not([data-clarity-id]) .heighvh.absvh{
    position: absolute;
}

html {
    box-sizing: border-box;
    font-size: 16px;
    width: 100vw;
    margin: 0px;
    padding: 0px;
    font-family: Calibri;
    scrollbar-width: thin;
    visibility: inherit;
    display: block;
    -webkit-text-size-adjust: 100%;
}
html, body{
    width: 100vw !important;
    margin: 0px !important;
    padding: 0px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100vw;
    touch-action: pan-y;
}


@media screen and (max-width: 600px){
    body{
        -webkit-touch-callout: none; 
        -webkit-user-select: none;
        -khtml-user-select: none; 
        -moz-user-select: none; 
        -ms-user-select: none; 
        user-select: none;
    }
}


@media screen and (max-width: 600px){ 
    html {
        overflow-x: hidden;     }
}
html.slide::-webkit-scrollbar {
    display: none;
}
html.slide{
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; 
}


.bp-pp-shadow {
    position: fixed !important;
    inset: 0px !important;
    overflow-y: auto !important;
    width: 100vw;
    height: 100vh;
    top: 0px !important;
    right: 0px !important;
    left: 0px !important;
    bottom: 0px !important;
    transition: background 0.24s ease;
}
.bp-pp-shadow.show-bg{
    opacity: 0;
    background: rgba(0,0,0,0.6) !important;
    animation: show-bg 0.1s linear forwards;
}
@keyframes show-bg {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.bg-pp1{
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    position: absolute;
    top: 0px !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: none;
    min-height: var(--hi100) !important;
}

.bg-pp1.bg-display{
    display: block;
}


.bg-pp1.has-modal-box .fake-bgpp2-bottom{      display:none;
}

.bg-pp2-box{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    min-height: var(--hi100) !important;
}
.bg-pp2{
    display: inline-flex;
    width: 100% !important;
    position: absolute;
    overflow: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    min-height: var(--hi100) !important;
    padding-top: var(--safe-area-inset-top) !important;
}
.bg-pp2-box.show-bg{
    transform: translateY(30%);
    animation: show-bg2 0.3s linear forwards;
}
@keyframes show-bg2 {
    0% {
        opacity: 0;
        transform: translateY(30%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
.bg-pp2-box.hide-bg{
    transform: translateY(0%);
    animation: hide-bg2 0.3s linear forwards !important;
}
@keyframes hide-bg2 {
    0% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}


.background-popup{
    margin: auto !important;
    height: max-content;
    width: 100%;
}
.background-popup > div {
    margin: 50px auto 50px auto !important;
}
.background-popup > div.full-modal-box {
    margin: 0 !important;
    padding-top: 0px;
}

.bg-pp2.has-full-modal-box{     background-color: #ffffff !important;
    padding-top: 0px !important;
}
.bg-pp2.has-full-modal-box2{     background-color: #ffffff00 !important;
}
    
.bg-pp2.has-full-modal-box .background-popup > div{
    width: 100% !important;
    min-height: calc(var(--hi100)) !important;
    margin: 0 !important;
    border-radius: 0px;
}

@media screen and (max-width: 600px){
    .background-popup{
        width: 100vw !important;
        padding-top: calc(var(--safe-area-inset-top) + 20px);
        padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
    }
    .background-popup > div {
        margin: auto !important;
    }
    .bg-pp2.has-full-modal-box .background-popup{
        width: 100vw !important;
        min-height: calc(var(--hi100)) !important;
        overflow: hidden !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .bg-pp2.has-modal-box .background-popup{
        padding: 0 !important;
        padding-bottom: calc(var(--marginTopModal) + var(--safe-area-inset-bottom)) !important;
        height: 100%;
    }
    
    
    .bg-pp2{
        padding: 0px !important;
        margin: auto;
        height: calc(var(--hi100)) !important;
        min-height: calc(var(--hi100)) !important;
        padding-top: 0px !important;
    }
    
    .bg-pp2.has-modal-box{ 
        margin: 2vw !important;
        width: 96vw !important;
        margin-top: calc(var(--marginTopModal) + 10px) !important;
        height: calc(var(--hi100) + var(--safe-area-inset-bottom)) !important;
        min-height: calc(var(--hi100) + var(--safe-area-inset-bottom)) !important;
        border-radius: 10px 10px 0px 0px;
        padding-bottom: 2vw !important;
        overflow: hidden;
    }

    .bg-pp2.has-modal-box:before {          content: '';
        position: fixed;
        bottom: 0px;
        width: 100%;
        width: 96vw !important;
        height: 50vh;
        background-color: #ffffff;
        z-index: -1;
    }
}



.background-menu{
    width: 100%;
    height: calc(100vh - var(--height_head));
    z-index: 1998 !important;
    position: fixed;
    overflow: auto;
    top: var(--height_head);
    transition: background 0.24s ease;
}
.background-menu.show-bg{
    background: rgba(0, 0, 0, 0.15) none repeat scroll 0% 0% !important;
}

@media screen and (max-width: 600px){
    .background-menu{
        height: 100vh;
        top: var(--height_head_neg);
    }
    .background-menu.show-bg.show-z-index{
        z-index: 2001 !important;
    }

}

.svg svg{
    width: inherit !important;
    height: inherit !important;
    fill: inherit; }




/********************************/
/* FONTS START  */  
/********************************/

@font-face {
  font-family: 'Ionicons';
  src: url(https://www.bnbdays.com/resources/fonts/Ionicons/ionicons.ttf) format('truetype');
  font-display: swap;
}

@font-face {
    font-family: BnbFont1;
    src: url('https://www.bnbdays.com/resources/fonts/BalooThambi/BalooThambi-Regular.ttf');
    font-display: swap;
}



/* vietnamese */
@font-face {
    font-family: 'Mobis';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Mobis';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Mobis';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
    font-family: 'Mobis-bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Mobis-bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Mobis-bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: InputFont;
    src: url("https://www.bnbdays.com/resources/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Light.woff2") format("woff2"),
	url("https://www.bnbdays.com/resources/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Light.woff") format("woff"),
	url("https://www.bnbdays.com/resources/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Light.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: InputFont-Regular;
    src: url("https://www.bnbdays.com/resources/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Regular.woff2") format("woff2"),
	url("https://www.bnbdays.com/resources/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Regular.woff") format("woff"),
	url("https://www.bnbdays.com/resources/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: TitleFont;
    src: url("https://www.bnbdays.com/resources/fonts/Sarala/Sarala-Regular.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: Text;
    src: url("https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-Medium.ttf") format("truetype");
    font-display: swap;
}

/* FONTS END */
/********************************/



.bodytag {
    margin: 0px;
    padding: 0px;
    overflow: auto;
    overflow: overlay;      min-height: var(--hi100) !important ;
}
.bodytag.show-bg {
    overflow: hidden !important;
}

@media screen and (max-width: 600px){
    .bodytag.hidescrollbar{
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
        overflow-y: scroll;
    }
    .bodytag.hidescrollbar::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }
}
.prebodytag{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    background-color: var(--preBodyTagBGC);
}

.body-head.app-user{
    color: var(--color-head);
}
.body-head.app-bnbdayer{
    color: #000000;
}

.body-head{
    background-color: rgba(255,255,255,1);
    margin: auto;
    width: 100%;
    height: calc(var(--height_head) + var(--safe-area-inset-top));
    position: fixed;
    top: 0px;
    z-index: 1990 !important;
    box-shadow : var(--box-shadow-head);
    
}
.body-head.show-menu{
    z-index: 2000 !important;
}
.body-head-background{
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0,0,0,0.2);
    z-index: 2000;
    top: 0px;
    left: 0px;
}

.body-head-sticky{
    transition-duration: 0.4s;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px 0px;
}

.prebodytag-background{
    position: fixed;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    background-color: #FFFFFF;
}

.body-content{
    margin: auto;
    max-width: 1100px;
    border: solid 0px transparent;
    left: 0;
    background-color: #FFFFFF;
    min-height: 75vh;
}



@media screen and (max-width: 600px){
            .body-head{
        color: var(--color-head-mobile);
        top: unset;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow : var(--box-shadow-head-mobile);
        height: var(--height_head);
        padding-top: unset;
    }
        .body-head.show-height{
        height: 0;
    }
    .body-head.show-z-index{
        z-index: 2002 !important;
    }
    .body-head.show-effect{
        transition: height 0.3s linear;
        height: var(--height_head) !important;
    }
    .body-head-background.show{
        display: block;
    }
    .body-head-sticky{
        transition-duration: unset;
    }
    
    .body-content{
        min-height: calc(var(--hi100) - calc(var(--topBarHeight) + var(--height_head)));
        padding-bottom: var(--height_head) !important;
    }
       
    .con-slide2{
        width: 100%;
        min-height: 100vh;
        box-shadow: rgb(0 0 0 / 60%) 0px -1px 4px 0px !important;
    }
    .con-slide2.slideLeft,
    .con-slide2.slideRight,
    .prebodytag.slideLeft,
    .prebodytag.slideRight{
        box-shadow: rgb(0 0 0 / 60%) 0px -1px 4px 0px !important;
        transition: transform 0.35s cubic-bezier(0.5, 0, 1, 1);
        pointer-events: none;
        touch-action: none;
    }
    .con-slide2.slideRight,
    .prebodytag.slideRight{
        transform: translateX(100vw);
    }
    .con-slide2.slideLeft,
    .prebodytag.slideLeft{
        transform: translateX(-100vw);
    }
    .prebodytag.slideRight .prebodytag-background.slideLeft,
    .prebodytag.slideRight .prebodytag-background{
        visibility: visible;
    }
    
}

.body-content-fullwidth{
    max-width: none;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
.body-foot{
    margin: auto;
    width: 100%;
    padding-bottom: var(--safe-area-inset-bottom);
}

.body-foot-content{
    width: 100%;
    margin: auto;
    max-width: 1100px;
    padding-top: 30px;
}


.about{
    padding: 20px 0px 30px 0px;
}

@media screen and (max-width: 600px){
    .about{
        padding: 10px 0px 0px 0px;
    }
    .body-foot{
        padding-bottom: 0px;
    }
}


/********************************/
/* FOTTER START */
/********************************/

.footer {
    font-family: Calibri;
    font-size: 16px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding: 10px;
    padding-top: 0px;
    text-align: center;
    color: #107a8a;
    bottom: 0px;
    width: 100%;
    margin: auto;
    max-width: 1100px;
}

.footer .foot-grid .item-fg-a {
  grid-area: cola;
}
.footer .foot-grid .item-fg-b {
  grid-area: colb;
}
.footer .foot-grid .item-fg-c {
  grid-area: colc;
}
.footer .foot-grid .item-fg-d {
  grid-area: cold;
  text-align: right !important;
  justify-self: end;
}
.footer .foot-grid > ul{
    text-align: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.footer .foot-grid{
    display: grid;
    grid-column-gap: 5%;
    grid-row-gap: 0px;
    grid-template-columns: minmax(0,max-content) minmax(0,max-content) minmax(0,max-content) minmax(0,100%);
    grid-template-rows: auto;
    grid-template-areas: "cola colb colc cold";
    justify-content: start;
    justify-items: start;
    font-family: HindSiliguri-Regular;
}


.footer .foot-grid .title{
    font-size: 16px;
    line-height: 18px;
    width: 100%;
    margin-bottom: 10px;
    color: #004E57;
    font-family: HindSiliguri-Regular;
}
.footer .foot-grid .item{
    color: #606060;
    font-size: 14px;
    width: max-content;
}
.footer .foot-grid .item.link{
    color: #555 !important;
}

@media screen and (max-width: 600px){
    
    .footer .foot-grid .title{
        font-size: 18px;
    }
    .footer .foot-grid .item-fg-d {
        margin-top: 20px;
        grid-area: cold;
        text-align: center !important;
        justify-self: center;
    }
    .footer .foot-grid{
        grid-column-gap: 0;
        grid-row-gap: 20px;
        grid-template-columns: 100%;
        grid-template-areas: 
            "cola"
            "colb"
            "colc"
            "cold";
    }
}



.footer > .menu-bottom {
    display: flex;
    justify-content: space-between;
    margin: auto;
    border: solid 0px;
    width:100%;
    margin: 5px 0px 20px 0px;
    padding-bottom: 3px;
    color: #004E57;
    font-family: 'HindSiliguri-Bold';
    font-size: 14px;
    border-bottom: solid 2px #ADADAD;
}
.footer > .menu-bottom .itemr.link{
    color: #606060 !important;
}
.footer > .menu-bottom > div > div {
    display: inline-block;
    transition-duration: 0.4s;
}
@media (hover: hover) {
    .footer .foot-grid .item.link:hover{
        color: #000 !important;
    }
}
.footer > .menu-bottom > div > div.iteml {
    margin: 0px 20px 0px 0px;
}
.footer > .menu-bottom > div > div.itemr {
    margin: 0px 0px 0px 20px;
}


.footer .social-box .item-sb-a{
    grid-area: a;
    width: 100%;
}
.footer .social-box .item-sb-b{
    grid-area: b;
    width: 100%;
}
.footer .social-box .item-sb-c{
    grid-area: c;
    width: 100%;
}
.footer .social-box img{
    width: 25px;
}

.footer .social-box{
    max-width: 200px;
    font-size: 30px;
    line-height: 30px;
    display: grid;
    align-items: center;
    align-content: center;
    justify-items: end;
    grid-template-areas: "a b c";
    padding-bottom: 10px;
    width: 100px;
    margin: auto 0px auto auto;
}
.footer .get-app-box img{
    margin-left: 5px;
    padding-bottom: 10px;
    width: 95px;
}

@media screen and (max-width: 600px){
    .footer {
        padding: 20px;
    }
    .footer > .menu-bottom {
        display: block;
        padding: 0px 0px 10px 0px;
        margin-bottom: 20px;
        border-bottom: solid 1px #CCCCCC;
    }
    .footer > .menu-bottom > div > div.itemr {
        margin: 0px 10px;
    }
    .footer .social-box{
        margin: auto;
    }
    
    .footer .get-app-box img{
        margin-left: 3px;
        margin-right: 3px;
        width: 95px;
    }
}



/* FOTTER END */
/********************************/

/********************************/
/* HEADER START */
/********************************/

.head-smart-banner{
    height: var(--safe-area-inset-top);
    background-color: #fff;
    z-index: 2021;
}

header {
    display: flex;
    justify-content: space-between;
    font-family: Calibri-bold;
    margin:auto;
    width:100%;
    padding: 0px 0px 0px 10px;
    max-width: 1200px;
    background-color: var(--background-color_head);
}
@media screen and (max-width: 600px){
    .head-smart-banner{
        height: 0px;
        background-color: #fff;
        z-index: 2021;
    }
    header {
        padding: 0px;
    }
}

header > .head-box {
    font-family: Calibri;
    font-size: 16px;
    width: 100% !important;
    padding: 0px 10px 0px 10px;
}

@media screen and (max-width: 600px){
    header > .head-box {
        font-size: 11px;
        padding: 0px;
    }
}
header > .head-box > .head-menu {
    display: table !important;
    width: 100% !important;
    border-spacing: 0px !important;
}


header > .head-box > .head-menu .logo{
    background-size: contain;
    background-repeat: no-repeat;
    height: var(--icon_bnb_height);
    margin-right: 8px;
    margin-top: 10px;
    cursor: pointer;
    width: 80px;
}
@media screen and (max-width: 600px){
    header > .head-box > .head-menu .logo{
        display: none !important;
    }
}

header > .head-box > .head-menu > .item {
    display: table-cell !important;
    vertical-align: middle !important;
    background-color: var(--background-color_head);
    z-index: 2020 !important;
}
header > .head-box > .head-menu > .search {
    display: table-cell !important;
    width: 100% !important;
    vertical-align: middle !important;
    background-color: var(--background-color_head);
    z-index: 2050 !important;
}
@media screen and (max-width: 600px){
    header > .head-box > .head-menu > .search {
        display: none !important;
    }
}
header > .head-box > .head-menu > .search > div .list,
header > .head-box > .head-menu > .item > div .list {
    display: grid !important;
    justify-content: center;
    margin: auto;
    width: 100%;
}

header > .head-box > .head-menu > .search > div .list > .list-elements,
header > .head-box > .head-menu > .item > div .list > .list-elements {
    
    list-style: outside none none !important;
    padding: 0px !important;
    margin: 0px !important;
    height: var(--height_head) !important;
    z-index: 2020 !important;
    background-color: var(--background-color_head);
    text-align: center;
    
    display: inline-flex !important;
    align-items: center;
    width: 100%;
}

header > .head-box > .head-menu > .search > div .list > .list-elements > li,
header > .head-box > .head-menu > .item > div .list > .list-elements > li{
    display: table-cell;
    vertical-align: middle;
    background-color: var(--background-color_head);
}

header > .head-box > .head-menu > .search > div .list > .list-elements > li > div.list-item,
header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item{
    display: grid;
    padding: 0px 15px 0px 15px;
    margin: 0px;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    height: var(--height_head) !important;
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    width: 100%;
    font-family: Calibri-bold;
}
header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item .item-icon{
    display: none;
}

@media (hover: hover) {
    header > .head-box > .head-menu > .search > div .list > .list-elements > li > div.list-item:hover{
        cursor: pointer;
        color: #107a8a;
    }
}

header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item-hover{
    cursor: pointer;
    color: #33a7b7;
    border-top: solid 2px transparent;
    border-bottom: solid 2px !important;
}

header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item-hover div.item-text{
    background: linear-gradient(315deg,#107a8a,#33a7b7);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
}



@media (hover: hover) {
    header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item:hover{
        cursor: pointer;
        color: #33a7b7;
        border-top: solid 2px transparent;
        border-bottom: solid 2px !important;
    }
    

}


header > .head-box > .head-menu > .search > div .list > .list-elements > li > div.list-item-hover{
    color: #4394CA;
}

header > .head-box > .head-menu > .search > div .list > .list-elements > li > div.list-item div,
header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item div{
    vertical-align: middle !important;
    white-space: nowrap !important;
    align-self: center;
}
.user-menu-box-list-item-center span.button-invert,
header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item div.button-invert{
    color: #FFF !important;
    background: linear-gradient(315deg,#004E57,#107a8a);
    border-radius: 100px;
    padding: 8px 15px;
    border: solid 2px #ffffff00;
}

header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item div.button-invert-invert{
    border-radius: 100px;
    padding: 5px 11px;
    border-radius: 8px;
    border: solid 2px #107a8a;
}
.user-menu-box-list-item-center span.button-invert,
header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item div.button:hover{
    border: solid 2px;
    padding: 3px 8px;
    border-radius: 100px;
}

header > .head-box > .head-menu > .search > div .list > .list-elements > li > div.list-item div.nodisplay{
    display: none;
}
header > .head-box > .head-menu > .search > div .list > .list-elements div.search-box{
    border: solid 1px;
    border-radius: 20px; 
    width: 200px; 
    height: 40px; 
    margin-left: 5px;
    transition-duration: 0.4s;
    cursor: pointer;
}
header > .head-box > .head-menu > .search > div .list > .list-elements div.search-box-large{
    width: 100%; 
}
.list-elements .list-item-dot{
    display: grid !important;
    align-content: center;
    height: var(--height_head) !important;
}
.list-elements .list-item-dot div{
    font-size: 24px;
}


@media screen and (max-width: 600px){
    .body-head.app-user{
        color: var(--color-head-mobile);
    }
    
    #main-body.app-user header > .head-box > .head-menu > .item > div .list > .list-elements > li{
        width: 25vw;
    }
    #main-body.app-bnbdayer header > .head-box > .head-menu > .item > div .list > .list-elements > li{
        width: calc(100vw / 3);
    }
    header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item{
        padding: 0px;
        margin: 1px 0px 0px 0px;
        padding-top: 5px;        
        vertical-align: middle !important;
        box-sizing: border-box !important;
        border-bottom: 2px solid transparent;
        border-top: solid 2px transparent;
        display: block;
        width: 100%;
        font-family: Calibri-Bold;
    }
    header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item .item-icon{
        display: block;
    }
    header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item .item-icon img{
        width: 30px;
        height: 30px;
    }
    header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item div{
        height: initial !important;
        line-height: initial !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }
    header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item-hover{
        border-top: solid 2px transparent !important;
        border-bottom: solid 2px transparent !important;
    }
    @media (hover: hover) {
        header > .head-box > .head-menu > .item > div .list > .list-elements > li > div.list-item:hover{
            border-top: solid 2px transparent !important;
            border-bottom: solid 2px transparent !important;
        }
    }
    .list-elements .list-item-dot{
        display: none !important;
    }
}


/* HEADER END */
/********************************/


.icon-rotates {
  -moz-transition: all 0.25s linear;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.rotate {
  -moz-transition: rotate(180deg);
  -webkit-transition: rotate(180deg);
  transform: rotate(180deg);
}
.rotate90 {
  -moz-transition: rotate(90deg);
  -webkit-transition: rotate(90deg);
  transform: rotate(90deg);
}
.user-menu-box {
    position:absolute;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    color: #107a8a;
    border: solid 0px;
    background: white;
    min-width: 350px;
    right: 0px;
    max-height: calc(100vh - var(--height_head)); 
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(calc(-100% - 1px));
    z-index: -1 !important;
    border-radius: 0px 0px 5px 5px;
}
.user-menu-box-open {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 50px 10px;
    transform: translateY(0%);
}
.user-menu-box-list {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding: 0px;
}
.user-menu-box-list-item {
}
.user-menu-box-list-item-clickable {
    position: relative;
    display: flex;
    -moz-box-align: center;
    align-items: center;
    flex: 1 1 0%;
    border: 0px none;
    padding: 16px 24px 16px 24px;
    border-bottom: solid 1px transparent;
}

@media (hover: hover) {
    .user-menu-box-list-item-clickable:hover {
        background-color: #F2F2F2;
        border-bottom: solid 1px #4394CA !important;
    }
}
.user-menu-box-list-item-left,
.user-menu-box-list-item-right {
    display: inline-flex;
    min-width: 24px;
    -moz-box-align: center;
    align-items: center;
    margin-right: 24px;
}
.user-menu-box-list-item-right {
    margin-right: 0px;
}
.user-menu-box-list-item-left img {
    width: 24px;
    height: 24px;
}
.user-menu-box-list-item-right img {
    width:auto;
    height:16px;
    top:0px;
}
.user-menu-box-list-item-center {
    flex: 1 1 0%;
}
@media screen and (max-width: 600px){
    .user-menu-box {
        font-size: 16px;
        min-width: 0px;
        width: 90vw;
        right: 0px;
        overflow-y: auto;
        transform: none;
        border-radius: 10px 0px 0px 0px;
    }
    .user-menu-box-open {
            }
    .menu-loggin .user-menu-box-list {
        transform: rotate(-180deg);
    }
    .menu-loggin .user-menu-box-list-item {
        transform: rotate(-180deg);
    }
    .user-menu-box-list-item-clickable {
        padding: 15px 5px 15px 20px;
    }
    .user-menu-box-list-item-left,
    .user-menu-box-list-item-right {
        min-width: 14px;
        margin-right: 20px;
    }
}




.title1 {
    font-family: BnbFont1;
    text-color: #000000;
    border:solid 0px;
    line-height: 40px;
    padding-top: 2px;
}
.title1 > h1 {
    font-size: 45px;
}
.title1 > h2{
    font-size: 22px;
}

.title2 {
    font-family: TitleFont;
    text-color: #666666;
    color: #666666;
    line-height: 40px;
    font-size: 48px;
    height: 100%;
}
.title3 {
    font-family: TitleFont;
    color: #666666;
    line-height: 120%;
    font-size: 30px;
    height: 100%;
}

@media screen and (max-width: 600px){
    .title3 {
        font-size: 26px;
    }
}




.link, .nolink,
.link:focus, .nolink:focus{
    fill: #107a8a;
    color: #107a8a;
    transition-duration: 0.4s;
    font-size: inherit;
    font-family: inherit;
}
.link.hover{
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.nolink{
    fill: #107a8a;
    color: #107a8a;
}
.link.disabled, .nolink.disabled{
    fill: #ADADAD;
    color: #ADADAD;
}
.link-help{         white-space: nowrap;
}

@media (hover: hover) {
    .link:hover{
        fill: #33a7b7;
        color: #33a7b7;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .link.disabled:hover{
        fill: #ADADAD;
        color: #ADADAD;
        cursor: default;
    }
}




.lang-curr-box{
    width: 700px !important;
}
.video-box{
    width: 90vw !important;
}

.lang-curr-grid .item-lcga{
  grid-area: lang;
}
.lang-curr-grid .item-lcgb {
  grid-area: curr;
}
.lang-curr-grid{
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: minmax(0, 60%) minmax(0, max-content);
    grid-template-rows: auto;
    grid-template-areas: "lang curr";
}
.lang-curr{
    font-family: Calibri;
}
.lang-curr .lang-item{
    padding: 0px;
    vertical-align: middle;
    border: solid 0px;
    height: 40px;
    width: 100%;
    cursor: pointer;
}

@media (hover: hover) {
    .lang-curr .lang-item:hover{
        text-color: #4394CA;
        color: #4394CA;
    }
}
.lang-curr .lang-item-txt{
    display: flex;
    align-items: center;
    top: 0px;
    height: 41px;
    margin: 0px 0px 0px 10px;
    width: 100%;
}

.lang-curr .symbol{
    border: solid 1px;
    border-radius: 50%;
    min-width: 25px;
    display: inline-block;
    text-align: center;
    padding: 0px 6px;
}


@media screen and (max-width: 600px){
    .lang-curr-box{
        width: 96vw !important;
    }
    
    .lang-curr.hidden{
        display: none;
    }
}




.lds-spam{
    position: absolute !important;
    margin: auto !important;
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    bottom: 0px !important;
    
    display: inline-block;
    font-size: 0px;
    vertical-align: middle;
}
.lds-spam.display{
}

.lds-normal{
    position: absolute !important;
    margin: auto !important;
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    bottom: 0px !important;
    
    width: 64px;
    height: 30px;
}

.lds-normal span{
    display: inline-block;
    position: absolute;
    left: 6px;
    width: 14px;
    background: #FFFFFF;
    border-radius: 7px;
    animation: lds-normal 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-normal-yellow span{
  background: #EFA800;
}
.lds-normal-blue span{
  background: #107a8a;
}
.lds-normal-aqua span{
  background: #107a8a;
}
.lds-normal-aquadark span{
  background: #004E57;
}
.lds-normal-green span{
  background: #4CAF50;
}
.lds-normal-black span{
  background: #000000;
}
.lds-normal span:nth-child(1){
  left: 0px;
  animation-delay: -0.36s;
}
.lds-normal span:nth-child(2){
  left: 25px;
  animation-delay: -0.24s;
}
.lds-normal span:nth-child(3){
  left: 49px;
  animation-delay: -0.12s;
}
    .lds-normal{
        width: 38px;
        height: 18px;
    }
    .lds-normal span{
        left: 4px;
        width: 8px;
        border-radius: 4px;
        animation: lds-mini 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    }
    .lds-normal span:nth-child(1){
        left: 0px;
    }
    .lds-normal span:nth-child(2){
        left: 15px;
    }
    .lds-normal span:nth-child(3){
        left: 29px;
    }
@keyframes lds-normal{
  0% {
    top: 0px;
    height: 30px;
  }
  50%, 100% {
    top: 8px;
    height: 14px;
  }
}
@keyframes lds-mini{
  0% {
    top: 0px;
    height: 20px;
  }
  50%, 100% {
    top: 5px;
    height: 9px;
  }
}



.lds-small{
  position: relative;
  width: 45px;
  height: 14px;
  margin: 0px 0px 0px 0px;
}
.lds-small span{
  display: inline-block;
  position: absolute;
  left: 6px;
  width: 10px;
  background: #FFFFFF;
  border-radius: 5px;
  animation: lds-small 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-small-yellow span{
  background: #EFA800;
}
.lds-small-blue span{
  background: #107a8a;
}
.lds-small-green span{
  background: #4CAF50;
}
.lds-small span:nth-child(1){
  left: 0px;
  animation-delay: -0.36s;
}
.lds-small span:nth-child(2){
  left: 18px;
  animation-delay: -0.24s;
}
.lds-small span:nth-child(3){
  left: 36px;
  animation-delay: -0.12s;
}
@keyframes lds-small{
  0% {
    top: 0px;
    height: 20px;
  }
  50%, 100% {
    top: 5px;
    height: 10px;
  }
}


.lds-star{
    background-color:rgba(255,255,255,0.7);
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    margin: auto;
    z-index: 10;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
:root {
    --lds-height: 70px;
}
.lds-star::after{
    content: " ";
    border-radius: 50%;
    background-color: rgba(255,255,255,1);
    margin: auto;
    display: inline;
    background-image: url('https://www.bnbdays.com/resources/images/loading2.svg?v=950');
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    height: var(--lds-height);
    max-height: 100%;
    width: var(--lds-height);
}


.div-flags button{
    cursor: pointer;
}
.flag {
    width: 25px;
    height: 25px;
    top: 2px;
}
.flag.flag-es {
    background: no-repeat;
}
.dropdown-menu-flags{
    border-radius: 0 !important;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 260px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}
.open > .dropdown-menu-flags {
    display: block;
}
.dropdown-menu-flags li {
    font-size: 14px;
    font-family: Calibri;
    cursor: pointer;
}
.dropdown-menu-flags li.divider {
    height: 2px;
    background-color: #ccc;
    margin: 4px;
    width: 95%;
}
.dropdown-menu-flags li a {
    text-decoration: none;
    bottom: 5px;
}
.dropdown-menu-flags li img {
    margin-left: 4px;
}

@media (hover: hover) {
    .dropdown-menu-flags li:hover {
        background-color: #ccc;
    }
}
.dropdown-menu-flags li.focus {
    background-color: #ccc;
}

#button-flags:focus{
    border: solid 1px;
}
.message-box{
    max-width: 1100px;
    margin: auto;
    position: fixed;
    top: calc(20px + var(--safe-area-inset-top));
    z-index: 2101;
    font-family: Calibri;
    display: grid;
    justify-items: center;
    left: 0px;
    right: 0px;
    width: 98%;
    margin: auto;
}
.message-box.float{
    max-width: 600px;
}
.message-box.permanent *{
    cursor: auto !important;
}

@media screen and (max-width: 600px){
    .message-box{
        top: 0px;
        position: fixed;
        top: calc(2vw + var(--safe-area-inset-top));
        width: 96%;
        right: 0px;
        left: 0px;
        margin: 5px auto 0px auto;
        padding-bottom: 0px;
    }
    .message-box.bg-pp{
    }
}

.message-box.relative,
.message-box.relative2{
    position: relative;
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 0;
    margin: 0px;
    overflow: visible;
    z-index: 1;
}
.message-box .row{
    content: " ";
    display: table;
    width: 100%;
    opacity: 1;
    margin: auto;
    animation: 0.5s appear-msg-box;
    animation-fill-mode: forwards;
    overflow: hidden;
    transform: translateY(calc(-100% - 100px));
}
.message-box.relative .row{
    cursor: default;
    animation: none;
    opacity: 1;
    width: 100%;
    transform: unset;
}
.message-box.relative2 .row{
    cursor: default;
    animation: none;
    opacity: 1;
    width: 100%;
    border: solid 0px;
    transform: unset;
    box-shadow: none !important;
}

@keyframes appear-msg-box {
    0% {
        transform: translateY(calc(-100% - 100px));
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes disappear-msg-box {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-100% - 100px));
    }
}


.message-box .item-msga{
    grid-area: icon;
    align-self: start;
    justify-self: left;
}
.message-box .item-msgb{
    grid-area: title;
    text-align: left;
}
.message-box .item-msgc{
    grid-area: body;
    text-align: left;
}
.message-box .item-msgc.body{      padding-top: 10px;
}
.message-box .item-msgd{
    grid-area: button;
    text-align: right !important;
    width: 100%;
    display: grid;
    justify-items: end;
    justify-content: end;
    grid-column-gap: 10px;
    align-self: end;
}
.message-box .item-msgd.msgbutton1{
    grid-template-columns: minmax(0,max-content);
}
.message-box .item-msgd.msgbutton2{
    grid-template-columns: minmax(0,auto) minmax(0, auto);
}

@media screen and (max-width: 600px){
    .message-box .item-msgd.msgbutton2{
        grid-template-columns: 1fr 1fr;
    }
}

    
}
.message-box .msg-close{
    cursor: pointer;
}

.message-box .row-message .message-grid{
    padding: 15px 3% 15px 3%;
    display: grid;
    grid-template-columns: 40px minmax(0, 100%) max-content;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "icon title button"
        "body body button";
    align-items: center;
}

.message-box .row-message{
    display: block;
    border-radius: 10px;
    margin: 5px 0px 5px 0px;
    position: absolute;
    transition: all 0.3s ease;
        box-shadow: transparent 0px 0px 0px 1px, rgb(0 0 0 / 49%) 0px 0px 100px 14px, rgb(0 0 0 / 44%) 0px 2px 4px !important;
    background-color: rgb(255 255 255 / 80%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}



.message-box.relative .row-message,
.message-box.relative2 .row-message{
    border-radius: 8px !important;
    position: relative !important;
    box-shadow: transparent 0px 0px 0px 1px, transparent 0px 0px 0px 4px, rgb(0 0 0 / 28%) 0px 2px 4px !important;
}

:root {
    --searchMapUpFromBottom: 150;
    --row-message-top-5: 20px;
    --row-message-top-4: 14px;
    --row-message-top-3: 9px;
    --row-message-top-2: 5px;
    --row-message-top-1: 2px;
    --row-message-top-0: 0px;
}
.message-box.msg-box-count-0{
    transform: translateY(calc(-1 * var(--row-message-top-5)));
}
.message-box.msg-box-count-1{
    transform: translateY(calc(-1 * var(--row-message-top-5)));
}
.message-box.msg-box-count-2{
    transform: translateY(calc(-1 * var(--row-message-top-4)));
}
.message-box.msg-box-count-3{
    transform: translateY(calc(-1 * var(--row-message-top-3)));
}
.message-box.msg-box-count-4{
    transform: translateY(calc(-1 * var(--row-message-top-2)));
}
.message-box.msg-box-count-5, .message-box.msg-box-count-6{
    transform: translateY(calc(-1 * var(--row-message-top-1)));
}
.message-box .row-message.sort_5.sort_4.sort_3.sort_2.sort_1.sort_0{
    margin-top: var(--row-message-top-0);
    box-shadow: none !important;
}
.message-box .row-message.sort_5.sort_4.sort_3.sort_2.sort_1{
    margin-top: var(--row-message-top-1);
    box-shadow: none !important;
}
.message-box .row-message.sort_5.sort_4.sort_3.sort_2{
    margin-top: var(--row-message-top-2);
    box-shadow: none !important;
}
.message-box .row-message.sort_5.sort_4.sort_3{
    margin-top: var(--row-message-top-3);
}
.message-box .row-message.sort_5.sort_4{
    margin-top: var(--row-message-top-4);
}
.message-box .row-message.sort_5{
    margin-top: var(--row-message-top-5);
}
.message-box .row-message.sort_5{
    max-width: 100%;
}
.message-box .row-message.sort_4{
    max-width: 95%;
}
.message-box .row-message.sort_3{
    max-width: 91%;
}
.message-box .row-message.sort_2{
    max-width: 88%;
}
.message-box .row-message.sort_1{
    max-width: 86%;
}
.message-box .row-message.sort_0{
    max-width: 85%;
}

.message-box .row.sort_5.sort_4{
    animation: 1s background-msg-box !important;
    animation-fill-mode: forwards !important;
    height: max-content;
    content: " ";
}
.message-box .row.sort_5.background{
    animation: unset;
}
.message-box .row.sort_5{
    transform: translateY(0px);
}

@keyframes background-msg-box {
    0% {
        height: 120px;
    }
    100% {
        height: 60px;
    }
}
.row-message.light{
    background-color: #FAFAFA;
    border: solid 1px #949494;
    color: #3a3a3a;
    font-family: Calibri-Medium;
}
.row-message.normal{
    background-color: #e5e5e5;
    border: solid 1px #949494;
    color: #3a3a3a;
}
.row-message.message{
    color: #3a3a3a;
}
.row-message.ok{
    background-color: #EAF8EB;
    border: solid 1px #4CAF50;
    color: #008105;
}
.row-message.error{
    background-color: #FFE2DD;
    border: solid 1px #D5200D;
    color: #D5200D;
}
.row-message.warning{
    background-color: #e5e5e5;
    border: solid 1px #949494;
    color: #3a3a3a;
}
.row-message.msgnote{
    background-color: #E5EDEF;
    border: solid 1px #004E57;
    color: #004E57}
.row-message .message-grid div.icon{
    display: grid;
    vertical-align: middle;
}
.row-message .message-grid div.icon img{
    width: 30px;
    height: 30px;
}
.row-message div.msg-close{
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 6px;
}
.row-message.no-close div.msg-close{
    display: none;
}
.row-message div.msg-close img.close{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.message-box .row-message .message-grid .title{
    font-family: Calibri-bold;
}
.message-box .row-message .message-grid .body{
}
.message-box .row-message .message-grid .button{
    align-items: center;
    justify-content: center;
    background-color: #ffffff55 !important;
    min-height: 35px !important;
}

@media screen and (max-width: 600px){
    
    .message-box.bg-pp{
        top: calc(var(--safe-area-inset-top) + 10px);
    }
    .message-box.relative{
        padding: 5px 0px 0px 0px;
        background-color: #FFFFFF;
    }
    .message-box.relative2{
        padding: 5px 0px 0px 0px;
        background-color: #FFFFFF;
    }
    .message-box .row-message.close .item-msgb {
        padding-right: 20px;
    }
    .message-box .item-msgc.body{
        padding-top: 5px;
    }
    .message-box .row-message .item-msgd {
        margin-top: 10px;
        text-align: center;
        padding-right: 0px;
        justify-items: center;
    }
    .message-box .row-message{
        border-radius: 8px;
        margin: 0px 0px 5px 0px;
        min-height: 70px;
        display: grid !important;
        align-items: center;
    }
    .message-box .row-message .message-grid{
        padding: 16px 15px 15px 15px;
        grid-template-columns: 25px minmax(0, 1fr);
        grid-template-areas: 
        "icon title"
        "body body"
        "button button";
    }
    .row-message .message-grid div.icon img{
        width: 25px;
        height: 25px;
        margin-top: 2px;
    }
    .row-message div.msg-close{
        right: 0px;
        top: 0px;
    }
    .row-message div.msg-close img.close{
        width: 16px;
        height: 16px;
    }
    .message-box .row-message .message-grid .body{
        font-size: 15px;
    }
    .message-box .row-message .message-grid .button{
        width: 100%;
        height: 100%;
        min-height: unset !important;
    }
    
}

@media screen and (max-width: 900px){
    .message-box.relative .row-message .message-grid,
    .message-box.relative2 .row-message .message-grid{
        padding: 16px 15px 15px 15px;
        grid-template-columns: 25px minmax(0, 1fr);
        grid-template-areas: 
        "icon title"
        "body body"
        "button button";
    }
    .message-box.relative .row-message .message-grid div.icon img,
    .message-box.relative2 .row-message .message-grid div.icon img{
        width: 25px;
        height: 25px;
        margin-top: 2px;
    }
    .message-box.relative .row-message div.msg-close,
    .message-box.relative2 .row-message div.msg-close{
        right: 0px;
        top: 0px;
    }
    .message-box.relative .row-message div.msg-close img.close,
    .message-box.relative2 .row-message div.msg-close img.close{
        width: 16px;
        height: 16px;
    }
    .message-box.relative  .row-message .message-grid .body,
    .message-box.relative2 .row-message .message-grid .body{
        font-size: 15px;
    }
    .message-box.relative  .row-message .message-grid .button,
    .message-box.relative2 .row-message .message-grid .button{
        width: 100%;
        height: 100%;
        min-height: unset !important;
    }
}

@media screen and (max-width: 600px) and (hover: none) {
    .row-message div.msg-close img.close{
        display: none;
    }
}
    







.profile-trash {
    right: -20px;
    bottom: 0px;
    width: 30px;
    position: absolute;
    padding: 5px 3px 5px 3px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 10px;
}

@media (hover: hover) {
    .profile-trash:hover {
        cursor: pointer;
        border: solid 1px gray;
    }
}


/********************************/
/* PROGRESS BAR                 */
/********************************/

.linear-progress{
    background: #33a7b7;
    height: 6px;
    position: fixed;
    width: 100%;
    margin: 0 auto;
    margin-top: 0;
    overflow: hidden;
    z-index: 10000;
    transition-duration: 1s;
}
    
.bar{
    position: absolute;
    background: #004E57;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
}
.bar1{
    animation: progressLinearMovement 2.5s infinite;
    animation-delay: 0;
}
.bar2{
    left: -100%;
    animation: progressLinearMovement 2.5s infinite;
    animation-delay: .7s;
}
    
@keyframes growBar1{
    0%{
        animation-timing-function: linear;
        transform: scaleX(.1);
    }
    36.6%{
        animation-timing-function: cubic-bezier(.33473,.12482,.78584,1);
        transform: scaleX(.1);
    }
    69.15%{
        animation-timing-function: cubic-bezier(.22573,0,.23365,1.37098);
        transform: scaleX(.83);
    }
    100%{
        transform: scaleX(.1);
    }
}
        
@keyframes moveBar1{
    0%{
        left: -105.16667%;
        animation-timing-function: linear;
    }
    20%{
        left: -105.16667%;
        animation-timing-function: cubic-bezier(.5,0,.70173,.49582);
    }
    69.15%{
        left: 21.5%;
        animation-timing-function: cubic-bezier(.30244,.38135,.55,.95635);
    }
    100%{
        left: 95.44444%;
    }
}

@keyframes start{
    from{
        max-height: 0;
        opacity: 0;
    }
    to{
        max-height: 20px;
        opacity: 1;
    }
}
        
@keyframes end{
    from{
        max-height: 0;
        opacity: 0;
    }
    to{
        max-height: 2px;
        opacity: 1;
    }
}
        
@keyframes progressLinearMovement{
    0%{
        left: -100%;
    }
    50%{
        left: 100%;
    }
    100%{
        left: 100%;
    }
}


@media screen and (max-width: 600px) {
    .linear-progress{
        background: linear-gradient(360deg,#ffffff00,#33a7b7,#33a7b7,#33a7b7);
        height: calc(var(--safe-area-inset-top) + 4px);
    }
    .bar{
        background: linear-gradient(360deg,#ffffff00,#004E57,#004E57,#004E57);
        height: calc(var(--safe-area-inset-top) + 4px);
    }
}

/********************************/
/* MAPS                 */
/********************************/
.mapwindow{
    margin: 20px;
}
.mapwindow-title{
    font-family: Calibri;
    font-size: 16px;
    margin-bottom: 10px;
}
.mapwindow-links span.link{
    margin: 0px 20px 0px 0px;
}

/********************************/
/* CONFIRM BOX                */
/********************************/
.confirmbnb-box{
    width: 550px;
    min-height: 0px !important;
    padding: 30px !important;
}
@media screen and (max-width: 600px) {
    .confirmbnb-box{
        padding: 45px 15px 25px 15px !important;
    }
    .confirmbnb-box .close-popup-confirmbnb{
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        left: inherit !important;
    }
}
.confirmbnb-box-title{
    color: #606060 !important;
    text-align: center;
}
.confirmbnb-box-text{
    color: #606060 !important;
    text-align: center;
    font-size: 22px !important;
}




.clipboard{
    position: fixed;
    top: calc(-100vh - 1010px);
    left: calc(-100vw - 2010px);
    width: 2000px;
    height: 1000px;
    font-size: 1px;
    line-height: unset;
}


.blink_me {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.icon-count{
    position: absolute;
    background-color: #c70000;  /* #da0000; #ffaa00; */
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;    margin: auto;
    min-width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    text-align: center !important;
    z-index: 1 !important;
    line-height: 13px !important;
    font-size: 14px !important;
    color: white !important;
    font-family: Calibri-bold !important;
    display: grid !important;
    padding: 0px 3px;
}
.icon-count.image{
    background-color: inherit;
    border-radius: inherit;
    padding: 0px !important;
}
.icon-count div{
    text-shadow: 0px 0px 3px #888;
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;    margin: auto;
    text-align: center;
    line-height: 0px;
    padding: 0px 3px;
    
}

.dashboard-box .icon-count, .section-head .icon-count, .head-button .icon-count{
    min-width: 23px !important;
    height: 23px !important;
    font-size: 16px !important;
    font-family: Calibri-bold !important;
}

.dashboard-box .icon-summary{
    position: absolute;
    display: grid;
    min-width: 23px !important;
    height: 25px !important;
    color: #004E57;
    font-size: 16px;
    text-shadow: none;
    font-family: HindSiliguri-Bold;
    line-height: unset;
    top: 10px;
    right: 10px;
    background-color: #ffffff;
    padding: 0px 10px 0px 11px;
    border-radius: 50px;
    box-shadow: 0px 0px 7px 0px #ccc;
}
.icon-summary > div{
    display: grid;
    align-items: center;
    justify-items: center;
}

.head-menu .icon-count{
    min-width: 24px !important;
    height: 23px !important;
    margin-right: 5px;
    margin-top: -35px;
    right: 0px;
}

.user-menu-box-list .icon-count{
    min-width: 22px !important;
    height: 22px !important;
    margin: auto;
    top: -15px;
    right: -15px;
    font-size: 13px !important;
}


.section-head .icon-count{
    background-color: #ffaa00;
    top: 0px !important;
    bottom: 0px ! important;
    right: 0px !important;
    position: relative;
}

@media screen and (max-width: 600px){
    .icon-count{
        min-width: 20px !important;
        height: 20px !important;
    }
    .dashboard-box .icon-count, .section-head .icon-count, .head-button .icon-count{
        min-width: 22px !important;
        height: 22px !important;
        line-height: 12px !important;
        font-size: 15px !important;
    }
    .dashboard-box .icon-summary{
        top: unset;
        bottom: 10px;
        right: 5px;
    }
    .head-menu .icon-count{
        margin: auto calc(50% + 5px);
        margin-top: -5px;
        left: 0px;
        right: unset;
    }
    .user-menu-box-list .icon-count{
        min-width: 20px !important;
        height: 20px !important;
        margin: auto;
        top: -15px;
        right: -15px;
    }
}
.head-button .icon-count{
    top: -15px !important;
    right: -15px !important;
    bottom: unset !important;
    position: absolute;
    min-width: 22px !important;
    height: 22px !important;
    background-color: #ffaa00;
}




.help-whatsapp {
    border-radius: 50%;
    bottom: 20px;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
    position: fixed;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 999;
    box-shadow: 1px 1px 10px 0px #d7d7d7;
    background-image: url('https://www.bnbdays.com/resources/images/icon_contact.svg?v=950');
    background-size: 66%;
    background-color: #107a8a;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width: 600px){
    .help-whatsapp {
        bottom: calc(var(--height_head) + 10px);
        right: 5px;
        width: 50px;
        height: 50px;
    }
}



/********************************/
/* PAGINATION                   */
/********************************/
.pagination-grid .item-a{
  grid-area: button;
  text-align: left;
}
.pagination-grid .item-b {
  grid-area: text;
  text-align: left;
}
.pagination-grid .item-c {
  grid-area: pages;
}
.pagination-grid{
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: max-content minmax(0, 100%) max-content;
    grid-template-rows: auto;
    grid-template-areas: 
        "button text pages";
    align-items: center;
}
.pagination {
    list-style-type: none;
    padding: 10px 0;
    display: inline-flex;
    justify-content: space-between;
    box-sizing: border-box;
    vertical-align: middle;
}

@media (hover: hover) {
    .pagination:hover li.item{
        opacity: 0.5;
    }
}
.pagination.right li{
    margin: 0px 0px 0px 10px;
}
.pagination.left li{
    margin: 0px 10px 0px 0px;
}
.pagination li {
    box-sizing: border-box;
    min-width: 33px;
    height: 33px;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
    border-radius: 0px;
    color: #555;
    border: solid 1px #c0c0c0;
    border-radius: 6px;
}
.pagination li span {
    box-sizing: border-box;
    padding: 8px;
    text-decoration: none;
}

@media (hover: hover) {
    .pagination li:hover {
        opacity: 1 !important;
        border: solid 1px #107a8a;
        cursor: pointer;
    }
}
.pagination .next span, .pagination .prev span {
    text-transform: uppercase;
    font-size: 12px;
}
.pagination li.currentpage {
    border: solid 1px #107a8a;
    color: #107a8a;
    font-family: Calibri-bold;
}

@media screen and (max-width: 600px){
    .pagination-grid .item-a{
        grid-area: button;
        text-align: left;
    }
    .pagination-grid .item-b {
        grid-area: text;
        text-align: left;
    }
    .pagination-grid .item-c {
        grid-area: pages;
    }
    .pagination-grid{
        display: grid;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-columns: minmax(0,max-content) minmax(0,100%);
        grid-template-rows: auto;
        grid-template-areas: 
            "button text"
            "pages pages";
        align-items: center;
    }
    .pagination li {
        min-width: 30px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
    }
}

/********************************/



/********************************/
/* CHECKCROSS                   */
/********************************/


.checkcross *{
    text-align: left;
}
.checkcross.big *{
    font-size: 16px !important; }
.checkcross.normal *{
    font-size: 12px !important;
}
.checkcross.small *{
    font-size: 9.8px !important;
}
.checkcross.vsmall *{
    font-size: 7.4px !important;
}
.checkcross label.toggle-item {
  width: 6.24em;
}
.checkcross.vsmall label.toggle-item {
  width: 5.5em;
}

.checkcross *:before, .checkcross *:after {
  content: "";
  position: absolute;
}
.checkcross input {
  height: 10px;
  width: 10px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  display: none;
}
.checkcross.toggle {
    line-height: 0px;
    
}
.checkcross label.toggle-item {
  background: #dfdfdf;
  height: 3em;
  display: inline-block;
  border-radius: 50px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  border: solid 1px transparent;
}
.checkcross label.aqua.toggle-item,
.checkcross label.blue.toggle-item {
  background: #ffffff;
  border: solid 1px #d6d6d6;
}
.checkcross label.toggle-item:before {
  display: block;
  transition: all 0.2s ease;
  width: 2.3em;
  height: 2.3em;
  top: 0.25em;
  left: 0.25em;
  border-radius: 2em;
  border: 2px solid #88cf8f;
  transition: 0.3s ease;
}
.checkcross label:before {
  content: none;
}
.checkcross .check {
  border-radius: 50%;
  position: absolute;
  background: #8bc34a; 
  border-radius: 50%;
}

.checkcross.big input:checked + label .check, .checkcross.big .check {
    left: 3.4em;
    background: #8bc34a;
}
.checkcross.big .check {
    border-radius: 50%;
    position: absolute;
    background: #c34a4a; 
    border-radius: 50%;
    transition: 0.4s ease;
    width: 2.5em;
    height: 2.5em;
    top: 0.17em;
    left: 0.17em;
}
.checkcross.normal input:checked + label .check, .checkcross.normal .check {
    left: 3.3em;
    background: #8bc34a;
}
.checkcross.normal .check {
    border-radius: 50%;
    position: absolute;
    background: #c34a4a; 
    border-radius: 50%;
    transition: 0.4s ease;
    width: 2.5em;
    height: 2.5em;
    top: 0.18em;
    left: 0.3em;
}
.checkcross.small input:checked + label .check, .checkcross.small .check {
    left: 3.4em;
    background: #8bc34a;
}
.checkcross.small .check {
    border-radius: 50%;
    position: absolute;
    background: #c34a4a; 
    border-radius: 50%;
    transition: 0.4s ease;
    width: 2.3em;
    height: 2.3em;
    top: 0.25em;
    left: 0.25em;
}
.checkcross.vsmall input:checked + label .check, .checkcross.vsmall .check {
    left: 2.71em;
    background: #8bc34a;
}
.checkcross.vsmall .check {
    border-radius: 50%;
    position: absolute;
    background: #c34a4a; 
    border-radius: 50%;
    transition: 0.4s ease;
    width: 2.3em;
    height: 2.3em;
    top: 0.25em;
    left: 0.25em;
}


.checkcross .check:before, .checkcross .check:after {
  border-radius: 10px;
  background: #fff;
  transition: 0.4s ease;
}

.checkcross .check {
    background: #c34a4a;
}


.checkcross .check.aqua,
.checkcross .check.blue {
    background: #d6d6d6;
}
.checkcross input:checked + label .check.blue {
  background: #107a8a;
}

.checkcross input:checked + label .check.aqua {
  background: #107a8a;
}




.checkcross.big .check:before, .checkcross.big .check:after {
  height: 4px;
}
.checkcross.big .check:before {
  width: 27px;
  transform: rotate(-45deg) translate(-8px, 18px);
}
.checkcross.big .check:after {
  width: 27px;
  transform: rotate(45deg) translate(18px, 8px);
}
.checkcross.big input:checked + label .check:before {
  width: 25px;
  transform: rotate(-45deg) translate(-6px, 20px);
}
.checkcross.big input:checked + label .check:after {
  width: 10px;
  transform: rotate(45deg) translate(20px, 11px);
}

.checkcross.normal .check:before, .checkcross.normal .check:after {
  height: 3px;
}
.checkcross.normal .check:before {
  width: 21px;
  transform: rotate(-45deg) translate(-7px, 13px);
}
.checkcross.normal .check:after {
  width: 21px;
  transform: rotate(45deg) translate(13px, 7px);
}

.checkcross.normal input:checked + label .check:before {
  width: 20px;
  transform: rotate(-45deg) translate(-5px, 16px);
}
.checkcross.normal input:checked + label .check:after {
  width: 10px;
  transform: rotate(45deg) translate(15px, 10px);
}

.checkcross.small input:checked + label .check, .checkcross.small .check {

}
.checkcross.vsmall input:checked + label .check, .checkcross.vsmall .check {

}

/********************************/

.text.warning{
    line-height: var(--myheight);
    font-size: var(--myfontsize);
}
.text.warning img{
    width:var(--myheight);
    font-size: 0px;
    top: calc(calc(calc(var(--myheight) / 2) - calc(var(--myfontsize) / 2)) + 2px);
}


/********************************/
/*  LIGHTGALLERY.JS  */
/********************************/

.lg-backdrop.in {
    opacity: 0.5 !important;
    z-index: 3000 !important;
}
.lg-outer.lg-visible {
    z-index: 3001 !important;
    font-family: Calibri !important;
}
.lg-outer *{
    position: unset;
    margin: unset;
    padding: unset;
    letter-spacing: unset;
}
.lg-actions .lg-next, .lg-actions .lg-prev{
    height: 100vh !important;
    top: 0px !important;
    font-size: 50px !important;
    margin-top: 0px !important;
}
.lg-actions .lg-prev {
    left: 0px !important;
}
.lg-actions .lg-next {
    right: 0px !important;
}

.lg-thumb.group{
    margin: auto !important;
}
.lg-outer .lg-thumb-outer{
    background-color: rgba(0,0,0,.45) !important;
}
.lg-outer .lg-toggle-thumb{
    background-color: inherit !important;
    right: 0px !important;
}
.lg-outer .lg-close.lg-icon{
    font-size: 50px !important;
}
.lg-outer .lg-sub-html{
    font-size: 30px !important;
}

.lg-toolbar{
    padding-top: var(--safe-area-inset-top) !important;
}

@media screen and (max-width: 600px){
    .lg-actions .lg-next, .lg-actions .lg-prev{
        font-size: 20px !important;
    }
    .lg-outer .lg-sub-html{
        font-size: 16px !important;
        padding-bottom: var(--safe-area-inset-bottom);
    }
    .lg-outer.lg-thumb-open  .lg-sub-html{
        padding-bottom: 0px !important;
        bottom: calc( 100px + var(--safe-area-inset-bottom)) !important;
    }
    .lg-thumb-outer{
        height: calc( 100px + var(--safe-area-inset-bottom)) !important;
        padding-bottom: var(--safe-area-inset-bottom) !important;
    }
}

/********************************/
/*  CHECKMARK ANIMATION */
/********************************/
.checkmark {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  stroke-width: var(--stroke-width);
  stroke-miterlimit: 10;
  margin: 10% auto;
}

.ok > .checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: var(--stroke-width);
  stroke-miterlimit: 10;
  stroke: #4CAF50;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.ok > .checkmark__check {
  stroke: #4CAF50;
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.nook > .checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: var(--stroke-width);
  stroke-miterlimit: 10;
  stroke: #D5200D;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.nook > .checkmark__check {
  stroke: #D5200D;
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
/********************************/

/********************************/
/*  SMALL POPUP*/
/********************************/

.user-new-box .close-popup{
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 1;
}
.user-new-box .close-popup.left{
    left: 20px;
    right: unset;
}
.user-new-box .close-popup img{
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
}

@media screen and (max-width: 600px){
    .user-new-box .close-popup{
        right: 10px;
        top: 10px;
    }
    .user-new-box .close-popup.left{
        left: 10px;
        right: unset;
    }
}



/********************************/
/*  HOME COOKIES */
/********************************/
.cookie-popup{
    position: absolute;
    bottom: 40px;
    left: 0px;
    right: 0px;
    z-index: 2100;
    margin: auto !important;
    padding: 0px !important;
    height: max-content;
    width: 100%;
}
.cookie-popup > div {
    margin: 0px auto 0px auto !important;
    padding: 30px;
    min-height: 0px;
    max-height: calc(calc(var(--hi100) - var(--smartBannerHeight)) - 0px);
    border-radius: 10px;
}
.cookie-config-img > img{
    width: 150px;
    margin-left: 20px;
    margin-right: 50px;
    max-width: 16vw;
}
.cookie-config-box{
    width: 90% !important;
    box-shadow: rgb(0 0 0 / 30%) 0 0 0 1000px !important;
    max-height: var(--hi100);
    overflow: auto;
    max-width: 1000px;
    color: black;
    position: relative;
    min-height: 300px;
    background-color: #FFF;
    padding: 50px;
    font-size: 16px;
}

.cookie-config-grid-box{
    padding: 0px 20px;
}
.cookie-config-grid-box.open{
    background-color: #f8f8f8;
    padding: 20px;
    margin: 10px 0px;
}
.cookie-config-grid .item-ccg-a{
    grid-area: type;
}
.cookie-config-grid .item-ccg-b{
    grid-area: configall;
    justify-self: end;
}
.cookie-config-grid .item-ccg-c{
    grid-area: text;
}
.cookie-config-grid .item-ccg-d{
    grid-area: configcustom;
}
.cookie-config-grid{
    width: 100%;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "type configall"
        "text text"
        "configcustom configcustom";
    align-items: center;
    
}

.cookie-config-grid .item-ccg-a.title{
    grid-area: type;
    font-size: 18px;
    font-family: 'Calibri-bold';
    cursor: pointer;
}
.cookie-config-grid.subgrid{
    margin: auto;
    border-top: solid 1px #e2e2e2;
    padding: 10px 0px 10px 0px;
    grid-row-gap: 0px;
}

@media screen and (min-width: 601px) and (max-width: 800px){
    .cookie-config-box > div{
        --sgt-template-columns: 0px 100% !important;
    }
    .cookie-config-img{
        display: none;
    }
}
@media screen and (max-width: 600px){
    .cookie-popup{
        top: unset;
        bottom: calc(var(--safe-area-inset-bottom) + 20px);
    }
    .cookie-config-img > img{
        margin-left: auto;
        margin-right: auto;
        max-width: 150px;
    }
    .cookie-config-box{
        width: 92vw !important;
    }
    .cookie-config-grid-box{
        padding: 0px 5px;
    }
    .cookie-config-grid-box.open{
        background-color: #f8f8f8;
        padding: 5px;
        margin: 5px 0px;
    }
}



/********************************/
/*  HOME SHARED */
/********************************/

.item-share {
    vertical-align: top;
    height: 100%;
    border: solid 1px #DDDDDD;
    padding: 10px 0px 10px 0px;
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
}

@media (hover: hover) {
    .item-share:hover {
        border: solid 1px #888;
        background-color: #f8f8f8;
    }
}
.share-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    padding: 10px;
    text-align: left;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    column-gap: 15px;
    row-gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.share-grid img{
    width: 40px;
}


.item-share-1{
    grid-area: icon;
    justify-self: center;
    align-self: center;
    line-height: 0px;
}
.item-share-2{
    grid-area: text;
    justify-self: left;
    align-self: center;
    font-size: 20px;
}
.item-share-grid {
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-areas: 
        "icon text";
}


/********************************/
/*  SWIPERFRJ */
/********************************/
.swipeAnimationNone{
    transition: none !important;
}
.swipeAnimation{
    transition: transform var(--swipeAnimationTime) ease-out !important;
}
.swipeAnimationState0{
    transition: transform var(--swipeAnimationTimeState0) ease-out !important;
}
.swipeAnimationHeight{
    transition: height var(--swipeAnimationTime) ease-out !important;
}
.swipeAnimationState0Height{
    transition: height var(--swipeAnimationTimeState0) ease-out !important;
}

.pointer{
    cursor: pointer;
}

.row{
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.row::after, .row::before{
    display: table;
}

.col{
    float: left;
    min-height: 1px;
}
.col-left{
    text-align: left;
}
.col-center{
    text-align: center;
}
.col-right{
    text-align: right;
}

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

.col-0{
    width: 0px;
    display:none;
}
.col-2{
    width: 2%;
    float: left;
    min-height: 1px;
}
.col-2coma5{
    width: 2.5%;
    float: left;
    min-height: 1px;
}
.col-4{
    width: 4%;
    float: left;
    min-height: 1px;
}
.col-5{
    width: 5%;
    float: left;
    min-height: 1px;
}
.col-10{
    width: 10%;
    float: left;
    min-height: 1px;
}
.col-15{
    width: 15%;
    float: left;
    min-height: 1px;
}
.col-20{
    width: 20%;
    float: left;
    min-height: 1px;
}
.col-30{
    width: 30%;
    float: left;
    min-height: 1px;
}
.col-33{
    width: 33.333333%;
    float: left;
    min-height: 1px;
}
.col-35{
    width: 35%;
    float: left;
    min-height: 1px;
}
.col-38{
    width: 38%;
    float: left;
    min-height: 1px;
}
.col-40{
    width: 40%;
    float: left;
    min-height: 1px;
}
.col-45{
    width: 45%;
    float: left;
    min-height: 1px;
}
.col-48{
    width: 48%;
    float: left;
    min-height: 1px;
}
.col-49{
    width: 49%;
    float: left;
    min-height: 1px;
}
.col-50{
    width: 50%;
    float: left;
    min-height: 1px;
}
.col-55{
    width: 55%;
    float: left;
    min-height: 1px;
}
.col-60{
    width: 60%;
    float: left;
    min-height: 1px;
}
.col-65{
    width: 65%;
    float: left;
    min-height: 1px;
}
.col-66{
    width: 66%;
    float: left;
    min-height: 1px;
}
.col-70{
    width: 70%;
    float: left;
    min-height: 1px;
}
.col-80{
    width: 80%;
    float: left;
    min-height: 1px;
}
.col-90{
    width: 90%;
    float: left;
    min-height: 1px;
}
.col-95{
    width: 95%;
    float: left;
    min-height: 1px;
}
.col-100{
    width: 100%;
    float: left;
    min-height: 1px;
}
.col-25{
    width: 25%;
    float: left;
    min-height: 1px;
}
.col-75{
    width: 75%;
    float: left;
    min-height: 1px;
}


.struct-simple{
    margin: auto;
    width: 100%;
    max-width: 1100px;
    display: grid;
    padding: 10px;
    color: #000000;
    font-family: Calibri;
}

.struct-main-left{
    grid-area: left;
    padding-top: 5px;
}
.struct-main-right{
    grid-area: right;
    min-height: calc(100vh - var(--height_head) - var(--height_foot) - 22px);
    border: solid 1px transparent;
    padding-left: 20px;
}
.struct-main.menu-on .struct-main-right{
    padding-left: 20px;
}


.struct-main{       
    margin: auto;
    width: 100%;
    max-width: 1100px;
    display: grid;
    padding: 10px;
    color: #000000;
    font-family: Calibri;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
}
.struct-main.menu-on{
    grid-template-columns: 0.70fr 0.30fr;
    grid-template-areas: "left right";
}
.struct-main.menu-off{
    grid-template-columns: 1fr;
    grid-template-areas: "left";
}

@media screen and (max-width: 600px) {
    .struct-simple{
        padding: 0px;
    }
    .struct-main{
        padding: 0px;
    }
    .struct-main-left{
        padding-top: 0px;
    }
    .struct-main-right{
        display: none;
    }
    .struct-main.menu-on{           grid-template-columns: 1fr;
        grid-template-areas: "left";
    }
    .struct-main.menu-on .struct-main-left{
        padding-right: 0px !important;
    }
}




/********************************/
/* STRUCT MENU START*/
/********************************/
.struct-menu ul {
    margin: 0px;
    list-style: none;
    padding: 0px;
}
.struct-menu ul .item {
    padding: 10px;
    border: solid 1px transparent !important;
    min-height: 42px;
}
.struct-menu .item.item-dashboard{
    padding: 5px !important;
    margin-bottom: 10px;
}
.struct-menu .item.item-dashboard img{
    margin: 0px 10px 0px 5px;
    width: 20px;
    height: 20px;
    top: 4px;
}
@media (hover: hover) {
    .struct-menu ul .item:hover{
        cursor: pointer;
        border: solid 1px #DDDDDD !important;
    }
}
.struct-menu ul .item-active {
    color: #000000;
    font-family: Calibri-Bold;
    border: solid 1px #107a8a !important;
}

/********************************/
/* STRUCT CONTENT START*/
/********************************/
.struct-content{
    
}
.struct-content-box{
    width: 100%;
    border-bottom: solid 1px #DDDDDD;
}
.struct-content-box.search{
    border-bottom: solid 2px #107a8a !important;
}
.struct-content-box.hired{
    border-bottom: solid 4px #000000;
}
.struct-content-box.manage{
    border-bottom: solid 4px #107a8a;
}
.struct-content-box1{
    width: 100%;
    margin: 5px 0px 10px 0px;
}

@media (hover: hover) {
    .struct-content-box1:hover{
        background-color: #FAFAFA;
    }
}

.struct-content-box .section-head {
    height: 100%;
    align-items: center;
}

.struct-content-title-main{
    font-size: 26px;
    line-height: 28px;
    font-family: HindSiliguri-Bold;
    padding: 10px 0px 10px 0px;
    color: #000000;
    text-align: center;
    opacity: 1;
}
.struct-content-title-main-hidden{
    opacity: 1;
}
.struct-content-title-main{
        width: 100%;
}

.struct-content-title-main > div{
    vertical-align: middle;
}
.struct-content-title-main > div.table {
    display: grid;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.struct-content-title-main > div.table.left {
    text-align: left;
}
.struct-content-title-main > div.table.right {
    text-align: right;
}
.struct-content-title-main > div.table.title > div {
    display: table-row;
    vertical-align: middle !important;
    overflow: hidden;
}
.struct-content-title-main > div.table > div > div{
    display: grid;
    vertical-align: middle !important;
}

.struct-content-title-main > div.table.left {
    text-align: left;
}
.struct-content-title-main > div.table.right {
    text-align: right;
}

.struct-content-title-main .first-line{
    font-size: 22px;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.struct-content-title-main .second-line{
    font-size: 16px;
    line-height: 17px;
    font-family: InputFont;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.struct-content-title-main .icon-text{
    font-size: 14px;
    line-height: 16px;
    min-height: 32px;
    font-family: Calibri;
}
.struct-content-title-main .subtitle{
    font-family:HindSiliguri-Regular;
    font-size: 18px;
    line-height: 18px;
}
@media screen and (max-width: 600px) {
    .struct-content-title-main-hidden{
        opacity: var(--opacity);
    }
    
    .struct-content-box.search{
        border-bottom: solid 0px !important;
    }

    .struct-content-title-main{
        font-size: 18px;
        line-height: 20px;
    }
    .struct-content-title-main .first-line{
        font-size: 18px;
        line-height: 20px;
    }
    .struct-content-title-main .second-line{
        font-size: 14px;
        line-height: 15px;
    }
}

.subtitle.small{
    font-family:HindSiliguri-Regular;
    font-size: 16px;
    line-height: 16px;
}
.subtitle.vsmall{
    font-family:HindSiliguri-Regular;
    font-size: 14px;
    line-height: 14px;
}

.struct-content-title{
    font-size: 24px;
    line-height: 26px;
    font-family: InputFont-Regular;
    padding: 10px 0px 5px 0px;
    color: #107a8a;
}
.struct-content-title.sub2{
    font-size: 25px;
    line-height: 25px;
}
.struct-content-subtitle{
    font-size: 22px;
    font-family: InputFont-Regular;
    padding: 10px 0px 15px 0px;
    color: #107a8a;
}
.struct-content-subtitle.note{
    font-size: 14px;
    font-family: Calibri-Regular;
    padding: 0px 0px 15px 0px;
    color: inherit;
}
.struct-content-subtitle2{
    font-size: 20px;
    font-family: HindSiliguri-SemiBold;
    padding: 10px 0px 5px 0px;
}
.struct-content-subtitle2 span.bold{
    font-family: HindSiliguri-Bold;
}
.struct-content-title span.link{
    cursor: pointer;
}
.struct-content-title-big{
    font-size: 24px;
}
.struct-content-title-right{
    color: #606060;
    float: right;
    font-size: 16px;
    line-height: 20px;
    font-family: Calibri;    
    vertical-align: middle;
}
.struct-content-box-data{
    width: 100%;
    padding: 15px 0px 15px 0px;
}
.struct-content-box-data::after, .struct-content-box-data::before{
    content: " ";
    display: table;
}
.struct-content-box-data-row{
    padding: 10px 0px 10px 0px;
}
.struct-content-box-data-row-stre{
    padding: 0px !important;
}

@media screen and (max-width: 600px) {
    .struct-content-title{
        font-size: 22px;
        line-height: 22px;
    }
    .struct-content-box-data-row{
        padding: 5px 0px 5px 0px;
    }
}

.struct-content-separator{
    margin: auto;
    width: calc(100% - 10%);
    height: 1px;
    border-bottom: dotted 1px #DDDDDD;
}


.struct-content-box2,
.struct-content-box3{
    max-width: 1100px;
    margin: auto;
    font-family: Calibri;
}


.struct-content-box2 .row{
    content: " ";
    margin: auto;
}

.struct-content-box4{
    margin-bottom: 10px;
    border: solid 1px #DDDDDD;
    margin: 10px 0px 10px 0px;
    border-radius: 8px;
}
.struct-content-box4 > div{
    border-radius: 8px;
}

.struct-content-box5{
    padding: 0px 0px 0px 0px;
    width: 500px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px !important;
    margin: 10px auto 10px auto;
    padding: 10px 40px 10px 40px;
}

.struct-content-box6{
    margin-bottom: 10px;
    margin: 10px 0px 10px 0px;
}
.struct-content-box7{
    width: 85%;
}

@media screen and (max-width: 600px) {
    .struct-content-box-data{
        margin: 0px auto 0px auto;
        padding: 10px 0px 15px 0px;
        width: 92%;     }
    .struct-content-box2,
    .struct-content-box3{
        margin-left: 4% !important;
        margin-right: 4% !important;
    }
    .struct-content-box7{
        width: 100%;
    }
}


.row-item > div.img{
    grid-area: img;
}
.row-item > div.text{
    grid-area: text;
}
.row-item > div.text2{
    grid-area: text2;
    justify-self: start;
    width: 100%;
}
.row-item > div.text-right{
    grid-area: dropdown;
}
.row-item{
    background-color: #FAFAFA;
    font-size: 14px;
    line-height: 16px;
    height: auto;
    min-height: 70px;
    display: grid;
    border: solid 1px transparent;
    grid-template-columns: 100px minmax(0,100%) 40px;
    grid-template-areas:
        "img text dropdown";
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: start;
    width: 100%;
    padding: 5px 0px !important;
}
.row-item.two-text{
    grid-template-areas:
        "img text dropdown"
        "img text2 dropdown";
}
.row-item-no-height{
    min-height: unset;
}

@media (hover: hover) {
    .row-item-hover:hover{
        border: solid 1px #606060;
    }
    .row-item-selected:hover{
        cursor: pointer;
    }
}
.row-item-details{
    padding: 10px 10px 5px 10px;
    border-top: solid 1px #DDDDDD;
    background-color: #FFF;
    border-radius: 0px 0px 5px 5px;
}
.row-item-details.buttons{
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
}
.row-item .icon-count{
    top: 0px !important;
    right: 0px !important;
    display: grid !important;
    min-width: 21px !important;
    height: 21px !important;
    font-size: 14px !important;
    line-height: 0px !important;
}
.row-item span.row-cell{
    display: table-cell;
}
.row-item > div.img{
    display: table-cell;
    vertical-align: middle;
    line-height: 0px;
    width: 100%;
    text-align: center;
}
.row-item > div.img img{
    width: 30px;
}
.row-item > div.img div.conversation-service{
    text-align: left;
    position:absolute;
    top: -10px;
    left: 5px;
}
.row-item > div.img div.conversation-photo img{
    border-radius: 50% !important;
    width: 50px !important;
}
.row-item div.conversation-code{
    font-size: 14px;
    line-height: 16px;
}

.row-item.mypayment{
    grid-template-columns: 0px minmax(0,100%) 30px;
} 
.row-item.mypaymentgroup{
    grid-template-columns: 0px minmax(0,100%) 0px;
}   

.row-item.cart{
    grid-template-columns: 70px minmax(0,100%) 30px;
}   
.row-item.cart div.img img{
    width: 40px !important;
}

.row-item.gallery > div.img{
    align-self: start;
}
.row-item.gallery > div.img img{
    border-radius: 10px;
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin: 5px;
}
    
@media screen and (max-width: 600px) {
    .row-item{
        grid-template-columns: 50px minmax(0,100%) 30px;
    }
    .row-item.two-text{
        grid-template-areas:
            "img text dropdown"
            "text2 text2 dropdown";
    }
    .row-item > div.text2{
        padding: 0px 3%;
    }
    .row-item > div.img img{
        width: 20px;
    }
    .row-item.conversation{
        grid-template-columns: 60px minmax(0,100%) 30px;
    }    
    .row-item.conversation > div.img img{
        width: 60px;
    }
    .row-item.conversation > div.img div.conversation-service{
        top: 2px;
        left: 2px;
    }
    .row-item.conversation > div.img div.conversation-photo img{
        border-radius: 50% !important;
    }
    .row-item.conversation div.conversation-code{
        font-size: 12px;
        line-height: 12px;
        margin-top:5px;
    }
    
    .row-item.notification{
        grid-template-columns: 45px minmax(0,100%) 30px;
    }
    .row-item.notification > div.img{
        align-self: start;
    }
    .row-item.notification div.img img{
    }
    
    
    .row-item.mypayment{
    }    
    
    .row-item.cart{
        grid-template-columns: 40px minmax(0,100%) 30px;
    }   
    .row-item.cart > div.img{
        align-self: start;
    }
    .row-item.cart div.img img{
        width: 25px !important;
    }
    
    .row-item.gallery{
        grid-template-columns: 60px minmax(0,100%) 30px;
    }
    .row-item.gallery > div.img{
        align-self: start;
    }
    .row-item.gallery > div.img img{
        width: 50px;
        height: 50px;
    }
}

.row-item > div.img img.warning{
    border-radius: 0px;
    width: 35px;
    height: 35px;
    position: absolute;
    object-fit: unset;
    top: 0px;
    left: 0px;
}
.row-item > div.text{
    width: 100%;
    font-family: Calibri-regular;
}
.row-item > div.text .minititle{
    font-size: 11px;
    line-height: 12px;
}
.row-item > div.text .bigtitle{
    font-size: 18px;
    line-height: 19px;
    font-family: Calibri-bold;
}

.row-item > div.text .button-alert-box{
    margin: 4px 0px;
}
.button-alert{
    color: #D5200D;
    border: solid 1px #D5200D;
    border-radius: 999px;
    padding: 0px 8px 1px 8px;
    border-radius: 999px;
    width: max-content;
    margin: auto;
}
.row-item > div.text .maintext{
    font-family: Calibri-bold;
}
.row-item > div.text .subtext{
    font-size: 14px;
    line-height: 15px;
}
.row-item > div.text-right{
    text-align: right;
    right: 0px;
}
.row-item > div.text-right.dropdown{
    display: flex;
    height: 100%;
    align-items: center;
    line-height: 0px !important;
}
.row-item > div.text-right.dropdown img{
    width: auto;
    height: 16px;
    margin-right: 5px;
}
@media screen and (max-width: 600px) {
    .row-item > div.img.gallery{
        width: 60px;
    }
    .row-item > div.img.gallery img{
        width: 40px;
        height: 40px;
        object-fit: cover;
        margin: 5px;
    }
    .row-item > div.text .subtext{
        font-size: 12px;
        line-height: 13px;
    }
    .row-item > div.text-right.dropdown{
    }
    .row-item > div.text-right.dropdown img{
        margin-right: 0px;
    }
}
.text-right .notehead{
    right: 5px;
    top: 0px;
    font-size: 12px;
    line-height: 13px;
    color: #FFF;
    background-color: #68A9D4;
    border-radius: 11px; 
    padding:2px 5px 2px 5px;
    white-space: nowrap !important;
}

.row-item div.text-grid{
    display: grid;
    margin: 5px;
}

.row-item > div.button{
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    margin-left: min(20px, 3%);
    margin-right: min(20px, 3%);
}
.row-item > div.button img{
    height: 25px;
    display: grid;
    margin: auto;
    margin-top: 4px;
    margin-bottom: 4px;
}

@media screen and (max-width: 600px) {
    .row-item > div.button{
        margin-left: min(20px, 3%);
        margin-right: min(10px, 4%);
    }
}

.struct-content-box3{
    margin: 10px 0px 20px 0px;
    padding: 0px 10px 0px 10px;
    background-color: #FAFAFA;
    border: solid 1px #DDDDDD;
}
.struct-content-box3 div.text{
    font-family: Calibri-regular;
    color: #606060;
}

.row-dashboard-box{
    display: table;
    border-collapse: separate;
    border-spacing: 20px 10px;
}

.dashboard-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
    padding: 10px;
    text-align: left;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    column-gap: 15px;
    row-gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.dashboard-container.with-msg{
    padding-top: 5px !important;
    margin-top: 0px !important;
}
.dashboard-box{
    vertical-align: top;
    height: 100%;
    border: solid 1px #DDDDDD;
    padding: 10px 10px 10px 20px;
    text-align: left;
    border-radius: 5px;
}

@media (hover: hover) {
    .dashboard-box:hover{
        cursor: pointer;
        border: solid 1px #606060;
    }
}
.dashboard-box .notehead{
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 13px;
    color: #FFF;
    background-color: #68A9D4;
    border-radius: 10px; 
    padding:2px 10px 3px 10px;
}
.dashboard-box .icon-count{
    top: 5px;
    right: 5px;
}
.dashboard-box div.icon img{
    height: 50px;
}
.dashboard-box div.title{
    font-family: Calibri-bold;
    font-size: 20px;
    margin-bottom: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.dashboard-box div.details{
    font-family: Calibri-regular;
    font-size: 16px;
}

.dashboard-box-lds{
    text-align: center;
    top: 120px;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
}

@media screen and (max-width: 600px) {
    
    .dashboard-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 0px;
        text-align: left;
        grid-column-gap: 3vw;
        grid-row-gap: 3vw;
        margin: 3vw;     
    }
    .dashboard-box{
        background-color: #F7F7F7;
        padding: 4vw 2vw 0px 5vw;
    }
    .dashboard-box .notehead{
        font-size: 10px;
        right: 2vw;
        top: 3vw;
    }
    .dashboard-box div.icon img{
        height: 40px;
    }
    .dashboard-box div.title{
        font-size: 16px;
        margin-bottom: 20px;
    }
    .dashboard-box div.details{
        display: none;
    }
    .dashboard-box-lds{
        top: unset;
        bottom: 10px;
    }
}




.modal-box{
    color: black;
    position: relative;
    width: min(900px,96vw);
    min-height:300px;
    background-color: #FFF;
    padding: 20px 50px 20px 50px;           font-size: 16px;
    box-shadow: 0 0 1em rgba(0,0,0,0.6);
    border-radius: 10px;
}

.modal-box-medium{
    width: 800px !important;
}
.full-modal-box{
    width: 100% !important;
}

.background-popup .modal-box2{
    padding: 0px;
}

@media screen and (max-width: 600px) {
    .modal-box, .modal-box-medium  {
        width: 96vw !important;     
                padding: 0px !important;
        margin: 0px !important;
        box-shadow: none;
        display: flow-root;
        border-radius: 10px 10px 0px 0px;
        height: 100%;
    }
    .full-modal-box{
        width: 100vw !important;
        border-radius: 0px !important;
    }
    
}

.modal-box .parraph{
    font-family:HindSiliguri-Regular;
    font-size: 16px;
    margin: 20px;
}

.file {
    border: solid 1px #DDDDDD;
    text-align: center;
    margin: 20px;
    padding: 15px;
    display: inline-block;
    cursor: pointer;
    max-width: 200px;
    border-radius: 8px;
}
@media screen and (max-width: 600px) {
    .file {
        margin: 5px;
        padding: 5px;
        display: inline-block;
        font-size: 13px;
        line-height: 14px;
        max-width: 140px !important;
    }
}
.file-lineal{
    font-size: 15px;
    line-height: 17px;
    display: inline-flex;
    border: solid 1px #DDDDDD;
    text-align: left !important;
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    align-content: center;
    align-items: center;
}

@media (hover: hover) {
    .file:hover{
        border: solid 1px #606060;
    }
}
.file .mimetype{
    width: 50px;
    padding-bottom: 10px;
}
.file-lineal .mimetype{
    width: 40px;
    margin-right: 10px;
    padding-bottom: 0px;
}


.box-menu-left{
    overflow-y: auto;
    height: 100vh !important;
    width: 100vw;
    position: absolute;
    min-width: 100vw;
    z-index: 2001;
    top: var(--height_head);
}

.menu-left{
    position: absolute;
    width: 400px;
    height: 100vh;
    top: 0px;
    background-color: #FFF;
    z-index: 2002;
    max-width: 90% !important;
    left: -100%;
    transition: left 0.4s;
    margin: 0px !important;
    padding: 0px !important;
}
.menu-left div{
    padding: 40px;
}

.menu-left-display{
    left: 0;
}

.background-menu-left{
    position:fixed;
    z-index: 2001 !important;
    top: var(--height_head_neg) !important;
    height: calc(100vh + var(--height_head)) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    transition: background-color .4s;
    overflow: hidden;
}
.background-menu-left-display{
    background-color: rgba(0, 0, 0, 0.20) !important;
}
.background-menu-left-nodisplay{
    background-color: rgba(0, 0, 0, 0.01) !important;
}

.stickyfrj{
    z-index: 1;
    position: relative;
}

.fake-sticky{
    position: relative;
}
.fake-sticky.fixed{
    position: fixed;
}

.enable-sticky-only-mobile{
    display: none !important;
}
@media screen and (max-width: 600px){
    .enable-sticky-only-mobile{
        display: inherit !important;
    }
}

.service-head-box, .service-head-box-modal, .service-head-foot-modal {
    display: grid;
    background-color: #FFFFFF;
}
.service-head-body-modal.foot-empty{
    padding-bottom: var(--safe-area-inset-bottom);
}
.service-head-foot-modal-empty {
    width: 100%;
    height: 0px;
    margin: 0px;
    padding: 0px;
}
.service-head{
    z-index: 2;
    display: grid;
    justify-content: center;
    align-items: center;
    align-content: center;
    grid-template-columns: minmax(10%,max-content) minmax(0,100%) minmax(10%,max-content);
    grid-template-rows: 100%;
    margin: auto;
}
.service-head.four{
    grid-template-columns: minmax(min(10%,80px),max-content) minmax(min(10%,80px),max-content) minmax(0,100%) minmax(min(10%,80px),max-content) minmax(min(10%,80px),max-content);
}

.fake-head-box{
    background-color: #ffffff;
    display: block;
    height: calc(var(--height_head) + var(--safe-area-inset-top));
}
.fake-foot-box{
    display: none;
    height: var(--height_head);
}

.service-head-full-box-modal {
    position: fixed !important;
    width: 100%;
    z-index: 1;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    height: calc(90px + var(--safe-area-inset-top));
    max-width: 1500px;
    padding-top: var(--safe-area-inset-top);
}
.fake-head-full-box{
    height: calc(var(--topBarHeightFullModalBox) - 0px );
}

@media screen and (max-width: 600px) {
    .service-head-box {
        width: 100%;
        min-height: min(55px, calc(55px + var(--safe-area-inset-top)));
        height: auto !important;
        position: fixed;
        padding-top: var(--safe-area-inset-top);
        top: 0px;
        left: 0px;
        z-index: 2;
        transition: box-shadow 0.3s linear;
        box-shadow: rgba(0,0,0,0.6) 0px -1px 4px 0px !important;
    }
    
    .service-head{
        grid-template-columns: minmax(15%,max-content) minmax(0,100%) minmax(15%,max-content);
    }
    .service-head-full-modal{
        width: 96vw;
    }
    .service-head.four{
        grid-template-columns: minmax(13%,max-content) minmax(13%,max-content) minmax(0,100%) minmax(13%,max-content) minmax(13%,max-content);
        width: 100%;
    }
    
    .service-head-box.hide-shadow{
        box-shadow: none !important;
    }

    .struct-content-box.service-head-box {
        border: 0px;
        z-index: 1994;
    }
    .service-head-box-modal {
        width: 100%;
        height: 60px;
        position: relative;
        top: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
        margin-top: 0px;
        padding-top: 0px;
        width: 96vw !important;
        border-radius: 10px 10px 0px 0px;
    }
    
    
    .service-head-body-modal {
        overflow: auto;
        height: calc(
                    var(--hi100) -
                        calc( 
                            var(--footBarHeightModal) +
                            calc( var(--topBarHeightModal) +
                                    calc( var(--marginTopModal) + 5px )
                                )
                        )
                );
    }
    .service-head-foot-modal {
        width: 100%;
        height: 60px;
        position: relative;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 2;
        margin: auto;
        margin-top: 0px;
        padding-top: 0px;
        width: 96vw !important;
        box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px !important;
        padding-bottom: var(--safe-area-inset-bottom);
    }
    .service-head-foot-modal.height-dinamic {
        width: 100%;
        height: auto !important;
        min-height: 60px;
    }
    .fake-head-box{
        height: var(--topBarHeight);
    }
    .fake-foot-box{
        display: block;
    }
    
    .service-head-full-box-modal {
        width: 100vw;
    }
    .fake-head-full-box{
        height: var(--topBarHeightFullModalBox);
    }

}

.service-item-head{
    margin: auto;
    text-align:center;
}

.service-item-head button.submit{
    width: min-content;
    margin: 3px 5px;
}

.service-item-head .icon{
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;
    margin:auto;
    line-height: 0px;
    overflow: visible !important;
}
.service-item-head .back{
    line-height: 0px;
    cursor: pointer;
}

.service-item-head .back img{
    width: 100%;
    padding: 0px;
}
.service-item-head .back img.big{
    width: 45px;
}
.service-item-head .topbar-icon-marked{
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 0px;
    width: 18px;
    height: 18px;
    background-color: #107a8a;
}
@media screen and (max-width: 600px) {
    .service-item-head .back img{
        padding: 25%;
    }
    .service-item-head .back img.big{
        width: 30px;
    }
}




.service-head .struct-content-title{
    line-height: 34px !important;
    padding-top: 5px !important;
    color: black !important;
}
.service-head .struct-content-title .nobold{
    font-family: HindSiliguri-Medium;
}
.service-head .notehead{
    font-size: 12px;
    line-height: 14px;
    color: #FFF;
    background-color: #68A9D4;
    border-radius: 10px; 
    padding:2px 10px 3px 10px;
}



.for-bnbdayer .notehead{
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 13px;
    color: #FFF;
    background-color: #68A9D4;
    border-radius: 10px; 
    padding:2px 10px 3px 10px;
}


.form-four .tabsbar{
    border-bottom: solid 2px #107a8a;
}
.form-four .tabsbar .col-max-content{
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    float: left;
}
.form-four .tabsbar .submit{
    border-radius: 5px 5px 0px 0px !important;
    padding: 0px !important;
}




.struct-grid .item-st1{
    width: 100%;
    grid-area: button1;
}
.struct-grid .item-st2{
    width: 100%;
    grid-area: button2;
}
.struct-grid .item-st3{
    width: 100%;
    grid-area: button3;
}
.struct-grid .item-st4{
    width: 100%;
    grid-area: button4;
}
.struct-grid .item-st5{
    width: 100%;
    grid-area: button5;
}
.struct-grid .item-st6{
    width: 100%;
    grid-area: button6;
}
.struct-grid .item-st7{
    width: 100%;
    grid-area: button7;
}
.struct-grid .item-st8{
    width: 100%;
    grid-area: button8;
}
.struct-grid .item-st9{
    width: 100%;
    grid-area: button9;
}
.struct-grid .item-st10{
    width: 100%;
    grid-area: button10;
}
.struct-grid{
    justify-items: center;
    align-content: center;
    align-items: center;
    justify-content: end;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 5px;
    grid-template-rows: auto;
}
.struct-grid.st1{
    grid-template-columns: repeat( 1, minmax(0, max-content));
    grid-template-areas: "button1 ";
}
.struct-grid.width1{
    grid-template-columns: repeat( 1, minmax(0, 1fr));
}
.struct-grid.st2{
    grid-template-columns: repeat( 2, minmax(0, max-content));
    grid-template-areas: "button1 button2 ";
}
.struct-grid.width2{
    grid-template-columns: repeat( 2, minmax(0, 1fr));
}
.struct-grid.st3{
    grid-template-columns: repeat( 3, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 ";
}
.struct-grid.width3{
    grid-template-columns: repeat( 3, minmax(0, 1fr));
}
.struct-grid.st4{
    grid-template-columns: repeat( 4, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 ";
}
.struct-grid.width4{
    grid-template-columns: repeat( 4, minmax(0, 1fr));
}
.struct-grid.st5{
    grid-template-columns: repeat( 5, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 ";
}
.struct-grid.width5{
    grid-template-columns: repeat( 5, minmax(0, 1fr));
}
.struct-grid.st6{
    grid-template-columns: repeat( 6, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 ";
}
.struct-grid.width6{
    grid-template-columns: repeat( 6, minmax(0, 1fr));
}
.struct-grid.st7{
    grid-template-columns: repeat( 7, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 button7 ";
}
.struct-grid.width7{
    grid-template-columns: repeat( 7, minmax(0, 1fr));
}
.struct-grid.st8{
    grid-template-columns: repeat( 8, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 button7 button8 ";
}
.struct-grid.width8{
    grid-template-columns: repeat( 8, minmax(0, 1fr));
}
.struct-grid.st9{
    grid-template-columns: repeat( 9, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 button7 button8 button9 ";
}
.struct-grid.width9{
    grid-template-columns: repeat( 9, minmax(0, 1fr));
}
.struct-grid.st10{
    grid-template-columns: repeat( 10, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 button7 button8 button9 button10 ";
}
.struct-grid.width10{
    grid-template-columns: repeat( 10, minmax(0, 1fr));
}


.struct-grid .item-st-left{
    padding-left: 10px;
}
.struct-grid .item-st-center{
    padding-left: 5px;
    padding-right: 5px;
}
.struct-grid .item-st-right{
    padding-right: 10px;
}


.struct-grid-one > .item-sgo-left{
    width: 100%;
    grid-area: left;
}
.struct-grid-one > .item-sgo-right{
    width: 100%;
    grid-area: right;
}
:root {
    --sgo-template-columns: 1fr 1fr;
}
.struct-grid-one{
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: 1fr;
    grid-template-columns: var(--sgo-template-columns);
    grid-template-areas: "left right";
    max-width: 100%;
}

.struct-grid-two > .item-sgt-left{
    width: 100%;
    grid-area: left;
}
.struct-grid-two > .item-sgt-right{
    width: 100%;
    grid-area: right;
}
:root {
    --sgt-template-columns: 1fr 1fr;
}
.struct-grid-two{
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: 1fr;
    grid-template-columns: var(--sgt-template-columns);
    grid-template-areas: "left right";
    max-width: 100%;
}

@media screen and (max-width: 600px) {
    .struct-grid-two{
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "left"
            "right";
    }
}


.struct-list-grid1 > .item-listg-a{
    align-self: start;
    text-align: center;
}
.struct-list-grid1 > .item-listg-b{
}
.struct-list-grid1{
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: max-content minmax(0, 100%);
    align-items: center;
}



.struct-force-show-body-head{
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 25px;
    background-color: #FFF;
    border-top: solid 1px #b2b2b2;
    border-left: solid 1px #b2b2b2;
    border-right: solid 1px #b2b2b2;
    text-align: center;
    font-size: 40px;
    line-height: 0px;
    border-radius: 5px 5px 0px 0px;
}

.struct-force-show-body-head img{
    width: 24px;
    top: 1px;
}


.struct-grid-buttons-float{
    width: 100%;
    display: grid;
    grid-column-gap: 15px;
    grid-template-columns: minmax(0,100%) minmax(0, 100%);
}
.struct-grid-buttons-float.three{
    width: 100%;
    display: grid;
    grid-column-gap: 15px;
    grid-template-columns: minmax(0,100%) minmax(0,100%) minmax(0, 100%);
}
.struct-grid-buttons-float.left{
    justify-items: start;
    justify-content: start;
}
.struct-grid-buttons-float.right{
    justify-items: end;
    justify-content: end;
}
.struct-grid-buttons-float.left-percentage{
    grid-template-columns: minmax(0,100%) minmax(0, auto);
}
.struct-grid-buttons-float.right-percentage{
    grid-template-columns: minmax(0,auto) minmax(0, 100%);
}
@media screen and (max-width: 600px) {
    .struct-grid-buttons-float.left{
        grid-row-gap: 15px;
        grid-template-columns: minmax(0,100%);
    }
    .struct-grid-buttons-float.right{
        grid-row-gap: 15px;
        grid-template-columns: minmax(0,100%);
    }
    .struct-grid-buttons-float.ever{           grid-row-gap: 0px;
        grid-template-columns: minmax(0,auto) minmax(0, auto) !important;
    }
    .struct-grid-buttons-float.ever.three{
        grid-row-gap: 0px;
        grid-template-columns: minmax(0,auto) minmax(0,auto) minmax(0, auto) !important;
    }
    .struct-grid-buttons-float.left-percentage.ever{
        grid-template-columns: minmax(0,100%) minmax(0, auto) !important;
    }
    .struct-grid-buttons-float.right-percentage.ever{
        grid-template-columns: minmax(0,auto) minmax(0, 100%) !important;
    }
}


.top-button{
    -webkit-box-pack: center !important;
    -webkit-box-align: center !important;
    appearance: none !important;
    display: flex !important;
    outline: none !important;
    margin: 0px !important;
    padding: 0px !important;
    color: rgb(34, 34, 34) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    align-items: center !important;
    justify-content: center !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
    transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s, transform 0.25s ease 0s !important;
    height: 45px;
    min-width: 45px;
    cursor: pointer;
}
.top-button div.image{
    display: inline-block;
    width: 30px;
}
.top-button div.image img{
    fill: none;
    stroke: currentcolor;
    stroke-width: 4;
    width: 100%;
}
.top-button.trans{     background-color: rgba(255, 255, 255,0.3) !important;
}
.top-button.radius{
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255,0.9);
}
@media screen and (max-width: 600px) {
    
    .top-button{
        height: 35px;
        min-width: 35px;
    }
    .top-button div.image{
        width: 22px;
    }
    .top-button div.image.big{
        width: 40px;
    }
    .top-button.trans{         background-color: rgba(255, 255, 255,0.6) !important;
    }
    .top-button.radius{         box-shadow: transparent 0px 0px 0px 1px, transparent 0px 0px 0px 4px, rgb(0 0 0 / 18%) 0px 2px 4px !important;
    }
    .service-head-box.hide-shadow .top-button{
        box-shadow: none !important;
    }
}


.empty-content-section-text{
    font-size: 20px;
    text-align: center;
    margin: 30px;
}
.empty-content-section-image{
    margin: auto;
    width: 50%;
}

@media screen and (max-width: 600px){
    .empty-content-section-image{
        width: 70%;
    }
}


::-webkit-input-placeholder { /* Edge */
  color: #BEBEBE;
}
:-ms-input-placeholder { /* Internet Explorer */
  color: #BEBEBE;
}
::placeholder {
  color: #BEBEBE;
}

.is-overlay-container :not(.is-overlay-selected).is-overlay{
    transition: opacity .3s ease-out;
}
.is-overlay-container.on-overlay :not(.is-overlay-selected).is-overlay{
    opacity: 0.2;
    filter: grayscale(1);
    pointer-events: none;
    transition: unset;
}





/********************************/
/* FORM-THREE START*/
/********************************/

:root {
  --form-three-color: #107a8a;
}

.form-three div{
    font-family: InputFont;
}
.form-three .line{
    margin-bottom: 4px;
    min-height: 5px;
}


.form-three input.text,
.form-three select.text,
.form-three button.text,
.form-three textarea.text,
.form-three div.input-text{
    font-family: Calibri;
    background-color:rgba(255, 255, 255, 0.5);
    color: #444444;
    transition-duration: 0.4s;
    border: solid 1px #2E5979;
    padding: 2px 10px 2px 10px;
    height: 42px;
    width: 100%;
    line-height: 19px;
    font-size: 19px;
    vertical-align: middle;
    border-radius: 3px;
}

.form-three textarea.text{
    padding-top: 10px;
}
.form-three input.text.disabled,
.form-three button.text.disabled{
    background-color:rgba(238, 238, 238, 1);
    border: solid 0px;
}
.form-three input.text.input-disabled:disabled {        color: #444444;
    opacity: 1;
}

.form-three input.vshort-text{
    width: 70px;
    text-align: center;
    padding: 4px 0px 0px 0px;
    margin-right: 0px;
}

@media (hover: hover) {
    .form-three input.text.disabled:hover {
        border: solid 0px;
    }
    .form-three input.text:hover {
        border: solid 1px var(--form-three-color);
    }
}
.form-three input.text:focus,
.form-three div.input-text:focus,
.form-three div.input-text-focus{
    border: solid 1px var(--form-three-color) !important;
    box-shadow: 0px 0px 4px 0px var(--form-three-color);
}
.form-three div.note{
    font-family: Calibri-regular;
    margin-top: 10px;
    color: #606060;
    font-size: 15px;
    line-height: 16px;
    margin-bottom: 0px;
}
.form-three div.note2{
    text-align: left;
    margin-top: 10px;
    font-size: 15px;
    margin-bottom: 0px;
}

.form-three input.check{
    color: #444444;
    transition-duration: 0.4s;
    width: 25px;
}
@media (hover: hover) {
    .form-three input.check:hover {
        border: solid 1px var(--form-three-color);
    }
}

.form-three button.input-text{
    font-family: Calibri;
    background-color: rgba(255, 255, 255, 1);
    color: #444444;
    transition-duration: 0.4s;
    border: solid 1px #004E57;
    height: 42px;
    width: 100%;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    align-content: center;
    width: 100%;
    border-radius: 100px;
}
.form-three button.input-text > span{
    align-content: center;
    align-items: center;
    width: 100%;
}

@media (hover: hover) {
    .form-three button.input-text:hover {
        border: solid 1px var(--form-three-color);
        cursor: pointer;
        color: #107a8a;
    }
}
.form-three button.input-text:focus {
    border: solid 1px var(--form-three-color);
    cursor: pointer;
    color: #107a8a;
}
.form-three button.input-text img{
    width: 30px;
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    display: inline-block;
}



.form-three div.floating-box{
    display: inline-block;
}
.form-three div.floating-box-right{
    float: right;
}
.form-three div.floating-box-disabled{
    width: 100%;
}
.form-three div.floating-box > div{
    width: 100%;
}
@media all and (max-width: 800px){
    form .form-three div.floating-box{
        display: block !important;  /* Cuando el ancho sea inferior a 800px el elemento será un bloque */
        width: auto !important;
    }
}


.form-three label.placeholder{
    font-family: Calibri;
    font-size: 16px;
    line-height: 18px;
    transition-duration: 0.4s;
    top: 8px;
    padding-left: 13px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #004E57;
    background-color: #fff;
    width: max-content;
    left: 6px;
    padding: 0px 5px;
    max-width: 100%;
    z-index: 1;
}
.form-three label#l1{
    width: 350px;
    display: inline-block;
}
.form-three label#l2{
    padding-left: 25px;
}

.form-three label.label-first-check{
    top: 0px !important;
}


.form-three .submit{
    font-family: Calibri;
    background: linear-gradient(315deg,#107a8a,#33a7b7);
    margin-top: 0px;
    min-height: 42px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 18px;
    color: #FFFFFF;
    border: none;
    padding: 5px 20px;
    text-decoration: none; 
    border-radius: 100px;
    display: inline-grid;
    align-content: center;
    margin: auto;
    justify-content: center;
}
.form-three .submit > span.icon-left{
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
}
.form-three .submit > span{
    padding: 0px 5px;
}
.form-three .submit.large-submit{
    width: 100%;
}

.form-three .submit{
    transition-duration: 0.4s;
}

.form-three .submit.small{
    height: 32px;
    font-size: 16px;
}


.form-three .submit-invert{
    background-color: #FFF !important;
    color: var(--form-three-color);
    border: solid 1px transparent;
    background: unset !important;
}
.form-three .submit-inline{
    width: auto;
    padding: 0px 15px 0px 15px;
}

.form-three button.facebook,
.form-three button.facebook:hover,
.form-three button.facebook:focus{
    background: unset;
    background-color: #4568B2;
    color: #FFFFFF;
    border: solid 0px;
    display: flex;
    align-content: center;
    align-items: center;
}

.form-three button.facebook span{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.form-three.submit:focus{
    background: linear-gradient(315deg,#33a7b7,#107a8a);
    color: #FFFFFF;
}
.form-three .submit-not-hover:focus{
    background: linear-gradient(315deg,#107a8a,#33a7b7) !important;
}
.form-three .submit-invert:focus{
    background-color: #FFF;
    color: var(--form-three-color) !important;
    border: solid 1px var(--form-three-color);
}
.form-three .submit-invert-hover{
    background-color: #FFF;
    color: var(--form-three-color) !important;
    border: solid 1px var(--form-three-color);
}
@media (hover: hover) {
    .form-three .submit:hover{
        background: linear-gradient(315deg,#33a7b7,#107a8a);
        color: #FFFFFF;
    }
    .form-three .submit-not-hover:hover{
        background: linear-gradient(315deg,#107a8a,#33a7b7) !important;
    }
    .form-three  .submit-invert:hover{
        background-color: #FFF;
        color: var(--form-three-color) !important;
        border: solid 1px var(--form-three-color);
    }
}

.form-three .error-color{
    color: #BB0000 !important;
}
.form-three input.error-color,
.form-three textarea.error-color,
.form-three .input-text.error-color {
    border: solid 1px #BB0000;
}
.form-three label.note{
    font-size: 12px;
    line-height: 15px;
    color: #1f1f1f;
    left: 0px;
    top: 0px;
    padding: 0px;
}
.form-three label.small{
    font-size: 12px;
    line-height: 18px;
    transition-duration: 0.4s;
    color: var(--form-three-color);
    padding: 0px 3px;
    left: 6px;
    top: 9px;
}
.form-three .error-color label.small{
    color: #BB0000;
}
.form-three label.error-color{
    color: #BB0000 !important;
}
.form-three .div-error{
    font-size: 15px;
    padding-top: 2px;
    color: #BB0000;
}
.form-three .error-color input,
.form-three .error-color input-text,
.form-three .input-text.error-color {
    border: solid 1px #BB0000;
    color: #BB0000;
}


.form-three div.box-field div.box-field-icon{
    bottom: 5px;
    left: 8px;
    position: absolute;
}
.form-three div.box-field div.box-field-icon-right{
    top: 0px;
    bottom: 0px;
    right: 8px;
    position: absolute;
    display: flex;
}
.form-three div.box-field div.box-field-icon img,
.form-three div.box-field div.box-field-icon-right img{
    width: 35px;
    height: 35px;
    align-self: center;
}


.form-three div.box-checkbox label .item-check{
    grid-area: check;
}
.form-three div.box-checkbox label .item-label{
    grid-area: label;
    color: #000;
}

.form-three div.box-checkbox{
    padding: 8px;
    font-family: Calibri;
    font-size: 16px;
    line-height: 17px;
}

.form-three div.box-checkbox label{
    font-family: Calibri;
    width: 100%;
    text-align: inherit;
    float: none;
    padding: 0px;
	cursor: pointer;
	vertical-align: middle;
    height: 100%;
    top: 0px !important;
    left: 0px !important;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 30px minmax(0,100%);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
        "check label";
    align-items: center;
    font-size: 16px;
}

.form-three input[type="checkbox"] {
	display: none;
	cursor: pointer;
    line-height: 17px !important;
}
.form-three input[type="checkbox"] + label span.item-check {
	display: inline-block;
	width: 22px;
	height: 22px;
    line-height: 17px !important;
	margin: 0px 10px 0 0;
	vertical-align: middle;
	background: url(https://www.bnbdays.com/resources/images/form_three_checkbox.svg);
	background-size: cover;
	cursor: pointer;
}
.form-three input[type="checkbox"]:checked + label span.item-check {
	background: url(https://www.bnbdays.com/resources/images/form_three_checkbox_check.svg);
	background-size: cover;
	cursor: pointer;
}
.form-three input[type="checkbox"].disabled + label span.item-check {
	background: url(https://www.bnbdays.com/resources/images/form_three_checkbox_disabled.svg);
	background-size: cover;
}
.form-three input[type="checkbox"].disabled:checked + label span.item-check {
	background: url(https://www.bnbdays.com/resources/images/form_three_checkbox_check_disabled.svg);
	background-size: cover;
}


@media screen and (max-width: 600px){
    .form-three .submit{
        font-size: 18px;
        line-height: 18px;
    }
        .form-three.big .submit{
        height: 50px !important;
    }
}

/* FORM-THREE END*/
/********************************/



/********************************/
/* FORM-FOUR START*/
/********************************/

:root {
  --form-four-color: #00808E;
}

.form-four {
    font-size: 16px;
    line-height: 18px;
}
.form-four .line-before, .form-four .line-after{
    content: " ";
    height: 10px;
    border: solid 0px;
}
.form-four .line{
    border: solid 0px transparent;
    border-bottom: solid 1px #DDDDDD;
    height: 1px;
    width: 100%;
}
.form-four .line2{
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg,#ffffff,#89c2cb,#ffffff)
}
.f-grid1 > .item-a{
    grid-area: label1;
    text-align: right;
}
.f-grid1 > .item-b{
    grid-area: input1;
    text-align: left;
    
}
.form-four .f-grid1{
    display: grid;
    width: 90%;
    margin-left: 0px;
    align-items: start;
    grid-template-rows: auto;
    grid-template-columns: 30% 70%;
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    grid-template-areas: 
        "label1 input1";
    margin: auto;
}
.form-four .f-grid1.f-grid1-100{
    width: 100%;
}
.form-four .f-grid1.f-grid1-max-content{
    grid-template-columns: minmax(0,max-content) minmax(0,max-content);
}
.modal-box .form-four .f-grid1,
.form-four .f-grid1 .f-grid1{
    width: 100%;
}
.form-four .f-grid1.col-invert{
    grid-template-columns: 70% 30%;
}
.form-four .f-grid1.col-equal{
    grid-template-columns: 50% 50%;
}


.form-four .f-grid1.grid-image > .item-a{
    text-align: center;
    align-self: self-start
}
.form-four .f-grid1.grid-image > .item-b{
    text-align: right;
    align-self: self-start
}
.form-four .f-grid1.grid-image > .item-a img.image{
    width: 70%;
    margin-bottom: 10px;
}
.form-four .f-grid1.grid-image > .item-a img.image.portrait{
    width: 70%;
    border-radius: 50%;
}
.form-four .f-grid1.grid-image > .item-a img.profile-trash{
    right: 0px;
    left: inherit;
    width: 30px;
}
.form-four .f-grid1.grid-image > .item-b button.button{
    width: 70%;
    margin: auto;
    margin-right: 0px;
}






.f-grid2 .item-a{
    grid-area: label1;
    text-align: right;
}
.f-grid2 .item-b{
    grid-area: input1;
}
.f-grid2 .item-c{
    grid-area: input2;
    display: flex;
}

.form-four .f-grid2{
    display: grid;
    width: 90%;
    margin-left: 0px;
    align-items: start;
    grid-template-rows: auto;
    grid-template-columns: 30% 35% 35%;
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    grid-template-areas: 
        "label1 input1 input2";
    align-items: baseline;
    margin: auto;
}
.modal-box .form-four .f-grid2,
.form-four .f-grid2 .f-grid2{
    width: 100%;
}


.f-grid3 .item-a{
    grid-area: label1;
    text-align: right;
}
.f-grid3.col2 .item-b{
    grid-area: input1;
}
.f-grid3.col2 .item-c{
    grid-area: input2;
    padding-top: 4px;
    padding-left: 10px;
    justify-self: end;
}
.f-grid3.col2 .item-d{
    grid-area: input3;
    display: none;
}
.f-grid3.col2 .item-d{
    display: none;
}

.f-grid3.col2.is-overlay-selected .item-b{
    display: none;
}
.f-grid3.col2.is-overlay-selected .item-c{
    display: none;
}
.f-grid3.col2.is-overlay-selected .item-d{
    display: none;
}
.f-grid3.col2.is-overlay-selected .item-d{
    display: block;
}
.f-grid3.col2.is-overlay-selected .item-d .actions{
    text-align: right;
    padding-top: 10px;
}

.form-four .f-grid3{
    display: grid;
    width: 90%;
    margin-left: 0px;
    align-items: start;
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
        "label1 input1"
        "label1 input2";
    margin: auto;
}

.form-four .f-grid3.col1{
    grid-template-columns: 30% 1fr 1fr;
}
.form-four .f-grid3.col2{
    grid-template-columns: 30% minmax(32%,100%) minmax(0,max-content);
}
.form-four .f-grid3.col2.is-overlay-selected{
    grid-template-columns: 30% 1fr;
    grid-template-areas: 
        "label1 input3";
    align-items: baseline;
}




.form-four .label-first{
    width: 100%;
    border: solid 0px transparent;
    padding: 0px 20px 0px 0px;
    padding-top: 12px;     color: #107a8a;
}
.form-four .label-first.nobaseline{
    padding-top: 0px !important;
}
.form-four label.second{
    text-align:left !important;
    padding: 0 !important;
    font-family: InputFont-Regular !important;
    font-size: 16px;
}
.form-four div.divlabel{
    margin-bottom: 10px;
}

@media screen and (max-width: 600px){
    .f-grid1 > .item-a{
        text-align: left;
        padding-top: 0px;
    }
    .form-four .f-grid1{
        width: auto;
        grid-template-rows: auto;
        grid-template-columns: 100%;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-areas: 
            "label1"
            "input1";
    }
    .form-four .f-grid1.col-invert{
        grid-template-columns: 100%;
    }
    .form-four .f-grid1.col-equal{
        grid-template-columns: 100%;
    }
    
    .form-four .f-grid1.grid-image > .item-b{
        text-align: center;
    }
    .form-four .f-grid1.grid-image > .item-b label.button{
        width: 70%;
        margin: auto;
        margin-right: auto;
    }
    
    .form-four .f-grid2{
        width: auto;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-areas: 
            "input1 input2";
    }
    
    
    .f-grid3 > .item-a{
        text-align: left;
        padding-top: 0px;
        padding-bottom: 5px;
    }
    .form-four .f-grid3{
        width: auto;
        grid-template-areas: 
            "label1 label1"
            "input1 input1"
            "input2 input2";
    }
    .form-four .f-grid3.col1{
        grid-template-columns: 1fr 1fr;
    }
    .form-four .f-grid3.col2{
        grid-template-columns: minmax(32%,100%) minmax(0,max-content);
    }
    .form-four .f-grid3.col3{
        grid-template-columns: 1fr;
        grid-template-areas: 
            "label1 label1"
            "input3 input3";
    }

    .form-four .label-first{
        padding: 0px;
        line-height: 18px;
        margin: 5px 0px 5px 0px;
    }
    .form-four div.divlabel{
        border-bottom: solid 1px #DDDDDD;
    }
    
    
    
}



.form-four .label-first img{
    vertical-align: middle;
}
.form-four div.button-green{
    width: auto;
    text-align: left;
    font-family: Calibri-regular;
    float: left;
    border: solid 0px;
    padding: 0px 10px 0px 10px;
    margin: 0px 0px 0px 0px;
    border: solid 1px #4CAF50;
    border-radius: 24px;
    color: #4CAF50;
    min-height: 22px;
    cursor: pointer;
    line-height: 22px;
}

.form-four textarea.text,
.form-four button.text,
.form-four input.text,
.form-four div.box-select,
.form-four select.text{
    padding: 8px;
    font-family: Calibri;
    font-size: 16px;
    line-height: 17px;
    border: solid 1px #DDDDDD;
    background-color: #FAFAFA;
    height: 42px;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
@media screen and (max-width: 600px){
    .form-four textarea.text,
    .form-four button.text,
    .form-four input.text,
    .form-four div.box-select,
    .form-four select.text{
            }
}
.form-four select.text{
    border: solid 0px;
    background-color: transparent !important;
    height: 42px;
    border: solid 1px #DDDDDD;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative !important;
    cursor: pointer;
}
.form-four select.text::-ms-expand{
    display: none;
}

.form-four span.select-icon{
    position: absolute !important;
    line-height: 0 !important;
    pointer-events: none !important;
    top: 14px;
    right: 8px;
}
.form-four div.box-select{
    padding: 0px;
    border: solid 0px;
}
.form-four div.box-select:hover{
    cursor: pointer;
}
.form-four div.box-select select{       overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 30px;
}


.form-four textarea.large,
.form-four input.large,
.form-four select.large,
.form-four div.box-select{
    width: 100%;
}
.form-four input.short{
    width: 50%;
}

.form-four select.text:focus,
.form-four textarea.text:focus,
.form-four input.text:focus{
    border: solid 1px #000000;
}


.form-four textarea.text{
    padding-top: 10px;
    line-height: 19px;
    -webkit-appearance: none;
}

.form-four div.note{
    font-family: Calibri-regular;
    margin-top: 10px;
    color: #606060;
    font-size: 15px;
    line-height: 16px;
    margin-bottom: 10px;
}
.form-four div.mininote{
    font-family: Calibri-regular;
    font-size: 11px;
    margin-bottom: -11px;
}
.form-four div.note-top{
    margin-top: 0px;
}
.form-four div.note-bottom{
    margin-bottom: 0px;
}
.form-four div.note-second{
    margin-bottom: 0px;
}
.form-four div.note:empty{
    margin-top: 0px;
    margin-bottom: 0px;
}

.form-four div.error{
    font-family: InputFont;
    margin-top: 5px;
    color: #BB0000;
    font-size: 15px;
    line-height: 16px;
}
.form-four div.error:empty{
    margin-top: 0px;
}

.form-four .submit{
    font-family: Calibri;
    background: linear-gradient(315deg,#107a8a,#33a7b7);
    margin-top: 0px;
    width: 100%;
    min-height: 42px;
    height: max-content;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 17px;
    color: #FFFFFF;
    border: solid 0px;
    border-radius: 100px;
    padding: 5px 10px 5px 10px;
    display: inline-grid;
    align-content: center;
}

.form-four .submit.dark{
    background: linear-gradient(315deg,#004E57,#107a8a);
}
.form-four .submit > span{
    padding: 0px 10px;
}
.form-four .submit.nopadding{
    padding: 0px !important;
}

.form-four .submit span img.icon-edit{
    width: 24px;
}
.form-four.small .submit{
    min-height: 35px !important;
    font-size: 14px !important;
    line-height: 16px !important;
}
.form-four.small .submit span img.icon-edit{
    width: 20px;
}
.form-four.vsmall .submit{
    min-height: 30px !important;
    font-size: 14px !important;
    line-height: 15px !important;
}
.form-four.vsmall .submit span img.icon-edit{
    width: 16px;
}
.form-four.big .submit{
    min-height: 50px !important;
    font-size: 14px !important;
}
.form-four.big .submit.square{
    padding: 0px 5px;
}
.form-four.big .button-grid.submit{
}
@media screen and (max-width: 600px){
    .form-four.big .submit.square{
        border-radius: 10px !important;
        padding: 8px 0px;
    }
    .form-four.big .button-grid.submit{
        width: 95% !important;
        height: 55px !important;
        margin: auto;
    }
    .form-four .submit.small-on-mobile{
        font-size: 10px !important;
        line-height: 11px !important;
        padding: 2px 5px 2px 5px !important;
    }
}
.form-four .submit span.fit-content{
    padding: 0px 15px 0px 15px;
}
.form-four .submit span.fit-content-left{
    padding: 0px 5px 0px 15px;
}
.form-four .submit span.fit-content-right{
    padding: 0px 15px 0px 5px;
}

.form-four.small .submit span.fit-content,
.form-four.big .submit span.fit-content{
    padding: 0px 10px 0px 10px;
}
.form-four.small .submit span.fit-content-left,
.form-four.big .submit span.fit-content-left{
    padding: 0px 0px 0px 10px;
}
.form-four.small .submit span.fit-content-right,
.form-four.big .submit span.fit-content-right{
    padding: 0px 10px 0px 0px;
}

.form-four .submit-disabled{        font-family: Calibri;
    background: rgba(16,122,138,0.4);
    margin-top: 0px;
    width: 100%;
    min-height: 42px;
    height: max-content;
    text-align: center;
    font-size: 16px;
    line-height: 17px;
    color: #FFFFFF;
    border: solid 0px;
    border-radius: 100px;
    padding: 5px 10px 5px 10px;
}
.form-four .submit{
    transition-duration: 0.4s;
}
.form-four .submit-round{
    width: 30px;
    height: 30px;
    min-height: 30px;
    display: grid;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.form-four .submit-round > img{
    height: 12px;
    width: 12px;
}
.form-four .submit-round.left{
    border-radius: 20px 5px 5px 20px;
}
.form-four .submit-round.left > img{
    left: 1px;
}
.form-four .submit-round.right{
    border-radius: 5px 20px 20px 5px;
}
.form-four .submit-round.right > img{
    right: 1px;
}
.form-four .submit-invert{
    background: unset;
    background-color: #FFF !important;
    color: var(--form-four-color);
    border: solid 1px transparent;
}
.form-four .submit-invert.dark{
    background: unset;
    border: solid 2px transparent;
    color: #004E57 !important;
}
.form-four .submit.four{
}
.form-four .submit-inline{
    width: auto;
    padding: 0px 15px 0px 15px;
}
.form-four .submit:focus{
    
}
.form-four .submit-invert:focus{
    background-color: #FFF;
    color: var(--form-four-color) !important;
    border: solid 1px var(--form-four-color);
}
.form-four .submit-invert-hover{
    background: unset;
    background-color: #FFF;
    color: var(--form-four-color) !important;
    border: solid 1px var(--form-four-color);
    box-shadow: 0px 0px 8px -5px #aaa;
}
.form-four .submit-invert-hover.dark{
    border: solid 2px #004E57;
}
.form-four .submit-invert-hover-alert{
    border: solid 2px var(--form-four-color);
    font-weight: bold;
}
.form-four .submit-invert-hover:focus{
    background: #FFF !important;
}
@media (hover: hover) {
    .form-four .submit:hover {
        background: linear-gradient(315deg,#33a7b7,#107a8a);
        color: #FFFFFF;
    }
    .form-four .submit-invert:hover{
        background: unset;
        background-color: #FFF;
        color: var(--form-four-color) !important;
        border: solid 1px var(--form-four-color);
    }
    .form-four .submit-invert-hover:hover{
        color: #30a3b3 !important;
    }
}
.form-four .submit-active{
    border: solid 3px var(--form-four-color) !important;
    font-weight: bold !important;
}
.form-four .short-submit{
    width: 50%;
}
.form-four .large-submit{
    width: 100%;
}

.form-four label.submit.button{
    display: grid;
    height: 42px;
    align-items: center;
    align-self: center;
}
.form-four.small label.submit.button{
    height: 32px !important;
}
.form-four .submit label{ 
    cursor: pointer;
}
.form-four .submit.button div.progressbar{ 
    width: 0%;
    position: absolute;
    height: 4px;
    top: 4px;
    left: 0px;
}
.form-four .submit.button div.progressbar{ 
    background-color: white;
}
.form-four .submit-invert.button div.progressbar{ 
    background-color: var(--form-four-color);
}


.form-four div.box-toggle{
    margin: 0px 15px 0px 0px;
    font-family: Calibri;
    font-size: 16px;
}
.form-four div.box-toggle > div.toogle{
    grid-area: check;
}
.form-four div.box-toggle > div.label{
    grid-area: label;
}

.form-four div.box-toggle .label-first-check{
    font-family: Calibri;
    width: max-content;
    text-align: inherit;
    float: none;
    padding: 0px;
	cursor: pointer;
	vertical-align: middle;
    height: 100%;
    font-size: 16px;
    
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: max-content minmax(0,100%);
    grid-column-gap: 5px;
    grid-row-gap: 0px;
    grid-template-areas: 
        "check label";
    align-items: center;
    line-height: 0px;
    white-space: nowrap;
}


.form-four div.box-checkbox{
    margin: 0px 15px 0px 0px;
    font-family: Calibri;
    font-size: 16px;
}
.form-four div.box-checkbox.block{
    margin-bottom: 10px;
}


.form-four div.box-checkbox .label-first-check .item-check{
    grid-area: check;
}
.form-four div.box-checkbox .label-first-check .item-label{
    grid-area: label;
    margin: 2px 0 0 0;
}
.form-four div.box-checkbox .label-first-check{
    font-family: Calibri;
    width: 100%;
    text-align: inherit;
    float: none;
    padding: 0px;
	cursor: pointer;
	vertical-align: middle;
    height: 100%;
    font-size: 16px;
    
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 35px minmax(0,100%);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
        "check label";
}

.form-four input[type="checkbox"] {
	display: none;
	cursor: pointer;
    line-height: 17px !important;
}
.form-four input[type="checkbox"] + .label-first-check span.item-check {
	display: inline-block;
	width: 20px;
	height: 20px;
    line-height: 17px !important;
	margin: 0px 10px 0 0;
	vertical-align: middle;
	background: url(https://www.bnbdays.com/resources/images/form_four_checkbox.svg);
	background-size: cover;
	cursor: pointer;
    margin: auto;
}
.form-four input[type="checkbox"]:checked + .label-first-check span.item-check {
	background: url(https://www.bnbdays.com/resources/images/form_four_checkbox_check.svg);
	background-size: cover;
	cursor: pointer;
}
.form-four input[type="checkbox"].disabled + .label-first-check span.item-check {
	background: url(https://www.bnbdays.com/resources/images/form_four_checkbox_disabled.svg);
	background-size: cover;
}
.form-four input[type="checkbox"].disabled:checked + .label-first-check span.item-check {
	background: url(https://www.bnbdays.com/resources/images/form_four_checkbox_check_disabled.svg);
	background-size: cover;
}


.form-four input[type="radio"] {
	display: none;
	cursor: pointer;
    line-height: 17px !important;
}
.form-four input[type="radio"] + .label-first-radio span {
	display: inline-block;
	width: 20px;
	height: 20px;
    line-height: 17px !important;
	margin: -4px 10px 0 0;
	vertical-align: middle;
	background: url(https://www.bnbdays.com/resources/images/form_four_radio.svg);
	background-size: cover;
	cursor: pointer;
}
.form-four input[type="radio"]:checked + .label-first-radio span {
	background: url(https://www.bnbdays.com/resources/images/form_four_radio_check.svg);
	background-size: cover;
	cursor: pointer;
}
.form-four input[type="radio"].disabled + .label-first-radio span {
	background: url(https://www.bnbdays.com/resources/images/form_four_radio_disabled.svg);
	background-size: cover;
}
.form-four input[type="radio"].disabled:checked + .label-first span {
	background: url(https://www.bnbdays.com/resources/images/form_four_radio_check_disabled.svg);
	background-size: cover;
}

.form-four input[type="text"]{
    text-overflow: ellipsis;
}

.form-four div.box-field div.left input[type="text"]{
    padding-right: 40px;
}
.form-four div.box-field div.right input[type="text"]{
    padding-left: 40px;
}
.form-four div.box-field div.center input[type="text"]{
    padding-left: 40px;
    padding-right: 40px;
}
.form-four div.box-field div.box-field-icon-left{
    top: 9px;
    left: 8px;
    position: absolute;
}
.form-four div.box-field div.box-field-icon-right{
    top: 9px;
    right: 8px;
    position: absolute;
}

.form-four div.box-field span img{
    width: 25px;
    height: 25px;
}








/********************************/


.button-grid .item-a{
  grid-area: icon;
  line-height: 0px;
  margin: 0px 0px 0px 10px;
  padding: 0px !important;
}
.button-grid .item-b{
  grid-area: text;
  margin: 0px 10px 0px 0px;
  padding: 0px !important;
}
.button-grid{
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: max-content max-content;
    grid-column-gap: 5px;
    grid-row-gap: 0px;
    grid-template-areas: 
        "icon text";
    overflow: hidden;
    line-height: normal !important;
}

@media screen and (max-width: 600px){
    .button-grid .item-a{
        margin: 0px;
    }
    .button-grid .item-b{
        margin: 0px;
        font-size: min(0.9em,2.7vw);
    }
    .button-grid{
        display: grid;
        grid-template-columns: max-content;
        grid-column-gap: 0px;
        grid-row-gap: 4px;
        grid-template-rows: auto;
        grid-template-areas: 
            "icon" "text";
    }
    .button-grid.mobile-only-a{
        grid-row-gap: 0px;
        grid-template-areas: 
            "icon";
    }
    .button-grid.ever{
        grid-template-columns: max-content max-content;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-areas: 
            "icon text";
    }
    .button-grid.ever .item-b{
        margin: 0px 0px 0px 10px;
        font-size: inherit;
    }
}


.button-grid-inline .item-first{
  margin: 0px 0px 0px 10px;
  padding: 0px !important;
}
.button-grid-inline .item-last{
  margin: 0px 10px 0px 0px;
  padding: 0px !important;
}
.button-grid-inline{
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    overflow: hidden;
}
.button-grid-inline.items2{
    grid-template-columns: repeat(2,max-content);
}
.button-grid-inline.items3{
    grid-template-columns: repeat(3,max-content);
}
.button-grid-inline.items4{
    grid-template-columns: repeat(4,max-content);
}
.button-grid-inline.items5{
    grid-template-columns: repeat(5,max-content);
}

@media screen and (max-width: 600px){

}







/********************************/
/* FORM-SEARCH START*/
/********************************/




.form-search{
    font-size: 16px;
    line-height: 17px;
}
.form-search input {
    height: 40px;
    border: solid 0px; 
    background-color: transparent;
    
    transition-duration: 0.4s;
}
.form-search input.short {
    width: 150px;
}
.form-search input.short:focus {
    width: 100%;
}

     




/********************************/
/* LOGIN START*/
/********************************/


.div-login-title{
    min-height: 100px;
    border: solid 0px;
    margin: auto;
    text-align: center;
    padding: 20px 0px 20px 0px;
}

.div-login-title-ue {
    height:140px;
}

.loginue > p{
    padding-top: 10px;
    font-size: 60px;    
}


.div-form-content{
    background-color: #FFFFFF;
    width: 450px;
    margin: auto;
    margin-top: 10%;
}


.div-form-three{
    margin:auto;
    border:solid 0px;
    position:relative;
    margin: auto;
}
@media screen and (max-width: 600px) {
    .div-login-title{
        padding: 30px 0px 20px 0px;
    }
    .div-form-three {
        width: 100% !important;
    }
}



.login-error{
    font-family: Calibri !Important;
    border: solid 1px red;
    margin-bottom: 20px;
    padding: 20px 10px 20px 10px;
    width: 100%;
    text-align: center;
    font-size: 18px !Important;
    border-radius: 8px;
}

.login-footer {
    font-family: Calibri;
    font-size: 12px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 25px 1rem 25px 1rem;
    text-align: center;
}



/* LOGIN END*/
/********************************/








.user-new-box{
    color: black;
    position: relative;
    width: 450px;
    min-height:300px;
    background-color: #FFF;
    padding: 50px;
    font-size: 16px;
    margin: 0px;
    box-shadow: 0 0 1em rgba(0,0,0,0.6);
    border-radius: 10px;
    max-width: 96vw;
}
.user-new-box.large{
    width: 700px;
}
.user-new-box.extralarge{
    width: 900px;
}
@media screen and (max-width: 600px) {
    .user-new-box {
        width: 90vw;
        margin: 3vw auto;
        padding: 5%;
    }
    .user-new-box.large{
        width: 94vw;
    }
}
@media screen and (max-width: 400px) {
    .user-new-box {
        width: 96vw;
        margin: 3vw auto;
        padding: 5%;
    }
    .user-new-box.large{
        width: 96vw;
    }
}

.div-register-title{
    width: 100%;
    border: solid 0px;
    margin: auto;
    text-align: center;
    padding: 20px 0px 30px 0px;
}

.user-new-form{
    width: 100%;
    margin: auto;
}

.register-header{
    margin-bottom: 35px;
}

.register-footer > div{
    font-size: 18px;
    text-align: center;
    margin-bottom: 15px;
}
.register-footer .link2{
    font-size: 18px;
}

.form-register{
}

.form-register .line{
    margin-top: 8px;
    margin-bottom: 8px;
}

.form-register input.vshort-text, .form-register  button.vshort-text{
    width: 70px;
    text-align: center;
    padding: 4px 0px 0px 0px;
    margin-right: 0px;
}
.form-register  input.short-text{
    width: 220px;
}
.form-register  input.large-text{
    width: 100%;
}
.form-register  input.error-color{
    border: solid 1px #BB0000;
    color: #BB0000;
}

.form-register button.vshort-submit{
    width: 180px;
    margin-top: 0px;
}
.form-register button.short-submit{
    width: 223px;
}
.form-register button.large-submit{
    width: 100%;
}

.form-register .register-footer{
    font-size: 16px;
    margin-top:20px;
}

@keyframes appear-email-error {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.check-email-error{
    opacity: 0;
    transition-duration: 2s;
    animation: 2s 1 appear-email-error;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    margin-top: 40px;
    margin-bottom: 0px;
}

@keyframes slideInFromLeft {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.send-new-email{ 
    animation: 10s 1 slideInFromLeft;
    opacity: 1;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    text-align: center;
    font-size: 30px;
    color: #000000;
    border: solid 1px red;
    margin-top: 40px;
    border-radius: 8px;
}
.send-new-email > p{ 
    font-size: 20px;
    margin: 20px 0px 20px 0px;
}


@media screen and (max-width: 600px) {
    .div-register-title{
        padding: 30px 0px 20px 0px;
    }
}





.row-setting-ccard .img-card{
    display: table-cell !important;
    vertical-align: middle !important;
    line-height: inherit !important;
    width: 120px !important;
    text-align: center !important;
    line-height: 0px !important;
}

.row-setting-ccard .img-card img{
    width: 60px !important;
    margin-right: 10px !important;
    border: solid 1px #606060;
    border-radius: 5px;
    padding: 0px 8px;
    background-color: #fff;
}



.row-setting-ccard div.text-grid .item-a {
    grid-area: name;
}
.row-setting-ccard div.text-grid .item-b {
    grid-area: currency;
}
.row-setting-ccard div.text-grid .item-c {
    grid-area: number;
    text-align: right;
}
.row-setting-ccard div.text-grid .item-d {
    grid-area: date;
    text-align: right;
}

.row-setting-ccard div.text-grid{
    display: grid;
    grid-template-columns: minmax(0, 100%);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    grid-template-rows: auto;
    grid-template-areas: 
        "name name number"
        "currency currency date";
}


.row-setting-ccard .card-icon-default{
    position: absolute;
    top: 5px; 
    left: 5px;
}
.row-setting-ccard .card-icon-default img{
    width: 20px;
    height: 20px;
}



@media screen and (max-width: 600px){
    .row-setting-ccard div.text-grid .item-a {
        grid-area: name;
        text-align: right;
    }
    .row-setting-ccard div.img-card{
        width: 60px !important;
        text-align: center;
    }
    .row-setting-ccard div.img-card img{
        width: 50px !important;
        margin-right: 0px !important;
    }
    .row-setting-ccard div.text-grid{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
        grid-template-areas: 
            "name name name"
            "currency date number";
    }
    .row-setting-ccard .card-icon-default img{
        width: 16px;
        height: 16px;
    }
}



.pay-row-card{
    cursor: pointer;
    
}
.pay-row-card.select{
    border: solid 3px #107a8a;
}
.pay-row-card.no-border-top.select{
    border-top: solid 0px;
    border-top-left-radius: 0px;;
    border-top-right-radius: 0px;
}
.pay-row-card.no-border-bottom.select{
    border-bottom: solid 0px;
    border-bottom-left-radius: 0px;;
    border-bottom-right-radius: 0px;
}
.pay-row-card-grid{
    
}

.pay-row-card-grid .item-pca {
    grid-area: name;
    font-size: 16px;
    padding-bottom: 5px;
}
.pay-row-card-grid .item-pcb {
    grid-area: data;
    font-size: 13px;
    align-self: end;
}
.pay-row-card-grid .item-pcc {
    grid-area: logo;
    align-self: end;
    
}
.pay-row-card-grid .item-pcc img {
    width: 40px;
}

.pay-row-card-grid{
    font-family: HindSiliguri-Regular;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "name name logo"
        "data data logo";
    width: 100%;
    padding: 2%;
}

.pay-new-card-box{
    margin-top: 0px !important;
    border: solid 1px #DDDDDD;
    border-top: solid 1px transparent;
    padding: 10px 40px 0px 40px;
    margin-bottom: 20px;
    top: -25px;
    border-radius: 0px 0px 8px 8px;
}

@media screen and (max-width: 600px){
    .pay-new-card-box{
        padding: 5px 3% 0px 3%;
    }

}


.home-button{
    border-radius: 999px;
    padding: 0px 16px;
    width: max-content;
    font-family: 'HindSiliguri-Bold';
    font-size: 18px;
    cursor: pointer;
    color: #fff;
    background-color: #004e57;
    min-height: 30px;
    border: solid 1px #E5EDEF;
}
.home-button.big{
    height: 60px;
    border-radius: 8px;
    background: linear-gradient(315deg,#004E57,#107a8a);
    border-radius: 8px;
    padding: 0px 40px;
    font-size: 26px;
}

.home-head-placeholder{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAOCAMAAAB0HJ7HAAAAAXNSR0IArs4c6QAAAwBQTFRF9vb0sodw9PPu06iR9PLw+fj25bib9PTy9vXx9fPwrqOWjlM0yJuDwrKj+eLGqJiHp56UnZKF57+jopOHqYxr2r6q0aWN2bCZhFQ9pW5Wjl1D18/Dxbmq9fHo4Lyb9PHtuolx7+zoZlJF3q2IsnJRMlda3dTMwZN6empZvZF8xZR9eEs1x45u68iodkcyuohtqWRCq3R2ZTAYlVxAy6WRq3ld/f38ycK5YCAAtIJoSEE42rGTFw4HKR8au4Vig2pcxJZtmFo8s3tb4Mm5AAAAakc18e3nlJCHypN27ePboY565N3Ugkcs7N3JWFJL8cun4cSbASoyhUsw7NjF1qSGsIt4bVtQzauX9ezfzrKYADg98t3GrHRYvpF5fjIC7ejjACIkin1zamRaxJyFPlxbvJeCunhV4rSUWFlUaTQYR0xGva+Xl3Jbv4Zn57qQll9J3rujuINqGCgrgV5Sq25QllUy0sW1hkYnzqeI9ebVsJqBgoV+Ry4h16uUtZ+SIFFGnGhP0cKrwpp/+dy+bzgYfEclnGtYuJR+i3heby4Gyp+FNS0luo1iMzQurIFo2MSzMiQdZl5To2RF+ubO4tfPLggA48awZjQofF1LjGJM7+vlxr6xgHxn6ePawI105tS7zq2FkHhpeHt1kXpvGkRPyLyp69S2GC4zqVwv49nI5baK7djJVUpDoXBMJjQ4BhkY2p5r78GU0M3G99u1zbCKu62hsJB9DisztJB7ZHN0AEhWV3N5rp2PIVVg27acx72xXFhOwaORuKV9wItvrYJ6Kjk8pHh/u6KOdDIIxZ2aNBwTnV5Krqt+gkAWuKaDr4BwCwAA1cOus3dZWSUQo2lNvH9gcEQwAB80OkA9pXpiRSQRaioAsqOLwqeH18WetpBttKadr3JDmIRippJnkol/vYFN4K2L6MGj4q6Md1VIfVktmmM7zZqAPgAAg2wzwKiWo3RV7dC2c3JmoIhwvJJuv49oz62HcWtRTEUu3c69bzgA4MOwRRQAX0M0tpl6z6CFb4I3UAAAAi1JREFUKFMBIgLd/QACAgIEBACdIQcAHwgHBAQEBAQHAAAdBwcESUYHBAQACQAIDi1A3wAJBwICBAWlGzY3Pw9fBwAFBx8dUxJPDgBJO6CfBwdNeDQhk+Xr9ACaRgkCBDZrawiY7fobNpQmAKlNqrCxDlirBh5QHwlQjOEVDkD39QAmGwUCIUt64wgQhTlDlDg1U8JZIzS+s4EVVB6mB1gtQD54k/Z/jACbHAVfdg3i7nb7QgEW/kQvcM4UvheHHrRuXK1bCHluLBongz74gQCcSksbsh3c6of/kvyZmJUz7N7MZVcDBk+DYy8tW3nnBgHw8RTz+QAPERwNVYLRFZYXGZdFRf0rATvdeooqtm1UIyNnEgZn5uhClg+I8gBHR6JiVj9zjwYSEjsXfRaKDHHZxwNZYTVxVyckdUJs2oKO7486kQBOYFp/JSI3FTWOGYCZGhgYQQsUSg8TvLhmKSALOIAoWnJgakMTEQBqJWRk2HwNDM2JlekuQXWJb8sUEBMofrUvqF5MTBisUT2N1xMcCgDAaE46kDy1Y3fWAeCGMAsYczEpv2GIKBBVOSAwUi4ir3LFt2gKEABiizyQRD9DKYRFQTIadDiSzzHJN8EWAWwZDD4kCyuhOq6nUaS5CgCRi0SNlzRd23zQ1DBtZtNeGTHGfgM5dMNcM4UzKgMDDF0no70lewAR5BF7fiqEPT3K0iTVdzwyyIbEZSAuMlIabysifX2eSEgsLFa6u8N2uaFB79HlAAAAAElFTkSuQmCC');
    background-position: 50% 70%; 
    background-repeat: no-repeat;
    background-size: cover;    
    height: var(--hi50);
    width: 100%;
    top: var(--height_head);
    position: fixed;
    left: 0px;
    right: 0px;
    margin: auto;
    pointer-events: none;
    
}
.home-head{
    height: calc(var(--hi80) - var(--height_head));
    width: 100%;
    top: calc(var(--height_head) + var(--safe-area-inset-top));
    position: fixed;
    left: 0px;
    right: 0px;
    margin: auto;
    pointer-events: none;
    transform: translateY(var(--translateY));
}
.home-head [data-placeholder-image]{   
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: 50% 70%;
}
.home-head [data-main-image]{  
    transition: opacity 0.25s linear;; 
    opacity: 1 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 70%;
}
.home-head-box{
    margin: auto;
    width: 80%;
    position: fixed;
    left: 0px;
    right: 0px;
    margin: auto;
    pointer-events: none;
    bottom: calc(calc(100px - var(--safe-area-inset-top)) + var(--hi20));
}

.home-grid1 .item-home-grid1-a{
    width: 100%;
    grid-area: a;
    font-family: HindSiliguri-Bold;
    font-size: min(44px,11vw);
    line-height: min(52px,14vw);
}
.home-grid1 .item-home-grid1-b{
    width: 400px;
    margin: auto;
    grid-area: b;
    font-family: HindSiliguri-Medium;
    font-size: min(19px,5.5vw);
    line-height: min(28px,7vw);
    padding-bottom: min(20px, calc(var(--vh, 1vh) * 1));
}
.home-grid1 .item-home-grid1-c{
    width: 100%;
    grid-area: c;
}
.home-grid1 .item-home-grid1-c button.button-play{
    width: min(105px, 25vw);
    height: min(105px, 25vw);
    margin: auto;
    cursor: pointer;
    pointer-events: auto;
    animation-name: button-zooming;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-timing-function: linear;
    min-height: min(120px, 30vw);
    display: grid;
    align-items: center;
}
@keyframes button-zooming {
        0%   {width: min(105px, 25vw); height: min(105px, 25vw);}
        10%  {width: min(105px, 25vw); height: min(105px, 25vw);}
        13%     {width: min(125px, 30vw); height: min(125px, 30vw);}
        16%  {width: min(105px, 25vw); height: min(105px, 25vw);}
        19%     {width: min(125px, 30vw); height: min(125px, 30vw);}
        22%  {width: min(105px, 25vw); height: min(105px, 25vw);}
        100% {width: min(105px, 25vw); height: min(105px, 25vw);}
        
}
@supports( not(margin-top: min(0px)) ){
    .home-grid1 .item-home-grid1-c button.button-play{
        width: 105px;
        height: 105px;
        min-height: 120px;
    }
    @keyframes button-zooming {
        0%   {width:105px; height: 105px;}
        10%  {width:105px; height: 105px;}
        13%     {width:125px; height: 125px;}
        16%  {width:105px; height: 105px;}
        19%     {width:125px; height: 125px;}
        22%  {width:105px; height: 105px;}
        100% {width:105px; height: 105px;}
    }
}
.home-grid1 .item-home-grid1-c button.button-play svg{
}

.home-grid1 .item-home-grid1-c .button-play.hover svg .button-play-icon{
    fill: #004E57!important;
}
.home-grid1 .item-home-grid1-c button.button-play.hover svg .button-play-icon2{
}

@media (hover: hover) {
    .home-grid1 .item-home-grid1-c button.button-play svg:hover .button-play-icon{
        fill: #004E57!important;
    }
    .home-grid1 .item-home-grid1-c button.button-play svg:hover .button-play-icon2{
    }
}

.home-grid1{
    margin: auto;
    text-align: center;
    color:#FFF;
    text-shadow: -1px -1px 10px #000;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "a"
        "b"
        "c";
}


.become-bnbdayer-box{
    font-size: 30px;
    line-height: 30px;
    margin: auto 0px auto auto;
    top: calc(var(--safe-area-inset-top) + 10px);
    right: 3vw;
    text-align: center;
    box-shadow: 0px 0px 10px -1px #fffffff0;
    background-color: #ffffffbd;
    border: solid 0px;
    border-radius: 20px;
    width: max-content;
    pointer-events: auto;
    position: fixed;
}

.home-head .content{
    font-size: 22px;
    color: #FFF;
    font-family: HindSiliguri-Bold;
    margin: auto;
    text-align: center;
}

.home-head-form .struct-grid-two{
    width: 70%;
}

.home-main{
    margin-top: calc(var(--hi80) - var(--height_head));
}


@media screen and (max-width: 600px){
    .home-head{
        top: var(--smartBannerHeight);
    }
    .home-head,
    .home-head-box{
        width: 100%;
    }
    .home-head-box{
        bottom: calc(calc(calc(70px + var(--height_head)) + var(--safe-area-inset-bottom)) + var(--hi20));
    }
    .home-grid1 .item-home-grid1-b{
        width: 90%;
    }

    .home-head .title{
        font-size: 32px;
    }
    
    .home-head .subtitle{
        font-size: 24px;
    }
    
    .home-head-form .struct-grid-two{
        width: 100%;
    }
}

@media screen and (max-height: 600px){
    .home-grid1 .item-home-grid1-b{
        display: none;
    }
    .home-grid1 .item-home-grid1-c{
        padding-top: calc(var(--vh, 1vh) * 5);
    }
    .home-grid1 .item-home-grid1-c div.button-play{
        width: 105px;
        height: 105px;
    }
    @supports( margin-top: min(0px) ){
        .home-grid1 .item-home-grid1-c div.button-play{
            width: min(105px, calc(var(--vh, 1vh) * 22));
            height: min(105px, calc(var(--vh, 1vh) * 22));
        }
    }
    .home-grid1{
        grid-row-gap: 0px;
    }
    
}

.home-search-product-line-box{
    top: -80px;
    font-family: HindSiliguri-bold;
    font-size: 20px;
    color: #107a8a;
    padding: 10px 30px;
    border-radius: 8px 8px 0px 0px;
    width: max-content;
    background-color: #ffffff;
    z-index: 10;
    height: 55px;
    display: grid;
    align-items: center;
    grid-template-columns: max-content max-content;
    justify-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;
    cursor: pointer;
    position: absolute;
    grid-column-gap: 30px;
    border: solid 0px;
}
.home-search-product-line-box .item{
    padding-bottom: 8px;
    border-bottom: solid 3px #fff;
}
.home-search-product-line-box .item.selected{
    border-bottom: solid 3px #107a8a;
}
.home-search-box > .item-a{
    padding-left: 35px;
    align-self: center;
    height: 100%;
}
.home-search-box > .item-a input{
    border: solid 0px !important;
    background-color: transparent !important;
    top: 14px;
    padding: 0px !important;
    width: 100%;
}
.home-search-box > .item-a label{
    top: 12px;
    color: #004E57;
    font-size: 15px;
    font-family: Calibri-bold;
    position: absolute;
}
.home-search-box > .item-b{
    background: linear-gradient(315deg,#004E57,#107a8a);
    border-radius: 8px;
    margin: 5px;
}
.home-search-box > .item-b > div{
    display: grid;
    vertical-align: middle;
    align-items: center;
    height: 100%;
    justify-items: center;
    cursor: pointer;
}
.home-search-box > .item-b > div > button{
    font-family: HindSiliguri-bold;
    font-size: 35px;
    color: #FFF;
    cursor: pointer;
}
.home-search-box{
    display: grid;
    border: solid 1px #E5EDEF;
    width: 100%;
    margin: auto;
    height: 70px;
    border-radius: 0px 8px 8px 8px;
    top: -35px;
    background-color: #FFF;
    position: absolute;
    left: 0px;
    right: 0px;
    z-index: 1;
    box-shadow: 0px 0px 10px 0px #ADADAD;
    grid-template-columns: minmax(0,100%) 250px;
}
@media (hover: hover) {
    .home-search-box > .item-b:hover{
        background-color: #004E57;
    }
}
@media screen and (max-width: 600px){
    .home-search-box > .item-a{
        padding-left: 25px;
    }
    .home-search-box > .item-a input{
        top: 17px;
    }
    .home-search-box > .item-a label{
        top: 8px;
    }
    .home-search-box > .item-b{
        background-color: #107A8A;
        margin: 5px;
    }
    
    .home-search-box{
        width: 92vw;
        height: 60px;
        top: -30px;
        grid-template-columns: minmax(0,100%) 75px;
    }
}



.home-promo .swiper {
    width: 100%;
    height: 100%;
}
.home-promo .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-promo .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-promo .swiper .button-nav{
  position: absolute;
  top: calc(50% - 18px);
  width: 36px;
  height: 36px;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0000009c;
  border-radius: 18px;
  padding-right: 2px;
  opacity: 0;
}
.home-promo .swiper .button-nav.prev{
    left: 5px;
    padding-right: 2px;
}
.home-promo .swiper .button-nav.next{
    right: 5px;
    padding-left: 2px;
}
@media (hover: hover) {
    .home-promo .swiper:hover .button-nav{
        opacity: 1;
    }
}

.home-promo{
    min-height: calc(var(--vh, 1vh) * 30);
    background-color: #E5EDEF;
}
.home-promo-head{
    margin: 50px 4% 30px 4%;
    font-family: HindSiliguri-Regular;
    color: #004E57;
    text-align: center;
}
.home-promo-footer{
    margin: 40px auto 40px auto;
}
.home-promo-grid{
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
}

.home-promo-box{
    border-radius: 8px;
    min-height: 190px;
    cursor: pointer;
}
.home-promo-box.subbox > .item-a{
    grid-area: photo;
    background-image: var(--background-image);
    background-size: cover;
    background-position: center center;
    height: 100%;
    overflow: hidden;
}
.home-promo-box.subbox > .item-b{
    height: 100%;
}
.home-promo-box.subbox > .item-b > .item-b-grid{
    grid-area: data;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: 
        "name"
        "city"
        "points"
        "bnbdayer";
    grid-column-gap: 0px;
    background-color: #fff;
    height: 100%;
    grid-template-rows: auto auto minmax(0,100%) 70px;
    border-radius: 8px;
    overflow: hidden;
}
.home-promo-box.subbox > .item-b > .item-b-grid > .item-a{
    grid-area: name;
    font-family: HindSiliguri-Bold;
    font-size: 19px;
    color: #000;
    padding: 15px 20px 0px 20px;
    align-self: end;
    line-height: 25px;
}
.home-promo-box.subbox > .item-b > .item-b-grid > .item-a .time{
    font-family: HindSiliguri-Regular;
    color: #ADADAD;
    font-size: 18px;
}
.home-promo-box.subbox > .item-b > .item-b-grid > .item-b{
    grid-area: city;
    font-family: HindSiliguri-Bold;
    font-size: 18px;
    padding: 20px 10px 10px 20px;
    overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-promo-box.subbox > .item-b > .item-b-grid > .item-c{
    grid-area: points;
    padding: 0px 10px 10px 20px;
    font-family: HindSiliguri-Regular;
    color: #000;
    overflow: hidden;
}
.home-promo-box.subbox > .item-b > .item-b-grid > .item-f{
    grid-area: bnbdayer;
    align-self: end;
    align-items: center;
    justify-self: start;
    display: grid;
    grid-template-columns: max-content minmax(0,100%);
    width: 100%;
    padding: 10px 15px 10px 20px;
    height: 100%;
}
.home-promo-box.subbox > .item-b > .item-b-grid > .item-f > .item-a{
}
.home-promo-box.subbox > .item-b > .item-b-grid > .item-f > .item-a > img{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: solid 2px #004E57;
}
.home-promo-box.subbox > .item-b > .item-b-grid > .item-f > .item-b{
    font-size: 18px;
    text-align: right;
}

.home-promo-box.subbox > .item-b > .item-b-grid > .item-f .review-stars {
    font-size: 20px;
    font-family: HindSiliguri-Bold;
    line-height: 1;
    margin-top: 4px;
}      
.home-promo-box.subbox > .item-b > .item-b-grid > .item-f .review-stars::before {
    position: relative;
    content: "★★★★★";
    letter-spacing: 1px;
    text-fill-color: transparent;
    background-clip: text;
    background: linear-gradient(90deg, #fc0 calc((var(--rating) / 10) * 100%), #ccc calc((var(--rating) / 10) * 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-promo-box.subbox{
    overflow: hidden;
    font-family: HindSiliguri-Regular;
    color: #606060;
    font-size: 16px;
    line-height: 18px;
    display: grid;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.3);
    align-items: start;
    justify-content: start;
    margin-right: 0px;
    margin-left: auto;
    width: 100%;
    margin-bottom: 0px;
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
    grid-template-areas: "photo" "data";
}
.home-promo .button{
    grid-area: button;
    align-self: end;
}

.home-promo .button > div{
    border-radius: 999px;
    border: solid 1px white;
    color: #fff;
    background-color: #107A8A;
    padding: 0px 10px;
    width: max-content;
    font-family: 'HindSiliguri-Bold';
    font-size: 18px;
    cursor: pointer;
}

.home-promo .button > div:hover{
    background-color: #004E57;
}


@media screen and (max-width: 600px){
    .home-promo-head{
        margin: 50px 4% 20px 4%;
        line-height: 20px;
    }
    .home-promo-grid {
        grid-column-gap: 0px;
        grid-row-gap: 8vw;
        grid-template-columns: 1fr;
        margin: 0px 4vw;
    }
    
}




.home-howwork{
    background-color: #E5EDEF;
    background-position: 50% 70%; 
    background-repeat: no-repeat;
    background-size: cover;
}
.home-howwork .line{
    width: 100%;
    margin-top: 50px;
}

.home-howwork-grid > .item-a{
    grid-area: a;
}
.home-howwork-grid > .item-b{
    grid-area: b;
}
.home-howwork-grid > .item-c{
    grid-area: c;
}
.home-howwork-grid{
    padding: 20px 0px;
    text-align: left;
    color: #FFF;
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
        "a b c";
}

.home-howwork-box{
    border-radius: 10px;
    padding: 30px 30px 20px 30px;
    height: 100%;
}
.home-howwork-box.subbox > .title{
    grid-area: title;
    font-family: HindSiliguri-Bold;
    font-size: 26px;
    line-height: 28px;
}
.home-howwork-box.subbox > .title .tag{
    font-size: 13px;
    line-height: 13px;
    font-family: 'HindSiliguri-Bold';
    color: #107a8a;
    background-color: #fdc842;
    padding: 8px 10px 6px 10px;
    width: min-content;
    white-space: nowrap;
    margin-bottom: 10px;
    border-radius: 2px;
}
.home-howwork-box.subbox > .text{
    grid-area: text;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 18px;
    line-height: 21px;
}
.home-howwork-box.subbox > .button{
    grid-area: button;
    align-self: end;
}

.home-howwork-box.subbox > .button > div{
    border-radius: 999px;
    border: solid 1px white;
    padding: 0px 10px;
    width: max-content;
    font-family: 'HindSiliguri-Bold';
    font-size: 18px;
    cursor: pointer;
}
.home-howwork-box.subbox > .button > div:hover{
    background-color: #004E57;
}
.home-howwork-box.subbox{
    font-family: HindSiliguri-Regular;
    line-height: 24px;
    display: grid;
    background-color: #107A8A;
    box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.3);
    align-items: start;
    justify-content: start;
    grid-template-columns: 1fr;
    grid-template-rows: min-content auto min-content;
    grid-template-areas: 
        "title"
        "text"
        "button";
}


.home-howwork-grid .box-main{
    padding-bottom: 0px; padding-right: 0px;
}
.home-howwork-grid .title-main{
    color: #004E57;
    font-family: HindSiliguri-Bold;
    font-size: 42px;
    line-height: 44px;
}
.home-howwork-grid .title-main .detach{
    color: #E8A600;
}
.home-howwork-grid .img-main{
    transform: translateY(40px);
    max-width: 100vw;
}


@media screen and (max-width: 600px){
    .home-howwork .line{
        margin-top: 0px;
        display: none;
    }
    .home-howwork-grid{
        grid-template-columns: 1fr;
        grid-row-gap: 4vw;
        grid-template-areas: 
            "a"
            "b"
            "c";
    }
    .home-howwork-box.subbox{
        margin: 0px 4vw;
        padding: 20px;
    }
    .home-howwork-grid .title-main{
        font-size: 38px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .home-howwork-grid .box-main{
        padding-top: 0px;
        padding-right: 20px;
    }
    .home-howwork-grid .img-main{
        transform: translateY(0px);
    }
}

.home-swiper{
    font-family: 'HindSiliguri-Regular';
    line-height: 20px;
    overflow: hidden;
    z-index: 0;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    left: -10px;
    width: calc(100% + 20px);
    max-width: 100vw;
}

.home-swiper .slide-testimonials {
    font-size: 20px;
    line-height: 24px;
}

.home-howwork-title-testimonials {
    color: #004E57;
    font-family: HindSiliguri-Bold;
    font-size: 38px;
    line-height: 38px;
    padding-left: 30px;
}
.home-swiper .slide-testimonials > .quote img {
    width: 40px;
    left: 15px;
    top: 20px;
    z-index: 1;
}

.home-swiper .slide-testimonials > .card {
    background-color: white;
    border-radius: 10px 55px 10px 35px;
    border-left: solid 5px #015586;
    padding: 30px 50px 20px 40px;
    font-style: italic;
    color: #626262;
}
.home-swiper .slide-testimonials > .card > .text {
    font-style: italic;
    color: #626262;
}
.home-swiper .slide-testimonials > .card > .name {
    color: #626262;
    text-align: right;
    margin-top: 15px;
}

.home-howwork-testimonials-box{
    display: grid;
    font-family: 'HindSiliguri-Regular';
    line-height: 20px;
    z-index: 0;
    max-width: calc(100vw - 20px);     width: 85%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 15px;
}

@media screen and (max-width: 600px){
    .home-swiper{
        left: 0px;
        width: 100vw;
    }
    .home-swiper .title-testimonials{
        padding-left: 2vw;
    }
    .home-swiper .slide-testimonials {
        padding: 0 2vw 0 2vw;
        font-size: 18px;
        line-height: 22px;
    }
    .home-swiper .slide-testimonials > .card {
        padding: 20px 20px 10px 20px;
    }
    
    .home-howwork-testimonials-box{
        margin: unset;
        width: 100%;
    }

}


.home-howwork-advantages-box{
    display: grid;
    font-family: 'HindSiliguri-Regular';
    line-height: 20px;
    z-index: 0;
    max-width: calc(100vw - 20px); }
.home-howwork-advantages{
    margin-top: 50px;
    margin-bottom: 35px;
    font-family: 'HindSiliguri-Regular';
    line-height: 20px;
    overflow: hidden;
    z-index: 0;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    left: -10px;
    width: calc(100% + 20px);
    max-width: 100vw;
}

@media screen and (max-width: 1200px){
    .home-howwork-advantages-box .swiper-button{
        display: none;
    }
}

.home-howwork-advantages .main-title{
    color: #004E57;
    font-size: 28px;
    font-family: 'HindSiliguri-Bold';
    line-height: 28px;
    margin-top: 10px;
}

.home-howwork-advantages .swiper-slide-advangate.friends{
    padding: 0px;
}
.home-howwork-advantages .swiper-slide-advangate.family{
    padding: 0px;
}
.home-howwork-advantages .swiper-slide-advangate.travel{
    padding: 0px;
}
.home-howwork-advantages .swiper-slide-advangate.party{
    padding: 0px;
}

.home-howwork-advantages .swiper-slide-advangate > div > .item-a{
    grid-area: a;
    height: 250px;
    background-position: 50% 50%; 
    background-repeat: no-repeat;
    background-size: cover;
}

.home-howwork-advantages .swiper-slide-advangate > div{
    background-color: #FFF;
    min-height: 250px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
        "a a"
        "b c";
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 1px 3px 10px -5px rgba(0,0,0,0.3);
}
.home-howwork-advantages .swiper-slide-advangate > div > .item-a.friends{
    background-image: url('https://www.bnbdays.com/resources/images/advantage-friends.webp?v=950');
}
.home-howwork-advantages .swiper-slide-advangate > div > .item-a.family{
    background-image: url('https://www.bnbdays.com/resources/images/advantage-family.webp?v=950');
}
.home-howwork-advantages .swiper-slide-advangate > div > .item-a.travel{
    background-image: url('https://www.bnbdays.com/resources/images/advantage-travel.webp?v=950');
}
.home-howwork-advantages .swiper-slide-advangate > div > .item-a.party{
    background-image: url('https://www.bnbdays.com/resources/images/advantage-party.webp?v=950');
}
.home-howwork-advantages .swiper-slide-advangate > div > .item-b{
    grid-area: b;
    padding: min(10vw,25px);
    color: #7d7d7d;
}
.home-howwork-advantages .swiper-slide-advangate > div > .item-c{
    grid-area: c;
    padding: min(10vw,25px);
    padding-left: 0px;
}
.home-howwork-advantages .swiper-slide-advangate > div > .item-c > ul{
    padding-left: 30px;
}


@media screen and (max-width: 600px){
    .home-howwork-advantages{
        margin: 40px 0vw 4vw 0vw;
        width: 100vw;
        left: 0px;
    }
    .home-howwork-advantages .main-title{
        margin-top: 0px;
        font-size: 24px;
    }
    .home-howwork-advantages .swiper-slide-advangate > div{
        min-height: 150px;
    }
    .home-howwork-advantages .swiper-slide-advangate > div > .item-a{
        height: 150px;
    }
    .home-howwork-advantages .swiper-slide-advangate > div > .item-b{
        padding: 5px 20px 0px 20px;
    }
    .home-howwork-advantages .swiper-slide-advangate > div > .item-c{
        padding: 5px 20px 10px 20px;
    }
    .home-howwork-advantages .swiper-slide-advangate > div > .item-c > ul{
        padding-left: 20px;
    }
    .home-howwork-advantages .swiper-slide-advangate > div{
        grid-template-columns: 1fr;
        grid-template-areas: 
            "a"
            "b"
            "c";
    }
    .home-howwork-advantages .swiper-slide-advangate.friends{
        padding: 0 2vw 0 2vw;
    }
    .home-howwork-advantages .swiper-slide-advangate.family{
        padding: 0 2vw 0 2vw;
    }
    .home-howwork-advantages .swiper-slide-advangate.travel{
        padding: 0 2vw 0 2vw;
    }
    .home-howwork-advantages .swiper-slide-advangate.party{
        padding: 0 2vw 0 2vw;
    }
}


.home-sponsor{
    background-color: #FFFFFF;
}
.home-sponsor-grid > .item-a{
    grid-area: a;
}
.home-sponsor-grid > .item-b{
    grid-area: b;
    padding-top: 20px;
}
.home-sponsor-grid{
    padding: 20px 0px 0px 0px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "a"
        "b";
}

.home-sponsor-grid .title-main{
    color: #004E57;
    font-family: HindSiliguri-SemiBold;
    font-size: 18px;
}

.home-sponsor-box{
    display: grid;
    grid-column-gap: min(100px,10%);
    grid-template-columns: repeat(auto-fit, min(200px,24%));
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.home-sponsor-box a img{
    height: 100%;
    width: 100%;
    max-height: 75px;
    max-width: 200px;
}

@media screen and (max-width: 600px){
    .home-sponsor-grid{
        margin: 0px 4vw;
    }
    .home-sponsor-grid .title-main{
        font-size: 16px;
        margin-bottom: 5px;
    }
    .home-sponsor-grid > .item-b{
        grid-area: b;
        padding-top: 0px;
    }
    .home-sponsor-box a img{
        max-height: 65px;
        max-width: 150px;
    }

}



.home-video{
    background-image: url('https://www.bnbdays.com/resources/images/home_video_bg.jpg?v=950');
    background-position: 50% 40%; 
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
}




.home-video-grid > .item-a{
    grid-area: a;
}
.home-video-grid > .item-b{
    grid-area: b;
}
.home-video-grid{
    margin: 0px 0px -10px 0px;
    text-align: left;
    color: #FFF;
    display: grid;
    grid-column-gap: 0px;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
        "a b";
}


.home-video-grid .box-main{
    padding-bottom: 0px;
    padding-right: 0px;
    margin-top: 100px;
}
.home-video-grid .title-main{
    color: #FFF;
    font-family: HindSiliguri-Bold;
    font-size: 42px;
    line-height: 44px;
}
.home-video-grid .title-main .detach{
    color: #E8A600;
}
.home-video-grid .text-main{
    margin-top: 20px;
    margin-bottom: 20px;
}
.home-video-grid .link-main{
    font-family: HindSiliguri-Bold;
    color: #FFF;
    font-size: 22px;
    cursor: pointer;
}
.home-video-grid .box-video{
    background-image: url('https://www.bnbdays.com/resources/images/home_video2.png?v=950');
    background-position: calc(50% - 6px) 100%; 
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 400px;
    width: 100%;
    cursor: pointer;
}


@media screen and (max-width: 600px){
    .home-video-grid{
        grid-template-columns: 1fr;
        grid-template-areas: 
            "a" "b";
    }
    .home-video-grid .box-main{
        padding: 30px 30px 20px 30px;
        margin-top: 10px;
        text-align: center;
    }
    .home-video-grid .box-video{
        background-size: 160%;
        left: 0px;
        min-height: 80vw;
    }

}

.contact-main-title{
    text-align: center;
    margin-bottom: 40px;
}

.contact-main-box .icon.mail{
    grid-area: im;
}
.contact-main-box .text.mail{
    grid-area: tm;
}
.contact-main-box .icon.phone{
    grid-area: ip;
}
.contact-main-box .text.phone{
    grid-area: tp;
}
.contact-main-box .form{
    grid-area: form;
    align-self: start;
}
.contact-main-box{
    display: grid;
    grid-column-gap: 0px;
    grid-template-columns: min(70px,3vw) 1fr 60%;
    grid-template-areas: 
        "im tm form" 
        "ip tp form" 
        "iw tw form"
        ". . form";
    align-items: center;
}
.contact-main-box > .icon,
.contact-main-box > .text {
    margin-top: 10px;
}
.contact-main-box > .icon {
    justify-self: end;
    margin-right: 15px;
}
.contact-main-box > .icon > img{
    width: 20px;
    
}


@media screen and (max-width: 600px){
    .contact-main-box{
        display: grid;
        grid-column-gap: 0px;
        grid-row-gap: 10px;
        grid-template-columns: 40px 1fr;
        grid-template-areas: 
            "im tm" 
            "ip tp" 
            "iw tw"
            "form form";
    }
    
    .contact-main-box .form{
        margin-top: 30px;
    }
    
}























:root {
    --swipergallery-height: 300px;
    --search-review-background: linear-gradient(90deg, #fc0 calc((7.5 / 10) * 100%), #ccc calc((7.5 / 10) * 100%));
}

@media screen and (max-width: 600px){
    :root {
        --swipergallery-height: calc(calc(var(--vh, 1vh) * 36) + var(--safe-area-inset-top));
    }
}


.item-tabs{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: solid 2px;
    border-radius: 5px;
    height: 35px;
    width: 35px;
    min-width: 35px;
    line-height: 33px;
    font-size: 24px;
    display: block !important;
    margin: auto;
}
.item-cart img{
    width: 40px;
}
.item-cart .count{
    position: absolute;
    top: -8px;
    font-size: 23px;
    line-height: 38px;
    right: 0px;
    left: 16px
}

@media screen and (max-width: 600px){
    .item-tabs{    
        height: 26px;
        width: 26px;
        min-width: 26px;
        line-height: 24px;
        font-size: 18px;
    }
    .item-cart img{
        width: 35px;
    }
    .item-cart .count{
        position: absolute;
        top: -10px;
        font-size: 18px;
        line-height: 35px;
        right: 0px;
        left: 10px
    }
}


.search-review-stars {
    font-size: 30px;
    font-family: HindSiliguri-Bold;
    line-height: 1;
}      
.search-review-stars::before {
    position: relative;
    content: "★★★★★";
    letter-spacing: 3px;
    text-fill-color: transparent;
    background-clip: text;
    background: var(--search-review-background);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.search-body-grid > .item-a{
    grid-area: list;
    padding-right: 30px;
    width: 100%;
}
.search-body-grid > .item-b{
    grid-area: map;
    width: 100%;
}
.search-body-grid{
    justify-items: center;
    align-content: center;
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0,65%) minmax(0,35%);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "list map";
    width: 100%;
    margin-top: 20px;
}

.search-body-map{
    position:relative;
    width:100%;
    height: 550px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.3);
}
.search-body-map .search-onmove{
    background-color: rgba(255,255,255,1);
    display: grid;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    right: 12px;
    top: 10px;
    height: 35px; 
    margin: auto;
    z-index: 1;
    padding: 0px 10px;
}


.gm-style iframe + div { border:none!important; }

:root {
    --searchMapHeight: calc(calc(var(--hi100) - calc(var(--height_head) + var(--topBarHeight))) * 0.48);
}
@media screen and (max-width: 600px){
    
    .search-body-grid-map{
        position: fixed;
        margin-bottom: var(--height_head);
        height: 100%;
        padding: 0px 1vw;
    }
    
    .search-body-grid > .item-a{
        padding: 0px;
        max-width: 100vw;
    }
    .search-body-grid > .item-b{
        position: fixed;
        left: 0px;
        width: 100%;
        top: var(--topBarHeight);
        height: var(--searchMapHeight);
        
    }
    .search-body-grid{
        justify-items: center;
        align-content: center;
        align-items: start;
        display: grid;
        grid-template-columns: 100%;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-rows: auto;
        grid-template-areas: 
            "list";
        width: 100%;
        padding-top: 0px;
        margin-top: 0px;
        padding: 0px 2vw;
    }
    
    .search-body-map{
        background-color: rgba(255,255,255,1);
        border-radius: 0px 0px 15px 15px;
        box-shadow: 0px 6px 8px -4px rgba(0,0,0,0.6);
        height: 100%;
    }
    .search_body-map-touch{
        background: linear-gradient(0deg, rgb(255 255 255), rgb(255 255 255 / 65%), rgb(255 255 255 / 0%));
        border-radius: 0px 0px 15px 15px;
        width: 100%;
        color: white;
        display: grid;
        align-items: center;
        height: 50px; 
        position: relative;
        top: -50px;
        margin: auto;
        z-index: 1;
    }
    .search_body-map-touch > div{
        width: 70px;
        height: 5px;
        border-radius: 15px;
        background-color: rgb(105, 105, 105);
        box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
        padding: 0px 0px;
        margin: auto;
        top: 5px;
    }
    .search_body-map-touch > div > div{
    }
    
    .search-body-map-button-view {
        position: fixed;
        display: inline-flex;
        vertical-align: middle;
        background-color: #222222;
        color: white;
        padding: 7px 10px;
        border-radius: 20px;
        left: 50%;
        transform: translate(-50%,-100%);
        top: calc(100% - calc(var(--height_head) + 15px));
    }
    
    }



.search-service-box{
    border-radius: 8px;
    min-height: 190px;
    cursor: pointer;
}
.search-service-box.subbox > .item-a{
    grid-area: photo;
    background-image: var(--background-image);
    background-size: cover;
    background-position: center center;
    height: 100%;
    border-radius: 8px 0px 0px 8px;
}
.search-service-box.subbox > .item-a > .service-image{
    background-image: var(--background-image);
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
    margin: 2%;
    border: solid 3px white;
    width: 45%;
    box-shadow: 0px 0px 10px -3px #3b3b3b;
}
.search-service-box.subbox > .item-a > .service-image:after {
  content: "";
  display: block;
  padding-bottom: 75%;
}
.search-service-box.subbox > .item-b{
    position: relative;
    grid-area: data;
    background-color: #FFFFFF;
    height: 100%;
    border-radius: 8px;
}
.search-service-box.subbox > .item-b > .item-b-grid{
    display: grid;
    grid-template-columns: auto minmax(0,100%) auto;
    grid-template-areas: 
        "name name name"
        "point point point"
        "timetable timetable minprice"
        "bnbdayer bnbdayer bnbdayer";
    grid-column-gap: 0px;
    background-color: #fff;
    height: 100%;
    grid-template-rows: auto auto auto 70px;
    border-radius: 8px;
    margin-left: -8px;
    overflow: hidden;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-a {
    grid-area: point;
    padding: 10px 10px 0px 20px;
    width: 100%;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-a > .icon img{
    width: 28px;
    margin-right: 10px;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-a > div .name{
    font-size: 18px;
    font-family: HindSiliguri-SemiBold;
    top: -3px;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-a > div .city{
    font-size: 12px;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-c{
    grid-area: name;
    font-family: HindSiliguri-Bold;
    font-size: 24px;
    color: #004E57;
    padding: 20px 0px 5px 20px;
    min-height: 30px;
    line-height: 26px;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-d{
    grid-area: timetable;
    font-size: 14px;
    padding: 0px 0px 10px 20px;
    align-self: end;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-e{
    grid-area: minprice;
    font-size: 14px;
    text-align: right;
    padding: 0px 20px 10px 0px;
    align-self: end;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-e .price{
    font-family: HindSiliguri-Bold;
    font-size: 16px;
    color: #000;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-e .amount{
    font-size: 24px;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-f{
    grid-area: bnbdayer;
    align-self: end;
    align-items: center;
    justify-self: start;
    display: grid;
    grid-template-columns: max-content minmax(0,100%);
    width: 100%;
    background-color: #F0F0F0;
    padding: 10px 20px;
    height: 100%;
}

.search-service-box.subbox > .item-b > .item-b-grid > .item-f > .item-a{
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-f > .item-a > img{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: solid 2px #004E57;
}
.search-service-box.subbox > .item-b > .item-b-grid > .item-f > .item-b{
    font-size: 16px;
    color: #004E57;
    padding-left: 15px;
}

.search-service-box.subbox > .item-b > .item-b-grid > .item-f .review-stars {
    font-size: 15px;
    font-family: HindSiliguri-Bold;
    line-height: 1;
    margin-top: 4px;
}      
.search-service-box.subbox > .item-b > .item-b-grid > .item-f .review-stars::before {
    position: relative;
    content: "★★★★★";
    letter-spacing: 1px;
    text-fill-color: transparent;
    background-clip: text;
    background: linear-gradient(90deg, #fc0 calc((var(--rating) / 10) * 100%), #ccc calc((var(--rating) / 10) * 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.search-service-box.subbox{
    font-family: HindSiliguri-Regular;
    color: #262626;
    font-size: 16px;
    line-height: 18px;
    display: grid;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.3);
    align-items: start;
    justify-content: start;
    grid-template-columns: 1.2fr 2fr;
    grid-template-areas: 
        "photo data";
    margin-right: 0px;
    margin-left: auto;
    width: 100%;
    margin-bottom: 20px;
}

@media screen and (max-width: 600px){
    .search-service-grid {
        grid-column-gap: 0px;
        grid-row-gap: 8vw;
        grid-template-columns: 1fr;
        margin: 0px 4vw;
    }
    .search-service-box.subbox > .item-a > .service-image{
        width: 70%;
    }
    .search-service-box.subbox > .item-a > .service-image:after {
      padding-bottom: 70%;
    }
    }

.info-window-map.search-service-box.subbox {
    background-color: unset;
    grid-template-columns: 1fr;
    grid-template-rows: 1.7fr 2fr;
    grid-template-areas: "photo" "data";
    box-shadow: none;
    margin-bottom: 0px;
}

.info-window-map.search-service-box.subbox > .item-b > .item-b-grid{
    display: grid;
    grid-template-columns: auto minmax(0,100%) auto;
    grid-template-areas: 
        "name name name"
        "point point point"
        "city city city"
        "timetable timetable minprice";
    grid-column-gap: 0px;
    background-color: #fff;
    height: 100%;
    grid-template-rows: auto auto auto auto;
    border-radius: 8px;
    overflow: hidden;
}

.info-window-map.search-service-box.subbox > .item-b > .item-b-grid > .item-a{
    padding: 5px 0px 0px 20px
}
.info-window-map.search-service-box.subbox > .item-b > .item-b-grid > .item-c{
    padding: 20px 0px 0px 20px
}




.info-window-map.location-selectpoint-iwm > .item-a{
    grid-area: photo;
    width: 100%;
    height: 125px;
}
.info-window-map.location-selectpoint-iwm > .item-a > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.info-window-map.location-selectpoint-iwm > .item-b{
    grid-area: data;
    width: 100%;
}
.info-window-map.location-selectpoint-iwm {
    display: grid;
    background-color: unset;
    grid-template-columns: 1fr;
    grid-template-rows: 125px 75px;
    grid-template-areas: "photo" "data";
    box-shadow: none;
    margin-bottom: 0px;
    width: 100%;
}
.info-window-map.location-selectpoint-iwm > .item-b > .item-b-grid > .item-a{
    grid-area: point;    
    padding: 10px 0px 5px 0px;
    font-size: 18px;
}
.info-window-map.location-selectpoint-iwm > .item-b > .item-b-grid > .item-b{
    grid-area: city;
    padding: 0px 0px 10px 0px;
}
.info-window-map.location-selectpoint-iwm > .item-b > .item-b-grid{
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: 
        "point"
        "city";
    grid-column-gap: 0px;
    background-color: #fff;
    grid-template-rows: auto auto;
    overflow: hidden;
    text-align: center;
    margin: auto;
}




















.bnbday-fixed{     position: absolute;
    top: 0px;
    left: 0px;
    max-width: 100vw;
    max-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}

.bnbday-body-grid > .item-a{
    grid-area: data;
    padding-right: 70px;
    width: 100%;
}
.bnbday-body-grid > .item-b{
    grid-area: summary;
    width: 100%;
}
.bnbday-body-grid{
    justify-items: center;
    align-content: center;
    align-items: start;
    display: grid;
    grid-template-columns: 65% 35%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "data summary";
    width: 100%;
    background-color:#FFF;
    margin-top: 20px;
}
.bnbday-body-grid > .item-b .title1{
    font-family: HindSiliguri-Bold;
    font-size: 20px !important;
    line-height: 22px;
    color: #00535C;
}


.bnbday-body2-grid > .item-bg2-a{
    grid-area: data;
    padding-right: 30px;
    width: 100%;
}
.bnbday-body2-grid > .item-bg2-b{
    grid-area: summary;
    width: 100%;
}
.bnbday-body2-grid{
    justify-items: center;
    align-content: center;
    align-items: start;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "data summary";
    width: 100%;
}

.bnbday-gallery-grid > .item-a{
    grid-area: opt1;
}
.bnbday-gallery-grid > .item-b{
    grid-area: opt2;
}
.bnbday-gallery-grid > .item-c{
    grid-area: opt3;
}
.bnbday-gallery-grid{
    justify-items: center;
    align-content: center;
    align-items: start;
    justify-content: stretch;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        ". opt1 opt2 opt3 .";
    width: 100%;
}


@media screen and (max-width: 600px){
    .search-review-stars {
        font-size: 18px;
    }   
    .search-review-stars::before {
        letter-spacing: 1px;
    }         
    .search-review-count {
        font-size: 14px;
    }     
    .search-review-stars::before {
    }   
    
    .bnbday-body-grid > .item-a{
        padding: 0px;
        max-width: 100vw;
    }
    .bnbday-body-grid > .item-b{
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        z-index: 1999;
    }
    .bnbday-body-grid > .item-b.over-bg-pp{          z-index: 2002;
    }
    .bnbday-fixed .bnbday-body-grid > .item-b{         display: none;
    }
    .bnbday-body-grid{
        justify-items: center;
        align-content: center;
        align-items: start;
        display: grid;
        grid-template-columns: 100%;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-rows: auto;
        grid-template-areas: 
            "data";
        width: 100%;
        padding-top: 0px;
        margin-top: 0px;
    }
    
    .bnbday-body2-grid > .item-bg2-a{
        padding: 0px;
        max-width: 100vw;
    }
    .bnbday-body2-grid > .item-bg2-b{
        position: fixed;
        top: 0px;
        left: 0px;
        max-width: 100vw;
        max-height: calc(var(--vh, 1vh) * 100);
        overflow: auto;
        background-color: #FFFFFF;
        transition: all 0.3s linear;
        padding-top: var(--height_head);
        padding-bottom: 20px;
        z-index: 2000;
    }
    .bnbday-body2-grid{
        justify-items: center;
        align-content: center;
        align-items: start;
        display: grid;
        grid-template-columns: 100%;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-rows: auto;
        grid-template-areas: 
            "data";
        width: 100%;
    }
}





.bnbday-box{
    margin: 0px 0px 50px 0px;
}
.bnbday-box-separator{
    height: 16px;
    border-top: solid 1px #c6c6c6;
    border-bottom: solid 1px #c6c6c6;
    background-color: #e2e2e2;
    margin-bottom: 20px;
}
.search-service-title{
    font-family: HindSiliguri-Bold;
    font-size: 38px;
    line-height: 39px;
    color: #107a8a;
    }
.search-service-subtitle{
    font-family: HindSiliguri-Regular;
    font-size: 18px;
    line-height: 22px;
    color: #606060;
    margin-bottom: 20px;
}
.search-service-title2{
    font-family: HindSiliguri-Bold;
    font-size: 26px;
    line-height: 28px;
    color: #00535C;
    margin: 0px 0px 20px 0px;
}
.search-service-title3{
    font-family: HindSiliguri-Regular;
    font-size: 22px;
    line-height: 23px;
    color: #107a8a;
    margin: 0px 0px 0px 0px;
}
.search-service-textbold{
    font-family: HindSiliguri-SemiBold;
    color: #000;
    font-size: 20px;
}


.bnbday-box.selected{
    width: calc(100% + 50px);
    left: -25px;
    background-color: #00808E;
    padding: 25px 25px;
    border-radius: 10px;
}

.bnbday-box.selected .search-service-title2{
    color: #FFFFFF;
}
.bnbday-box.selected.attention{
    animation: 1s 1 bnbday-box-selected-attention;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
    background-color: #FCCA4D;
    box-shadow: 0px 0px 10px 0px #FCCA4D;
}
@keyframes bnbday-box-selected-attention {
    0% {
        background-color: #FCCA4D;
        box-shadow: 0px 0px 10px 0px #FCCA4D;
    }
    80% {
        background-color: #00808E;
        box-shadow: 0px 0px 0px 0px #00808E;
    }
    100% {
        background-color: #00808E;
        box-shadow: 0px 0px 0px 0px #ffffff;
    }
}

.materials-box.attention,
.bnbday-box.attention{
    animation: 1s 1 bnbday-box-attention;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
    background-color: #FCCA4D;
    box-shadow: 0px 0px 2px 20px #FCCA4D;
    border-radius: 10px;
}
@keyframes bnbday-box-attention {
    0% {
        background-color: #FCCA4D;
        box-shadow: 0px 0px 2px 20px #FCCA4D;
    }
    80% {
        background-color: #ffffff;
        box-shadow: 0px 0px 2px 10px #ffffff;
    }
    100% {
        background-color: #ffffff;
        box-shadow: 0px 0px 2px 10px #ffffff;
    }
}


@media screen and (max-width: 600px){
    .bnbday-box{
        margin: 0px 5% 30px 5% !important;
    }
    .search-service-title{
        font-family: HindSiliguri-Bold;
        font-size: calc(var(--vh, 1vh) * 5);
        line-height: calc(var(--vh, 1vh) * 5);
    }
    .search-service-subtitle{
        font-family: Calibri;
        font-size: 18px;
        line-height: 20px;
        top: 0px;
        margin-top: 4px;
    }
    .search-service-title2{
        font-size: 24px;
        line-height: 26px;
        margin: 10px 0px 20px 0px;
    }
    .search-service-title.title2{
        font-family: HindSiliguri-Bold;
        font-size: 28px;
        line-height: 30px;
        margin:30px 0px 10px 0px;
    }
    .search-service-title3{
        font-family: HindSiliguri-Regular;
        font-size: calc(var(--vh, 1vh) * 3);
        line-height: calc(var(--vh, 1vh) * 3.1);
        margin: 0px 0px 0px 0px;
        padding-top: 5px;
    }
    .search-service-textbold{
        font-size: 16px;
    }
}

.bnbday-data{
    margin: 0px 0px 15px 0px;
}    
.bnbday-data div.title{
    font-family: Calibri-Bold;
    padding: 0px 0px 5px 0px;
    font-size: 18px;
}
.bnbday-data div.data{
    font-size: 16px;
}

.bnbday-dobooking-box .item-a{
    grid-area: image;
}
.bnbday-dobooking-box .item-b{
    grid-area: text;
}
.bnbday-dobooking-box{
    font-family: HindSiliguri-Regular;
    font-size: 18px;
    line-height: 22px;
    display: grid;
    align-items: center;
    margin: auto;
    grid-template-columns: 60px minmax(0, 100%);
    grid-template-areas: 
        "image text";
}

.bnbday-selectedday-box{
    border-radius: 8px;
    display: grid;
    align-items: center;
    margin: auto;
    font-family: HindSiliguri-Regular;
}

.bnbday-availability-selectday-selected .item-a{
    grid-area: image;
    padding-right: 20px;
}
.bnbday-availability-selectday-selected .item-b{
    grid-area: date;
}
.bnbday-availability-selectday-selected{
    padding-right: 20px !important;
    background-color: #fafafa !important;
    border-radius: 5px !important;
    font-size: 20px !important;
    line-height: 26px;
    min-height: 40px;
    display: grid;
    align-items: center;
    border: solid 1px gray;
    padding: 20px;
    text-align: left;
    width: 100%;
    margin: auto;
    grid-template-columns: 50px minmax(0, 100%);
    grid-template-areas: 
        "image date";
}
.bnbday-availability-selectday-button{
    display: grid;
    justify-content: end;
    margin-top: 10px;

}
.bnbday-availability-calendar{
    border-radius: 8px;
    z-index: 0;
    overflow: hidden;
    min-height: 350px;
}
.bnbday-availability-cancelpolicy-box{
    margin-top: 10px;
    display: flex;
    align-items: center;
    line-height: 0;
}
.bnbday-availability-cancelpolicy-box > span > img{
    width: 20px; margin-right: 10px;
}
@media screen and (max-width: 600px){
    .bnbday-box.selected{
        padding: 20px 20px;
        width: unset;
        left: unset;
    }
}


.location-selectpoint-box{
    display: grid;
    align-items: center;
    max-width: 500px;
    margin: auto;
}
.bnbday-location-selectpoint-selected{
    
}
.bnbday-location-selectpoint-button{
    display: grid;
    justify-content: end;
    margin-top: 10px;
}
.bnbday-location-point-card > .item-check{
    grid-area: check;
    align-self: center;
    justify-self: center;
}
.bnbday-location-point-card > .item-a{
    grid-area: image;
    width: 100%;
    line-height: 0px;
    border-radius: 5px;
    overflow: hidden;
    max-height: 70px;
    min-height: 70px;
}
.bnbday-location-point-card > .item-b{
    grid-area: info;
    width: 100%;
    padding-left: 15px;
    border-left: 0px;
    align-self: center;
}
.bnbday-location-point-card > .item-b .name{
    grid-area: info;
    width: 100%;
    font-size: 16px;
    font-family: 'HindSiliguri-SemiBold';
    margin-bottom: 6px;
}
.bnbday-location-point-card > .item-b .city{
    grid-area: info;
    width: 100%;
    font-size: 14px;
    font-family: 'HindSiliguri-Light';
}
.bnbday-location-point-card{
    display: grid;
    grid-template-columns: 45px 0.6fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "check image info";
    border-radius: 5px;
    min-height: 60px;
    overflow: hidden;
    margin: auto;
    margin-top: 15px;
    background-color: #fafafa;
    padding: 5px 5px 5px 0px;
    border: solid 1px gray;
    width: 100%;
}


.bnbday-location-point-card > .item-check div.check{
    width: 30px;
    height: 30px;
    border-radius: 25px;
    border: solid 1px gray;
}
.bnbday-location-point-card.selected > .item-check div.check{
    background-image: url(https://www.bnbdays.com/resources/images/form_four_checkbox_2_white_check.svg?v=950);
}
.bnbday-location-point-card.unselected{
    display: none;
}
.bnbday-location-selectpoint-list-box{
    display: grid;
    line-height: 20px;
    z-index: 0;
    max-width: calc(100vw - 20px);
    justify-items: center;
}

.bnbday-location-selectpoint-list{
    width: min(400px,100vw);
    left: 0px;
    overflow: hidden;
    max-width: 100vw;
}



.service-gallery-box{
    max-width: 1080px;
    width: 100%;
    transform: translateY(var(--translateY));
    top: 0px;
    left:0px;
    right: 0px;
    margin: auto;
    margin-top: 20px;
    display: grid;
    pointer-events: initial;
}
.swipergallery-box{
    transform: scale( var(--scale) );
    height: calc(var(--swipergallery-height) + 20px);     margin-bottom: 10px;
    overflow: hidden;
    padding: 10px 5px;
}
.swipergallery{
    height: var(--swipergallery-height);
}
.swipergallery .swiper-slide{
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer;
}
.swipergallery .swiper-slide-gallery{
    height: var(--swipergallery-height);
        border-radius: 8px;
    overflow: hidden;
}


.swipergallery .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swipergallery .swiper-pagination-box{
    display: none;
}
.swipergallery .swiper-pagination-1{
    top: 0px;
    color: #FFF;
    padding: 3px 8px;
    border-radius: 14px;
    white-space: nowrap !important;
}

@media screen and (max-width: 600px){
    .swipergallery-box{
        transform: scale( var(--scale) );
        height: var(--swipergallery-height);
        overflow: hidden;
        padding: 0px;
    }
    .swipergallery{
        height: var(--swipergallery-height);
    }
    .swipergallery .swiper-slide-gallery{
        height: var(--swipergallery-height);
        box-shadow: none !important;
        border-radius: 0px;
    }
    .swipergallery .swiper-pagination-box{
        display: inherit;
        position: absolute;
        bottom: 10px;
        left: 0px;
        right: 0px;
        margin: 0 10px 0 auto;
        background-color: rgba(0,0,0,0.5);
        z-index: 1;
        width: max-content;
        color: #FFF;
        border-radius: 14px;
    }
}










  


.service-body{
    background-color:#FFFFFF;
    transform-origin: top left;     }
@media screen and (max-width: 600px){
    .service-body{
        padding-top: var(--swipergallery-height);
    }
}

.service-menu-box{
    font-size: 14px;
    width: 100%;
    transform: translateY(var(--translateY));
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    overflow:hidden;
    background-color: #FFF;
    transition: all 0.3s linear;
}
.service-menu-box{
}

.service-menu-box.show-shadow{
    box-shadow: transparent 0px 0px 0px 1px, transparent 0px 0px 0px 4px, rgb(0 0 0 / 18%) 0px 2px 4px !important;
}
.swipermenu .swiper-slide-menu{
    min-width: 24%;
    width: max-content;
    text-align: center;
    padding: 13px 8px 7px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
.swipermenu .swiper-slide-thumb-active {
    color: var(--color-head);
    font-family: Calibri-bold
}
.swipermenu-scrollbar{
    width: 24%;
    height: 3px;
    background-color: var(--color-head);
    transition: all 0.2s linear;
}
.swipermenu-scrollbar.no-transition{
    transition: none !important;
}

@media screen and (max-width: 600px){
    .service-gallery-box{
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        max-width: 100%;
        transform: translateY(var(--translateY));
        margin: auto;
        height: 100%;
        padding: 0px;
    }
    .service-gallery-box.no-pointer-events{
        pointer-events: none;
    }
    .service-menu-box{
        width: 100vw;
    }
}





.search-service-details-photo{
    border-radius: 50%;
    width: 45px;
    height: 45px;
    overflow: hidden;
    border: solid 3px #fff;
    box-shadow: 0px 0px 0px 3px #107a8a
}
.search-service-minilabel{
    font-size: 16px;
    font-family: HindSiliguri-Light;
}

.bnbday-details-grid .item-bdg-a{
    grid-area: itema;
}
.bnbday-details-grid .item-bdg-b{
    grid-area: itemb;
    text-align: right;
    justify-self: end;
}
.bnbday-details-grid .item-bdg-c{
    grid-area: itemc;
}
.bnbday-details-grid .item-bdg-d{
    grid-area: itemd;
    justify-self: start;
}
.bnbday-details-grid .item-bdg-e{
    grid-area: iteme;
    justify-self: end;
    text-align: right;
}
.bnbday-details-grid .item-bdg-f{
    grid-area: itemf;
}
.bnbday-details-grid .item-bdg-g{
    grid-area: itemg;
    text-align: justify;
    line-height: 24px;
    font-family: HindSiliguri-Light;
    font-size: 17px;
}
.bnbday-details-grid .item-bdg-g > p{
    padding: 4px 0px;
}
.bnbday-details-grid{
    justify-items: start;
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: 1fr 1fr max-content;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    grid-template-areas: 
        "itema itema itemb"
        "itemc itemd iteme"
        "itemf itemf itemf"
        "itemg itemg itemg";
    width: 100%;
    padding-top: 0px;
    margin: 0px 0px 20px 0px;
}

@media screen and (max-width: 600px){
    .search-service-details-photo{
        width: 35px;
        height: 35px;
    }
    .search-service-minilabel{
        font-size: 14px;
        line-height: 16px;
    }
    .bnbday-details-grid{
        margin-top: 2vw;
    }
    
    .bnbday-details-grid .item-bdg-a{
        justify-self: start;
        padding: 20px 0px 10px 0px;
    }
    .bnbday-details-grid .item-bdg-b{
        justify-self: end;
        text-align: right;
    }
    .bnbday-details-grid .item-bdg-c{
        justify-self: start;
        text-align: left;
    }
    .bnbday-details-grid .item-bdg-d{
        justify-self: start;
        text-align: left;
    }
    .bnbday-details-grid .item-bdg-e{
        justify-self: end;
        text-align: right;
    }
    .bnbday-details-grid .item-bdg-f{
        justify-self: start;
    }
    .bnbday-details-grid .item-bdg-g{
        margin-top: 20px;
    }
    
    .bnbday-details-grid{
        justify-items: center;
        align-content: center;
        align-items: start;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 10px;
        grid-template-areas:
            "itema itema"
            "itemc iteme"
            "itemd itemb"
            "itemg itemg"
            "itemf itemf";
        margin: 0px 0px 40px 0px;
    }
}























.bnbday-main-material-box{
}

.bnbday-main-material-grid .item-mma{
    grid-area: photo;
    width: 100%;
    text-align: left;
}
.bnbday-main-material-grid .item-mmb{
    grid-area: description;
    width: 100%;
}
.bnbday-main-material-grid .item-mmb > .name{
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
    font-family: HindSiliguri-SemiBold;
    text-transform: uppercase;
    padding-top: 12px;
}
.bnbday-main-material-grid .item-mmb > .details{
    color: #606060;
    line-height: 20px;
    font-family: HindSiliguri-Light;
    font-size: 16px;
}
.bnbday-main-material-grid .item-mmb > .details ul{
    padding-left: 15px;
}
.bnbday-main-material-grid .item-mmb > .details ul li:not(.noli)::before  {
    content: '·';
    position: absolute;
    left: -16px;
    font-size: 2.8em;
    top: 2px;
    
}
.bnbday-main-material-grid .item-mmb > .details ul li{
     list-style-type: none;
    padding-bottom: 4px;
}

.bnbday-main-material-grid .item-mmb > .details ul li.noli{
    list-style: none;
    left: -15px;
}
.bnbday-main-material-grid .item-mmc{
    grid-area: price;
    width: 100%;
    text-align: left;
    align-self: center;
    font-family: HindSiliguri-Regular;
    font-size: 20px;
    white-space: nowrap !important;
}
    
.bnbday-main-material-grid .item-mmd{
    grid-area: buttons;
    width: 100%;
    text-align: right;
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    max-width: max-content;
    justify-self: end;
    align-self: center;
}
.bnbday-main-material-grid{
    justify-items: start;
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: 200px minmax(0,100%) minmax(100px,max-content);
    grid-column-gap: 0px;
    grid-row-gap: 5px;
    grid-template-rows: minmax(0,100%) 40px;
    grid-template-areas: 
        "photo description description"
        "photo price buttons";
    width: 100%;
    border-top: solid 1px #d1d1d1;
    padding-bottom: 30px;
}
.bnbday-main-material-grid.type1{
    border-radius: 50px 0px 0px 0px;
}
.bnbday-main-material-grid.type2{
    border-radius: 70px 0px 0px 0px;
    grid-template-columns: 140px minmax(0,100%) minmax(100px,max-content);
    padding-bottom: 10px;
}
.bnbday-main-material-grid.type2 .item-mmb > .name{
    padding-top: 6px;
    text-transform: unset;
}
.bnbday-main-material-grid.type3{
    border-radius: 0px 0px 0px 0px;
    grid-template-columns: minmax(0,100%) minmax(100px,max-content);
    grid-row-gap: 0px;
    grid-template-areas: 
        "description description"
        "price buttons";
    padding-bottom: 10px;
}
.bnbday-main-material-grid.type3 .item-mma{
    display: none;
}
.bnbday-main-material-grid.type3 .item-mmb > .name{
    margin-bottom: 0px;
    padding-top: 6px;
    text-transform: unset;
}

.bnbday-main-material-grid .img.material img{
    object-fit: cover;
    margin: 0px 5px 5px 0px;
    cursor: pointer;
}
.bnbday-main-material-grid.type1 .img.material img{
    border-radius: 50px 0px 30px 25px;
    width: 180px;
    height: 160px;
}
.bnbday-main-material-grid.type2 .img.material img{
    border-radius: 200px 0px 200px 200px;
    width: 120px;
    height: 120px;
}
.bnbday-main-material-grid .count{
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: 13px;
    display: none;
}
.bnbday-main-material-grid .count-total{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
}


@media screen and (max-width: 600px){
    .bnbday-main-material-grid .item-mmb > .name{
        margin-bottom: 10px;
    }
    .bnbday-main-material-grid{
        grid-template-columns: 25vw minmax(0,100%) minmax(90px,max-content);
    }
    .bnbday-main-material-grid.type1 .img.material img{
        border-radius: 30px 0px 15px 10px;
    }
    .bnbday-main-material-grid.type1 .img.material img{
        width: calc(25vw - 10px);
        height: calc(28vw - 10px);
        margin: 0px 0px 5px 0px;
    }
    .bnbday-main-material-grid.type2{
        border-radius: calc(calc(20vw - 10px) / 2) 0px 0px 0px;
        grid-template-columns: 21vw minmax(0,100%) minmax(90px,max-content);
    }
    .bnbday-main-material-grid.type2 .img.material img{
        width: calc(20vw - 10px);
        height: calc(20vw - 10px);
        margin: 0px 0px 5px 0px;
    }
    .bnbday-main-material-grid .count{
        top: -5px;
    }
}

.bnbday-map{
    position: relative;
    width: 100%;
    height: 550px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 5px 1px #ADADAD;
}
   

.bnbday-summary{
    padding: 0px 0px 0px 0px;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px !important;
    border-radius: 8px;
}
.bnbday-summary-body{
    position: relative;
    border: solid 1px transparent;
    width: 100%;
    height: 100%;
    padding: 5%;
}

.bnbday-summary-subbody-grid .item-ssa{
    grid-area: summary;
    width: 100%;
}
.bnbday-summary-subbody-grid .item-ssb{
    grid-area: bar;
    width: 100%;
}
.bnbday-summary-subbody-grid .item-ssb .note-subbody{
    text-align: center;
    font-size: 13px;
}
.bnbday-summary-subbody-grid{
    justify-items: start;
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "summary"
        "bar";
    width: 100%;
}


.bnbday-summary-material-grid .item-sa{
    grid-area: remove;
}
.bnbday-summary-material-grid .item-sb{
    grid-area: count;
    padding: 0px 10px 0px 5px;
    text-align: right;
    justify-self: end;
}
.bnbday-summary-material-grid .item-sc{
    grid-area: description;
}
.bnbday-summary-material-grid .item-sd{
    grid-area: price;
    justify-self: end;
}
.bnbday-summary-material-grid{
    justify-items: start;
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0,max-content) minmax(45px,max-content) minmax(0,100%) minmax(60px,max-content);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "remove count description price";
    width: 100%;
}


.bnbday-summary-bottom-grid .item-sba{
    grid-area: submit;
    width: 100%;
}
.bnbday-summary-bottom-grid .item-sbb{
    grid-area: bar;
    width: 100%;
    display: none;
}
.bnbday-summary-bottom-grid .item-sbb .count{
    font-size: 14px !important;
    line-height: 16px !important;
    min-width: 23px;
    margin-top: -5px;
    margin-left: -10px;
    border: solid 2px;
    border-radius: 50%;
    background-color: #ffffff;
    padding: 1px;
    display: inline-block;
    position: absolute;
}
.bnbday-summary-bottom-grid .item-sbb .count-alert{
    margin-top: -5px;
    margin-left: -10px;
    display: inline-block;
    position: absolute;
}
.bnbday-summary-bottom-grid{
    justify-items: start;
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 2%;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "submit";
    width: 100%;
    margin-top: 20px;
}


.bnbday-summary .title1{
    font-family: HindSiliguri-Bold;
    font-size: 26px !important;
    line-height: 27px;
}

@media screen and (max-width: 600px){
    .bnbday-map{
        height: 350px;
    }
    .materials-summary-box{
        padding-bottom: calc(var(--height_bar_bottom) + var(--safe-area-inset-bottom));
    }
    .bnbday-summary-body{
        padding: 0px;
        max-height: 100vh;
        max-height: calc(calc(var(--vh, 1vh) * 97) - var(--safe-area-inset-top));         }
    .bnbday-summary-subbody-grid .item-ssa{
        background-color: #FFFFFF;
        border-radius: 10px;
        max-height: 100vh;
        max-height: calc(var(--vh, 1vh) * 100);
        padding: 0px 5% 0px 5%;
        overflow: auto;
        padding-top: 10px;
        padding-bottom: calc(calc(var(--height_bar_bottom) + var(--safe-area-inset-bottom)) + 10px);
    }
    .bnbday-summary-subbody-grid .max-height-ssa{
        max-height: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .bnbday-summary-subbody-grid .item-ssb{
        position: fixed;
        bottom: 0px;
        left: 0px;
        background-color: #FFFFFF;
        box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px !important;
        padding: 8px 3% 0px 3%;
        height: calc(65px + var(--safe-area-inset-bottom));
    }
    .bnbday-summary-subbody-grid .item-ssb .note-subbody{
        font-size: 10px;
        line-height: 14px;
    }
    .bnbday-summary-bottom-grid .item-sbb{
        display: inherit;
    }
    .bnbday-summary-bottom-grid{
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "bar submit";
        margin-top: 0px;
    }
    .bnbday-summary .title1{
        font-family: HindSiliguri-Bold;
        font-size: 22px !important;
        line-height: 22px;
    }
}







.search-list-item{
    height: 215px;
    box-shadow: rgba(0, 0, 0, 0) 0px 2px 8px !important;
    background-color: inherit !important;
    cursor: pointer;
}
.search-list-item:hover{
    background-color: rgba(67,148,202,0.1) !important;
}
.search-list-item img.photo-up, .search-list-item img.photo-down{
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}
.search-list-item img.photo-up{
    margin-bottom: 5px;
}

.search-list-item .row-cell .cell{
    margin: 10px 0px 10px 0px;
    vertical-align: top;
}

.search-title-beach{
    font-size: 16px !important;
    line-height: 17px;
    padding: 0px 0px 5px 0px;
}
.search-title-user{
    font-family: HindSiliguri-Bold;
    font-size: 18px !important;
    line-height: 19px;
    padding: 0px 0px 15px 0px;
}

.search-title{
    font-family: HindSiliguri-Bold;
    font-size: 22px !important;
    line-height: 23px;
}

.search-separator{
    border: solid 0px ;
    border-top: solid 1px #DDDDDD;
    height: 1px;
    margin: 10px 0px 10px 0px;
    
}

.search-text{
    font-size: 14px;
    line-height: 15px; 
}

.search-text-mini{
    text-align: right !important;
    font-size: 12px !important;
    line-height: 13px !important;
}

@keyframes appear-summary-update {
    0% {
        outline: solid 1px rgba(255,0,0,1);
    }
    
    100% {
        outline: solid 1px rgba(255,0,0,0);
    }
}

.materials-summary-update{
    transition-duration: 2.5s;
    animation: 2.5s 1 appear-summary-update;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    outline-offset: 5px;
    outline: solid 1px rgba(255,0,0,0);
    border-radius: 6px;
}







.bnbday-booking-summary{
    font-size: 15px !important;
    line-height: 16px;
    padding: 0px 0px 0px 0px;
    width: 100%;
}
.bnbday-booking-summary.desktop{
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px !important;
    margin-top: 20px;
    background-color: #FFFFFF;
    border-radius: 8px;
}

.bnbday-booking-summary .bo-title0{
    font-family: HindSiliguri-SemiBold;
    font-size: 19px !important;
    padding-bottom: 5px;
}
.bnbday-booking-summary .bo-title1{
    font-family: Calibri-bold;
    font-size: 15px !important;
    line-height: 16px;
    padding-bottom: 3px;
    color: #107a8a;
    text-decoration: underline;

}
.bnbday-booking-summary .bo-title2{
    font-family: Calibri-bold;
    font-size: 13px !important;
    line-height: 14px;
    color: #107a8a;
    padding-bottom: 5px;
}
.bnbday-booking-summary .block{
    margin-bottom: 20px;
}
.row.row-booking-summary{
    margin: 2px 0px 0px 0px;
}

.bnbday-booking-summary .total{
    font-family: Calibri-Bold;
    font-size: 19px !important;
}


.bnbday-booking-summary-grid .item-sa{
    grid-area: count;
    padding: 0px 10px 0px 5px;
    text-align: right;
    justify-self: end;
}
.bnbday-booking-summary-grid .item-sb{
    grid-area: description;
}
.bnbday-booking-summary-grid{
    justify-items: start;
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: minmax(35px,max-content) minmax(0,100%);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "count description";
    width: 100%;
}






.login-warning{
    position: sticky;
    top: calc(var(--height_head) + 25px);
    z-index: 2;
    margin-bottom: 0px !important;
    border: solid 1px !important;
}
@media screen and (max-width: 600px){
    .login-warning{
        top: 0px;
        left: 0px;
    }
    
    .bnbday-booking-summary{
        margin-top: 0px;
    }
}

.img.material img{
    border-radius: 35px;
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin: 5px;
    cursor: pointer;
}







.tabb-background{
    background-color: #ccc;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
}

.tabb-main{
    position: inherit;
    top: 0px;
    left: 0px;
    overflow: auto;
    padding-top: 0px;
    padding-bottom: 0px;
    height: initial;
    width: initial;
}
.tabb-box{
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row dense;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}    

.tabb-box .tabb {
    display: inline-flex;
    margin: 4%;
    cursor: pointer;
    height: calc(calc(33.333vw - calc(4vw - 0px)) * var(--aspect-ratio));
    border: solid 2px #CCC;
    border-radius: 5px;
    background-color: white;
}
.tabb-box .tabb.selected{
    box-shadow: #FFF 0px 0px 0px 3px, #107a8a 0px 0px 0px 7px;
}

@media (hover: hover) {
    .tabb-box .tabb.unselected:hover{
        box-shadow: #FFF 0px 0px 0px 3px, #107a8a 0px 0px 0px 7px;
    }
}

.tab-load{
    transform-origin: top left;
    background-color: #FFFFFF;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    max-height: calc(var(--vh, 1vh) * 100);
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 1;
    border-radius: 6px;
    border: solid 2px #AAA;
}
.tab-load.maximize{
    display: block;
}


@media screen and (max-width: 600px){
    .tabb-main{
        position: fixed;
        top: 0px;
        left: 0px;
        overflow: auto;
        padding-top: calc(var(--topBarHeightInside) + 10px);
        padding-bottom: calc(80px + var(--safe-area-inset-bottom));
        height: calc(var(--vh, 1vh) * 100);
        width: 100vw;
    }
    .tabb-box{
        margin: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-auto-flow: row dense;
        width: 97vw;
    }   
    .tabb-box .tabb {
        margin: 4%;
        padding: 5px 5px 5px 5px;
        cursor: pointer;
    height: calc(calc(50vw - calc(4vw + 20px)) * var(--aspect-ratio));
        border: solid 0px;
    }
    
    .tabb-box .tabb.selected{
        box-shadow: #CCC 0px 0px 0px 3px, #107a8a 0px 0px 0px 7px;
    }

    @media (hover: hover) {
        .tabb-box .tabb.unselected:hover{
            box-shadow: #CCC 0px 0px 0px 3px, #107a8a 0px 0px 0px 7px;
        }
    }
}



.bnbday-step1-icon-summary .count{
    color: #107a8a;
    left: 10px;
    display: grid !important;
    min-height: 28px;
    width: max-content;
    line-height: 0px;
    font-size: 20px !important;
    min-width: 28px;
    top: -10px;
    right: -10px;
    border: solid 2px;
    border-radius: 50%;
    background-color: #ffffff;
    padding: 1px;
    align-items: center;
    justify-content: center;
}

.bnbday-steps-action-1-grid .item-sag-a,
.bnbday-steps-action-2-grid .item-sag-a{
    grid-area: left;
    width: 100%;
}
.bnbday-steps-action-1-grid .item-sag-b,
.bnbday-steps-action-2-grid .item-sag-b{
    grid-area: right;
    width: 100%;
}
.bnbday-steps-action-1-grid,
.bnbday-steps-action-2-grid{
    justify-items: center;
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "left right";
    width: 100%;
    margin-top: 5px;
}

@media screen and (max-width: 600px){
    .bnbday-steps-action-box{
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 1999;
        right: 0px;
        background-color: #FFFFFF;
        box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px !important;
        padding: 8px 3% 0px 3%;
        height: calc(65px + var(--safe-area-inset-bottom));
        display: grid;
    }
    .bnbday-steps-action-1-grid{
        grid-template-columns: 100%;
        grid-template-areas: 
            "right";
    }
}








.row-in-cart div.text-grid .item-a {
    grid-area: name;
}
.row-in-cart div.text-grid .item-b1 {
    grid-area: date1;
}
.row-in-cart div.text-grid .item-b2 {
    grid-area: date2;
}
.row-in-cart div.text-grid .item-c {
    grid-area: details;
    text-align: right;
}
.row-in-cart div.text-grid .item-d {
    grid-area: amount;
    text-align: right;
}

.row-in-cart div.text-grid{
    display: grid;
    grid-template-columns: minmax(0, 100%);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    grid-template-rows: auto;
    grid-template-areas: 
        "name name details"
        "date1 date1 details"
        "date2 date2 amount";
}

.row-in-cart .cart-alert{
    font-size: 14px !important;
    min-width: 23px;
    padding: 1px;
    top: -5px;
    right: -10px;
    background-color: #ffffff;
    padding: 1px;
    text-align: center;
    position: relative !important;
    display: inline-block;
    vertical-align: middle;
}
.row-in-cart .cart-alert img{
    width: 25px;
    height: 25px;
}
.row-in-cart.alert{
    border: solid 1px #D5200D;
}
.row-in-cart .count{
    color: #107a8a;
    font-size: 14px !important;
    min-width: 23px;
    top: -5px;
    right: -10px;
    border: solid 2px;
    border-radius: 50%;
    background-color: #ffffff;
    padding: 1px;
    text-align: center;
    position: relative !important;
    display: inline-block;
    vertical-align: middle;
}

.row-in-cart .cart-item-errors{
    background-color: #FFFFFF;
    color: #D5200D;
    padding: 10px 20px 10px 20px;
    border-radius: 8px;
}








@media screen and (max-width: 600px){
    .row-in-cart div.text-grid{
        grid-template-columns: minmax(0, 1fr) minmax(0, max-content) max-content;
        grid-template-areas: 
            "name name details"
            "date1 date1 details"
            "date2 date2 amount";
    }
    
    .row-in-cart .cart-alert img{
        width: 20px;
        height: 20px;
    }
}



.account-mini-title1{
    font-family: HindSiliguri-Regular;
    font-size: 14px;
    line-height: 11px;
}
.account-title1{
    font-family: HindSiliguri-SemiBold;
    font-size: 24px;
    line-height: 26px;
}

.account-manage-cal .mbsc-lv-item{
    font-family: 'HindSiliguri-Regular' !important;
}
.account-manage-cal .mbsc-event-time{
    width: 35px;
}
.account-manage-cal .mbsc-event-txt{
    width: 100%;
}
.account-manage-cal .mbsc-cal-c{
    padding: 0px !important;
}


.manage-body-grid .item-a{
    grid-area: searcha;
    width: 100%;
}
.manage-body-grid .item-b{
    grid-area: searchb;
    width: 100%;
}
.manage-body-grid .item-c{
    grid-area: filters;
    width: 100%;
}
.manage-body-grid .item-d{
    grid-area: data;
    width: 100%;
}
.manage-body-grid{
    justify-items: center;
    align-content: center;
    align-items: start;
    display: grid;
    grid-template-columns: 65% 35%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: max-content;
    grid-template-areas: 
        "searcha searchb"
        "data filters";
    width: 100%;
}

.manage-search-bar{
    min-height: 52px;
    align-content: center;
    display: inline-grid;
    padding: 5px 5px 5px 10px;
}
.manage-search-bar div.title{
    font-size: 14px;
}
.manage-search-bar div.query{
}
.manage-filters-color{
    background-color: #f2f2f2;
}

@media screen and (max-width: 600px){
    .manage-body-grid .item-a{
        padding: 0px 2% 0px 2%;
        max-width: 100vw;
    }
    .manage-body-grid .item-b{
        padding: 0px 2% 0px 2%;
        max-width: 100vw;
    }
    .manage-body-grid .item-c{
        position: fixed;
        top: 0px;
        left: 0px;
        padding-bottom: 20px;
        z-index: 1;
        
        width: 100%;
    }
    .manage-body-grid .item-d{
        padding: 0px 2% 0px 2%;
        max-width: 100vw;
    }
    .manage-body-grid{
        justify-items: center;
        align-content: center;
        align-items: start;
        display: grid;
        grid-template-columns: 100%;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-rows: auto;
        grid-template-areas: 
            "searchb"
            "searcha"
            "data";
        width: 100%;
    }
    
    .manage-filters-body-grid{
        max-width: 100vw;
        max-height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
        padding-top: var(--topBarHeight);
        transition: all 0.3s cubic-bezier(0, 3, 1, 1);
    }
    
    .manage-filters-body-grid.max-height-ssa{
        max-height: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        transition: all 0.3s cubic-bezier(0, 0, 0, 1);
    }
}




.account-manage-cal-search .mbsc-fr-c{
    display: none !important;
}

.account-manage-service{
}

.account-for-bnbdayers{
    color: #FFF;
    background-color: #68A9D4;
    border-radius: 50px;
    height: 100px;
    padding:5px 20px 5px 20px;
    
    display: table-cell;
    border-radius: 25px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
}

.account-manage-service-centermarker{
  position:absolute;
  background:url(https://www.bnbdays.com/resources/images/search_marker_hover.svg) no-repeat;
  top:50%;
  left:50%;
  width: 40px;
  height: 49px;
  
  /*fix offset when needed*/
  margin-left:-20px;
  margin-top:-49px;
  z-index: 1;
}


.account-hireds .mbsc-lv-item{
    font-family: 'HindSiliguri-Regular' !important;
}
.account-hireds .mbsc-event-time{
    text-align: center !important;
    opacity: 1 !important;
    width: 30px;
}
.account-hireds .mbsc-event-time div{
    opacity: 1 !important;
}
.account-hireds .mbsc-event-time div.warning{
    opacity: 1 !important;
}
.account-hireds .mbsc-event-time div.button{
    opacity: 1 !important;
}

.account-hireds .mbsc-event-color{
}
.account-hireds .mbsc-event-txt{
    width: 100%;
}
.account-hireds .mbsc-event-day{
    font-size: 1.2em !important;
    padding-left: 0px !important;
}
.account-hireds .mbsc-lv-item-actionable-hover:before{
    background-color: #e9e9e9 !important;
}
.account-hireds .icon-count{
    top: -10px;
    right: -10px;
    min-width: 22px !important;
    height: 22px !important;
    background-color: #ffaa00;
}
@media screen and (max-width: 600px){
    .account-hireds .mbsc-event-day{
        font-size: 1.2em !important;
        padding: 5px 2% 5px 2% !important;
    }
}

.hireds-grid .item-ha{
  grid-area: bar;
  height: 100%;
}
.hireds-grid .item-hb{
  grid-area: state;
  height: 100%;
}
.hireds-grid .item-hc{
  grid-area: data;
  width: 100%;
}
.hireds-grid .item-hd{
  grid-area: options;
  width: 100%;
}
.hireds-grid{
    justify-items: center;
    align-content: center;
    align-items: center;
    justify-content: stretch;
    display: grid !important;
    grid-template-columns: 30px 30px minmax(0,auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "bar state data"
        "bar state options";
    width: 100%;
}

@media screen and (max-width: 600px){
    .hireds-grid{
        grid-template-columns: minmax(0,auto) 30px 30px;
        grid-template-areas: 
            "data state bar"
            "options options options";
    }
}


.hireds-grid .data-grid .item-da{
    grid-area: state;
    width: 100%;
    height: 100%;
}
.hireds-grid .data-grid .item-db{
    grid-area: photo;
    width: 100%;
    height: 100%;
}
.hireds-grid .data-grid .item-dc{
    grid-area: data;
    width: 100%;
    align-self: end;
}
.hireds-grid .data-grid .item-dd{
    grid-area: price;
    width: 100%;
    align-self: end;
    text-align: right;
}
.hireds-grid .data-grid .item-de{
    grid-area: associated;
    width: 100%;
}
.hireds-grid .data-grid{
    justify-items: center;
    align-content: center;
    align-items: center;
    justify-content: stretch;
    display: grid !important;
    grid-template-columns: 60% 40%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "state photo"
        "data photo"
        "data price"
        "associated associated";
    width: 100%;
}

@media screen and (max-width: 600px){
    .hireds-grid .data-grid .item-dd{
        text-align: left;
    }
    .hireds-grid .data-grid{
        grid-template-columns: minmax(0,auto) auto;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-rows: auto;
        grid-template-areas: 
            "state photo"
            "data data"
            "price price"
            "associated associated";
    }
    
}



.options-grid .service-button-action{
    margin-left: 10px;
}


.options-grid .item-o1{
    grid-area: button1;
}
.options-grid .item-o2{
    grid-area: button2;
}
.options-grid .item-o3{
    grid-area: button3;
}
.options-grid .item-o4{
    grid-area: button4;
}
.options-grid .item-o5{
    grid-area: button5;
}
.options-grid .item-o6{
    grid-area: button6;
}
.options-grid .item-o7{
    grid-area: button7;
}
.options-grid .item-o8{
    grid-area: button8;
}
.options-grid .item-o9{
    grid-area: button9;
}
.options-grid .item-o10{
    grid-area: button10;
}
.options-grid{
    justify-items: center;
    align-content: center;
    align-items: center;
    justify-content: end;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 5px;
    grid-template-rows: auto;
}
.options-grid.b1{
    grid-template-columns: repeat( 1, minmax(0, max-content));
    grid-template-areas: "button1 ";
}
.options-grid.b2{
    grid-template-columns: repeat( 2, minmax(0, max-content));
    grid-template-areas: "button1 button2 ";
}
.options-grid.b3{
    grid-template-columns: repeat( 3, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 ";
}
.options-grid.b4{
    grid-template-columns: repeat( 4, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 ";
}
.options-grid.b5{
    grid-template-columns: repeat( 5, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 ";
}
.options-grid.b6{
    grid-template-columns: repeat( 6, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 ";
}
.options-grid.b7{
    grid-template-columns: repeat( 7, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 button7 ";
}
.options-grid.b8{
    grid-template-columns: repeat( 8, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 button7 button8 ";
}
.options-grid.b9{
    grid-template-columns: repeat( 9, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 button7 button8 button9 ";
}
.options-grid.b10{
    grid-template-columns: repeat( 10, minmax(0, max-content));
    grid-template-areas: "button1 button2 button3 button4 button5 button6 button7 button8 button9 button10 ";
}


@media screen and (max-width: 600px){
    .options-grid .service-button-action{
        margin-left: 0px;
        padding: 0 3% 0 3%;
        width: 100%;
    }
    .options-grid{
        justify-content: center;
    }
        .options-grid.b1{
        grid-template-columns: repeat( 1, minmax(0, 1fr));
    }
        .options-grid.b2{
        grid-template-columns: repeat( 2, minmax(0, 1fr));
    }
        .options-grid.b3{
        grid-template-columns: repeat( 3, minmax(0, 1fr));
    }
        .options-grid.b4{
        grid-template-columns: repeat( 4, minmax(0, 1fr));
    }
        .options-grid.b5{
        grid-template-columns: repeat( 5, minmax(0, 1fr));
    }
        .options-grid.b6{
        grid-template-columns: repeat( 6, minmax(0, 1fr));
    }
        .options-grid.b7{
        grid-template-columns: repeat( 7, minmax(0, 1fr));
    }
        .options-grid.b8{
        grid-template-columns: repeat( 8, minmax(0, 1fr));
    }
        .options-grid.b9{
        grid-template-columns: repeat( 9, minmax(0, 1fr));
    }
        .options-grid.b10{
        grid-template-columns: repeat( 10, minmax(0, 1fr));
    }
    }



.hired-service-row-grid .item-a,
.manage-service-row-grid .item-a{
    grid-area: left;
    width: 100%;
}
.hired-service-row-grid .item-b,
.manage-service-row-grid .item-b{
    grid-area: right;
    width: 100%;
    text-align: right;
}
.hired-service-row-grid,
.manage-service-row-grid{
    justify-items: center;
    align-content: center;
    align-items: start;
    justify-content: stretch;
    display: grid;
    grid-template-columns: minmax(0,100%) minmax(0,max-content);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        "left right";
    width: 100%;
    margin: 10px 0px 10px 0px;
}

.hired-service-row3-grid .item-a{
    grid-area: left;
    width: 100%;
    text-align: right;
}
.hired-service-row3-grid .item-b{
    grid-area: center;
    width: 100%;
    text-align: center;
}
.hired-service-row3-grid .item-c{
    grid-area: right;
    width: 100%;
    text-align: left;
}
.hired-service-row3-grid{
    grid-template-columns: 1fr minmax(0,max-content) 1fr;
    grid-template-areas: 
        "left center right";
}

@media screen and (max-width: 600px){
    .hired-service-row2-grid .item-b,
    .manage-service-row2-grid .item-b{
        grid-area: right;
        width: 100%;
        text-align: left;
    }
    .hired-service-row2-grid,
    .manage-service-row2-grid{
        grid-template-columns: 100%;
        grid-template-areas: 
            "left"
            "right";
    }
    .hired-service-row3-grid .item-a{
        text-align: left;
    }
    .hired-service-row3-grid{
        grid-template-columns: 100%;
        grid-row-gap: 5px;
        grid-template-areas: 
            "left"
            "center"
            "right";
    }

}


.hired-service-material-table,
.manage-service-material-table{
    display: table;
}
.hired-service-material-table .trow,
.manage-service-material-table .trow{
    display: table-row;
}
.hired-service-material-table .cell-a,
.manage-service-material-table .cell-a{
    display: table-cell;
    white-space: nowrap;
    padding-right: 5px;
    text-align: right;
}
.hired-service-material-table .cell-b,
.manage-service-material-table .cell-b{
    display: table-cell;
    width: 100%;
}
.hired-service-material-table .cell-b > .name,
.manage-service-material-table .cell-b > .name{
    margin-top: 10px;
}
.hired-service-material-table .cell-b > .details,
.manage-service-material-table .cell-b > .details{
    font-size: 12px;
    line-height: 14px;
}

.hired-service-material-table .cell-c,
.manage-service-material-table .cell-c{
    display: table-cell;
    white-space: nowrap;
    padding-left: 5px;
    text-align: right;
    
}





.struct-content-box-data.account-hired-service,
.struct-content-box-data.account-manage-service{
    padding: 10px 2% 10px 2%;
    width: 100%;
    margin: auto;
    font-size: 15px;
    line-height: 18px;
}
.account-hired-service .disabled,
.account-manage-service .disabled{
    color: #afafaf;
}

.struct-content-box-data.account-hired-service.head{
    background-color: #e9e9e9;
    margin-top: 20px;
    border-radius: 8px;
}

@media screen and (max-width: 600px) {
    .struct-content-box-data.account-hired-service.head{
        margin-top: -5px;
        border-radius: 0px;
    }
}






.account-manage-service{
    padding: 20px 0px 15px 0px;
    width: 100%;
    margin: auto;
    font-size: 15px;
    line-height: 18px;
}
.account-manage-service .line-before, .account-manage-service .line-after,
.account-hired-service .line-before, .account-hired-service .line-after{
    content: " ";
    height: 10px;
    border: solid 0px;
}
.account-manage-service .line,
.account-hired-service .line{
    border: solid 0px transparent;
    border-bottom: solid 1px #DDDDDD;
    height: 1px;
    width: 100%;
}
.account-manage-service .line.line-black,
.account-hired-service .line.line-black{
    border-top: solid 1px #000000;
}
.account-manage-service .parraph,
.account-hired-service .parraph{
    margin: 0px 0px 8px 0px;
}
.account-manage-service .title1-pdf,
.account-hired-service .title1-pdf{
    font-family: HindSiliguri-SemiBold;
    font-size: 28px;
    line-height: 31px;
    margin-bottom: 5px;
}
.account-manage-service .title2-pdf,
.account-hired-service .title2-pdf{
    font-family: HindSiliguri-Bold;
    font-size: 20px;
    line-height: 23px;
}
.account-manage-service .bold,
.account-hired-service .bold{
    font-family: HindSiliguri-SemiBold;
}
.account-manage-service .line-through, .account-manage-service .line-through span, .account-manage-service .line-through div,
.account-hired-service .line-through, .account-hired-service .line-through span, .account-hired-service .line-through div{
    text-decoration-line: line-through;
}
.account-manage-service .line-through.link,
.account-hired-service .line-through.link{
    text-decoration-color: #107a8a;
}
.account-manage-service .small,
.account-hired-service .small{
    font-size: 14px;
    line-height: 17px;
}
.account-manage-service .vsmall,
.account-hired-service .vsmall{
    font-size: 12px;
    line-height: 15px;
}
.account-manage-service .big,
.account-hired-service .big{
    font-size: 20px;
    line-height: 23px;
}
.account-manage-service .color3,
.account-hired-service .color3{
    color: #107a8a;
}


.account-hired-service-eventlist .line.line-black{
    border-top: solid 1px #000000;
}
.account-hired-service-eventlist .img img{
    width: 125px;
    height: 55px;
    border-radius: 4px;
    object-fit:cover;
}
.account-hired-service-eventlist .parraph{
    padding: 2px 0px 2px 0px;
}
.account-hired-service-eventlist .title1-pdf{
    font-family: HindSiliguri-SemiBold;
    font-size: 28px;
    line-height: 31px;
    margin-bottom: 5px;
}
.account-hired-service-eventlist .title2-pdf{
    font-family: HindSiliguri-Light;
    font-size: 20px;
    line-height: 23px;
}
.account-hired-service-eventlist .bold{
    font-family: HindSiliguri-SemiBold;
}
.account-hired-service-eventlist .line-through, .account-hired-service-eventlist .line-through span, .account-hired-service-eventlist .line-through div{
    text-decoration-line: line-through;
}
.account-hired-service-eventlist .line-through.link{
    text-decoration-color: #107a8a;
}
.account-hired-service-eventlist .small{
    font-size: 14px;
    line-height: 17px;
}
.account-hired-service-eventlist .vsmall{
    font-size: 12px;
    line-height: 15px;
}
.account-hired-service-eventlist .big{
    font-size: 18px;
    line-height: 20px;
}
.account-hired-service-eventlist .color3{
    color: #107a8a;
}




.manage-options-main .service-button-action{
    padding: 5px 5px 0px 5px;
}
.manage-options-secondary .service-button-action{
    padding: 10px 5px 5px 5px;
    display: inline-block;
    float: right;
}
.account-conversation{
    overflow-y: auto;
    max-height: 375px;
}
@media screen and (max-width: 600px) {
    .account-hired-service-eventlist .img img{
        width: 75px;
        height: 50px;
    }
    .manage-options-main .service-button-action{
        width: 100% !important;
        margin: 0px;
    }
    .manage-options-secondary .service-button-action{
        padding: 10px 5px 5px 5px;
        width: 50%;
    }
    .account-conversation{
        overflow-y: visible;
        max-height: none;
        width: 100%;
    }
}

.account-notification-box{
    margin-top: 30px;
    margin-bottom: 20px;
}
.account-notification-box-files{
    max-width: 700px;
}
@media screen and (max-width: 600px) {
    .account-notification-box{
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
}





.account-service-head-options .item-a{
    grid-area: opt1;
}
.account-service-head-options .item-b{
    grid-area: opt2;
}
.account-service-head-options .item-c{
    grid-area: opt3;
}
.account-service-head-options{
    justify-items: center;
    align-content: center;
    align-items: start;
    justify-content: stretch;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-areas: 
        ". opt1 opt2 opt3 .";
    width: 100%;
}


@media screen and (max-width: 600px) {
    .account-service-head-options{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 
            "opt1 opt2 opt3";
    }
}










.progressbar-pay-wrapper {
    background: #fff;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 5px;
    display: flex;
}

.progressbar-pay li {
    list-style-type: none;
    width: 33.33%;
    float: left;
    font-size: 10px;
    line-height: 12px;
    position: relative;
    text-align: center;
    color: #CCCCCC;
}
.progressbar-pay li.left {
    width: 20%;
}
.progressbar-pay li.center {
    width: 20%;
    margin: 0 20% 0 20%;
}
.progressbar-pay li.right {
    width: 20%;
}
    
.progressbar-pay li:before {
    width: 20px;
    height: 30px;
    content: "";
    line-height: 30px;
    border: 0px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
.progressbar-pay li:after {
     width: 100%;
     height: 2px;
     content: '';
     position: absolute;
     background-color: #ccc;
     top: 15px;
     left: -50%;
     z-index: 0;
}
.progressbar-pay li.center:after {
    left: -150%;
    width: 200%;
}
.progressbar-pay li.right:after {
    width: 200%;
    left: -140%;
}


.progressbar-pay li:first-child:after {
     content: none;
}
    
.progressbar-pay li.active.ok {
    color: #4CAF50;
}
.progressbar-pay li.active.cancel {
    color: #E2574C;
}
.progressbar-pay li.active.refund {
    color: #4693C8;
}
.progressbar-pay li.active + li.ok:after {
    background-color: #4CAF50;
}
.progressbar-pay li.active + li.cancel:after {
    background-color: #4CAF50;
}
.progressbar-pay li.active + li.cancel2:after {
    background-color: #E2574C;
}
.progressbar-pay li.active + li.refund:after {
    background-color: #4693C8;
}

.progressbar-pay li.active.ok:before {
    background: #fff url(https://www.bnbdays.com/resources/images/my_payment_ok.svg) no-repeat center center;
    background-size: 100%;
}
.progressbar-pay li.active.cancel:before {
    background: #fff url(https://www.bnbdays.com/resources/images/my_payment_cancel.svg) no-repeat center center;
    background-size: 100%;
}
.progressbar-pay li.active.refund:before {
    background: #fff url(https://www.bnbdays.com/resources/images/my_payment_refund.svg) no-repeat center center;
    background-size: 100%;
}
.progressbar-pay li.active.partial_refund:before {
    background: #fff url(https://www.bnbdays.com/resources/images/my_payment_partial_refund.svg) no-repeat center center;
    background-size: 100%;
}
.progressbar-pay li.unknown::before {
    background: #fff url(https://www.bnbdays.com/resources/images/my_payment_unknown.svg) no-repeat center center;
    background-size: 100%;
}

.progressbar-pay {
    counter-reset: step;
    width: 100%;
}



@media screen and (max-width: 600px) {
    .progressbar-pay li.left {
        width: 33.33%;
    }
    .progressbar-pay li.center {
        width: 33.33%;
        margin: 0;
    }
    .progressbar-pay li.right {
        width: 33.33%;
    }
        
    .progressbar-pay li:before {
        width: 20px;
        height: 30px;
        content: "";
        line-height: 30px;
        border: 0px solid #7d7d7d;
        display: block;
        text-align: center;
        margin: 0 auto 3px auto;
        border-radius: 50%;
        position: relative;
        z-index: 2;
        background-color: #fff;
    }
    .progressbar-pay li:after {
         width: 100%;
         height: 2px;
         content: '';
         position: absolute;
         background-color: #ccc;
         top: 15px;
         left: -50%;
         z-index: 0;
    }
    .progressbar-pay li.center:after {
        left: -50%;
        width: 100%;
    }
    .progressbar-pay li.right:after {
        left: -50%;
        width: 100%;
    }
}





.account-my-payments-state div{
    width: max-content;
    padding: 0px 6px 1px 6px;
    border-radius: 5px;
    font-family: Calibri;
}
    
.account-my-payments-state .ok {
    color: #4CAF50;
    border: solid 1px #4CAF50;
}
.account-my-payments-state .cancel {
    color: #E2574C;
    border: solid 1px #E2574C;
}
.account-my-payments-state .refund {
    color: #4693C8;
    border: solid 1px #4693C8;
}

.row-account-my-paymentgroup div.text-grid .item-a {
    grid-area: method;
    align-self: end;
}
.row-account-my-paymentgroup div.text-grid .item-b {
    grid-area: amount_method;
    text-align: right;
    align-self: end;
}

.row-account-my-paymentgroup div.text-grid{
    display: grid;
    grid-template-columns: minmax(0, 70%) minmax(0,30%);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    grid-template-rows: auto;
    grid-template-areas: 
        "method amount_method";
    padding: 0px 10px;
}

.row-account-my-paymentgroup div.text-grid2 .item-a {
    grid-area: method;
    align-self: end;
}

.row-account-my-paymentgroup div.text-grid2{
    grid-template-columns: minmax(0, 100%);
    grid-template-areas: 
        "method";
    padding: 0px 10px;
}


.row-account-my-payments{
    border: solid 1px transparent;
    background-color: #FFFFFF;
}
.row-account-my-payments div.text-grid .item-a {
    grid-area: date;
}
.row-account-my-payments div.text-grid .item-b {
    grid-area: state;
}

.row-account-my-payments div.text-grid{
    display: grid;
    grid-template-columns: minmax(0, 50%) minmax(0,50%);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    grid-template-rows: auto;
    grid-template-areas: 
        "date state";
}

.account-my-payments-message{
    font-size: 14px;
    padding: 0px 5px 2px 5px;
}


@media screen and (max-width: 600px) {
    .row-account-my-paymentgroup div.text-grid,
    .row-account-my-paymentgroup div.text-grid2{
        padding: 0px 5px;
    }
    
    .account-my-payments-state div{
        width: min-content;
    }
}



.publish-edit-menu{
    max-width: 100vw;
    overflow: hidden;
    background-color: #FFF;
    padding-top: 20px;
    margin-top: 0px;
}

@media screen and (max-width: 600px) {
    .publish-edit-menu{
        position: fixed;
        top: var(--topBarHeight);
        z-index: 1;
        padding-top: 10px;
    }
}




.publish-bnb-material-grid > .item-a{
    grid-area: count;
}
.publish-bnb-material-grid > .item-b{
    grid-area: farea;
}
.publish-bnb-material-grid > .item-c{
    grid-area: fareb;
}
.publish-bnb-material-grid {
    justify-items: start;
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    grid-template-rows: max-content;
    grid-template-areas:
        "count farea fareb";
    width: 100%;
    margin: 4px 0px;
}
@media screen and (max-width: 600px) {
    .publish-bnb-material-grid{
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        grid-column-gap: 0px;
        grid-row-gap: 5px;
        grid-template-areas:
            "count count"
            "farea fareb";
        width: 100%;
    }
}

.cashflow-summary{
}

.cashflow-summary-grid > .item-csg-a{
    grid-area: balance;
}
.cashflow-summary-grid > .item-csg-b{
    grid-area: image;
    justify-self: end;
}
.cashflow-summary-grid > .item-csg-b > img{
    height: 60px;
}
.cashflow-summary-grid > .item-csg-c{
    grid-area: profit;
    align-self: end;
}
.cashflow-summary-grid > .item-csg-d{
    grid-area: payout;
    text-align: right;
    align-self: end;
}
.cashflow-summary-grid{
    display: grid;
    grid-template-columns: minmax(0,max-content) minmax(0,1fr);
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    grid-template-areas:
        "balance image"
        "profit payout";
    width: 100%;
    font-size: 14px;
    font-family: 'Calibri-regular';
    padding: 20px;
    min-height: 180px;
    max-width: 440px;
    border-radius: 10px;
    margin-right: 20px;
    margin-top: 30px;
    background: linear-gradient(180deg, #e2eff1, transparent);
    box-shadow: 0px 0px 7px 0px #ccc;
}
.cashflow-summary-grid .title-main{
}
.cashflow-summary-grid .amount-main{
    font-size: 40px;
    line-height: 42px;
    font-family: 'HindSiliguri-Bold';
    color: #00535C;
}
.cashflow-summary-grid .title{
}
.cashflow-summary-grid .amount{
    font-family: 'HindSiliguri-Bold';
    font-size: 18px;
    line-height: 18px;
    color: #474747;
    margin-top: 4px;
}
@media screen and (max-width: 600px) {
    .cashflow-summary{
        background: linear-gradient(180deg, #e2eff1, transparent);
    }
    .cashflow-summary-grid{
        border: solid 0px;
        padding: 20px 5px;
        margin-top: 0px;
        background: unset;
        box-shadow: none;
    }
}


.row-account-wallet .img{
    display: table-cell !important;
    vertical-align: middle !important;
    line-height: inherit !important;
    width: 120px !important;
    text-align: center !important;
    line-height: 0px !important;
}

.row-account-wallet div.img img{
    height: 60px !important;
    width: 60px !important;
    margin-right: 0px !important;
    padding: 0px 8px;
}



.row-account-wallet div.text-grid .item-a {
    grid-area: name;
    font-size: 18px;
}
.row-account-wallet div.text-grid .item-b {
    grid-area: currency;
    font-size: 12px;
}
.row-account-wallet div.text-grid .item-c {
    grid-area: amount;
    text-align: right;
    font-size: 18px;
    margin-right: 10px;
}
.row-account-wallet div.text-grid .item-d {
    grid-area: amount2;
    text-align: right;
    margin-right: 10px;
    font-size: 12px;
}

.row-account-wallet div.text-grid{
    display: grid;
    grid-template-columns: minmax(0, 100%);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    grid-template-rows: auto;
    grid-template-areas: 
        "name name amount"
        "currency currency amount2";
}


.row-account-wallet .card-icon-default{
    position: absolute;
    top: 5px; 
    left: 5px;
}
.row-account-wallet .card-icon-default img{
    width: 20px;
    height: 20px;
}

@media screen and (max-width: 600px){
    .row-account-wallet div.img{
        width: 60px !important;
        text-align: center;
    }
    .row-account-wallet div.img img{
        width: 55px !important;
        margin-right: 0px !important;
    }
    .row-account-wallet div.text-grid .item-c {
        margin-right: 0px;
    }
}




.cashflow-transactions-row-grid > .item-ctrg-a{
}
.cashflow-transactions-row-grid > .item-ctrg-b{
}
.cashflow-transactions-row-grid > .item-ctrg-c{
    text-align: right;
}
.cashflow-transactions-row-grid > .item-ctrg-d{
    display: grid;
    justify-content: end;
    align-items: center;
}
.cashflow-transactions-row-grid > .item-ctrg-d > img{
    height: 16px;
    margin-right: 5px
}

.cashflow-transactions-row-grid .title-main{
    font-size: 18px;
    line-height: 20px;
    font-family: 'HindSiliguri-SemiBold';
}
.cashflow-transactions-row-grid .description{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.cashflow-transactions-row-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0px minmax(0, max-content) 50px;
    grid-auto-rows: 1fr;
    padding: 10px 0px 5px 0px;
    text-align: left;
    grid-row-gap: 15px;
    row-gap: 15px;
    font-size: 14px;
    line-height: 16px;
    font-family: 'HindSiliguri-Regular';
    border: solid 1px transparent;
    border-bottom: solid 1px #ccc;
    color: #008419;
}
@media (hover: hover) {
    .cashflow-transactions-row-grid:hover:not(.cashflow-transactions-row-grid.date){
        border: solid 1px #808080;
        border-radius: 8px;
        cursor: pointer;
    }
}
.cashflow-transactions-row-grid.date{
    grid-template-columns: 1fr;
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 20px;
    font-family: 'HindSiliguri-Bold';
    border-bottom: solid 2px #00535C;
    color: #00535C;
    align-self: end;
    padding: 0px 0px 0px 10px;
    border-radius: 0px 0px 0px 8px;
}

.cashflow-transactions-row-grid.payout{
    color: #444;
}
.cashflow-transactions-row-grid.cancel{
    color: gray !important;
    font-family: 'HindSiliguri-Regular' !important;
}
.cashflow-transactions-row-grid.cancel .amount{
    text-decoration: line-through;
}

@media screen and (max-width: 600px){
    .cashflow-transactions-row-grid > .item-ctrg-d > img{
        margin-right: 0px
    }
    .cashflow-transactions-row-grid{
        grid-template-columns: minmax(0, 1fr) 0px minmax(0, max-content) 30px;
    }
}
.msg-conversation-body{
    padding: 20px 2% 2% 20px;
}
.msg-conversation-body .img_cont_msg {
    height: 40px;
    width: 40px;
    vertical-align:bottom;
}
.msg-conversation-body .rounded-circle {
    border-radius: 50% !important;
}
.msg-conversation-body .user_img_msg {
    height: 35px;
    width: 35px;
    top: 0px;
}
.msg-conversation-body .msg_container {
    margin-top: auto;
    margin-bottom: auto;
    background-color: #82ccdd;
    padding: 10px;
    position: relative;
    max-width: 70%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.msg-conversation-body .msg_time {
    position: absolute;
    bottom: -15px;
    color: rgba(0,0,0,0.5);
    font-size: 10px;
    white-space: nowrap !important;
}
.msg-conversation-body .mb-4, .msg-conversation-body .my-4 {
    margin-bottom: 1.7rem!important;
}
.msg-conversation-body .mb-4.nodate, .msg-conversation-body .my-4.nodate {
    margin-bottom: 0.3rem!important;
}
.msg-conversation-body .justify-content-start {
    justify-content: flex-start !important;
}
.msg-conversation-body .justify-content-end {
    justify-content: flex-end !important;
}
.msg-conversation-body .justify-content-start .msg_time {
    left: 0;
}
.msg-conversation-body .justify-content-end .msg_time {
    right: 0;
}
.msg-conversation-body .justify-content-start .msg_container {
    margin-left: 10px;
    border-radius: 0px 10px 10px 10px;
    background-color: #EFA8001c;
    border: solid 2px #EFA800;
}
.msg-conversation-body .justify-content-end .msg_container {
    margin-right: 10px;
    border-radius: 10px 0px 10px 10px;
    background-color: #107a8a1c;
    border: solid 2px #107a8a;
}
.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

.writer-conversation-box{
    padding: 10px 0px 10px 0px;
    background-color: #FFFFFF;
    width: 100%;
}
.writer-conversation-box2{
    width: 100%;
}


@media screen and (max-width: 600px) {
    .writer-conversation-box .button-text{
        display: none;
    }
    .msg-conversation-body .msg_container {
        max-width: 95%;
    }
    .writer-conversation-box{
        padding: 10px 0px 10px 0px;
        background-color: #FFFFFF;
        position: sticky;
        bottom: 0px;
        left: 0px;
        z-index: 1999;
        width: 100%;
    }
    .writer-conversation-box2{
        width: 95%;
        margin: auto;
    }
    
    .writer-conversation-text{
        width: 83%;
    }
    .writer-conversation-space{
        width: 2%;
    }
    .writer-conversation-send{
        width: 15%;
    }
    
    .fake-writer-conversation-box {
        position: relative;
    }

}



/* bengali */
@font-face {
    font-family: HindSiliguri-Light;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-300-bengali.woff2) format('woff2');
    unicode-range: U+0964-0965, U+0980-09FE, U+1CF7, U+1CFA, U+200C-200D, U+20B9, U+25CC;
}
/* latin-ext */
@font-face {
    font-family: HindSiliguri-Light;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-300-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: HindSiliguri-Light;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-300-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* bengali */
@font-face {
    font-family: HindSiliguri-Regular;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-400-bengali.woff2) format('woff2');
    unicode-range: U+0964-0965, U+0980-09FE, U+1CF7, U+1CFA, U+200C-200D, U+20B9, U+25CC;
}
/* latin-ext */
@font-face {
    font-family: HindSiliguri-Regular;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-400-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: HindSiliguri-Regular;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* bengali */
@font-face {
    font-family: HindSiliguri-Medium;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-500-bengali.woff2) format('woff2');
    unicode-range: U+0964-0965, U+0980-09FE, U+1CF7, U+1CFA, U+200C-200D, U+20B9, U+25CC;
}
/* latin-ext */
@font-face {
    font-family: HindSiliguri-Medium;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-500-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: HindSiliguri-Medium;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* bengali */
@font-face {
    font-family: HindSiliguri-SemiBold;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-600-bengali.woff2) format('woff2');
    unicode-range: U+0964-0965, U+0980-09FE, U+1CF7, U+1CFA, U+200C-200D, U+20B9, U+25CC;
}
/* latin-ext */
@font-face {
    font-family: HindSiliguri-SemiBold;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-600-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: HindSiliguri-SemiBold;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* bengali */
@font-face {
    font-family: HindSiliguri-Bold;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-700-bengali.woff2) format('woff2');
    unicode-range: U+0964-0965, U+0980-09FE, U+1CF7, U+1CFA, U+200C-200D, U+20B9, U+25CC;
}
/* latin-ext */
@font-face {
    font-family: HindSiliguri-Bold;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-700-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: HindSiliguri-Bold;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/HindSiliguri/HindSiliguri-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
    font-family: 'Calibri-regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Calibri-regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Calibri-regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
    font-family: 'Calibri-medium';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Calibri-medium';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Calibri-medium';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
    font-family: 'Calibri';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Calibri';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Calibri';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
    font-family: 'Calibri-bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Calibri-bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Calibri-bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.bnbdays.com/resources/fonts/Quicksand/Quicksand-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.documents{     font-size: 16px;
}

.documents a, .documents a:active, .documents a:focus{
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
@media (hover: hover) {
    .documents a:hover{
      color: inherit; /* blue colors for links too */
      text-decoration: inherit; /* no underline */
    }
} 

.documents p,
.documents p * {
    margin: 0px;
    padding: 0px;
    position: relative;
    letter-spacing: 0.2px;
    outline: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;

}

.cke_panel_container .hc-title1,
.documents .hc-title1{
    font-family: Calibri-bold;
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.cke_panel_container .hc-title2,
.documents .hc-title2{
    font-family: Calibri-bold;
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.cke_panel_container .hc-text-body,
.documents .hc-text-body{
    font-family: Calibri-regular;
    margin-bottom: 5px;
}

.cke_panel_container .hc-link,
.documents .hc-link{
    fill: #4392CA;
    color: #4392CA;
    transition-duration: 0.4s;
    font-size: inherit;
    font-family: Calibri;
}

@media (hover: hover) {
    .documents .hc-link:hover{
        fill: #2E5979;
        color: #2E5979;
        cursor: pointer;
    }
}



.hc .nav-index{
    font-size: 16px;
    white-space: nowrap !important;
}
.hc .nav-index.main{
    text-decoration: underline;
    font-family: Calibri-bold;
}
.hc .nav-index.selected{
    font-family: Calibri-regular;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hc .nav-separator{
    line-height: 0px;
    padding: 15px;
    font-size: 20px;
    font-family: 'Calibri-bold';
}
.hc .navigator{
    margin: 20px 0px 30px 0px;
}

.hc-index{
    cursor: pointer;
}

.hc .hc-list-menu{
    list-style: none;
    padding: 0px;
}


.hc .hc-list-main-view0{
    list-style: none;
    padding: 0px;
}

.hc .hc-list-main-view2{
    display: grid;
    font-family: Calibri-bold;
    font-size: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    column-gap: 30px;
    row-gap: 30px;
}
.hc .hc-list-main-view2 > .item-view2{
    display: grid;
    border: solid 1px #ececec;
    text-align: center;
    border-radius: 8px;
    box-shadow: 1px 3px 10px -5px rgb(0 0 0 / 30%);
    grid-template-rows: 0fr 1fr;
    grid-template-areas:
        "image"
        "title";
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}
.hc .hc-list-main-view2 > .item-view2 > .item-a{
    grid-area: image;
    
}
.hc .hc-list-main-view2 > .item-view2 > .item-b{
    grid-area: title;
    margin: 20px;
}

@media screen and (max-width: 600px) {   
    .hc .hc-list-main-view2{
        font-size: 18px;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        column-gap: 5vw;
        row-gap: 5vw;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }
    .hc .hc-list-main-view2 > .item-view2 > .item-b{
        margin: 10px;
    }
}








.hc .hc-title-main{
    font-family: Calibri-bold;
    font-size: 26px;
    margin-bottom: 20px;
}



.hc .hc-index-next{
    padding: 0px 10px;
    font-size: 20px;
    font-family: 'Calibri-regular';
}

.hc .hc-index-title1-box{
    margin-top: 20px;
    margin-bottom: 10px;
}
.hc .hc-index-title2-box{
    font-size: 17px;
    margin-bottom: 10px;
    padding-left: 15px;
}
.hc .hc-index-title1{
    font-family: Calibri-bold;
    font-size: 22px;
}
.hc .hc-index-title2{
    font-family: Calibri;
    font-size: 17px;
}
@media (hover: hover) {
    .hc .hc-index-title1:hover{
        text-decoration: underline;
    }
    .hc .hc-index-title2:hover{
        text-decoration: underline;
    }
    .hc .hc-index-next:hover{
        text-decoration: none !important;
    }
}


.hc-title1-menu{
    font-family: Calibri-regular;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
}
.hc-title1-menu.selected{
    font-family: Calibri-Bold;
    text-decoration: underline;
}


.hc-body-grid .item-hcbg1{
  grid-area: navi;
}
.hc-body-grid .item-hcbg2{
  grid-area: col1;
  padding: 0 15% 0 0;
}
.hc-body-grid .item-hcbg3{
  grid-area: col2;
}
.hc-body-grid{
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: minmax(0, 25%) minmax(0, 100%);
    grid-template-rows: auto;
    grid-template-areas: 
        "navi navi"
        "col1 col2";
}


@media screen and (max-width: 600px) {   
    .hc .nav-index{
        font-size: 14px;
    }
    .hc .navigator{
        margin: 10px 0px 0px 0px;
    }
    .hc .nav-separator {
        padding: 5px;
        font-size: 18px;
    }
    
    .hc .hc-body{
        padding: 0 3vw;
    }
    .hc-title-main{
        margin-top: 20px;
    }
    .hc-body-grid{
        grid-template-columns: 100%;
        grid-template-areas: 
            "navi"
            "col2";
    }
}



.hc-index-disabled{
    outline: solid 1px red !important;
    outline-offset: 5px !important;
}



.hc-index-attention{
    animation: 1s 1 hc-index-attention;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    background-color: #FEE8B1;
    border-radius: 1px;
    outline: solid 4px #FDC842;
    border: solid 0px;
}
@keyframes hc-index-attention {
    0% {
        background-color: #FEE8B1;
        border-radius: 1px;
        outline: solid 4px #FDC842;
    }
    100% {
        background-color: #ffffff;
        border-radius: 0px;
        outline: solid 0px #ffffff;
    }
}
.errorx-box{
    padding: 0px !important;
    display: grid;
    align-content: center;
}
.errrox-body{
}

.errorx-grid{
    width: 100%;
    height: 100%;
    display: grid;
    text-align: center;
    padding: 15vh 20px;
    margin: auto;
    max-width: 600px;
}



@media screen and (max-width: 600px){
    .errorx-box{
        min-height: calc(calc(var(--vh, 1vh) * 100) - var(--height_head));
    }
}
.nt_tuser_main-body a.button{
    border-radius: 50px !important;
    padding: 7px 20px 9px 20px !important;
    line-height: 22px;
    width: 100% !important;
    max-width: max-content !important;
    min-width: 50% !important;
}
.nt_tuser_main-body table{
    width: 100%;
}



.nt_tbnbdayer_main-body a.button{
    border-radius: 50px !important;
    padding: 7px 20px 9px 20px !important;
    line-height: 22px;
    min-width: max-content;
}
.nt_tbnbdayer_main-body table{
    width: 100%;
}



:root {
    --cancel-color-interA: #4CAF50;
    --cancel-color-interB: #007f8d;
    --cancel-color-interC: #FFC600;
    --cancel-color-interD: #c70000;
    --cancel-color-interE: #c70000;
}

.cancel-smartone .timeline-box{
    margin-top: 40px;
    margin-bottom: 10px;
    min-height: 400px;
    width: 100%;
}
.cancel-smartone .timeline-box .interval{
    display: grid;
    grid-template-areas: "left center right";
    grid-template-columns: 0.7fr 20px 1.5fr;
    min-height: max-content;
}

.cancel-smartone .timeline-box > div{
    font-size: 14px;
    padding: 5px 10px;
}
.cancel-smartone .timeline-box > div > div.time{
    text-align: right;
    top: -13px;
    right: 20px;
    font-size: 11px;
    line-height: 11px;
}

.cancel-smartone .timeline-box .left{
    grid-area: left;
    padding-right: 15px;
    text-align: right;
}
.cancel-smartone .timeline-box .center{
    grid-area: center;
    width: 11px;
}
.cancel-smartone .timeline-box .center > div.point{
    width: 11px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    bottom: -6px;
}
.cancel-smartone .timeline-box .right{
    grid-area: right;
    padding-left: 5px;
}

.cancel-smartone .timeline-box .interval.interA .center{
    background-color: var(--cancel-color-interA);
}
.cancel-smartone .timeline-box .interval.interA .center div.point{
    background-color: var(--cancel-color-interA);
}

.cancel-smartone .timeline-box .interval.interB .center{
    background-color: var(--cancel-color-interB);
}
.cancel-smartone .timeline-box .interval.interB .center div.point{
    background-color: var(--cancel-color-interB);
}

.cancel-smartone .timeline-box .interval.interC .center{
    background-color: var(--cancel-color-interC);
}
.cancel-smartone .timeline-box .interval.interC .center div.point{
    background-color: var(--cancel-color-interC);
}

.cancel-smartone .timeline-box .interval.interD .center{
    background-color: var(--cancel-color-interD);
}
.cancel-smartone .timeline-box .interval.interD .center div.point{
    background-color: var(--cancel-color-interD);
}

.cancel-smartone .timeline-box .interval.interE .center{
    width: 4px;
    margin-left: 4px;
    background-color: var(--cancel-color-interE);
}
.cancel-smartone .timeline-box .interval.interE .center div.point{    
    width: 25px;
    height: 25px;
    left: -11px;
    top: -4px;
    border: solid 6px var(--cancel-color-interE);
    background-color: white;
}

.cancel-smartone .timeline-box .text{
    font-size: 14px;
}
.cancel-smartone .timeline-box .left .text{
    font-size: 12px;
}
.cancel-smartone .timeline-box .right .text{
    margin-top: 2px;
}

.cancel-smartone .timeline-box .text.title{
    font-size: 16px;
    line-height: 18px;
    font-family: Calibri-Bold;
    letter-spacing: 0;
    margin-top: 0px;
}

@media screen and (max-width: 600px) {
    .cancel-smartone .timeline-box{
        margin-top: 10px;
        margin-bottom: 10px;
    }
}



.cancel-smartone .currenttime{
    position: absolute;
    width: 100%;
    text-align: left;
    font-size: 14px;
    z-index: 1;
}
.cancel-smartone .currenttime .ctline{
    height: 2px;
    position: absolute;
    top: 0px;
    width: 100%;
    background-color: red;
    box-shadow: 0px 0px 2px 0px red;
}
.cancel-smartone .currenttime .ctpoint{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    right: -5px;
    top: -4px;
    background-color: red;
    box-shadow: 0px 0px 5px 3px #FFF;
}
.cancel-smartone .currenttime .cttext{
    background-color: #FFF;
    box-shadow: -10px 0px 20px 10px #ffffff;
    max-width: max-content;
    padding-top: 2px;
    font-family: Calibri-Bold;
}

.cancel-smartone .invertaldetail-box {
    border: solid 1px gray;
    width: 80% !important;
    margin: auto;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}
.cancel-smartone .intervaldetail-color{
    height: 30px;
    width: 30px;
    border-radius: 30px;
    margin-right: 15px;
    margin-left: 5px;
}
.cancel-smartone .intervaldetail-color.interA{
    background-color: var(--cancel-color-interA);
}
.cancel-smartone .intervaldetail-color.interB{
    background-color: var(--cancel-color-interB);
}
.cancel-smartone .intervaldetail-color.interC{
    background-color: var(--cancel-color-interC);
}
.cancel-smartone .intervaldetail-color.interD{
    background-color: var(--cancel-color-interD);
}
.cancel-smartone .intervaldetail-text{
    font-size: 16px;
    margin-top: 6px;
    margin-bottom: 10px;
}
.cancel-smartone .intervaldetail-text.title{
    font-size: 20px;
    line-height: 20px;
    font-family: Calibri-Bold;
}

@media screen and (max-width: 600px) {
    .cancel-smartone .invertaldetail-box {
        width: 98% !important;
    }
    .cancel-smartone .intervaldetail-color{
        margin-right: 10px;
        margin-left: 0px;
    }
    .cancel-smartone .invertaldetail-box {
        padding: 10px;
    }
}


.cancel-smartone .timezone-box {
    width: 80% !important;
    margin: auto;
}




@media screen and (max-width: 600px){
    #main-body .no-display-on-mobile{
        display: none !important;
    }
}
@media screen and (min-width: 601px){
    #main-body .no-display-on-desktop{
        display: none !important;
    }
}

#main-body .nodisplay {
    display: none !important;
}
.opacity {
    opacity: 1;
}
.noopacity{
    opacity: 0;
}

.novisibility{
    visibility: hidden;
}
.visibility {
    visibility: visible;
}
.novisibility.transition{
    opacity: 0;
    transition: visibility 0.4s, opacity 0.3s linear;
}
.visibility.transition {
    opacity: 1;
    transition: visibility 0s, opacity 0.3s linear;
}

#main-body.app-user .no-display-on-app-user{
    display: none !important;
}

#main-body.app-bnbdayer .no-display-on-app-bnbdayer{
    display: none !important;
}


.imagefrj > div.container{
    width: 100%;
    height: 100%;
}