@font-face {
	font-family: 'BoldFont';
	src: url('../fonts/Gabarito-Medium.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
    letter-spacing: 0.03em;
}

@font-face {
	font-family: 'TitleFont';
	src: url('../fonts/boldfont.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
    letter-spacing: 0.03em;
}

@font-face {
	font-family: 'NumberFont';
	src: url('../fonts/numberbold.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Magazine';
	src: url('../fonts/magazine.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Handwrite';
	src: url('../fonts/handwrite.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

.dbt-pager {
    padding-top:20px
}

[contenteditable=true]:empty:before{
    content: attr(placeholder);
    pointer-events: none;
    display: block; /* For Firefox */
  }

.is-login, .not-login {
    margin-left:15px;
    margin-right: -5px;
}

.autoComplete_wrapper {
    width: 100%;
    /* left: 0px; */
    /* position: absolute; */
    display: inline-block;
    position: relative;
}

.autoComplete_wrapper span {
    background-color: #fdf8f8;
    font-size: 12px;
    padding: 5px 9px;
    border-radius: 15px;
    color: #223c1e91;
    margin-top: 8px;
    display: inline-block;
    cursor: pointer;
}

.autoComplete_wrapper .no_result span {
    background-color: transparent;
    color: #223c1e;
    font-size: 14px;
    padding: 0px 0px 7px 10px;
}

.autoComplete_wrapper {
    width: 100%;
}

.colored-list {
    width: 72%;
    border: 1px solid #edd6d1;
    border-radius: 15px;
    padding: 0px 20px;
    margin-bottom: 27px;
    background-color: #faeae8;
}

.autoCom {
    display: inline-block;
    width: 94%;
    background-color: #fef8f8;
    border: 2px solid #fff4f4;
    padding: 13px 13px;
    border-radius: 10px;
    margin: 0px 0px;
    color: #223c1e;
}

.autoCom:focus-visible {
    outline: none !important;
}

.waithing {
    width: 29px;
    height: 20px;
    position: relative;
    display: inline-block;
    background-image: url(/myfamilychef.ca/static/imgs/icons/1490.gif);
    background-repeat: no-repeat;
    background-size: 27px;
}

#nouvelle-recette-holder.tab-is-loading,
body.tab-is-loading .content {
    background-image: url(/myfamilychef.ca/static/imgs/icons/1490.gif);
    background-repeat: no-repeat;
    background-position: center 50vh;
    transition: all 250ms;
}

.top-header.with-menu .chef-btn.show-as-hover {
    opacity: 0;
    width: 0;
    z-index: -1;
    padding: 0px;
}

.top-header.with-menu .chef-btn.show-as-hover.active {
    width: initial;
    opacity: 1;
    z-index: 1;
    padding: 5px 16px;
    transition: all 250ms;
}

.top-header.with-menu .cus-select.hide-as-hover.active {
    width: 0;
    opacity: 0;
    z-index: -1;
    padding:0px;
    transition: all 250ms;
}

#popup-blocker {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    background-color: rgb(255 239 239 / 88%);
    transition: all 500ms ease;
}

.mfc-popup {
    position: fixed;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    min-height: 100px;
    background-color: white;
    z-index: 100;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 1px 1px 5px rgb(0, 0, 0, 0.1);
    transition: all 500ms ease;
}

.mfc-popup .popup-pad {
    
}

.mfc-popup .popup-pad h2 {
    font-family: 'TitleFont';
    margin: 0px;
}

.mfc-popup .popup-pad p {
    margin: 8px 0px 43px 0px;
    font-weight: normal;
    font-family: 'Lexend';
    font-size: 15px;
    opacity: 0.7;
}

.mfc-popup .popup-pad .popup-actions {
    text-align: right;
}

.mfc-popup .popup-pad .popup-actions .chef-btn {
    margin-left: 9px;
}

.html-buffer.recettes {
    padding: 3vw 5vw 3vw 8vw;
}

.cus-select {
    display: inline-block;
    position: relative;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 1px;
    opacity: 1;
    cursor: pointer;
    border-radius: 2px;
}

.line:hover .cus-select {
    opacity: 1;
}

.cus-select.no-select {
    cursor:default;
}

.cus-select:after {
    content: " ";
    background-image: url(/2do.work/static/imgs/menu/select.png);
    display: inline-block;
    height: 10px;
    width: 11px;
    position: absolute;
    right: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    bottom: 19px;
}

#current-options.cus-select:after {
    transform: translateY(-50%) rotate(180deg);
    position: absolute;
    top: 4px;
    z-index: 1;
    display: block;
    left: 20px;
    display: none;
}

.cus-select.no-select:after {
    display: none;
}

.cus-select.col-res {
    width: auto;
}

.options.cus-select.col-res {
    width: 160px;
}

.options.big.cus-select.col-res {
    width: 300px;
}


.cus-select.col-res input {
    width: 40%;
}

.cus-select.no-select.col-res input {
    width: 48%;
    text-align: right;
}

.cus-select .icon {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    border-right: 1px solid #8a8a8a;
    text-align: center;
    padding: 4px;
    background-color: whitesmoke;
}

.cus-select .icon img {
    width: 69%;
}

.cus-select .icon.no-border {
    border-right-width: 0px;
}

.cus-select input {
    display: inline-block;
    width: 80%;
    vertical-align: middle;
    background: transparent;
    outline: none;
    border: none;
    margin: -2px 0px;
    font-size: 11px;
    text-indent: 5px;
    cursor: pointer;
    color:#222;
    text-transform: capitalize;
}

.master-site-content .buffer {
    transition: all 400ms
}

.master-site-content.admin #nouvelle-recette-holder .cus-select.as-chef-btn input,
.master-site-content.admin .cus-select.as-chef-btn input,
.cus-select.as-chef-btn input {
    width: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 2px #e3e3e344;
    transition: all 500ms ease;
    padding: 8px 4px;
    border-radius: 100px;
    font-size: 14px;
    margin: 0px;
    text-indent: 10px;
    line-height: 4px;
}

.master-site-content.admin #nouvelle-recette-holder .cus-select.as-chef-btn input.in-error,
.master-site-content.admin .cus-select.as-chef-btn input.in-error,
.cus-select.as-chef-btn input.in-error {
    width: 100%;
    background-color: rgb(235 153 157 / 23%);
    border-color: rgb(127 48 52 / 42%);
    box-shadow: 1px 1px 14px rgb(209 69 69 / 40%);
    color: #890404;
}

.master-site-content.admin #nouvelle-recette-holder .cus-select.as-chef-btn::after,
.master-site-content.admin .cus-select.as-chef-btn::after,
.cus-select.as-chef-btn::after {
    right: 11px;
    bottom: 12px;
}

.cus-select.no-icon input {
    width: unset !important;
    max-width: 100%;
}

.cus-select.no-select input {
    cursor: default;
}


.cus-select.colors .icon {
    height: 2px;
    background-color: #e9e9e9;
    border-radius: 20px;
    width: 2px;
    box-shadow: none;
    border: 1px solid #fff;
    box-shadow: inset 1px -1px 2px #3232321a;
    top: 2px;
    position: relative;
}

.cus-select.colors {
    width: 36px;

}

.cus-select.colors .option {

}

.cus-select.colors .option span {
    font-size: 0px;
}

.cus-select.colors .option span:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: rgb(230, 230, 230);
    border-radius: 14px;
}

.cus-select.colors .option.active:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #cbcbcb;
    border-radius: 10px;
    margin-right: 6px;
    border: 1px solid #b9b9b9;
    margin-top: -3px;
    margin-left: -3px;
}

.cus-select.colors .icon.ic-blue,
.cus-select.colors .option.opt-blue span:before,
.filtering .filtering-inner .f-box .twodo-btn.bb-blue,
.twodo-line.color-blue .row-label .row-color .row-icon {
    background-color: rgb(53 62 255);
    border-color: rgb(53 62 255);
}

.cus-select.colors .icon.ic-red,
.cus-select.colors .option.opt-red span:before,
.filtering .filtering-inner .f-box .twodo-btn.bb-red,
.twodo-line.color-red .row-label .row-color .row-icon {
    background-color: rgb(255 52 52);
    border-color: rgb(255 52 52);
}

.cus-select.colors .icon.ic-green,
.cus-select.colors .option.opt-green span:before,
.filtering .filtering-inner .f-box .twodo-btn.bb-green,
.twodo-line.color-green .row-label .row-color .row-icon {
    background-color: rgb(177 255 53);
    border-color: rgb(177 255 53);
}

.cus-select.colors .icon.ic-yellow,
.cus-select.colors .option.opt-yellow span:before,
.filtering .filtering-inner .f-box .twodo-btn.bb-yellow,
.twodo-line.color-yellow .row-label .row-color .row-icon {
    background-color: rgb(255 216 76);
    border-color: rgb(255 216 76);
}

.cus-select.colors .icon.ic-purple,
.cus-select.colors .option.opt-purple span:before,
.filtering .filtering-inner .f-box .twodo-btn.bb-purple,
.twodo-line.color-purple .row-label .row-color .row-icon {
    border-color: rgb(168 53 255);
    background-color: rgb(168 53 255);
}

.cus-select.colors .icon.ic-black,
.cus-select.colors .option.opt-black span:before,
.filtering .filtering-inner .f-box .twodo-btn.bb-black,
.twodo-line.color-black .row-label .row-color .row-icon {
    background-color: rgb(0 0 0 / 93%);
    border-color: rgb(0 0 0);
}

.cus-select.colors .icon.ic-turquoise,
.cus-select.colors .option.opt-turquoise span:before,
.filtering .filtering-inner .f-box .twodo-btn.bb-turquoise,
.twodo-line.color-turquoise .row-label .row-color .row-icon {
    border-color: rgb(53 255 236);
    background-color: rgb(53 255 236);
}

.cus-select.colors .icon.ic-pink,
.cus-select.colors .option.opt-pink span:before,
.filtering .filtering-inner .f-box .twodo-btn.bb-pink,
.twodo-line.color-pink .row-label .row-color .row-icon {
    background-color: rgb(255 52 237);
    border-color: rgb(253 54 233);
}

.cus-select.side2side {
    width: 165px;
    border-radius: 33px;
}

.cus-select.side2side:after {
    display: none;
}

.cus-select.side2side .option {
    display: inline-block;
    width: 50%;
    padding: 14px 0px;
    margin: 0 -2px;
    text-align: center;
    background-color: #ffeded46;
    opacity: 1;
    box-shadow: none;
    /* padding: 8px 14px; */
    border-radius: 20px;
    transition: all 500ms;
    
}

.cus-select.side2side .option:hover {
    background-color: #ffededde;
}

.cus-select.no-icon {
    margin: 0px 6px;
}

.options {
    display: none;
    vertical-align: middle;
    position: fixed;
    width: 240px;
    border: 1px solid rgb(255 239 237 / 70%);
    box-shadow: 1px 2px 4px #cccccc;
    transform: translate(-20px, 20px);
    background-color: #fffcfc;
    max-height: 240px;
    overflow-y: auto;
    border-radius: 8px;
    z-index: 30;
}
/* wider, no-wrap week picker */
.options.week-select { width: min(340px, 90vw); }
.options.week-select .option span { white-space: nowrap; }

.options.pink {
    background-color: #ffffff9e;
    opacity: 1;
    box-shadow: none;
    padding: 8px 14px;
}

.options .option {
    padding: 14px 9px;
    text-indent: 5px;
    border-bottom: 1px solid rgb(255 239 237 / 70%);
    box-shadow: 0px -4px 4px rgb(181 181 181 / 5%);
    font-size: 14px;
    cursor: pointer;
}

.options .option.active {
    background-color: rgb(255 239 237 / 70%);
}

.options .option.active:before {
    content: "";
    position: relative;
    width: 8px;
    height: 8px;
    display: inline-block;
    background-color: rgba(235, 212, 209, 0.7);;
    border-radius: 10px;
    margin-right: 6px;
}

#current-options.options.big .option {
    max-width: 300px;
    overflow-x: auto
}
/* Ensure custom select overlay sits above the sub page blocker */
#current-options.options {
    position: fixed;
    z-index: 1002;
}
.option-prevent.anim {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
}

.options .option span {
    text-transform:capitalize;
}

.options .option:hover {
    background-color: rgb(255 239 237 / 25%);
}

.options .option:last-child {
    border-bottom: 0px solid rgb(255 239 237 / 70%);;
    
}

.options .option img {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    margin-right: 5px;
    padding: 0px 4px;
}

.cus-select.active .options {
    opacity: 1;
}

.page-blocker {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 11;
    display: none;
}

.page-blocker.pink {
    background-color: #fff3f3f0;
}


.page-blocker.pink.sub {
    background-color: rgb(255 243 243 / 45%);
}

/* width */
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(255, 245, 245)

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(202, 166, 166);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(247, 222, 222);
}


.push-top-5 {
    margin-top: 5px;
}

.push-top-10 {
    margin-top: 10px;
}

.push-top-15 {
    margin-top: 15px;
}

#admin-trigger {
    display: none;
}

body.page- {
    background-color: #FFEFED;
}

input,
textarea,
select,
body {
    font-family: 'BoldFont', 'Avenir Next Semi', 'Rubik', sans-serif;
}

.content {
    max-width: unset;
}

.hidden {
    display: none
}

.anim-fast {
    transition: all 3s;
    transform:translateY(0)
}


.header {
    margin: 0 auto;
    position: relative;
}

.nlogo {
    text-decoration: none;
    font-family: 'BoldFont';
    font-size: 21px;
}

.nlogo.home {
    color:#0D28F2
}

.nlogo:after {
    content: "";
    position: relative;
    display: inline-block;
    /*border-bottom: 5px solid rgb(226, 252, 81);*/
    width: 125px;
    top: -11px;
    z-index: -1;
}

.nlogo:before {
    background-image: url(/myfamilychef.ca/static/imgs/myfamilychef-logo-2024.svg);
    content: "";
    display: inline-block;
    width: 91px;
    height: 68px;
    background-size: cover;
    position: absolute;
    margin-left: -57px;
    border-radius: 8px;
    margin-top: -17px;
}

#cie_logo.splash {
    width: 180px;
}

.nlogo.home:before {
    background-image: url(/myfamilychef.ca/static/imgs/logo-blue.svg);
}

.nlogo.splash:before {
    background-image: url(/myfamilychef.ca/static/imgs/myfamilychef-logo-2024.svg);
    width: 180px;
    height: 140px;
}

.nlogo.splash a {
    display: none;
}

.nlogo.white:before {
    background-image: url(/myfamilychef.ca/static/imgs/logo-white.svg);
    opacity: 0.7;
}

body.page-menus2 .nlogo:before,
body.page-uber .nlogo:before,
body.page-admin .nlogo:before {
    width: 92px;
    height: 68px;
    margin-left: -50px;
    margin-top: -27px;
}

body.page-menus2 .nlogo,
body.page-uber .nlogo,
body.page-admin .nlogo {
    font-size: 16px;
    top: 41px !important;
    left: 30px !important;
    line-height: 18px;
}

.nlogo a {
    text-decoration: none;
}

body.page-uber .nlogo a {
    display: none;
}

.nlogo.minimal a {
    display: none;
}

.nlogo.white a {
    color:white
}

.nlogo.home a {
    color:#0D28F2
}

.branding-line {
    position: fixed;
    height: 8px;
    background-color: #FFEFED;
    left: 0px;
    width: 100%;
}

body.page-uber .branding-line,
body.page-admin .branding-line {
    background-color: transparent;
}

body.page-menus2 .branding-line {
    background-color: transparent;
}

.master-site-menu {
    position: fixed;
    width: 250px;
    top: 28vh;
    font-size: 6.3vh;
    line-height: 6vh;
    left: 8vw;
    letter-spacing: -.01em;
    color: #000;
}

.master-site-menu .menu-item {
    opacity: 0.55;
    cursor: pointer;
}

.master-site-menu .menu-item:hover,
.master-site-menu .menu-item.active {
    opacity: 1;
}

.master-site-menu.recettes,
.master-site-menu.admin {
    font-size: 4.3vh;
    line-height: 4.5vh;
    top: 16vh;
    left: 6vw;
}

.master-right-menu {
    position: fixed;
    width: 70px;
    right: 0px;
    height: 100%;
    top:0px;
    z-index: 9;
}

.master-right-menu .top-handle {
    width: 23px;
    height: 26px;
    right: 22px;
    position: absolute;
    top: 24px;
    cursor: pointer;
    opacity: 0.8;
    z-index: 110; /* keep above floating panels */
}

.master-right-menu .top-handle:hover {
    opacity: 1;
}

.master-right-menu .top-handle:hover {

}

.master-right-menu .top-handle .icon {

}

.master-right-menu .top-handle .icon::after,
.master-right-menu .top-handle .icon::before {
    content: "";
    display: inline-block;
    position: relative;
    border: 2px solid black;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    margin-bottom: -2px;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
}

.master-right-menu .top-handle:hover .icon::after,
.master-right-menu .top-handle:hover .icon::before {

}

.master-site-menu .menu-item:hover {
    color: #0D28F2
}

.page-menu {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #FFEFED;
    z-index: 999;
    opacity: 0.9;
    display: none;
}

.page-menu a {
    text-decoration: none;
    color: #193D1C
}

.page-menu .page-menu-buffer {
    width: 500px;
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
}

.page-menu .page-menu-buffer .page-menu-item {
    font-size: 8vw;
    line-height: 7vw;
    opacity: 0.65;
}

.page-menu .page-menu-buffer .page-menu-item:hover {
    opacity: 1;
}

.page-menu .page-menu-buffer .page-menu-item.active {
    text-decoration: underline;
    opacity: 1;
}

.home-splash {
    background-color: #fbf3f1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.home-splash .chef-hat {
    left: 50%;
    top: 29%;
    transform: translateX(-40%);
    height: 71px;
    width: 41px;
}

.home-splash:after,
.home-splash:before {
    content: "";
    position: absolute;
    background-image: url(/myfamilychef.ca/static/imgs/assets/home-page-plates.png);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: 146%;
    z-index: 0;
    background-position-y: -29vh;
    background-repeat: no-repeat;
    background-position-x: 29%;
    transform: scalex(-1);
}

.home-splash:after {
    background-image: none;
    background-color: rgb(237 216 213 / 53%);
    z-index: 1;
}

.promo-text {
    font-family: 'TitleFont';
    font-size: 5.5vh;
    text-align: center;
    color: #193D1C;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    line-height: 6vh;
    width: 33%;
    font-weight: normal;
    z-index: 2;
}

.promo-text span {
    font-family: 'HandWrite';
    font-weight: bold;
}

.promo-text .chef-btn {
    margin-top: 25px;
}

/* Home hero adjustments (migrated from template/pages/home.html) */
.home-splash .promo-text {
    font-family: 'Gabarito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 7vw, 100px);
    line-height: 0.88;
    letter-spacing: 0;
    width: 80%;
    max-width: 1200px;
}
.home-splash .promo-text span { font-weight: 900; }
.home-splash .chef-btn.white a {
    font-weight: 800;
    font-size: 1.6vh;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-top: 32px;
    padding: 2px 10px;
}

.home-splash .big-number {
    font-family: 'NumberFont';
    font-size: 58vh;
    letter-spacing: -0.05em;
    margin: 0px;
    margin-bottom: -17vh;
}

.home-splash .big-text {
    font-size: 11vw;
    margin-bottom: -2vw;
}

.visible-menu-holder {
    position: fixed;
    left: 10vw;
    font-size: 5vw;
    top: 17vh;
    text-decoration: none;
    line-height: 4.6vw;
}

.visible-menu-holder a {
    text-decoration: none;
    color:#000
}

.visible-menu-holder .page-menu-item {
    opacity: 0.7;
}

.visible-menu-holder .page-menu-item:hover {
    opacity: 1;
    text-decoration: underline;
}

.master-site-content {
    position: absolute;
    top: 15vh;
    min-height: 100px;
    left: 31vw;
    right: 5vw;
}

.master-site-content .page-title {
    font-size: 8vw;
    text-align: right;
    width: 97%;
    display: inline-block;
    position: relative;
    letter-spacing: -0.03em;
}

.master-site-content .page-data {
    margin: 10px 3vw 10px 3vw;
    background-color: #f4eded54;
    font-family: 'TitleFont';
    color: #0000007a;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #efeaea;
    width: 100%;
}

.master-site-content .page-data .data-title {
    font-size: 32px;
    line-height: 45px;
}

.master-site-content .page-data .data-item {
    position: relative;
    margin-top:66px;
}

.master-site-content .page-data .data-item .main-image {
    margin-bottom:26px;
    min-height: 500px;
    background-color: #fdfdfd;
    width: 100%;
} 

.master-site-content .page-data .data-item:first-child {
    margin-top: 0px;
}


.master-site-content.admin {
    /*background-color: rgb(255 239 237 / 33%);*/
    top: 0px;
    right: 0px;
    bottom: 0px;
    /*box-shadow: inset 1px 0px 10px #f7e5e5;*/
    transition:all 500ms ease;
    /*padding-bottom: 19vh;*/
    position: relative;
}

.html-buffer.recettes {
    /*background-color: rgb(255 239 237 / 33%);*/
}

.master-site-content.admin.full-width {
    width: 100%;
    left:0px;
}

.master-site-content.admin .buffer {
    padding: 3vw;
    position: relative;
    /*
    top: 50%;
    transform: translateY(-50%);
    */
    min-height: 67vh;
}

.master-site-content.admin.full-width .buffer {
    padding: 3vw 7vw 3vw 13vw;
    min-height: 91.5vh;
}

.page-div {
    display: none;
}


.content-page-indicator {
    position: fixed;
    width: 250px;
    top: 88vh;
    font-size: 19px;
    left: 8vw;
    letter-spacing: -.01em;
    color: #000;
}

.content-page-indicator .page-list {
    font-size: 14px;
    font-family: 'arial';
    opacity: 0.6;
}

.chef-btn-with-label {
    border: 1px solid #f3dcda;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    margin: 9px 0px;
    background-color: #fff8f7c4;
}

.chef-btn-with-label label {
    font-size: 12px !important;
    font-family: 'Lexend';
    position: relative;
    top: 2px;
}

.chef-btn {
    display: inline-block;
    position: relative;
    background-color: #FFEFED;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    line-height: 23px;
    vertical-align: middle;
    top: -1px;
    left:5px;
    box-shadow: 1px 1px 2px #e3e3e3;
    transition:all 500ms ease;
}

.chef-btn.with-border {
    border: 1px solid rgb(153 132 132);
}

.chef-btn.hidden {
    display: none;
}

.chef-btn.no-click {
    cursor:normal;
    box-shadow: none;
}

.chef-btn.big {
    font-size: 1.4vw;
    padding: 1.3vw 1.7vw;
    border-radius: 100px;
    line-height: 1.5vw;
    letter-spacing: -0.01em;
}

.chef-btn.small {
    font-size: 13px;
    padding: 1px 13px;
}

.chef-btn.add-to-order {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.chef-btn.blue {
    background-color: #0D28F2;
    color: #FFEFED
}

.chef-btn.white {
    background-color: #fff;
    color: #222
}
/* frigo state buttons */
.chef-btn.state {
    opacity: 0.5;
    border: 1px solid #f3ede8;
    background-color: #fff;
    color: #665151;
    margin-left: 6px;
}
.chef-btn.state.active {
    opacity: 1;
    box-shadow: 1px 2px 4px rgb(47 19 19 / 10%);
    border-color: #e2c7c7;
}
.chef-btn.state.loading {
    opacity: .4;
    pointer-events: none;
    position: relative;
}
.chef-btn.state.loading:after {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    margin-left: 6px;
    background-image: url(/myfamilychef.ca/static/imgs/icons/1490.gif);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.chef-btn.transparent {
    background-color: transparent;
    color: #222;
    box-shadow: none;
}

.chef-btn.accept {
    background-color: #76897B;
    color:white;
    padding: 5px 16px;
    font-size:14px;
}

.chef-btn.decline {
    background-color: #C49381;
    color:white;
    padding: 5px 16px;
    font-size:14px;
}

.chef-btn.blue a {
    color: #FFEFED
}

.chef-btn.grey {
    background-color: rgb(248 244 243);
    color: #333
}

.chef-btn a {
    text-decoration: none;
}

.chef-div {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.chef-btn.admin {
    background-color: white;
    box-shadow: 1px 2px 4px rgb(47 19 19 / 10%);
    padding: 7px 15px 5px 15px;
}

.chef-btn.admin:hover {
    opacity: 0.6;
}

.chef-btn.save-n-close {
    display: inline-block;
    clear: both;
    float: right;
    position: relative;
    top: 31px;
    color: #936565;
    background-color: #e9d7d7;
}

.chef-div .chef-icon {
    width: 40px;
    border-radius: 26px;
    overflow: hidden;
    height: 40px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right:10px
}

.chef-div .chef-name {
    top: 1px;
    display: inline-block;
    vertical-align: middle;
    text-transform: capitalize;
    font-size: 15px;
    position: relative;
}

.page-note {
    position: fixed;
    bottom: 20px;
    left: 20px;
}

.page-note img {
    width: 39px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -5px;
}

.page-note p {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    font-family: 'Lexend';
    opacity: 0.7;
}

.page-hover {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #ffefedf1;
    z-index: 999;
}

.page-info {
    width: 45%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 46vh;
    color: #0D28F2
}

.page-info .page-type {
    font-size: 20px;
    text-transform: capitalize;
}

.page-info .page-title {
    font-size: 6vw;
    width: 27vw;
    line-height: 5vw;
    left: unset;
    top: unset;
    margin: 30px 0px 0px 0px;
    position: relative;
    text-transform: capitalize;
}

.page-info .sub-title {
    font-size: 17px;
    margin-top:20px;
}

.page-info .big-list {
    
}

.page-info .big-list .list-item {
    display: inline-block;
    font-size: 2.5vw;
    margin: 10px 18px 10px 0px;
    cursor: pointer;
    position: relative;
    text-transform: capitalize;
}

.page-info .big-list .list-item.ingredients {

}

.page-info .big-list.ingredients .list-item::after {
    content: "";
    display: inline-block;
    position:absolute
}

.page-info .big-list.ingredients .list-item.active:after {
    content: "";
    width: 100%;
    height: 4px;
    background-color: #0D28F2;
    left: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(-20deg);
}

.page-info .big-list .list-item:first-child {
    margin-left: 0px;
}

.page-info .big-list .list-item:hover {
    opacity: 1;
}

.page-info .big-list .list-item.active {
    opacity: 1;
    text-decoration: underline;
}

.page-info .big-list.ingredients .list-item.active {
    text-decoration: none;
}

.page-info textarea {
    outline: none;
    border: none;
    background-color: transparent;
    width: 100%;
    margin-top: 10px;
    min-height: 30px;
    color: #0D28F2;
    resize: none;
}

.site-title {
    font-family: 'Poppins';
    position: absolute;
    left: 34px;
    font-size: 8vw;
    width: 41vw;
    top: 40%;
    line-height: 6.4vw;
    font-weight: normal;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: -.2vw;
    padding: 0px;
    margin: -40px 0px 0px 0px;
}

.site-title span {
    display: inline-block;
    position: relative;
}

.site-title span:after {
    content: "";
    position: absolute;
    display: inline-block;
    /*border-bottom: 13px solid rgb(226, 252, 81);*/
    width: 100%;
    bottom: 7px;
    left: 0px;
    z-index: -1;
}

.tag-line {
    width: 100%;
    text-transform: uppercase;
    left: 50%;
    top: 42%;
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    font-size: 2vw;
    /* margin-top: 2vw; */
    padding-top: 12vw;
    margin: 0;
}

.home-big-button {
    position: absolute;
    font-size: 15px;
    background-color: black;
    color: white;
    padding: 15px 23px;
    letter-spacing: 0.03em;
    border-radius: 37px;
    left: 50%;
    top: 58%;
    transform: translateX(-50%); 
    font-weight: bold;
}

.home-big-button a {
    color: #fff
}

.page-footer {
    padding:25px 0px;
}

#olins_logo {
    position: absolute;
    top: 30px;
    right: 40px;
    width: 75px;
    z-index: 2;
    text-align: right;
}

#cie_logo {
    width: 65px;
    position: fixed;
    margin-left: 38px;
    top: 39px;
    z-index: 20;
    left: 35px;
    cursor: pointer;
}

#cie_logo.white {
    color:white
}

#cie_logo.home {
    left: 50%;
    transform: translateX(-50%);
    top: 49px;
}

#cie_logo.splash {
    left: 50%;
    transform: translateX(-50%);
    top: 26px;
}


body.page-admin #cie_logo {

}

.tagline {
    position: absolute;
    top: 123px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6vh;
    width: 23vw;
    text-align: center;
    color:#0D28F2
}

#cie_logo img {
    border-radius: 10px;
}

#rez {
    min-height:unset;
    padding:5px;
}

.gallery span {
    font-size: 18px;
    font-weight: normal;
    font-weight: 100;
    color: #555;
}

.search-icon {
    background-image: url(/static/imgs/search.png?v=ca59eee…);
    width: 15px;
    height: 15px;
    display: inline-block;
    background-size: cover;
    position: relative;
    top: 11px;
    right: 109px;
    z-index: 9999;
}

#main-search-bar {
    position: absolute;
    width: 380px;
    right: 30px;
    top: 30px;
    z-index: -1;
    opacity: 0;
}

.rez-img a {
    width: 207px;
    height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f2f5;
}

.rez-line .rez-txt {display:none}

.search-icon {
    position: absolute;
}

body.cie-site .page-content.cie-projects.project-page {
    position: relative;
    top: 280px;
    padding: 0;
    right: unset;
    overflow: hidden;
    left: 50%;
    transform: translate(-50%, 0%);
}

.project-page .projects_items {
    width: 100%;
}

/* index */
.index-frame {
    position: relative;
    height: unset;
    width: 100%;
    max-width: 2000px;
    margin: 0;
    top: 0px;
    background-color: #efefef;
    box-shadow: 2px -1px 13px rgb(0 0 0 / 12%);
}

.home-slides-holder {
    position: absolute;
    width: 100%;
    top: 95%;
    margin: 0;
    z-index: 9999999;
    left:0px;
}

.home-slides-holder .home-slide {
    width: 100%;
    position: relative;
    display: block;
    height: 500px;
    background-size: 100%;
    background-position: center center;
}

.home-slides-holder .home-slide .home-slide-title {
    text-transform: uppercase;
    font-size: 9.6vw;
    text-align: center;
    font-family: 'Poppins';
    font-weight: bold;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    color: white;
    z-index: 999999;
    opacity: 0.8;
}

.home-slides-holder .home-slide .home-side-bg {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5480567226890756) 71%, rgba(0,0,0,0.7497373949579832) 100%);
    z-index: 99999;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0.7;
}

.mjpeg-holder {

}

.home-text h1 {
    text-align: left;
    font-size: 1.8vw;
}

.home-blocks {
    position: absolute;
    background-color: white;
    width: 100%;
    top: 91%;
    left:0px
}

.home-blocks .home-block {
    position: relative;
    display: inline-block;
    height: 600px;
    width: 100%;
    border-bottom: 1px solid #efefef;
    padding: 0px 0px 0px 0px;
    box-shadow: 2px -1px 13px rgb(0 0 0 / 12%);
    overflow: hidden;
    margin-top:-4px
}

.home-blocks .home-block.gradient {
    background: rgb(242,244,253);
    background: linear-gradient(0deg, rgba(242,244,253,1) 0%, rgba(255,255,255,1) 100%);
}

.home-blocks .home-block.dark-grey {
    background-color: #262a2d;
}

.home-blocks .home-block.dark-grey h2,
.home-blocks .home-block.dark-grey p  {
    color:#efefef
}

.home-blocks .home-block.dark-grey p {
    opacity: 0.7;
    width: 100%;
}


.home-blocks .home-block.dark-grey .home-btn span {
}

.home-blocks .home-btn a {
    color: #fff;
    text-decoration:none
}

.home-blocks .home-block .home-block-left {
    width: 400px;
    position: absolute;
    left: 29%;
    transform: translate(-50% , -50%);
    top: 50%;
    z-index: 1;
}


.home-blocks .home-block .home-block-left.half-top {
    top:27%
}

.home-blocks .home-block.block-center .home-block-left {
    text-align: center;
    left: 50%;
    top: 45%;
    width: 45%;
}

.home-blocks .home-block.block-center .home-block-left .home-block-title h2 {
    font-size: 6vw;
    width: 100%;
    line-height: 5.7vw;
}

.home-blocks .home-block.block-center .home-block-left .home-block-title p {
    width: 81%;
    margin: -34px auto 35px auto;
    font-size: 1.6vw;
}

.home-blocks .home-block .home-block-left .home-block-title {

}

.home-blocks .home-block .home-block-left .home-block-title img {
    width: 65px;
    margin-bottom: -10px;
}

.home-blocks .home-block .home-block-left .home-block-title h2 {
    font-family: 'Poppins';
    font-size: 4.1vw;
    letter-spacing: -0.09vw;
    width: 28vw;
    line-height: 4vw;
    margin-top: 10vh;
    position: relative;
}

.home-blocks u {

}



.home-blocks .home-block .home-block-left .home-block-title p {
    margin-top: -12px;
    font-family: 'Poppins';
    font-weight: bold;
    font-size: 1.3vw;
    opacity: 0.8;
    width: 23vw;
}

.home-blocks .home-block .home-block-left .home-block-title span {
    display: inline-block;
    position: relative;
}

.home-blocks .home-block .home-block-left .home-block-title span:after {
    content: "";
    position: absolute;
    display: inline-block;
    border-bottom: 5px solid rgb(226, 252, 81);
    width: 100%;
    left: 0px;
    bottom: 3px;
    z-index: -1;
}

.home-blocks .home-block.salmon h2 {
    color: #f5937c;
}

.home-blocks .home-block.salmon p {
    color: #f5937c;
}

.home-blocks .home-block.salmon .home-btn {
    background-color: #f5937c;
    border-color: #f5937c;
    color: #110625;
}

.home-blocks .home-block.salmon .home-btn a {
    color: #110625;
}

.home-blocks .home-block.salmon .home-btn-project {
    background-color: #110625;
    border-color: #110625;
    color: #f5937c
}

.home-blocks .home-block.salmon .home-btn-project a {
    color: #f5937c
}


.home-blocks .home-block.pale-blue h2 {
    color: #93ccff;
}

.home-blocks .home-block.pale-blue p {
    color: #93ccff;
}

.home-blocks .home-block.pale-blue .home-btn {
    background-color: #93ccff;
    border-color: #93ccff;
    color: #110625;
}

.home-blocks .home-block.pale-blue .home-btn a {
    color: #110625;
}

.home-blocks .home-block.pale-blue .home-btn-project {
    background-color: #110625;
    border-color: #110625;
    color: #93ccff
}

.home-blocks .home-block.pale-blue .home-btn-project a {
    color: #93ccff
}

.home-blocks .home-block.lime-green h2 {
    color: #d5e9a5
}

.home-blocks .home-block.lime-green p {
    color: #d5e9a5;
}

.home-blocks .home-block.lime-green .home-btn {
    background-color: #d5e9a5;
    border-color: #d5e9a5;
    color: #110625;
}

.home-blocks .home-block.lime-green .home-btn a {
    color: #110625;
}

.home-blocks .home-block.lime-green .home-btn-project {
    background-color: #110625;
    border-color: #110625;
    color: #d5e9a5
}

.home-blocks .home-block.lime-green .home-btn-project a {
    color: #d5e9a5
}



.home-blocks .home-block.pale-yellow h2 {
    color: #ffe0b9
}

.home-blocks .home-block.pale-yellow p {
    color: #ffe0b9
}

.home-blocks .home-block.pale-yellow .home-btn {
    background-color: #ffe0b9;
    border-color: #ffe0b9;
    color: #110625;
}

.home-blocks .home-block.pale-yellow .home-btn a {
    color: #110625;
}

.home-blocks .home-block.pale-yellow .home-btn-project {
    background-color: #110625;
    border-color: #110625;
    color: #ffe0b9
}

.home-blocks .home-block.pale-yellow .home-btn-project a {
    color: #ffe0b9
}



.home-blocks .home-block.bright-green h2 {
    color: #eaed64
}

.home-blocks .home-block.bright-green p {
    color: #eaed64;
}

.home-blocks .home-block.bright-green .home-btn {
    background-color: #eaed64;
    border-color: #eaed64;
    color: #110625;
}

.home-blocks .home-block.bright-green .home-btn a {
    color: #110625;
}

.home-blocks .home-block.bright-green .home-btn-project {
    background-color: #110625;
    border-color: #110625;
    color: #eaed64
}

.home-blocks .home-block.bright-green .home-btn-project a {
    color: #eaed64
}





.home-blocks .home-block .home-block-actions {
    margin-top: 30px;
}

.page-foot {
    width: 100%;
    background-color: #fbfbfb;
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: top;
}

.page-foot .page-foot-pad {
    padding: 120px 50px;
    display: inline-block;
    width: 100%;
    max-width: 800px;
}

.page-foot .addr {
    vertical-align: top;
    text-align: left;
}

.page-foot .addr h3 {
    margin-top: 0px;
    margin-bottom: 5px;
}

.page-foot .addr p {
    margin: 2px 0px;
    line-height: 18px;
    color: #757575;
    font-weight: bold;
    font-size: 15px;
}

.page-foot .img {
    position: relative;
}

.page-foot #foot-dec {
    font-weight: bold;
    font-size: 22px;
    position: absolute;
    left: 16px;
    top: 9px;
}

.page-foot .footer-logo {
    position: relative;
    display: inline-block;
    width: 150px;
    /* border-radius: 10px; */
    height: 230px;
}

.page-foot .footer-logo img {
    border-radius: 15px;
    box-shadow: 16px 20px 8px #e9e9e98f;
}

.home-btn-project,
.home-btn {
    border: 2px solid #000;
    display: inline-block;
    padding: 6px 21px 7px 40px;
    position: relative;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    background-color: #121212;
    color: #FFF;
    border-radius: 8px;
    letter-spacing: 0.04em;
    border-radius:40px;
    margin-bottom: 10px;
}

.home-btn-project span,
.home-btn span {
    border-right: none;
    padding: 2px;
    position: absolute !important;
    left: 13px;
    padding-right: 5px;
    font-family: 'Poppins';
    font-size: 17px;
    margin-top: -6px;
}

.home-btn.white {
    border-color:#FFF;
    color:#FFF
}

.home-btn-project:hover,
.home-btn:hover {
    background-color: #000;
    color:#FFF
}

.home-btn-project {
    background-color: #efefef;
    color:#ccc;
    border-color: #efefef;
}

.home-btn-project a {
    display: inline-block;
    text-decoration: none;
}

.home-blocks .home-block .home-block-left .home-block-title span:after {

}

.home-blocks .home-block .home-block-center,
.home-blocks .home-block .home-block-right {
    left: 40%;
    position: relative;
    transform: translate(5%, -50%);
    top: 35%;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.home-blocks .home-block.block-center .home-block-right {
    position: absolute;
    bottom: 0px;
    top: unset;
    transform: translate(0px, 0px) !important;
    opacity: 0.9 !important;
    
}

.home-blocks .home-block.block-center .home-block-right img {
    width: 100%;
}

.home-blocks .home-block.block-center .home-block-right .img-labels {
    position: absolute;
}

.home-blocks .home-block.full .home-block-right {
    left:0px;
        
    transform: translate(0%, -50%);
}

.home-blocks .home-block.bg .home-block-right {
    opacity: 0.3;
}


.home-blocks .home-block .home-block-right img {
    width: auto;
    max-width: unset;
    position: relative;
}



.home-blocks .home-block .home-block-right .img-labels {

}

.home-blocks .home-block .home-block-right .img-labels .img-label {
    
}

.home-blocks .home-block .home-block-center {

}


.master-site {
    padding: 4px 29px;
    font-size: 5.6vw;
    font-weight: 900;
    font-family: 'Poppins';
    margin-bottom: 18px;
    margin-top: 3vw;
    letter-spacing: -.15vw;
    display: inline-block;
    background-color: #000;
    color: #FFF;
    border-radius: 1px;
    text-shadow: 2px 1px 0px rgb(0 0 34);
}

.mjpeg-holder {
    position: absolute;
    left: 0px;
    z-index: -1;
    right: 0px;
    top: 0px;
    bottom: 70px;
    overflow: hidden;
}

.mjpeg-holder .img-stream {
    width: 105%;
    height: 105%;
    position: absolute;
    display: inline-block;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    left: 50%;
    transform: translate(-50%);
    bottom: 34px;
    top: 0px;
    overflow: hidden;
    opacity: 0.4;
}

.img-mask {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    opacity: 0;
    box-shadow: inset 0px -5px 6px #272727;
}

.img-mask img {
    width: 90%;
    left: 50%;
    position: relative;
    top: 50%;
    transform: translate(-50%,-52%);
    border-top: 271px solid white;
    border-bottom: 316px solid white;
    border-right: 300px solid white;
    border-left: 300px solid white;}

.pad.home-text {
    padding: 20px;
    position: relative;
    font-weight: normal;
}

.btn.home {
    padding: 10px 15px;
    letter-spacing: 0.03em;
    font-size: 13px;
}

.in-category .home-posts {

}

.home-posts {
    top:105%;
}

.home-projects-btn {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    /* rotate: 90deg; */
    left: 50%;
    bottom: 135px;
    transform: translateX(-50%);
}

.home-projects-btn:after {
    display: block;
    margin-top: 10px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid black;
    content: ' ';
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}

#olins_logo span {
    font-size: 12px;
    opacity: 0.6;
    position: relative;
    right: 25px;
    top: 10px;
    color: black;
    padding: 5px;
}

.home-posts.on-home {
    position: absolute;
    top: 95%;
}

.page-content h1 {
    line-height:5.2vw;
    font-size: 5.3vw;
    margin: 0 0 20px 0;
    text-transform: capitalize;
    font-weight: normal;
}

.page-content.project-page h1 {

}

.page-content .big-page-title {
    font-family: 'Poppins';
}

.section .section-content {
    border-radius: 8px;
    border-width: 2px;
}

.tab-step {

}

.tab-help {
    font-weight: bold;
    margin: 10px 0px;
}

.seo-section {
    max-width: 1300px;
    display: inline-block;
    margin-bottom:150px;
    width: 100%;
}

.seo-section h1 {
    width: 50%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.seo-section h2 {
    width: 50%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    font-weight: normal;
}

.bubble-holder {
    padding: 8px;
}

.page-index a {
    display: inline-block;
    margin: 2px 1px;
}

.page-index a .btn {
    border-radius: 5px;
    padding: 5px 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
}

.page-index a.act .btn,
.page-index a.active .btn, 
.page-index a:hover .btn {
    opacity: 1;
    background-color: blue;
}

.projects-items {
    display: inline-block;
    text-align: center;
    line-height: 2vw;
    text-align: left;
    margin-bottom: 90px;
    padding: 0.5vw;
    border-radius: 3px;
    width: 24vw;
    position: relative;
    vertical-align: top;
    height: 30vh;
}

.projects-items:hover {

}

.tags .service-page-category-list, 
.projects-items .tags {
    position: absolute;
    bottom: 58px;
    right: 20px;
    width: 86%;
    text-align: right;
}

.projects-items .tags .tag {
    font-size: 9px;
    padding: 2px 5px;
}

.projects-items h3 {
    font-weight: bolder;
    font-size: 15px;
    opacity: 1;
    line-height: 15px;
    text-transform: capitalize;
    margin: 1.2vw 0px;
    font-weight: normal;
    width: 100%;
    position: absolute;
    top: 100%;
    text-align: left;
    font-size: 88px;
    transform: translateY(10px);
    margin-top: 0px;
    text-decoration: none;
}

.projects-items:hover h3 {

}

.projects-items .item-img {
    width: 100%;
    height: 215px;
    background-size: cover;
    margin: 0px 0px 0px 0px;
    background-position: center;
}

#category_cnc .item {
    font-weight: normal;
}

#form-msg-user {
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    margin-top: 9px;
    padding: 2%;
    font-size: 14px;
    height: 150px;
}

.nouserfield {
    font-size: 12px;
    padding-bottom: 16px;
}

#helper-page #seo_page_title {
    width: 60%;
    margin: 0 auto;
    display: block;
    text-align: center;
    border: none;
    outline: none;
    font-size: 19px;
    font-family: 'Poppins';
    margin-top: 16px;
}



/* Home page */
#custom-simple-home {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#custom-simple-home .frame-background {
    position: absolute;
    width: 100%;
    height: 100%;
}

#custom-simple-home .frame-background .home-img-frame {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 200%;
    background-position: 50% 50%;
    opacity: 0.45;
}

#custom-simple-home .container {
    width: 550px;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    z-index:1;
}

#custom-simple-home .container .col-full-content-pad.content {
    margin-top: 130px;
    min-height: 250px;
    padding: 6px;
    overflow: hidden;
    width: 100%;
    box-shadow: unset;
    border: none;
    border-radius: 0px;
    background-color:transparent;
}

#custom-simple-home .container h1 {
    margin-left: 0px;
    font-size: 110px;
}

#custom-simple-home .container h2 {
    font-size: 21px;
    margin-top: 2px;
}

#custom-simple-home .container h3 {
    font-size: 14px;
    opacity: 0.8;
}

#custom-simple-home .content .btn {
    margin-top: 20px;
    color: rgb(224, 206, 193);
}

.featured-image-holder {
    position: relative;
}

.featured-image-holder .append-js img {
    opacity:0.7;
}

#custom-simple-home .container .col-full-content-pad.content {
    margin-top:10px;
    text-align:center;
}

#custom-simple-home .container h1 {
    margin-left: 0px;
    font-size: 80px;
    margin: 0;
    text-align:center;
}

#custom-simple-home .container p {
    font-weight: bold;
    color: #000;
    line-height: 18px;
    border-top: 2px solid #000;
    padding: 10px;
    font-size: 13px;
    border-bottom: 2px solid #000;
}

.projects_items .page-index {
    display: inline-block;
    height: 72px;
    text-align: left;
    margin-bottom: 117px;
    width: 100%;
    border: 1px solid #dddddd;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-top: -32px;
    max-width: 1400px;
}

.projects_items .page-index .content-box.box {
    background-color: white;
    margin-bottom: 6px;
}

.projects_items .page-index .bubble-holder {
    padding: 0px 7px;
}

.page-left {
    position: absolute;
    left: 0px;
    width: 50%;
    height: 100%;
    bottom: 0px;
    background-color: #FFEFED;
    background-image: url(/myfamilychef.ca/static/imgs/family-chef.jpg);
    background-size: cover;
        border-right: 1px solid #ede0de;
}

.page-left h1 {
    font-size: 15vh;
    text-align: left;
    margin-top: 38vh;
    width: 34vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 12vh;
    margin-left: 6vh;
}

.page-right p {
    font-family: "Lexend", sans-serif;
    font-size: 14px;
    opacity: 0.6;
    margin: 0px 0px 20px 0px;
}

.page-right h2 {
    margin:10px 0px;

}

.devenir-client,
.devenir-chef {
    padding: 14px 22px;
    font-size: 20px;
    border-radius: 100px;
    background-color: #FFF;
    color: #000;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 21%);
    margin-top: 47px;
}

.page-right {
    position: absolute;
    left: 50%;
    top: 0px;
    width: 50%;
    bottom: 0px;
    background-color: #ffe6e2;
    box-shadow: -7px -1px 11px rgb(73 59 59 / 8%)
}

.new-member-fields {
    padding: 12vh 6vw;
    top: 50%;
    position: relative;
    transform: translateY(-53%);
}

.new-member-fields label {
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 20px 0px 7px 0px;
    color: #000;
    font-size: 17px;
    opacity: 0.7;
}

.new-member-fields input {
    border: 1px solid rgb(233 208 206);
    outline: none;
    padding: 14px 4px;
    width: 100%;
    background-color: rgb(255 251 251 / 77%);
    border-radius: 8px;
    font-size: 14px;
    box-shadow: inset -1px -1px 3px rgb(255 0 0 / 16%);
    font-family: 'Lexend';
    text-indent: 8px;
}

#new-member-wait p a {
    color: #000;
    font-weight: bold;
    text-decoration: underline;
}

.page-blocker,
.pink-bg {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(255 239 237 / 32%);
    z-index: 0;
    transition:all 500ms ease;
}

.page-blocker {
    z-index: 10;
    background-color: rgb(255 239 237 / 52%);
}

/* Elevate only the sub blocker used by the in-hover selector popover */
.page-blocker.sub {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1001;
    background-color: rgb(255 239 237 / 52%);
}

.pink-bg.blue {
    background-color: #FFEFED;
}

.pink-bg.green {
    background-color: color(srgb 0.88 0.91 0.87 / 0.56);
}

.interactive_bubbles {
    position: relative;
    display: block;
    min-height: 44px;
}

.interactive_bubbles .chef-btn {
    font-weight: bold;
}
/* place the mini button inside the input on the right */
.interactive_bubbles .chef-btn.mini {
    position: absolute;
    right: 14px;
    top: 0;
    bottom: 0;
    margin: auto 0;          /* vertically center regardless of input height */
    transform: none;         /* no translate needed when using top/bottom */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content !important;
    max-width: none;
    font-size: 12px;
    padding: 2px 8px;
    line-height: 16px;
    height: 24px;
    white-space: nowrap;
    z-index: 2;
}

.interactive_bubbles input {
    width: 100%;
    display: block;
    text-indent: 10px;
    padding-right: 140px; /* ensure long text never hides under button */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.interactive_bubbles .chef-btn:hover {
    background-color: #e9d6d3;
}

.hover-choices {
    position: fixed;
    width: 500px;
    background-color: rgb(255 255 255 / 92%);
    z-index: 1002; /* above page-as-a-hover (12) and .page-blocker */
    display: block;
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border-radius: 20px;
    padding-bottom: 58px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.hover-choices .bubble-choice {
    display:inline-block;
    border: 1px solid #e7c9c9;
    padding: 5px 9px;
    border-radius: 10px;
    background-color: #f5eeee;
    font-size: 14px;
    font-family: 'TitleFont';
    color: #223c1e;
    margin-bottom: 9px;
    cursor: pointer;
}

.hover-choices .bubble-choice.active {
    background-color: #dfcaca;
}

.hover-choices h2 {
    text-transform: capitalize;
    color: #223c1e;
    font-family: 'TitleFont';
}

.page-warning {
    width: 30%;
    position: absolute;
    top: -14px;
    left: 50%;
    background-color: rgb(233 212 202 / 32%);
    transform: translateX(-50%);
    font-size: 15px;
    font-family: 'BoldFont';
    border-radius: 10px;
    padding: 12px 0px;
    color: #a58270;
}

.page-uber .pink-bg {
    top: 11vh;
    left: 118px;
    right: 90px;
    border-radius: 19px;
    background-color: rgb(255 239 237 / 80%);
    z-index: 0;
    width: auto;
}

.pink-mask {
    position: absolute;
    width: 74%;
    top: 22vh;
    height: 150vh;
    background-color: rgb(255 238 238 / 38%);
    left: 54%;
    transform: translateX(-50%);
    border-radius: 20px;
    opacity: 0.5;
}

.centered-page {
    width: 300px;
    background-color: white;
    padding: 15px;
    top: 40%;
    left: 50%;
    position: absolute;
    border-radius: 10px;
    box-shadow: 1px 1px 4px rgb(219 172 166 / 39%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    height: 120px;
}

.centered-page .buffer {
    transition: all 1s;
}

.centered-page label {
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 0px 0px 8px 0px;
    color: #000000;
    font-size: 14px;
    opacity: 0.7;
    font-family: 'Lexend';
}

.centered-page input {
    border: 1px solid #f3dcda;
    outline: none;
    padding: 14px 9px;
    width: 100%;
    background-color: #fefaf9;
    border-radius: 6px;
    font-size: 16px;
    font-weight: normal;
}

.centered-page .tabs {
    transition-property: transform, translate;
    transition-duration: 1s, 1s;
    position: absolute;
    /* width: 100%; */
    display: inline-block;
    min-height: 100px;
    margin: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    padding: 15px;
}

.centered-page .tabs.hidden {
    display: none
}

.centered-page .tabs.move-left {
    transform: translate(-50%, -0%);
}

.centered-page .tabs.move-right {
    transform: translate(-100%, -0%);
}

h1.center-page {
    font-size: 5vh;
    text-align: center;
    top: 16%;
    position: absolute;
    width: 100%;
    color: #9f8f8f;
    font-weight: normal;
}

h1.center-page.pink {
}

#user-code {
    font-family: 'Arial';
    font-size: 51px;
    padding: 6px 0px;
    text-align: center;
    font-weight: bold;
    color: #9b827d;
    opacity: 1;
    letter-spacing: .5em;
}

#menu-blocker {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.4;
}

.page-menus2 input ,
.master-site-content.admin input {
    border: 1px solid #f3dcda;
    outline: none;
    padding: 11px 4px;
    width: 100%;
    background-color: #fff8f7c4;
    border-radius: 3px;
    font-size: 13px;
    border-radius: 6px;
    font-family: 'Lexend';
}

.page-menus2 input.edited ,
.master-site-content.admin input.edited {
    background-color: #fff4f4;
    border: 1px solid #ffdada;
}

.page-menus2 input.edited:after ,
.master-site-content.admin input.edited:after {
    content: "edited";
    position:relative;
    display: inline-block;
}

.page-menus2 label,
.master-site-content.admin label {
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 0px 0px 6px 0px;
    color: #000000;
    font-size: 15px;
    opacity: 0.7;
}

.admin-page-bg {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    opacity: .2;
    background-image: url(/myfamilychef.ca/static/imgs/icons/test-bg.svg);
    background-repeat: no-repeat;
    background-position: 7vh bottom;
    background-size: 98%;
}

.admin-page-bg.admin-form {
    opacity: 0.2 !important;
    background-position: 19% bottom;
    background-size: 120%;
}

.admin-page-bg.page-informations {
    background-size: 100%;
    background-position: 21vw 32%;
    opacity: 1;
}

.admin-page-bg.page-informations.no-picture {
    background-position: 44vh bottom;
    background-size: 186%;
}

.admin-page-bg.frigos-bg {
    right: -65vh;
    opacity: .16;
    background-position: 2vh 38vh;
    background-size: 94%;
}

.page-menus2 .table,
.master-site-content.admin .table {
    border: 1px solid #e9d7d7;
    padding: 15px;
    border-radius: 7px;
}

#current-user {
    position: fixed;
    width: 300px;
    bottom: 27px;
    left: 27px;
    vertical-align: middle;
    transition:all 500ms ease;
    display: none;
}

#current-user.minimal {
    right: -116px;
    left: unset;
    opacity: 1;
    z-index: 10;
    bottom: -10px;
    transform: rotate(-90deg) translateX(50%);
}

#current-user .user-icon {
    width: 41px;
    height: 41px;
    display: inline-block;
    background-color: white;
    border-radius: 100px;
    border: 1px solid #333333;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    margin-right: 8px;
    box-shadow: 1px 1px 6px rgb(10 10 10 / 20%);
    cursor: pointer;
}

#current-user h4 {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
}

.logout {
    display: inline-block;
    font-family: 'Lexend';
    font-size: 9px;
    text-decoration: underline;
    opacity: 0.4;
    margin-left: 7px;
    cursor: pointer;
}

.logout:hover {
    opacity: 1;
}

.admin-picture .user-icon {
    overflow: hidden;
    border-radius: 100px;
    width: 120px;
    height: 120px;
    display: inline-block;
    vertical-align: middle;
}

.change-pic {

}

.chef-recettes {
    z-index: 2;
    position: relative;
}

.top-header {
    position: fixed;
    top: 14px;
    right: 18px;
    width: 80%;
    text-align: right;
    z-index: 10;
}

.top-header.with-menu {
    top: 14px;
    right: 67px;
    width: 600px;
}

.top-header.with-menu div {
    vertical-align: top;
}

.top-header .chef-btn {

}

/* Locked frigo UX */
.top-header .week-control { display: inline-block; }

/* full-page (content) blocker when frigo is locked; keeps top header usable */
.locked-frigo-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 239, 237, 0.75);
    z-index: 5; /* below .top-header (z=10), above content */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18px;
    pointer-events: all;
    opacity: 0;
    animation: mfcFadeIn 200ms ease-out forwards;
}
.locked-frigo-overlay .locked-hint {
    border: 1px solid #f3ede8;
    box-shadow: 1px 2px 4px rgb(47 19 19 / 10%);
    border-radius: 20px;
    text-align: center;
    padding: 32px;
    color: #543c3c;
    line-height: 18px;
    background-color: #fffcfc;
    position: fixed;
    top: 75px;
    right: 50px;
    left: auto !important; /* override .chef-btn default left:5px */
    width: 250px;
    margin: 0;
    z-index: 11;
    opacity: 0;
    transform: translateY(-8px);
    animation: mfcDropIn 250ms ease 120ms forwards;
}
/* arrow on top of white hint */
.locked-frigo-overlay .locked-hint::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 30px; /* slight offset from right edge */
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #fffcfc;
    filter: drop-shadow(0 -1px 0 rgba(0,0,0,.06));
}
/* animations */
@keyframes mfcFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mfcDropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.top-header .user-icon {
    width: 34px;
    height: 34px;
    position: relative;
    display: inline-block;
    background-size: 192%;
    background-color: #cfc4c0;
    border-radius: 100px;
    background-position: center 27%;
    vertical-align: top;
    top: -2px;
    transition: all 250ms;
    cursor: pointer;
}

.chef-recettes h1 {
    text-align: center;
    font-size: 6vw;
    margin: 0px;
    line-height: 6vw;
    text-transform: uppercase;
    font-family: 'Magazine';
    font-weight: normal;
    letter-spacing: -0.02em;
}

.page-uber .chef-recettes h1 {
    font-size: 7.5vw;
}

.chef-recettes .recettes-holder {
    margin: 0 auto;
    width: 90%;
    background-color: #FFF7F7;
    margin-top: 4vh;
    border-radius: 20px;
    overflow-X: hidden;
    overflow-y: hidden;
}

.page-uber .chef-recettes .recettes-holder {
    border-radius: 0px;
    background-color: transparent;
    width: 93%;
    margin-top:14px;
    padding-top:3px;
}

.page-uber .chef-recettes .recettes-holder {
    margin-top:23px
}

.page-uber .chef-recettes .recettes-holder > .col {
    vertical-align: top;
    text-align: left;
}

.page-uber .chef-recettes .recettes-holder > .col30 {
    width: 33%;
}

.chef-recettes .recettes-holder .recette-each {
    display: inline-block;
    width: 50%;
    height: 45vh;
    position: relative;
    box-sizing: border-box;
    border: none;
    transition:all 500ms ease;
    cursor: pointer;
    overflow: hidden;
    vertical-align: top;
    margin:-3px
}

.page-uber .chef-recettes .recettes-holder .recette-each {
    border-radius: 19px;
    margin-bottom: 4%;
    width: 100%;
    padding-right: 3%;
    text-align: left;
}

.page-uber .chef-recettes .recettes-holder .recette-each.single-small {
    width: 98%;
    margin: -3px -3px 4% 2%;
    height: 25%;

}

.page-uber .chef-recettes .recettes-holder .recette-each.single-high {
    width: 98%;
    margin: -3px -3px 4% 2%
}

.page-uber .chef-recettes .recettes-holder .recette-each.single-high .recette-title {

}

.page-uber .chef-recettes .recettes-holder .recette-each.double-small {
    width: 47%;
    height: 22%;
    margin: -3px -3px 4% 2.5%
}


.chef-recettes .recettes-holder .recette-each .recette-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    transition:all 500ms ease;
}

.chef-recettes .recettes-holder .recette-each:first-child {
    border-top-left-radius: 20px;
}
.chef-recettes .recettes-holder .recette-each:last-child {
    border-bottom-right-radius: 20px;
}

.chef-recettes .recettes-holder .recette-each:hover .recette-image {
    width: 105%;
    height: 105%;
}   

.chef-recettes .recettes-holder .recette-each .recette-bg-over ,
.chef-recettes .recettes-holder .recette-each .recette-hover {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(255 239 237 / 79%);
    transition:all 500ms ease;
    opacity: 0.7;
    z-index: 2;
}

.chef-recettes .recettes-holder .recette-each .recette-bg-over {
    background: rgb(255, 96, 96);
    background: linear-gradient(180deg, rgba(255, 96, 96, 0) 0%, rgb(207 174 174 / 28%) 63%, rgb(35 22 25 / 37%) 100%);
    z-index: 1;
    opacity: 1;
}

.chef-recettes .recettes-holder .recette-each:hover .recette-hover {
    opacity: 1;
}

.page-uber .chef-recettes .recettes-holder .recette-each .recette-hover {
    opacity: 1;
    background-color: transparent;
    text-align: left;
}


.chef-recettes .recettes-holder .recette-each .recette-title {
    text-align: center;
    
    width: 65%;
    top: 50%;
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
}

.page-uber .chef-recettes .recettes-holder .recette-each .recette-title {
    width: 90%;
    text-align: left;
    transform: translate(-50%);
    bottom: 26px;
    position: absolute;
    top: unset;
}

.chef-recettes .recettes-holder .recette-each .recette-title span.big-title {
    font-size: 55px;
    line-height: 47px;
}

.page-uber .chef-recettes .recettes-holder .recette-each .recette-title span.big-title {
    font-size: 3vw;
    max-width: 65%;
    display: inline-block;
    line-height: 2.6vw;
    color: white;
    text-shadow: 0 0 4px #00000078;
}

.page-uber .chef-recettes .recettes-holder .recette-each.double-small .recette-title span.big-title {
    font-size: 1.3vw;
    line-height: 1.2vw;
}

.chef-recettes .recettes-holder .recette-each .recette-type {
    position: absolute;
    right: 19px;
    text-transform: uppercase;
    top: 12px;
    font-weight: bold;
    font-family: 'Lexend';
    font-size: 14px;
    opacity: 0.5;
    letter-spacing: 0.05em;
}

.chef-recettes .recettes-holder .recette-each .recette-ingredients {
    font-size: 27px;
    opacity: 0.8;
    margin-bottom: 39px;
}

.page-uber .chef-recettes .recettes-holder .recette-each .recette-ingredients {
    display: none
}

.page-uber .chef-recettes .recettes-holder .recette-each .chef-btn {
    opacity: 0;
}


.page-uber .chef-recettes .recettes-holder .recette-each:hover .chef-btn {
    opacity: 1;
}



.chef-recettes {
    
}

.no-recettes {
    min-height: 88vh;
    text-align: center;
    background-image: url(/myfamilychef.ca/static/imgs/no-recettes.svg);
    background-size: 71%;
    background-repeat: no-repeat;
    background-position: 109% 143%;
}

.no-recettes h2 {
    font-size: 13vh;
    margin: 0px;
    line-height: 8vh;
}

.no-recettes p {
    font-size: 1.7vh;
}

.no-recettes .chef-btn {
    margin-top: 42px;
}

.no-recettes .pad-buffer {
    top: 28vh;
    position: relative;
    display: inline-block;
}

.recettes-left-menu {
    position: fixed;
    width: 35px;
    top: 16vh;
    left: 22px;
    height: 70vh;
    z-index: 9; /* below hover overlays */
}

.recettes-left-menu .icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    cursor: pointer;
    opacity: 1;
    margin-bottom: 2px;
    position: relative;
    background-repeat: no-repeat;
    border: 2px solid transparent;
    padding: 3px;
    background-size: 26px;
    background-position: center center;
    border-radius: 8px;
    background-color: transparent;
    transition:all 500ms ease;
}

.recettes-left-menu .icon.active {
    background-color: rgb(229 188 188 / 10%);
    border: 2px solid #f5dede;
}

.recettes-left-menu .icon:hover {
    background-size: 105%;
}

.recettes-left-menu .icon.search {
    width: 29px;
    height: 29px;
    position: relative;
    left: -3px;
    top: -1px;
    background-image: url(/myfamilychef.ca/static/imgs/search.svg);
}

.recettes-left-menu .icon.aux {
    position: relative;
    transform: translate(100%, -100%);
    margin-bottom: -100%;
}

.recettes-left-menu .icon.settings {
    width: 29px;
    height: 30px;
    position: relative;
    left: -2px;
    background-image: url(/myfamilychef.ca/static/imgs/icons/settings.svg);
    top: 2px;
}

.top-header .icon.settings {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(/myfamilychef.ca/static/imgs/icons/settings.svg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center center;
    vertical-align: top;
    margin-left: 19px;
    cursor: pointer;
    margin-top: 4px;
}


.recettes-left-menu .icon.menu {
    background-image: url(/myfamilychef.ca/static/imgs/icons/menu.svg);
}

.recettes-left-menu .icon.frigo {
    background-image: url(/myfamilychef.ca/static/imgs/frigo-icon.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 43px;
}

.recettes-left-menu .icon.frigo,
.recettes-left-menu .icon.frigo {
    background-image: url(/myfamilychef.ca/static/imgs/icons/fridge.svg);
}

.recettes-left-menu .icon.burger {
    background-image: url(/myfamilychef.ca/static/imgs/icons/burger.svg);
}

.recettes-left-menu .icon.profile {
    background-image: url(/myfamilychef.ca/static/imgs/icons/profile.svg);
}

.recettes-left-menu .icon.contact {
    background-image: url(/myfamilychef.ca/static/imgs/icons/cheds.svg);
}

.recettes-left-menu .icon.chefs {
    background-image: url(/myfamilychef.ca/static/imgs/icons/mon-chef.svg);
}

.recettes-left-menu .icon.messages {
    background-image: url(/myfamilychef.ca/static/imgs/icons/message-thinner.svg);
}

.recettes-left-menu .icon.clients {
    background-image: url(/myfamilychef.ca/static/imgs/icons/mfc-clients.svg);
}

.recettes-left-menu .icon.profile {
    background-image: url(/myfamilychef.ca/static/imgs/icons/profile.svg);
}

.recettes-left-menu .icon.ingredients {
    background-image: url(/myfamilychef.ca/static/imgs/icons/ingredienst.svg);
}


.recettes-left-menu .icon .item-count {
    position: absolute;
    right: -4px;
    top: -6px;
    background-color: #000;
    width: 16px;
    height: 14px;
    color: #fff;
    border-radius: 30px;
    font-size: 10px;
    font-family: 'Lexend';
    text-align: center;
    box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.3);
    transition:all 500ms ease;
}

.recettes-left-menu .bottom-section {
    position: fixed;
    background-color: transparent;
    height: 14vh;
    width: 4px;
    bottom: 0px;
    left: 31px;
}


.nouvelle-recette {
    position: absolute;
    width: 70%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: #fffffff0;
    min-height: 30vh;
    padding: 30px 30px 30px 59px;
    z-index: 1;
    max-height: 84vh;
    overflow-y: auto;
    overflow-x: hidden; /* contents are laid out inside */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.nouvelle-recette .column-left {
    width: 58%;
    float: right;
    position: relative;
    z-index: 2; /* ensure content is above the left splash */
}

.nouvelle-recette .column-left .field-line {
    padding: 11px 0px;
}

.nouvelle-recette .column-left .field-line.title {

}

.nouvelle-recette .column-left .field-line .chef-btn-with-label {
    width: 80%;
}

.nouvelle-recette .column-left label {
    font-size: 13px;
    width: 95%;
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
    opacity: 0.6;
    vertical-align: top;
    font-family: 'Lexend';
    color: #193D1C;
    font-weight: bold;
}

.nouvelle-recette .column-left textarea {
    position: relative;
    border-radius: 10px;
    /* bottom: 0px; */
    background-color: #fef8f8;
    border: 2px solid #fff4f4;
    outline:none;
    resize: none;
}

.nouvelle-recette .column-left.client textarea {
    background-color: transparent;
    border: 2px solid transparent;
}

.nouvelle-recette .field-box {
    position: absolute;
    bottom: 20px;
    left: 8px;
}

.nouvelle-recette .column-left .box-slider textarea {
    background-color: transparent;
    border: none;
    font-size: 2.2vw;
    padding: 4px 0px 10px 0px;
    border-radius: 0px;
}

.autoCom:focus-visible,
.nouvelle-recette textarea:focus-visible {
    border: 2px solid #ffd5d5;
}


#nouvelle-recette-holder .nouvelle-recette .column-right {
    display: none !important; /* gallery lives inside Image tab */
}

.nouvelle-recette .column-splash-title {
    position: absolute;
    left: 0;
    background-color: #fff8f8;
    top: 0px;
    height: 100%;
    border-radius: 15px;
    width: 38%;
    z-index: 0;
}

.nouvelle-recette .column-splash-title h3 {
    font-family: 'Magazine';
    font-size: 5vw;
    letter-spacing: 0.01em;
    line-height: 4.7vw;
    position: relative;
    left: 3vw;
    max-width: 80%;
    top: 115px;
    margin-top: 0px;
    color: #193D1C;
    font-weight: normal;
    word-break: normal;
}

.nouvelle-recette .column-splash-title h4 {
    font-size: 3vw;
    font-family: 'Handwrite';
    left: 3vw;
    position: relative;
    color: #a6ada7;
    margin-bottom: -123px;
    top: -33px;
}

.nouvelle-recette .column-splash-title p {
    left: 3vw;
    position: relative;
    top: 6vw;
    max-width: 80%;
    opacity: 0.7;
    font-family: 'TitleFont';
    font-size: 1.7vw;
    line-height: 2vw;
}

.nouvelle-recette .splash-section-image .image-gallery .image-holder, .nouvelle-recette .column-right .image-holder {
    background-color: #FFF7F7;
    position: relative;
    cursor: pointer;
    transition:all 500ms ease;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    margin-bottom: 22px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: unset;
}

.nouvelle-recette .splash-section-image .image-gallery .image-holder img, .nouvelle-recette .column-right .image-holder img {
    width: 100%;
}

.nouvelle-recette .column-right .image-holder:hover {
    opacity: 1;
}

.nouvelle-recette .splash-section-image .image-gallery .image-holder.no-image, .nouvelle-recette .column-right .image-holder.no-image {
    min-height: 41vh;
    background-image: url(/myfamilychef.ca/static/imgs/icons/no-photos.svg);
    background-size: 125%;
    background-position: 5vh 13vh;
    background-repeat: no-repeat;
}

.nouvelle-recette .column-right .image-holder.no-image::before {
    content: "";
    display: inline-block;
    position: absolute;
    border: 1px dashed rgb(0 0 0 / 18%);
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}

.nouvelle-recette .column-right .image-holder.no-image::after {
    content: "+ Ajouter une photo";
    display: inline-block;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

.nouvelle-recette .title textarea {
    font-size: 2.5vh !important;
    line-height: 3vh !important;
    padding: 10px 10px;
    margin-bottom: 0px;
    width: 100%;
    font-family: 'TitleFont';
}

.nouvelle-recette .title textarea:disabled {
    font-size: 2.3vw !important;
    padding: 4px 0px 9px 0px;
}

.nouvelle-recette .type textarea {
    font-size: 3vh;
    line-height: 3.1vh;
    margin-bottom: -37px;
    text-transform: capitalize;
}

.nouvelle-recette .field-line span.icon {
    vertical-align: top;
    width: 2%;
    position: relative;
    display: inline-block;
    top: -1px;
    opacity: 0.5;
    display: none
}

.nouvelle-recette .column-left textarea,
.nouvelle-recette .description textarea,
.nouvelle-recette .ingredients textarea {
    font-size: 1.3vw;
    width: 100%;
    line-height: 2vh;
    height: 7vh;
    transition: all 500ms ease;
    padding: 10px;
    color:#193D1C;
    transition: all 250ms;
}


.nouvelle-recette .column-left textarea.in-error,
.nouvelle-recette .title textarea.in-error,
.nouvelle-recette .ingredients textarea.in-error {
    border-radius: 11px;
    background: rgb(238, 174, 202);
    background: radial-gradient(circle, rgb(238 174 174 / 35%) 2%, rgba(238, 174, 202, 0.0507177871148459) 100%);
    border: 1px solid rgb(255 0 0 / 15%);
    box-shadow: 1px 1px 10px rgb(255 0 0 / 22%);
}

.nouvelle-recette .column-left textarea:disabled,
.nouvelle-recette .title textarea:disabled,
.nouvelle-recette .ingredients textarea:disabled {
    color:#193D1C
}


.many-choices {
    position: relative;
    display: inline-block;
    width: 80%;
    border: 1px solid #e7d6d6;
    border-radius: 10px;
}

.many-choices .choice {
    display: inline-block;
    font-size: 15px;
    margin-right: 0px;
    border-right: 1px solid #e7d6d6;
    padding: 10px 8px 10px 11px;
    text-align: center;
    margin-right: -4px;
    cursor: pointer;
    transition:all 500ms ease;
}

.many-choices .choice.active {
    background-color: rgb(255 236 236 / 42%);
}

.many-choices .choice span {
    font-family: 'Lexend';
}

.many-choices .choice:last-child {
    margin-right: 0px;
    padding-right: 0px;
    border-right:0px;
}

.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 80%; /* Full-width */
    height: 10px; /* Specified height */
    background: #FFF7F7; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    border-radius: 100px;
    margin-top: 15px;
  }

.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #f5d8cd; /* Green background */
    border:1px solidrgb(224, 198, 188)d; 
    cursor: pointer; /* Cursor on hover */
    border-radius: 100px;
    box-shadow: 1px 1px 4px rgb(0,0,0,0.1);
  }

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.imgs-tools {
    position: absolute;
    right: 10px;
    top: 12px;
    opacity: 0.6;
    transition:all 500ms ease;
}

.image-holder:hover .imgs-tools {
    opacity:1
}

.imgs-tools span {
    font-size: 13px;
    padding: 5px 6px;
    background-color: #FFEFED;
    border-radius: 38px;
    margin-left: 7px;
}

#nouvelle-recette-holder {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 15;
    background-color: rgb(255 241 241 / 91%);
    display: none;
}

#nouvelle-recette-holder .field-line .cus-select {

}

.master-site-content.admin #nouvelle-recette-holder .field-line .cus-select:after {
    bottom: 22px;
}

 .master-site-content.admin #nouvelle-recette-holder .field-line .cus-select input {
    width: 100%;
    border: 1px solid #f3dcda;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    margin: 9px 0px;
    background-color: #fff8f7c4;
}

.master-site-content.admin h2 {
    font-weight: normal;
    font-size: 9.5vh;
    font-family: 'Magazine';
    color: #193D1C;
    line-height: 6vh;
    margin-top: 9vh;
    letter-spacing: -.03em;
    max-width: 93%;
    margin: 9vh auto 3vh auto;
}

.master-site-content.admin #nouvelle-recette-holder input {
    padding: 0px;
    border:0px
}

.master-site-content.admin #nouvelle-recette-holder input.type-ranged {
    background-color: rgb(245 147 124 / 17%);
    height: 8px;
    margin: 20px 0px 10px 0px;
    max-width: 89%;
}

.box-head .type-choices {
    font-family: 'Lexend';
    font-size: 12px;
    opacity: 0.7;
    margin: 7px 0px 4px 0px;
}

.box-head .type-choices span {
    text-transform: capitalize;
    padding: 0px 4px;
}

/* Responsive layout fixes for nouvelle-recette (overlay only) */

/* Tabs inside nouvelle-recette overlay */
.nouvelle-recette .column-left { padding-top: 56px; }
.nouvelle-recette .holder-tabs {
    position: absolute;
    top: 8px;
    right: 16px;
    text-align: right;
    color: #193d1c;
    font-size: 16px;
    font-family: 'TitleFont';
    z-index: 30; /* ensure tabs stay above gallery */
}
.nouvelle-recette .holder-tabs .holder-tab {
    display: inline-block;
    margin: 0 6px;
    position: relative;
    transition: all 250ms;
    cursor: pointer;
    opacity: 0.5;
}
.nouvelle-recette .holder-tabs .holder-tab.active { opacity: 1; }
.nouvelle-recette .holder-tabs .holder-tab:after {
    content: "";
    position: relative;
    width: 100%;
    border-bottom: 2px solid transparent;
    display: inline-block;
}
.nouvelle-recette .holder-tabs .holder-tab.active:after { border-bottom: 2px solid #133316; }

/* pad container content inside tabs */
.nouvelle-recette .row-pad { padding: 10px 0; position: relative; }

/* ensure tab content keeps a minimum height to avoid jumps */
.nouvelle-recette .holder-tab-data { min-height: 45vh; }
/* Image tab: hide the upload form UI and labels; keep it accessible offscreen */
.nouvelle-recette .splash-section-image .field-line.media { display: none; }
.nouvelle-recette .splash-section-image .section-content.add-files { position:absolute; left:-99999px; width:1px; height:1px; overflow:hidden; }
/* Reduce image tab body to minimum since actions live in floating bar */
.nouvelle-recette .splash-section-image { min-height: 0; }
.nouvelle-recette .splash-section-image .row-pad { padding: 0; min-height: 0; }
/* Defensive: hide any stray form controls inside the gallery area */
.nouvelle-recette .column-right input,
.nouvelle-recette .column-right label { position:absolute; left:-99999px; width:1px; height:1px; overflow:hidden; }
/* When Image tab active, suppress any leftover range slider rendering from Base */
.nouvelle-recette.image-mode input[type=range] { visibility: hidden !important; }

/* minimal WYSIWYG styles */
.nouvelle-recette .wysi-toolbar { display:flex; gap:6px; margin:6px 0; flex-wrap: wrap; }
.nouvelle-recette .wysi-toolbar button { padding:4px 8px; border:1px solid #e7d6d6; background:#fff; border-radius:6px; cursor:pointer; }
.nouvelle-recette .wysi-toolbar button:hover { background:#f8f4f4; }
.nouvelle-recette .wysi-editor { min-height:160px; border:1px solid #f3dcda; border-radius:9px; padding:10px; background-color:#fff8f7c4; color:#665151; }
/* small preview grid (not primary now) */
.nouvelle-recette .splash-section-image .image-previews { display:none; }
.nouvelle-recette .splash-section-image .image-previews .thumb { width:110px; height:82px; border:1px solid #f3dcda; border-radius:8px; overflow:hidden; background:#fff; }
.nouvelle-recette .splash-section-image .image-previews .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
/* Floating toolbar shown in Image tab only, inside tab content */
.nouvelle-recette .splash-section-image .image-tools-bar { position: sticky; left: 0; bottom: 10px; background:#ffffff; border:1px solid #eee3e3; box-shadow: 0 6px 18px rgba(0,0,0,.08); border-radius: 18px; padding: 10px 14px; display: none; gap: 12px; align-items: center; z-index: 15; width: fit-content; }
/* Show toolbar when Image tab is active, regardless of JS state */
.nouvelle-recette .splash-section-image.active .image-tools-bar { display: flex; }
/* Also show when JS toggles image-mode (backward compatibility) */
.nouvelle-recette.image-mode .splash-section-image .image-tools-bar { display: flex; }
.nouvelle-recette .image-tools-bar .bar-title { font-family: 'TitleFont'; font-size: 14px; color:#5a4a4a; opacity: .75; margin-right: 8px; }
.nouvelle-recette .image-tools-bar .chef-btn.white { background:#fffaf9; border:1px solid #f1dfdd; color:#8b6b63; padding:6px 12px; border-radius: 16px; }
.nouvelle-recette .image-tools-bar .chef-btn.white:hover { background:#fff; }
@media (max-width: 1024px) {
  /* Modal container: use more width, drop vertical centering, allow scrolling */
  #nouvelle-recette-holder .nouvelle-recette {
    position: fixed;
    width: 94vw;
    left: 50%;
    top: 9vh;
    transform: translateX(-50%);
    padding: 18px 16px;
    max-height: calc(100vh - 13vh);
  }

  /* Stack columns */
  #nouvelle-recette-holder .nouvelle-recette .column-left,
  #nouvelle-recette-holder .nouvelle-recette .column-right {
    width: 100%;
    float: none;
    position: relative;
    padding-right: 0;
  }

  /* Convert splash panel to a normal block on top */
  #nouvelle-recette-holder .nouvelle-recette .column-splash-title {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  #nouvelle-recette-holder .nouvelle-recette .column-splash-title h4,
  #nouvelle-recette-holder .nouvelle-recette .column-splash-title h3,
  #nouvelle-recette-holder .nouvelle-recette .column-splash-title p {
    left: 0;
    top: 0;
    max-width: 100%;
  }
  #nouvelle-recette-holder .nouvelle-recette .column-splash-title h4 {
    font-size: 18px;
    margin: 6px 0 0 0;
  }
  #nouvelle-recette-holder .nouvelle-recette .column-splash-title h3 {
    font-size: 9vw;
    line-height: 9.6vw;
    margin: 4px 0 8px 0;
  }
  #nouvelle-recette-holder .nouvelle-recette .column-splash-title p {
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 6px 0;
  }

  /* Let the selects flow under the header instead of being pinned to bottom */
  #nouvelle-recette-holder .nouvelle-recette .field-box {
    position: static;
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Make slider and labels more compact and wrap nicely */
  #nouvelle-recette-holder .slider { width: 100%; }
  #nouvelle-recette-holder .box-head .type-choices { display: flex; flex-wrap: wrap; gap: 4px 8px; }
  #nouvelle-recette-holder .box-head .type-choices span { padding: 2px 6px; }
  #nouvelle-recette-holder .many-choices { width: 100%; }

  /* Inputs and textareas readable on small screens */
  #nouvelle-recette-holder .nouvelle-recette .column-left textarea,
  #nouvelle-recette-holder .nouvelle-recette .description textarea,
  #nouvelle-recette-holder .nouvelle-recette .ingredients textarea,
  #nouvelle-recette-holder .nouvelle-recette .title textarea {
    font-size: 16px !important;
    line-height: 22px !important;
    height: auto;
  }

  /* Images block (when present) should be full width */
  #nouvelle-recette-holder .nouvelle-recette .column-right .image-holder.no-image {
    min-height: 32vh;
    background-size: 90%;
    background-position: center 6vh;
  }
}

@media (max-width: 640px) {
  #nouvelle-recette-holder .nouvelle-recette {
    top: 8vh;
    padding: 12px;
    max-height: calc(100vh - 10vh);
  }
  #nouvelle-recette-holder .box-head .type-choices { font-size: 11px; }
}

/* Desktop overlay: keep original float layout; only cap width safely and make left column scrollable */
@media (min-width: 1025px) {
  #nouvelle-recette-holder .nouvelle-recette {
    max-width: 1200px;
    box-sizing: border-box;
    overflow: hidden; /* prevent whole modal from scrolling */
  }
  #nouvelle-recette-holder .nouvelle-recette .column-left {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(84vh - 60px); /* 84vh container max-height minus top/bottom padding (30px + 30px) */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box; /* include padding in width so layout doesn't shift */
    padding-right: 12px; /* reserve space so scrollbar doesn't overlap text */
    scrollbar-gutter: stable; /* keep a gutter when scrollbar appears */
  }
  /* slightly wider scrollbar only for the left column scroll area */
  #nouvelle-recette-holder .nouvelle-recette .column-left::-webkit-scrollbar { width: 10px; }
  #nouvelle-recette-holder .nouvelle-recette .column-left::-webkit-scrollbar-thumb { background: rgba(206, 153, 149, 0.42); }
}

.master-site-content.admin .table.db-table {
    padding: 6vw 3vw 3vw 3vw;
    min-height: 5vh;
    border-radius: 20px;
    margin-top: -67px;
    border: none !important;
}

.master-site-content.admin .table.db-table .table-title {
    font-family: 'TitleFont';
    font-size: 17px;
    color: #7b6f6c;
}

.master-site-content.admin .table.db-table.half {
    max-width: 50%;
}

.master-site-content.admin .table.db-table label {
    text-transform: capitalize;
}

.master-site-content.admin .table.db-table .chef-btn {
    padding: 4px 14px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #543c3c9e;
    box-shadow: none;
    font-weight: bold;
}

.master-site-content.admin .table.db-table .table-line {
    padding: 0px;
    border-bottom: 1px solid rgb(233 215 215 / 42%);
    background-color: rgb(255 238 238 / 17%);
    position: relative;
    border-left: 1px solid rgb(233 215 215 / 42%);
    vertical-align: middle;
    line-height: 15px;
    border-right: 1px solid rgb(233 215 215 / 42%);
}

.master-site-content.admin .db-table-actions {
    margin: 0vw 3vw 3vw 3vw;
    border: 1px solid #efdfdf;
    border-radius: 15px;
}

.master-site-content.admin .db-table-actions .bold-label {
    font-family: 'TitleFont';
    font-size: 15px;
    position: relative;
    left: 0px;
    top: 0px;
    background-color: #ebe0e0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 10px 0px;
    text-indent: 17px;
    color: #4f3d3d;
}

.master-site-content.admin .db-table-actions .row-full .col {
    padding: 10px 14px;
}

.master-site-content.admin .db-table-actions .row-full input,
.master-site-content.admin .db-table-actions .row-full .cus-select input {
    margin: 0px
}


.table.db-table .table-line.jsclick {
    cursor: pointer;
    transition:all 500ms ease;
}

.table.db-table .table-line.jsclick:hover {
    background-color: rgb(255 239 239 / 63%);
}


.master-site-content.admin .table.db-table .table-line .cus-select::after {
    right: 12px;
    bottom: 2px;
}

.master-site-content.admin .table.db-table .table-line .cus-select {
    max-width: 100%;
}

.master-site-content.admin .table.db-table .table-line .cus-select input {
    margin: -9px 0px;
    padding: 7px 4px;
    position: relative;
    top: -1px;
    border-radius: 100px;
    text-indent: 8px;
    background-color: transparent;
}

.master-site-content.admin .table.db-table .table-line.header {
    background-color: rgb(235 224 224 / 49%);
    border-left: 1px solid #e9d7d7;
    border-top: 1px solid #e9d7d7;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    font-size: 13px;
    color: #4f3d3d;
}

.master-site-content.admin .table.db-table .table-line.header .column {
    font-size: 12px;
    padding: 12px 11px 11px 11px;
    font-weight: bold;
}

.master-site-content.admin .table.db-table .table-line .media-icon {
    width: 37px;
    height: 37px;
    border-radius: 100px;
    background-size: 76%;
    position: absolute;
    top: -6px;
    left: 11px;
    background-position: center center;
    background-repeat: no-repeat;
}

.master-site-content.admin .table.db-table .table-line .chef-btn {
    margin: -8px 0px;
}

/* Round small button variant */
.chef-btn.small.round {
    width: 28px;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    border-radius: 100px !important;
    text-align: center;
}

.master-site-content.admin .table.db-table .table-line:last-child {
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
}

.master-site-content.admin .table.db-table .table-line .column:first-child {
    font-weight: bold;
    border-right: 0px;
}

.master-site-content.admin .table.db-table .table-line.header .column:first-child {
    border-right: 1px solid #e9d7d7;
}

.master-site-content.admin .table.db-table .table-line .column {
    border-right: 1px solid #e9d7d7;
    padding: 14px 11px 14px 11px;
    font-size: 11px;
    font-family: 'Lexend';
    position: relative;
    vertical-align: middle;
}

.master-site-content.admin .table.db-table .table-line .column:last-child {
    border-right: none;
}

.master-site-content.admin .table.db-table .table-line .list-objs .list-obj {
    padding: 5px 9px;
    background-color: #f1e7e7;
    border-radius: 8px;
    color: #7b7171;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
    transition: all 250ms;
    cursor: pointer
}

.master-site-content.admin .table.db-table .table-line .list-objs .list-obj:after {
    content: "x";
    position: relative;
    display: inline-block;
    font-family: 'BoldFont';
    font-weight: bold;
    margin-left: 7px;
    top: 0px;
    opacity: 0.2;
    transition: all 250ms;
}

.master-site-content.admin .table.db-table .table-line .list-objs .list-obj:hover:after {
    opacity: 1;
}

.master-site-content.admin .table.db-table .table-line .add-to-list {
    position: relative;
}

.master-site-content.admin .table.db-table .table-line .add-to-list input {
    text-indent: 10px;
}

.master-site-content.admin .table.db-table .table-line .add-to-list .chef-btn {
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    display: inline-block;
    right: 10px;
    left: unset;
    box-shadow: 2px 1px 3px rgb(235 209 209 / 48%)
}

.master-site-content.admin .table.db-table .table-line .edit-fields {
    font-family: 'BoldFont';
    border-bottom: 1px solid #796d6d;
    display: inline-block;
    padding: 1px 0px;
    height: 12px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 0.02em;
    color: #796d6d;
    cursor: pointer;
}

.hover-menu-box {
    position: fixed;
    background-color: white;
    /* padding: 10px; */
    top: 0px;
    left: 0px;
    z-index: 1002;
    width: 386px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid #ffeded;
    border-radius: 17px;
    display:none
}

.hover-menu-box .box-buffer {
    
}

.hover-menu-box .box-header {
    border-bottom: 1px solid #ffeded;
    padding: 10px 15px;
}

.hover-menu-box .box-section {
    padding: 10px 15px;
    border-bottom: 1px solid #ffeded;
}

.hover-menu-box .box-section:last-child {
    border-bottom: 0px;
}

.hover-menu-box .box-section .big-font {
    position: relative;
}

.page-admin .hover-menu-box .box-section .big-font textarea,
.hover-menu-box .box-section .big-font textarea {
    background-color: transparent;
    border: 0px;
    outline: 0px;
    resize: none;
    font-size: 29px;
    text-align: right;
    max-width: 188px;
    line-height: 21px;
    text-transform: capitalize;
    position: absolute;
    top: -32px;
    right: -3px;
    font-family: 'BoldFont';
}

.hover-menu-box .box-section .type-choices {
    font-family: 'Lexend';
    font-size: 9px;
    opacity: 0.8;
    text-transform: capitalize;
    margin: 11px 0px 2px 0px;
    text-align: center;
    width: 110%;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}

.hover-menu-box .box-section .type-choices span {
    padding: 0px 5px;
}

.hover-menu-box .cus-select {
    width: 100%;
}

.hover-menu-box .selected-choices .chef-btn {
    margin: 12px 6px 2px 0px;
}

.hover-menu-box .selected-choices .chef-btn:last-child {
    margin-right: 0px;
}


.page-menus2 .box-section textarea ,
.master-site-content.admin .box-section textarea {
    margin: 10px 0px 4px 0px;
    border: 1px solid #f3dcda;
    outline: none;
    padding: 11px 4px;
    width: 100%;
    background-color: #fff8f7c4;
    border-radius: 3px;
    font-size: 13px;
    border-radius: 6px;
    font-family: 'Lexend';
    max-width: 100%;
    resize: none;
}

.box-section.actions {
    font-size: 13px;
}

.box-section.actions .chef-btn {
    font-size: 13px;
    padding: 6px 18px;
}

.page-menus2 .cus-select input,
.master-site-content.admin .cus-select input {
    margin: 10px 0px 4px 0px;
    background-color: white;
}

.big-font {
    font-size: 29px;
}

.indent-15 {
    text-indent: 6px;
}

.page-menus2 .box-section input.slider,
.master-site-content.admin .box-section input.slider {
    padding: 0px
}

.splash-block {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #fcf0ed;
    padding: 0px 15vw;
}

.splash-block .left-portion {
    width: 58%;
    display: inline-block;
    top: 46%;
    position: relative;
    transform: translateY(-65%);
    z-index: 1;
}


.splash-block .left-portion h3 {
    font-weight: normal;
    margin-bottom: -5px;
    font-family: 'TitleFont';
    font-size: 1.5vw;
    opacity: 0.6;
}

.splash-block .left-portion h1 {
    font-weight: normal;
    font-size: 8.5vw;
    line-height: 6.5vw;
    margin: 18px 0px -1px 0px;
    position: relative;
    left: -8px;
    font-family: 'Magazine';
    color: #193D1C;
}

.splash-block .left-portion h1 span {
    font-family: 'Handwrite';
    font-size: 12vw;
    left: 0vw;
    position: relative;
}

.splash-block .left-portion p.intro {
    font-size: 16px;
    font-family: 'Lexend';
    padding: 6px 0px;
    line-height: 24px;
    margin-bottom: 20px;
    max-width: 89%;
    color: #505d51;
}

.splash-block .left-portion ul {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom:20px
}

.splash-block .left-portion ul li {
    list-style-type: none;
    padding: 2px 0px;
    font-family: 'Lexend';
    font-size: 15px;
    opacity: 0.8;
}

.splash-block .left-portion ul li img {
    width: 36px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-right: 8px;
}

.splash-block .left-portion.full {
    width: 100%;
    text-align: center;
    min-height: 51vh;
}

.splash-block .left-portion.full h3 {
    font-size: 31px;
    max-width: 40vw;
    margin: 10px auto 0px auto;
}

.splash-section-livraison .splash-image.livraison {
    opacity: 0.6;
}

.splash-block .left-portion.full .chef-btn {
    margin-top:30px
}

.splash-block .left-portion.full h2 {
    font-family: 'TitleFont';
    font-size: 7vh;
    max-width: 40vw;
    margin: 0 auto;
    line-height: 6.5vh;
}

.splash-block .right-portion {
    position: fixed;
    width: 100%;
    z-index: 0;
    bottom: -19px;
    height: 100vh;
    margin-left: 0px;
    left: 0px;
    top: 0px;
}

.splash-block .right-portion .splash-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position-y: bottom;
    opacity: 0.3;
    background-size: 126%;
}

.splash-block .right-portion.full {
    margin-left: -15vw;
    width: 100%;
}

.splash-block .right-portion iframe {
    border: 0;
    width: 200%;
    height: 200%;
    opacity: 0.3;
}

.splash-block .splash-section-livraison {
    bottom: -17vh;
}

.splash-section-territoire {
    top: -200px;
}

.splash-block .right-portion.full .splash-image {
    background-position: bottom center;
}

.splash-image.devenirclient {
    background-image: url(/myfamilychef.ca/static/imgs/web-family-chef.svg);
}

.splash-image.livraison {
    background-image: url(/myfamilychef.ca/static/imgs/bol-soupe.svg);
}

.splash-menu {
    position: fixed;
    top: 20px;
    left: 134px;
    z-index: 3;
}

.splash-menu .chef-btn,
.top-header .chef-btn,
.top-header.with-menu .chef-btn {
    font-size: 14px;
    font-size: 14px;
    padding: 5px 16px;
}

.splash-menu .chef-btn {
    font-size: 15px;
    color:#193D1C
}

.splash-menu .chef-btn.transparent {
    padding: 5px 10px;
    opacity: 0.9;
}

.splash-menu .chef-btn.active {
    opacity: 1;
}

.splash-menu .chef-btn:after {
    content: "";
    position: absolute;
    width: 79%;
    height: 2px;
    opacity: 0;
    left: 50%;
    bottom: 4px;
    background-color: #193d1c91;
    transform: translateX(-50%);
    transition: all 250ms;
}

.splash-menu .chef-btn.active:after {
    opacity: 1;
}

.splash-section.hidden {
    display: none;
}

.splash-section.active {
    opacity: 1 !important;
}

.splash-section {
    transition:all 500ms ease;
}

.holder-tab-data {
    display: block;
    border-radius: 15px;
    
    
}

.client_new .holder-tab-data {
    margin-top: 20px;
}

/* Opaque tab bodies within recette overlays so content does not bleed over the left splash */
.nouvelle-recette .holder-tab-data {
    background-color: #ffffff;
    position: relative;
    z-index: 1;
}
.nouvelle-recette .holder-tab-data .row-pad { padding: 12px; }

.new_client .holder-tab-data {
    background-color: rgb(214 203 203 / 6%);
    border: 1px solid #e5dced80;
}

.splash-block.left-portion.hidden {
    position: relative;
    left: -200px
}

.add-ingredient-section {
    border: 1px solid #f1e0e0;
    border-radius: 10px;
    background-color: #fbf2f2;
    padding: 16px !important;
    max-width: 93%;
    margin: 1vh auto;
    z-index: 10;
    position: relative;
}

.add-ingredient-section h4 {
    font-family: 'TitleFont';
    font-size: 17px;
    color: #7b6f6c;
}

.ingredients-menu {

    height: 80vh;
    max-height: 800px;
}

.ingredients-menu .pad-buffer {
    margin: 20px 0vw;
    max-width: 93%;
}

.ingredients-menu .pad-buffer h2 {
    font-family: 'TitleFont';
    font-size: 4vh;
    line-height: 3vh;
    position: relative;
    left: 7px;
}

.ingredients-menu .pad-buffer .chef-btn {
    margin: 0px 6px 11px 0px;
    color: #8b6b63;
    font-size: 14px;
    box-shadow: 1px 1px 3px rgb(139 107 99 / 18%);
}

.ingredients-menu .pad-buffer .chef-btn.active {
    background-color: #e7b9ad;
    color: #fefaf9;
}

.ingredients-menu .pad-buffer .chef-btn:hover {
    opacity: 0.7;
}

.ingredients-menu .pad-buffer .ingredients-hold {
    margin-right: 5%;
    vertical-align: top;
    margin-bottom: 15px;
    color: #000000;
}

.page-as-a-hover {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 12;
    transition:all 500ms ease;
    display: none;
    opacity: 0;
    
}

.page-as-a-hover.pink {
    background-color: rgb(255 239 237 / 97%);
}

.page-as-a-hover.pink.select-this-chef {
    background-color: rgb(252 247 245);
}

.page-as-a-hover.loading {
    background-image: url(/myfamilychef.ca/static/imgs/icons/1490.gif);
    background-position: center center;
    background-repeat: no-repeat;
}

.page-as-a-hover.loading div {
    opacity: 0;
}

.page-as-a-hover.active div {
    opacity: 1;
    
}

.nothing-to-see {
    transition: all 500ms ease;
    position: fixed;
    width: 100%;
    text-align: center;
    font-weight: normal;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 0;

}

.nothing-to-see h3 {
    position: relative;
    top: 32vh;
    font-size: 16vh;
    margin: 0px;
    line-height: 13vh;
    font-family: 'TitleFont';
}

.nothing-to-see h5 {
    font-size: 2vh;
    font-weight: normal;
    top: 35vh;
    position: relative;
    max-width: 36vw;
    margin: 0 auto;
    opacity: 0.7;
}

.nothing-to-see .chef-btn {
    position: relative;
    top: 41vh;
    left: -1vw;
}

.nothing-to-see .page-bg {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
    background-image: url(/myfamilychef.ca/static/imgs/pas-ingredients.svg);
    background-repeat: no-repeat;
    background-position: 7vh 30vh;
    background-size: 98%;
    opacity: 0.4;
}

.top-left-header {
    position: absolute;
    left: 11px;
    top: 7px;
}

.page-uber .full-width .top-left-header,
.page-admin .full-width .top-left-header {
    left:72px
}

.top-left-header h3 {
    font-size: 4vh;
    font-family: 'TitleFont';
    line-height: 4vh;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}


.top-left-header h4 {
    display: inline-block;
    font-family: 'Lexend';
    font-weight: normal;
    font-size: 13px;
    opacity: 0.7;
    vertical-align: middle;
}

.top-left-header .icon {
    
}

.left-handed-scoll {
    width: 79vw;
    margin: 0 4% 0 6%;
    top: 18vh;
    position: relative;
    left: 47%;
    transform: translateX(-50%);
    margin-left: 5%;
    background-color: rgb(255 238 238 / 38%);
    border-radius: 20px;
    padding-top: 4%;

}

.page-admin .full-width .left-handed-scoll {
    margin: 0 2% 0 1%;
}

.left-handed-scoll .pad-buffer {
    direction: rtl;
    overflow: auto;
    max-height: 67vh;
    border-radius: 20px;
    padding: 6vh 6vw;
    padding-left: 4%;
    position: relative;
    left: 40px;
    padding-top: 1%;
}


/* width */
.left-handed-scoll .pad-buffer::-webkit-scrollbar {
    width: 12px;
    height: 2px;
    border-radius: 5px;
    transition: all 500ms ease;
}

/* background */
.left-handed-scoll .pad-buffer::-webkit-scrollbar-track {
    background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,0) 0%, rgba(238,174,202,0) 35%, rgba(238,174,202,0.14189425770308128) 36%, rgba(238,174,202,0.1558998599439776) 64%, rgba(238,174,202,0) 65%, rgba(238,174,202,0) 100%);
}

/* le dessus */
.left-handed-scoll .pad-buffer::-webkit-scrollbar-thumb {
    background: rgba(206, 153, 149, 0.32);
    width: 10px;
    height: 10px;
    border-radius: 100px;
    transition: all 500ms ease;
}

/* Handle on hover */
.left-handed-scoll .pad-buffer::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 117, 114, 0.32);
}

.left-handed-scoll .pad-buffer .no-items {
    text-align: center;
}

.left-handed-scoll .pad-buffer .no-items h3 {
    font-family: 'HandWrite';
    font-size: 4vw;
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 14vh;
    margin-bottom: 1vh;
    color: #9d8282;
    font-weight: normal;
}


.left-handed-scoll .pad-buffer .no-items p {
    font-family: 'TitleFont';
}

.left-handed-scoll .pad-buffer .no-items .chef-btn {
    margin-bottom: 12vh;
}


.rounded-list {
    position: relative;
    text-align: left;
    direction: ltr;
    top: 77px;
    padding-top: 20px;
}

.rounded-list .chef-btn {
    background-color: #ffffff;
    border-color: #f1d6d6;
    font-size: 13px;
    /* margin: 0px .1vw .5vw 0px; */
    text-transform: capitalize;
    position: relative;
    padding: 3px 14px;
    color: #3f3131;
    opacity: 0.7;
    margin-bottom: 7px;
}

.rounded-list .chef-btn:before {
    content: "i";
    position: absolute;
    display: inline-block;
    font-weight: bold;
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    border-radius: 12px;
    top: 4px;
    left: 8px;
    line-height: 13px;
    text-align: center;
    font-weight: bold;
    opacity: 0.6;
    display:none;
    opacity: 0.2;
}

.page-uber .rounded-list .rounded-list-each {
    margin-bottom: 35px;

}

.rounded-list .rounded-list-each.no-item {

}

.frigo-note-item {
    font-weight: normal;
    font-family: 'Lexend';
    font-size: 13px;
    padding: 5px 0px;
}

.frigo-ingredient-list {
    margin-top: 7px;
    position: relative;
    left: -6px;
}

.rounded-list .rounded-list-each.no-item span {
    background-color: rgb(255 255 255 / 55%);
    padding: 14px 0px;
    border-radius: 13px;
    font-size: 13px;
    font-family: 'Lexend';
    color: rgb(0, 0, 0, 0.7);
    width: 100%;
    display: inline-block;
    text-indent: 15px;
}

.rounded-list .rounded-list-each:last-child {
    margin-bottom: 200px;
}

.rounded-list .rounded-list-each.no-buffer:last-child {
    margin-bottom: unset
}

.rounded-list .rounded-list-each .list-each-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #efefef;
    background-color: #fdf5f5;
}

.rounded-list .rounded-list-each .list-each-header.title {
    background-color: transparent;
}

.rounded-list .rounded-list-each .list-each-header h5 {
    display: inline-block;
    font-family: 'BoldFont';
    font-size: 16px;
    vertical-align: middle;
    margin: 4vh 0 0 0;
    font-weight: normal;
    color: #193D1C;
    text-transform: capitalize;
}

.rounded-list .rounded-list-each .list-each-header.title h5 {
    display: inline-block;
    font-family: 'Magazine';
    font-size: 4vw;
    vertical-align: middle;
    margin: 1vh auto;
    font-weight: normal;
    text-align: left;
    width: 100%;
    line-height: 49px;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-bottom: 6vh;
}

.rounded-list .rounded-list-each .date-title {
    display: block;
    font-size: 8.1vw;
    margin-bottom: 17px;
    top: 7vh;
    position: relative;
}

.rounded-list .rounded-list-each .date-data {
    font-family: 'NumberFont';
    font-size: 1.5vw;
    opacity: 1;
    position: relative;
    top: 8vh;
    opacity: 0.9;
}

.rounded-list .rounded-list-each .list-each-header img {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    margin-right: 4px;
    position: relative;
    top: -2px;
    display: none;
}


.rounded-list .rounded-list-each .list-each-data {
    background-color: #ffffff94;
    border-radius: 17px;
    padding: 20px;
}

.rounded-list .rounded-list-each .list-each-data.transparent {
    background-color: transparent;
    padding: 0px;
}

.rounded-list .rounded-list-each .list-each-choices {
    
}

.rounded-list .rounded-list-each .list-each-choices h4 {
    font-family: 'BoldFont';
    font-size: 1vw;
    font-weight: normal;
    color: #193D1C;
    margin: 0px;
}

.rounded-list .rounded-list-each .list-each-choices.frigos-list {

}

.rounded-list .rounded-list-each .list-each-choices .choices-each {
    background-color: rgb(251 238 235 / 33%);
    padding: 11px 20px;
    border-radius: 15px;
    margin-right: 6px;
    margin-bottom: 6px;
    transition: all 500ms ease;
    position: relative;
    width: 100%;
}

.rounded-list .rounded-list-each .list-each-choices.frigos-list .choices-each  {
    width: 100%;
    padding: 13px 1px;
    background-color: #ffffff94 !important;
    margin-bottom: -1px;
    border-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 1px solid rgb(237 163 163 / 35%);
}

.frigos-blocks .rounded-list .rounded-list-each .list-each-choices.frigos-list .choices-each {
    padding: 6px 1px;
}


.rounded-list .rounded-list-each .list-each-choices.frigos-list .choices-each:first-child {

}

.rounded-list .rounded-list-each .list-each-choices.frigos-list .choices-each:last-child {
    border-bottom: 0px;

}

.rounded-list .rounded-list-each .list-each-choices .choices-each.white {
    background-color: rgb(255 255 255 / 97%);
}

.rounded-list .rounded-list-each .list-each-choices .choices-each.add-new {
    background-color: #fdf9f6;
    border: 1px solid #f3ede8;
    color: #7f4a4a;
    cursor: pointer;
    width: unset;
    padding: 0px 0px;
    position: relative;
    top: 8px;
}

.rounded-list .rounded-list-each .list-each-choices .choices-each.add-new:hover {
    background-color: #fbeeeb;
}

.rounded-list .rounded-list-each .list-each-choices .list-each-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-size: cover;
    border-radius: 100px;
    vertical-align: middle;
    position: relative;
    background-image: url(/myfamilychef.ca/static/imgs/icons/menu-type.svg);
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: left center;
    margin: 4px
}
/* Chef mini avatar next to chef name on Menu page */
.menu-text .chef-name-line {
    position: absolute;
    top: 27.5vh;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.6;
}
.menu-text .chef-name-line .name {
    display:inline-block;
    margin: 0;
    position: static !important; /* not absolutely positioned */
    top: auto; left: auto;
    transform: none;
    width: auto;
}
.menu-text .chef-name-line .name.inline {
    display: block;
    font-family: 'TitleFont';
    font-size: clamp(12px, 1.4vw, 20px);
    line-height: 1;
    color: #193D1C;
    margin-bottom: 0;
}
/* remove block last name styling for inline mode */
/* .menu-text .chef-name-line .name .lname { ... } removed for inline */

/* avatar to the left of the name */
.menu-text .chef-name-line .chef-mini-pic {
    position: static;
    margin-right: 6px;
}
.menu-text .chef-mini-pic { width: 24px; height: 24px; border-radius: 50%; background-size: cover; background-position: center; display: inline-block; border: 1px solid #e8d8d8; box-shadow: 0 1px 2px rgba(0,0,0,0.07); }
.menu-text .chef-mini-pic.default { background-image: url(/myfamilychef.ca/static/imgs/icons/profile.svg); background-size: 70%; background-repeat: no-repeat; background-position: center; }

/* Smooth top guard for left scroll column */
.left-handed-scoll {
    --top-guard: 80px; /* threshold you wanted */
    overscroll-behavior-y: contain;
    padding-top: var(--top-guard);
}
.left-handed-scoll .pad-buffer {
    margin-top: calc(-1 * var(--top-guard));
}

/* category-specific list icons (match specificity of default rule) */
.rounded-list .rounded-list-each .list-each-data.type-Soupes .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-soupes .list-each-choices .list-each-icon { background-image: url(/myfamilychef.ca/static/imgs/icons/soupe.svg) !important; }
.rounded-list .rounded-list-each .list-each-data.type-Salades .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-salades .list-each-choices .list-each-icon { background-image: url(/myfamilychef.ca/static/imgs/icons/salades.svg) !important; }
.rounded-list .rounded-list-each .list-each-data.type-Desserts .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-desserts .list-each-choices .list-each-icon { background-image: url(/myfamilychef.ca/static/imgs/icons/desserts.svg) !important; }
.rounded-list .rounded-list-each .list-each-data.type-Repas .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-repas .list-each-choices .list-each-icon { background-image: url(/myfamilychef.ca/static/imgs/icons/reps.svg) !important; }
.rounded-list .rounded-list-each .list-each-data.type-Entrees .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-entrees .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-entrées .list-each-choices .list-each-icon { background-image: url(/myfamilychef.ca/static/imgs/icons/fork.svg) !important; }
.rounded-list .rounded-list-each .list-each-data.type-Sandwichs .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-sandwichs .list-each-choices .list-each-icon { background-image: url(/myfamilychef.ca/static/imgs/icons/burger.svg) !important; }
.rounded-list .rounded-list-each .list-each-data.type-Boissons .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-boissons .list-each-choices .list-each-icon { background-image: url(/myfamilychef.ca/static/imgs/icons/menu.svg) !important; }
.rounded-list .rounded-list-each .list-each-data.type-Autres .list-each-choices .list-each-icon,
.rounded-list .rounded-list-each .list-each-data.type-autres .list-each-choices .list-each-icon { background-image: url(/myfamilychef.ca/static/imgs/icons/ingredients.svg) !important; }

.rounded-list .rounded-list-each .list-each-choices .choices-each.add-new .list-each-icon {
    background-image:  unset;
}

.rounded-list .rounded-list-each .list-each-choices .choices-each.add-new .list-each-icon::after {
    content: "+";
    position: absolute;
    display: inline-block;
    font-size: 23px;
    opacity: 0.2;
    text-align: center;
    left: 72%;
    top: 43%;
    transform: translate(-50%, -50%);
    font-weight: normal;
    font-family: 'Lexend';
    line-height: 0px
}

.rounded-list .rounded-list-each .list-each-choices .choices-each .recette-qte {
    width: 41px;
    height: 25px;
    margin-left: -6px;
    position: relative;
    border: 1px solid #fbe8e8;
    background-color: #ffffff;
    border-radius: 21px;
}

.rounded-list .rounded-list-each .list-each-choices.frigos-list .choices-each .recette-qte {
    margin-left: 10px;
    border: 1px solid #fff5f5;
    width: 23px;
    text-align: center;
    text-indent: 0px;
    padding: 0px;
    border-radius: 20px;
    height: 20px;
    font-weight: bold;
    font-size: 11px;
    color: #ad8f8f;
}


.rounded-list .rounded-list-each .list-each-choices .choices-each .chef-btn {
    margin-right: -31px;
}
/* compact remove button next to quantity */
.rounded-list .rounded-list-each .list-each-choices .choices-each .retirer-btn {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: auto;
    height: auto;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    margin: 0;
    background-color: #f8f0f0;
    border: 1px solid #ecd7d7;
    color: #9a7575;
    display: inline-block;
}
.rounded-list .rounded-list-each .list-each-choices .choices-each .retirer-btn:hover {
    background-color: #f0e0e0;
    color: #704a4a;
}
  
.rounded-list .rounded-list-each .list-each-choices .choices-each .field-actions {
    position: relative;
}

.rounded-list .rounded-list-each .list-each-choices .choices-each .field-actions {
    font-family: 'BoldFont';
    font-size: 15px;
    position: relative;
    top: 1px;
    left: 2px;
    color:#193D1C;
    opacity: 0.8;
}

.rounded-list .rounded-list-each .list-each-choices h6 {
    margin: 0px;
    display: inline-block;
    font-family: 'BoldFont';
    font-weight: normal;
    word-break: break-word;
    vertical-align: middle;
    margin-left: 5px;
    font-size: 1.1vw;
    line-height: 2.2vw;
    position: relative;
    top: 2px;
    left: 2px;
    opacity: 0.7;
    color:#193D1C
}


.rounded-list .list-each-choices.frigos-list h6 {
    max-width: 100%;
    color: #3f3131;
}

.rounded-list .list-each-choices.frigos-list h6 span {
    text-transform: uppercase;
    font-size: 11px;
    margin-right: 10px;
    width: 74px;
    display: inline-block;
}

.rounded-list .rounded-list-each .list-each-choices .choices-each.add-new h6 {
    max-width: 100%;
    font-size: 1vw;
    padding-right: 13px;
    position: relative;
    top: 0px;
    left: -5px
}
/* frigos admin: inline item notes */
.rounded-list .rounded-list-each .list-each-choices.frigos-list .choices-each .item-notes {
    display: block;
    font-size: 11px;
    line-height: 15px;
    color: #7f4a4a;
    opacity: 0.9;
    margin-left: 48px;
    margin-top: 4px;
    padding: 6px 9px;
    background-color: #fff7f6;
    border: 1px solid #f3ede8;
    border-radius: 8px;
}
.rounded-list .rounded-list-each .list-each-choices.frigos-list .item-notes .notes-icon,
.rounded-list .rounded-list-each .list-each-choices.frigos-list .cat-notes .notes-icon {
    font-size: 13px;
    margin-right: 6px;
    opacity: 0.8;
}
.rounded-list .rounded-list-each .list-each-choices.frigos-list .item-notes .notes-label,
.rounded-list .rounded-list-each .list-each-choices.frigos-list .cat-notes .notes-label {
    font-family: 'BoldFont';
    margin-right: 6px;
}
/* frigos admin: category note for a section */
.rounded-list .rounded-list-each .list-each-choices.frigos-list .cat-notes {
    display: block;
    font-size: 11px;
    line-height: 15px;
    color: #7f4a4a;
    opacity: 0.9;
    margin: 8px 0 14px 6px;
    padding: 6px 9px;
    background-color: #fff7f6;
    border: 1px solid #f3ede8;
    border-radius: 8px;
}

/* Global loading overlay (used by frigo state changes) */
#global-loading.page-blocker {
    z-index: 9999;
    background-color: transparent; /* let the default spinner on .content show clearly */
}

#global-loading.page-blocker:after { content: none; 
    color: #193D1C;
    resize: none;
    background-color: #fdf9f6;
    margin-top: 10px;
    font-family: 'BoldFont';
}

.top-floating-image {
    position: absolute;
    width: 5vw;
    right: 20px;
    top: 60px;
}

.page-admin .full-width #big-floating-title {
    left:0px
}

.frigo-client-info {
    position: relative;
    top: -2px;
}

.frigo-client-info .header-actions .chef-btn.transparent {
    color: #665151
}

.frigo-client-info .header-actions .chef-btn.white {
    color: #665151
}

/* frigo client holder state styles */
.frigo-client-holder {
    border-radius: 12px;
    padding: 8px 8px 12px 8px;
    transition: background-color 250ms ease, box-shadow 250ms ease;
}
.frigo-client-holder.in-progress {
    background-color: #fff3f3; /* light pink */
    box-shadow: inset 0 0 0 2px #f3dcda;
    border-left: 5px solid #f3dcda;
}
/* Make header stand out when in progress */
.frigo-client-holder.in-progress .frigo-client-info {
    background-color: rgba(255, 243, 243, 0.85);
    border-radius: 10px;
    padding: 6px 10px;
}
/* soften inner list background so the state is visible */
.frigo-client-holder.in-progress .rounded-list { background-color: transparent; }

#big-floating-title {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 4vh;
    letter-spacing: -0.01em;
    font-family: 'Magazine';
    color: #193D1C;
    top: 7vh;
    font-weight: normal;
}

#big-floating-title h1 {
    text-align: left;
    font-size: 9.5vw;
    margin: 0px 3vw;
    line-height: 6vw;
    text-transform: none;
    font-family: 'Magazine';
    font-weight: normal;
    letter-spacing: -0.04em;
    top: 9vh;
    left: 50%;
    position: absolute;
    color: #193D1C;
    z-index: 2;
    width: 68%;
    transform: translateX(-50%)
}

#big-floating-title span.giant {
    font-size: 12vh;
    font-family: 'NumberFont';
    margin: 0px 11px -16px 11px;
    color: #193D1C;
    line-height: 12vh;
}

#big-floating-title .tag-line-livraison {
    font-size: 14px;
    opacity: 0.6;
    font-family: 'NumberFont';
    top: 12vh;
    position: relative;
    width: 58%;
    text-align: right;
    margin: 0 auto;
    letter-spacing: 0.01em;
}

.oblique {
    font-style: oblique;
}

.bottom-chef-menu {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    border-top: 1px solid #f3e0e0;
    background-color: #ffffff40;
    padding: 18px 0px;
    /*box-shadow: 1px -1px 10px rgb(255 211 211 / 48%);*/
    background: linear-gradient(180deg, rgba(254, 250, 249, 1) 0%, rgba(245, 232, 232, 1) 100%);
    border: none;
}

.bottom-chef-menu .chef-icon {
    background-image: url(/myfamilychef.ca/static/imgs/chef-profile-icon.svg);
    width: 137px;
    height: 161px;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: -95px;
}

.bottom-chef-menu.logged-in {
    position: fixed;
    background-color: rgb(253 245 245 / 88%);
    box-shadow: 1px -1px 10px rgb(255 211 211 / 28%);
}

.bottom-chef-menu .chef-info.is-client .chef-icon {
    width: 137px;
    height: 119px;
    top: -50px;
}

.bottom-chef-menu .chef-actions {
    display: inline-block;
    position: absolute;
    right: 18px;
    bottom: 15px;
}

.bottom-chef-menu .chef-info {
    padding: 0px 16px;
    display: inline-block;
}

.bottom-chef-menu .chef-name {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    opacity: 1;
    color: #223c1e;
    position: relative;
    left: 134px;
    font-family: 'TitleFont';
}

.bottom-chef-menu .chef-name .col {
    opacity: 0.6;
    margin-left:6px
}

.frigo-notification {
    position: fixed;
    top: 159px;
    left: 100px;
    background-color: white;
    padding: 15px;
    border-radius: 19px;
    z-index: 10;
    width: 137px;
    box-shadow: 1px 1px 5px rgb(0, 0, 0, 0.1);
    transition: all 500ms ease;
    opacity: 0;
}

.frigo-notification.in-wait {
    width: 28px;
}


.frigo-notification.in-error {
    background-color: rgb(243, 201, 201);
}

.frigo-notification .notification-title {
    font-size: 12px;
    margin-bottom: 5px;
    font-family: 'Lexend';
    font-weight: bold;
}

.frigo-notification .noti-icon {
    width: 45px;
    height: 38px;
    background-color: #edb3b3;
    border-radius: 20px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-size: 300%;
    background-position: center center;
}

.frigo-notification .data-col {
    font-size: 14px;
    font-family: 'Lexend';
}

.page-uber .circle-menu-holders {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 30px;
}

.with-floating-label,
.circle-menu-holders.with-floating-label {
    background-color: rgb(255 255 255 / 68%);
    border-radius: 20px;
    padding: 16px;
    text-align: center;
}

.with-floating-label.first,
.circle-menu-holders.with-floating-label.first {
    margin-top:35px
}

.with-floating-label.left {
    text-align: left;
}

.circle-menu-holders {
    width: 100%;
    margin: 0 auto;
}


.circle-menu-title {
    font-size: 12px;
    font-family: 'Lexend';
    opacity: 0.6;
}

.circle-menu-title span {
    margin-left: 4px;
}

.circle-menu {
    position: relative;
    margin: 0 0 0 0
}

.circle-menu .circle-each {
    width: 5vw;
    height: 5vw;
    background-color: white;
    border-radius: 100px;
    position: relative;
    display: inline-block;
    border: 3px solid #f3f0f0;
    transition: all 500ms ease;
    cursor: pointer;
    margin-right: 2px;
    margin-top:10px;
    max-width: 72px;
    max-height: 72px;
}

.frigos-list.circle-menu .circle-each {
    width: 4vw;
    height: 4vw;
}

.circle-menu .circle-each.not-active {
    opacity: 0.3;
}

.circle-menu.in-filter .circle-each {
    opacity: 0.3;
}

.circle-menu.in-filter .circle-each.active {
    opacity: 1;
}

.circle-menu .circle-each .floating-label {
    position: relative;
    width: 100%;
    text-align: center;
    top: 94%;
    font-size: 14px;
    text-transform: capitalize;

}

.circle-menu .circle-each .img-icon {
    position: absolute;
    width: 93%;
    height: 93%;
    border: 2px solid #ffffff;
    border-radius: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 125%;
    background-position: center center;
    transition: all 500ms ease;
}
/* numeric badge for multi-client days */
.circle-menu .circle-each .count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #193D1C;
    color: #fff;
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.circle-menu .circle-each:hover .img-icon {
    opacity: 0.3;
}

.circle-menu .circle-each label {
    text-align: center;
    width: 100%;
    position: relative;
    display: inline-block;
    top: 114%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    transition: all 500ms ease;
    opacity: 0.5;
    cursor: pointer;
}

.circle-menu .circle-each:hover label {
    opacity: 1;
}

.day-hold {
    position: relative;
    display: inline-block;
    width: 12%;
    height: 102px;
    border: 1px solid #fbefef;
    border-radius: 13px;
    background-color: #fffcfc;
    text-align: center;
    font-size: 13px;
    text-transform: capitalize;
    margin-right: 9px;
}

.day-hold .day-hold-day {
    margin-top: 45px;
    color: #665151;
    font-family: 'Lexend';
    font-size: 12px;
    font-weight: normal;
}

.filter-search {
    width: 90%;
    margin: 20px auto;
    opacity: 0.7;
    position: relative;
    text-align: center;
}

.filter-search::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(/myfamilychef.ca/static/imgs/search.svg);
    position: absolute;
    background-repeat: no-repeat;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    opacity: 0.3;
    transform: translate(-272px, -50%);
}

.filter-search textarea {
    background-color: rgb(255 231 231 / 80%);
    border: 1px solid #f5d7d7;
    resize: none;
    height: 30px;
    line-height: 23px;
    font-size: 12px;
    text-indent: 25px;
    overflow: hidden;
    width: 473px;
    border-radius: 10px;
    color: rgb(143 123 123 / 70%);
    vertical-align: middle;
    font-family: 'Lexend';
    font-weight: normal;
}

.frigos-title {
    position: relative;
    width: 100%;
    text-align: center;
    top:-40px
}

.master-site-content.admin .frigos-title h3 {
    font-family: 'Lexend';
    font-weight: normal;
    font-size: 18px;
    opacity: 0.5;
}

.master-site-content.admin .frigos-title h2 {
    font-family: 'TitleFont';
    font-size: 6.5vw;
    line-height: 1vw;
    margin: 70px 0px;
}

.frigos-blocks {
    width: 900px;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-bottom:20px;
}

.frigos-blocks.first {
    margin-top:11vh
}

.added-blocks {
    text-align: center;
}

.frigo-client-holder {
    width: 882px;
    margin: 0 auto;
    background-color: #fffcfc94;
    padding: 26px;
    border-radius: 20px;
    position: relative;
    left: 17px;
    top: 5vh;
    margin-bottom: 20px;
    padding-top: 0px;
    margin-top: 81px;
    opacity: 0;
    transition: all 250ms;
    display: none;
    margin-left:auto;
    margin-right: auto;
    text-align: left;
    color:#665151;
}

.frigo-client-holder.active {
    opacity: 1;
}

.frigo-client-holder h5.this-day {
    font-family: 'TitleFont';
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .0em;
    margin: 0px;
    position: relative;
    top: -37px;
    color: #665151;
    opacity: 0.7;
    text-transform: capitalize;
}


.frigo-client-holder h5.this-day .num {
    font-family: 'NumberFont';
    font-size:14px
}

.frigo-client-holder .frigos-blocks {
    margin: 0px !important;
    width: 880px;
}

.frigo-client-holder .rounded-list .rounded-list-each .list-each-header h5 {
    margin-top: 9px;
    font-size: 1vw;
    opacity: 0.7;
    position: relative;
    margin-left: 15px;
    font-family: 'BoldFont';
    font-size: 15px;
    font-weight: normal;
    color:#665151
}

.frigo-client-holder .rounded-list {
    top: unset;
    padding-top: 0px;
    border: 1px solid #f1ecec;
    border-radius: 10px;
    margin-bottom: 20px;
}

.frigo-client-holder .img-icon {
    background-image: url(/myfamilychef.ca/static/imgs/icons/profile-1.svg);
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    margin-right: 5px;
}

.frigo-client-holder h3 {
    display: inline-block;
    font-family: 'BoldFont';
    font-weight: normal;
    font-size: 1.1vw;
    vertical-align: middle;
    position: relative;
    left: 2px;
    color: #193D1C;
    top: -4px;
}

.frigo-client-holder h3 span {
    font-size: 1vw;
}

.frigo-client-holder .addr {
    color: #193D1C;
    position: relative;
    font-size: 13px;
    left: 62px;
    top: -21px;
    opacity: 0.5;
}

.html-buffer.menu-text {

}

.html-buffer.menu-text.chef-list {
    position: relative;
    top:3vh
}

.html-buffer.menu-text.faq {

}

.html-buffer.menu-text.about-us h3 {
    font-family: 'HandWrite';
    font-size: 4vw;
    margin: 10px 0px;
}

.html-buffer.menu-text.about-us p {
    font-family: 'Lexend';
    font-size: 15px;
    opacity: 0.8;
}

.html-buffer.menu-text .full-panel {
    height: 131vh;
    position: relative;
    background-color: #ffefed;
}

.html-buffer.menu-text .full-panel.our-chefs {
    height: 100vh;
}

.html-buffer.menu-text .full-panel:before {
    content: "";
    background-image: url(/myfamilychef.ca/static/imgs/assets/avocado.png);
    background-size: 111%;
    background-repeat: no-repeat;
    /* Nudge a bit higher */
    background-position: center 6%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

.html-buffer.menu-text .full-panel.our-chefs h1 {
    top:25vh
}

.html-buffer.menu-text .full-panel.our-chefs h2 {
    top:28vh
}

.html-buffer.menu-text .full-panel.our-chefs .chef-btn {
    top: 33vh;
    left: 50%;
    transform: translate(-50%);
    padding: 10px 17px;
    color: #896765;
    background-color: #fffdfd;
    border: 1px solid #f9eaea;
    box-shadow: 1px 1px 3px #b99e9e;
    opacity: 0.8;
}

.html-buffer.menu-text .full-panel.our-chefs .chef-btn:hover {
    opacity: 1;
}

.html-buffer.menu-text .full-panel.our-chefs:before {
    background-image: url(/myfamilychef.ca/static/imgs/assets/chefs.jpg);
    background-size: 98%;
    opacity: 1;
    background-position: center 24%;
    opacity: 0.3;
}

.html-buffer.menu-text .full-panel .box-hold {
    width: 80%;
    margin: 0 auto;
    top: 52vh;
    position: relative;
}

.html-buffer.menu-text .full-panel .box-hold .box {
    width: 24%;
    background-color: rgb(255 255 255 / 45%);
    border-radius: 20px;
    text-align: center;
    margin: 2%;
    padding: 61px 20px;
}

.html-buffer.menu-text .full-panel .box-hold .box h4 {
    font-size: 2.5vh;
    font-weight: normal;
    margin: 10px 0px;
    color: #223c1e;
}

.html-buffer.menu-text .full-panel .box-hold .box p {
    color: #223c1e;
}

.html-buffer.menu-text .centered-content {
    width: 650px;
    margin: 0 auto;
    top: 11vh;
    position: relative;
}

.html-buffer.menu-text .centered-content h1 {
    position: relative;
    font-size: 8.5vw;
    text-align: center;
    width: 100%;
    left: unset;
    transform: unset;
    margin: 0;
    line-height: 8vw;
    top: unset;
    letter-spacing: -.02em;
}

.html-buffer.menu-text .centered-content h1 span {
    font-family: 'HandWrite';
    width: 100%;
    display: block;
    font-size: 16vw;
    position: relative;
    top: -24px;
}

.html-buffer.menu-text .centered-content h2 {
    position: relative;
    font-family: 'TitleFont';
    text-align: center;
    color: #193D1C;
    opacity: 0.7;
}

.html-buffer.menu-text .full-panel h1 {
    max-width: 40%;
    position: relative;
    font-size: 12vh;
    margin-bottom: 10px;
    top: 26vh;
    text-align: center;
    margin: 0px;
    line-height: 10vh;
}

.html-buffer.menu-text .full-panel h2 {
    position: relative;
    width: 62%;
    margin: 0 auto;
    font-weight: normal;
    color: #193d1c;
    font-size: 3vh;
    top: 29vh;
    text-align: center;
    font-family: 'TitleFont';
    opacity: 0.7;
}

.select-this-chef .html-buffer.menu-text {
    margin: 3vw 7vw 3vw 13vw;
    min-height: 91.5vh;
    position: relative;
    border-radius: 20px;
    top: 63px;
}

.accordion-list {
    margin-top: 6vh;
    position: relative;
    padding-bottom: 200px;
}

.accordion-list .accordion-list-item {
    padding: 25px;
    margin-bottom: 15px;
    background-color: white;
    border: 1px solid #efefef;
    font-family: 'BoldFont';
    border-radius: 15px;
    font-size: 18px;
    color: #223c1e;
    cursor: pointer;
    transition: all 250ms;
}

.accordion-list ul {
    padding-inline-start: 20px;
}

.accordion-list ul.no-pad {
    padding-inline-start: 0px;
}

.accordion-list .accordion-list-item .accordion-list-item-details {
    transition: all 250ms;
    font-family: 'Lexend';
    font-size: 15px;
    color: #3e563a;
    margin-top: 13px;
    line-height: 20px;
}

.html-buffer.about-us {

}

.html-buffer.about-us .about-us-splash {
    
}

.html-buffer.about-us .col-left {
    width: 37%;
    display: inline-block;
    position: relative;
    vertical-align: top;
    top: 30px;
    left: -60px;
    color: #223c1e;
}

.html-buffer.about-us .col-right {
    width: 106%;
    min-height: 500px;
    background-size: 138%;
    display: inline-block;
    position: absolute;
    vertical-align: top;
    left: 32%;
    background-position: 47% 23%;
}


.html-buffer.menu-text h1 {
    text-align: left;
    font-size: 9.5vw;
    margin: 0px 3vw;
    line-height: 6vw;
    text-transform: none;
    font-family: 'Magazine';
    font-weight: normal;
    letter-spacing: -0.04em;
    top: 18vh;
    left: 50%;
    position: absolute;
    color: #193D1C;
    z-index: 2;
    width: 68%;
    transform: translateX(-50%);
}

.select-this-chef .html-buffer.menu-text h1 {
    top: 17vh;
    font-size: 10.5vw;
    left: 30px;
    transform: unset;
}

.select-this-chef .html-buffer.recettes.menu-text h1 {
    top: 4vh;
    font-size: 5vw;
    left: 51px;
    transform: unset;
    width: 33%;
    font-family: 'TitleFont';
    letter-spacing: 0.01em;
    line-height: 4.4vw;
}

.select-this-chef .html-buffer.recettes.menu-text h4 {
    font-family: 'HandWrite';
    font-size: 57px;
    position: relative;
    top: -75px;
    left: -5px;
    margin: 0;
    color: #193D1C;
    opacity: 1;
    font-weight: normal;
}

.html-buffer.menu-text h5 {
    position: absolute;
    top: 26.5vh;
    z-index: 3;
    left: 50%;
    font-family: 'BoldFont';
    font-size: 1.3vw;
    width: 62%;
    transform: translateX(-50%);
    color: #193D1C;
    font-weight: normal;
    opacity: 0.5;
}


.html-buffer.menu-text .recette-text-holder {
    position: relative;
    width: 84vw;
    background-color: #FFEEEE;
    min-height: 100vh;
    margin: 0 auto;
    border-radius: 20px;
    top: 7vh;
    left: 50%;
    transform: translateX(-52%);
}

.page-as-a-hover.select-this-chef .html-buffer.menu-text  .recette-text-holder {
    background-color: rgb(255 238 238 / 67%);
    /* border: 1px solid #ffe5e5; */
    width: 74vw;
    top: 7vh;
    left: 50%;
    transform: translateX(-50%);
    margin: unset;
    position: absolute;
    overflow-y: auto;
    max-height: 40vh;
}

.textual-blocks {
    padding-top: 11vh;

}


.textual-blocks .textual-block {
    padding: 0px 4vw;
    text-align: right;
    color: #112312;
    margin: 0vh 0 5.8vh 0;
    position: relative;
    cursor: zoom-in;
    transition: all 500ms ease;
}

.textual-blocks  .textual-block.ra-repas {
}

.textual-blocks .textual-block.ra-repas:after {
}

.textual-blocks .textual-block:hover {
    background: linear-gradient(180deg, rgb(255 238 238 / 0%) 0%, rgb(255 186 186 / 7%) 51%, rgb(255 238 238 / 0%) 100%);
    transition: all 500ms ease;
}

.select-this-chef .textual-blocks .textual-block:hover {
    background: unset;
    background-color:transparent;
    cursor:default;
}

.textual-blocks .textual-block:first-child {
    
}

.textual-blocks .textual-block:after {
    content: "";
    display: inline-block;
    width: 60vw;
    border-bottom: 2px solid #513e3e17;
    position: absolute;
    top: 113%;
    margin-top: 3vh;
    right: 4vw;
}

.textual-blocks .textual-block:last-child:after {
    display: none;
}

.textual-blocks .this-block-type {
    display: none;
}

.textual-blocks .block-type {
    font-family: 'Handwrite';
    font-size: 6.5vw;
    color: #112312;
    text-align: right;
    margin: 0px 4vw 2.5vw 4vw;
}

.textual-blocks .textual-block .block-name {
    vertical-align: middle;
    display: inline-block;
}

.textual-block-group {
    margin-bottom: 8vh;
}

.textual-blocks .textual-block .block-name h3 {
    font-family: 'TitleFont';
    font-size: 1.7vw;
    margin: 0 0 .5vh 0;
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
}

.textual-blocks .textual-block .block-name .select-me {
    width: 1.5vw;
    height: 1.5vw;
    display: inline-block;
    border: 4px solid rgb(203 175 175 / 42%);
    border-radius: 100px;
    vertical-align: middle;
    margin: 0 0 .5vh 1vw;
    position: relative;
    top: -2px;
    cursor: pointer;
    transition: all 500ms ease;
}

.textual-blocks .textual-block .block-name .select-me.active {
    background-color: rgb(203 175 175 / 42%);
}

.textual-blocks .textual-block .block-desc {
    opacity: 1;
    font-size: 1.2vw;
    font-weight: normal;
    color: #193D1C;
}


.textual-blocks .textual-block .block-other {
    
}

.each-week {
    position: absolute;
    width: 70%;
    height: 11vh;
    background-image: url(/myfamilychef.ca/static/imgs/icons/each-week-text.svg);
    background-repeat: no-repeat;
    left: 50%;
    background-position: right top;
    top: 20vh;
    z-index: 3;
    transform: translateX(-50%);
}

.html-buffer.recettes .each-week {
    top:18vh
}

#big-floating-title .each-week {
    top:10vh
}

.rounded-list .rounded-list-each .list-each-fields.each-notes {
    background-color: transparent;
    padding: 0px;
}
/* style for notes textarea in client frigo sections */
.rounded-list .rounded-list-each .list-each-fields.each-notes textarea {
    margin: 8px 0 10px 0;
    border: 1px solid #f3dcda;
    outline: none;
    padding: 11px 8px;
    width: 100%;
    background-color: #fff8f7c4;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Lexend';
    resize: none;
    color: #665151;
}
.rounded-list .rounded-list-each .list-each-fields.each-notes textarea:focus {
    border-color: #ffd5d5;
    box-shadow: 0 0 0 1px #ffd5d5 inset;
}


.small-holder {
    width: 400px;
    min-height: 420px;
    background-color: rgb(255 255 255 / 74%);
    left: 50%;
    position: absolute;
    top: 40%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    border: 1px solid rgb(237 227 231 / 72%);
    box-shadow: 2px 3px 12px rgb(237 227 231 / 38%);
}

.small-holder.med {
    width: 500px;
}

.small-holder .holder-form,
.small-holder .holder-image {
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid #fbeded;
    border-radius: 20px;
    background-color: #fcf0ee61;
    transition: all 250ms
}

.small-holder .holder-form.this-chef {
    background-size: 127%;
    background-position: -28% 37%;
}

.small-holder .holder-form.this-chef h2 {
    font-family: 'HandWrite';
    position: relative;
    left: 30px;
    font-size: 54px;
    margin: 20px 0 -15px 0;
    color:#193D1C;
}

.small-holder .holder-form.this-chef p {
    font-family: 'Lexend';
    font-size: 16px;
    position: relative;
    left: 30px;
    width: 46%;
    color: #193D1C;
    opacity: 0.74;
}

.small-holder .holder-image {
    z-index: 2;
    background-image: url(/cinedesign.ca/static/imgs/image-pale.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
}

.chef-list .small-holder .holder-image {
    background-image: none;
}

.chef-list .small-holder label {
    display: block;
    font-size: 14px;
    font-family: 'Lexend';
    margin-bottom: 9px;
    color: #193D1C;
}

.chef-list .small-holder .cus-select {
    border: 2px solid #efe3e3;
    padding: 9px 3px;
    font-size: 14px;
    border-radius: 8px;
    background-color: rgb(255 255 255 / 30%);
    margin-left:0px
}

.chef-list .small-holder .cus-select:after {
    right: 11px;
    bottom: 50%;
    transform: translateY(48%);
}

.chef-list .small-holder .cus-select input {
    font-size:14px;

}

.chef-list .small-holder .chef-btn {
    position: relative;
    left: 30px;
}

.small-holder .hold-border {
    width: 48%;
    border: 2px solid rgb(237 227 227 / 62%);
    border-radius: 15px;
    position: relative;
    left: 30px;
    background-color: rgb(255 255 255 / 64%);
    padding: 17px;
    margin-bottom: 20px;
}

.small-holder h1 {
    font-family: 'Magazine';
    width: 61%;
    margin: 52px auto 14px auto;
    font-size: 4vw;
    color:#193D1C;
}

.admin-form .small-holder h1 {
    font-family: 'Handwrite';
}

.small-holder .holder-image.chef-pic {
    background-size: 152%;
    background-position: center 36%;
}

.small-holder.not-amin .holder-image {
    background-size: 132%;
    /*background-image: url(/myfamilychef.ca/static/imgs/web-family-chef.svg);*/
}

.small-holder .holder-form {
    z-index: 3;
}

.small-holder .holder-form .add-files-btn-trick label {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    border-radius: 20px;
    background-color: transparent;
}

#current-options {
    position: fixed;
}

.small-holder {
    
}

.small-holder.contact {
    width: 450px;
    height: 550px;
}

.small-holder.contact h2 {
    font-family: 'TitleFont';
    font-size: 29px;
    margin: 0px;
    margin-bottom: -11px;
}

.small-holder.contact label {
    margin-top: 11px;
}

.small-holder.contact .holder-form {
    padding: 18px;
}

.small-holder.contact .cus-select input,
.small-holder.contact .cus-select.no-icon {
    margin:0px;
}

.small-holder.contact textarea {
    border: 1px solid #f3dcda;
    outline: none;
    padding: 11px 4px;
    width: 100%;
    background-color: #fff8f7c4;
    border-radius: 3px;
    font-size: 13px;
    border-radius: 6px;
    font-family: 'Lexend';
    margin-bottom: 15px;
    height: 196px;
}

.small-holder.contact textarea,
.small-holder.contact input {
    padding: 11px 10px;
}

.small-holder.table-view {
    width: 79vw;
    height: 67vh;
    top: 44%;
}

.small-holder.table-view .buf-pad {
    padding: 0px 64px;
    max-height: 372px;
    overflow-y: auto;
    width: 78%;
    margin: 29px 0px;
}

/* Override within overlay: allow taller content in client hover */
.page-as-a-hover .small-holder.table-view .buf-pad {
    max-height: 64vh; /* scale with viewport height */
}

.one_fridge .small-holder.table-view .buf-pad {
    padding: 0px 39px;
    width: 82%;
    max-height: 88%;
}

.one_fridge .small-holder.table-view .rounded-list {
    top: unset;
    padding-top: unset;
}

.one_fridge .small-holder.table-view .rounded-list .rounded-list-each .list-each-header {
    padding-bottom: 10px;
    border-bottom: none;
    background-color: transparent;
}

.one_fridge .small-holder.table-view .rounded-list .rounded-list-each .list-each-data {
    padding: 0px;
}


.one_fridge .small-holder.table-view .rounded-list .rounded-list-each .list-each-header h5 {
    font-family: 'HandWrite';
    font-size: 43px;
}

.one_fridge .small-holder.table-view .rounded-list .rounded-list-each:first-child h5 {
    margin-top:0px
}

.one_fridge .small-holder.table-view .rounded-list .rounded-list-each .list-each-choices h4 {
    background-color: rgb(251 238 235 / 33%);
    padding: 11px 20px;
    border-radius: 15px;
    margin-right: 6px;
    margin-bottom: 6px;
    transition: all 500ms ease;
    position: relative;
}

.top-header .cus-select .buf-pad .datarow {

}

.small-holder.table-view .buf-pad label {
    width: 100%;
    position: relative;
    display: inline-block;
    color: #514040;
    text-transform: capitalize;
    font-size: 14px;
    margin: 13px 0px 5px 0px;
}

.small-holder.table-view .buf-pad textarea,
.small-holder.table-view .buf-pad input {
    border: 1px solid #ddcdcd;
    padding: 10px 11px;
    width: 100%;
    border-radius: 8px;
    background-color: #fbf4f4;
    color: #514040;
}


.small-holder.table-view {

}

.small-holder.table-view .user-name {
    margin-top: 44px
}

.small-holder.table-view .holder-tabs {
    position: absolute;
    top: 19px;
    right: 4px;
    width: 400px;
    text-align: right;
    color: #193d1c;
    font-size: 16px;
    font-family: 'TitleFont';
}

.small-holder.table-view .holder-tabs .holder-tab {
    display: inline-block;
    margin:0 4px;
    position:relative;
    transition: all 250ms;
    display: inline-block;
    cursor: pointer;
    opacity: 0.5;
}

.small-holder.table-view .holder-tabs .holder-tab.active {
    opacity: 1;
}

.small-holder.table-view .holder-tabs .holder-tab:after {
    content: "";
    position: relative;
    width:100%;
    border-bottom: 2px solid transparent;
    display:inline-block
}

.small-holder.table-view .holder-tabs .holder-tab.active:after {
    border-bottom: 2px solid #133316;
}

.small-holder.table-view .action-row {
    position: absolute;
    margin-top: 10px;
    bottom: 15px;
    right: 20px;
}

.small-holder.table-view .handwrite {
    font-family: 'HandWrite';
    font-size: 32px;
    font-weight: bold;
    color: #133316;
}

.small-holder.table-view .magazine {
    font-family: 'TitleFont';
    font-size: 44px;
    color: #182f1a;
}

.small-holder.table-view h3 {
    opacity: 0.6;
    font-family: 'TitleFont';
    font-size: 15px;
    color: #182f1a;
    margin: 5px;
}

.small-holder.table-view .row-pad {
    padding:10px
}

.small-holder.table-view .sep {
    width: 100%;
    border-bottom: 1px solid #e5dced80;
    margin: 3px 0px 9px 0px;
    padding-right: 20px;
    position: relative;
    left: -10px;
}

.small-holder.table-view .btns-holder {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    color: #193d1c;
    margin-bottom: 6px;
}

.small-holder .bubble {
    background-color: white;
    display: inline-block;
    padding: 6px 10px;
    font-size: 13px;
    color: #193d1c;
    border-radius: 10px;
    margin-bottom: 5px;
}

.small-holder .bg-holder {
    position: absolute;
    background-color: #ede3e7;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 47%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.small-holder .bg-holder .bubbles {
    position: absolute;
    bottom: 10px;
    left: 17px;
}

/* image fallback in hover */
.small-holder .bg-holder .col-bg-image { position: absolute; top:0; left:0; right:0; bottom:0; }
.small-holder .bg-holder .col-bg-image .bg-img { width:100%; height:100%; object-fit:cover; display:block; border-top-left-radius:20px; border-bottom-left-radius:20px; }

.small-holder .data-row {
    position: relative;
    left: 47%;
    width: 51%;
}

.small-holder .col-bg-image {
    background-image: url(/myfamilychef.ca/static/imgs/public/65092c04-1d1d-11f0-952d-989e63370b05/profile/caeafc09-2111-11f0-be69-24a074e9fff9.jpg);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.top-header .cus-select input {
    
}

.cus-select.week-select {
    /* let the week picker grow to fit long dates */
}

/* Ensure the visible field can display the full date without truncation */
.top-header .cus-select.week-select.with-label {
    width: max-content;
    min-width: 0;
    max-width: 80vw;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap; /* keep label + input on one line */
}
.top-header .cus-select.week-select.with-label label {
    margin: 0 -8px 0 0;
    white-space: nowrap;
    position: static;
    left: 0; top: 0;
    padding: 0; /* remove inherited bottom padding to keep single line */
    line-height: 1;
}
.top-header .cus-select.week-select.with-label input {
    width: auto !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cus-select.with-icon {
    
}

.cus-select.with-icon input {
    
}

.cus-select.with-label {
    box-shadow: 1px 1px 2px #e3e3e3;
    background-color: rgb(255 255 255 / 88%);
    border-radius: 20px;
    line-height: 1; /* normalize for alignment */
    padding: 8px 12px;
}

.cus-select.with-label.with-icon {
    position: relative;
    padding: 8px 29px 6px 36px;
    top: 0px;
}



.cus-select.with-label.with-icon:before {
    content: "";
    position: absolute;
    background-image: url(/myfamilychef.ca/static/imgs/icons/fridge.svg);
    width: 18px;
    height: 17px;
    display: inline-block;
    left: 15px;
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center center;
}

#current-options.cus-select.with-label.with-icon:before {
    background-image: none;
} 

.cus-select.with-label label {
    width: unset;
    display: inline-block;
    font-size: 14px;
    position: relative;
    top: 0;
    left: 0;
    margin-right: 6px;
    opacity: 1;
    color: #222;
}

#current-options.cus-select.with-label.with-icon {
    padding:10px
}


.cus-select.with-label input {
    width: auto !important;
    margin: unset !important;
    padding: unset;
    background-color: transparent;
    border:none;
    font-family: 'BoldFont';
    font-size: 14px;
    color:#222
}

.top-header .cus-select:after {
    bottom: 11px;
    right: 13px;
}

.panel-blocker {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 100px;
    /*background-color: rgb(245 232 232 / 94%);*/
    z-index: 9;
    background: linear-gradient(90deg, rgba(254, 250, 249, 0.73) 0%, rgba(254, 250, 249, 1) 14%, rgba(245, 232, 232, .51) 100%);
}

.panel-blocker .small-holder .holder-form, 
.panel-blocker .small-holder .holder-image {
    border:none;  
    background-color: color(srgb 0.99 0.94 0.93 / 0.06);
}

.panel-blocker .small-holder {
    background-color: rgb(255 255 255 / 23%);
}

.admin-form .small-holder {
    background-color: rgb(255 255 255 / 43%);
}


.panel-blocker .small-holder .holder-form {
    z-index: 16;
}

.admin-form .holder-form {
    text-align: center;
}

.panel-blocker .small-holder .holder-form p {
    font-family: 'TitleFont';
    font-size: 2.1vw;
    line-height: 1.9vw;
    color: #193D1C;
    max-width: 60%;
    margin: 0 auto;
    top: 50%;
    position: relative;
    transform: translateY(-122%);
}

.panel-blocker .small-holder .holder-form p {
    font-size: 1.5vw;
    line-height: 1.8vw;
}

.panel-blocker .small-holder.not-amin .holder-form p {
    top:unset;
    transform:unset;
    font-weight: normal;
}


.panel-blocker .small-holder .holder-form .chef-btn {
    position: relative;
    top: 44%;
    transform: translateY(-166%);
}

.panel-blocker .small-holder .holder-form.admin {
    background-color: color(srgb 1 1 1 / 0.45);
}

.panel-blocker .small-holder.not-amin .holder-form .chef-btn {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.panel-blocker.admin-form .small-holder.not-amin .holder-form .chef-btn {
    left:unset;
    transform:unset;
    top: 10%;
}

.panel-blocker .holder-image {
    background-image: none;
}

.panel-blocker .no-recettes {
    background-size: 94%;
    background-repeat: no-repeat;
    background-position: 497% 195%;
    position: relative;
}

.panel-blocker .no-recettes:after {
    position: absolute;
    z-index: 15;
    content: "";
    display: inline-block;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgb(251 245 245 / 68%);
    border-radius: 20px;
}

/* Textual recette: ingredients line and three-column specs */
.textual-block .ingredients-line { 
    text-align: right;
    font-family: 'TitleFont';
    font-size: 17px;
    color: #223c1eb8;
    opacity: 0.85;
    margin: 5px 0 22px 30%;
    max-width: 70%;
    line-height: 23px;
}

.textual-block .spec-triple { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    align-items: start; 
    margin-top: 30px; 
    text-align: right; 
    justify-items: end; 
    margin-bottom :90px;
    border-radius: 11px;
    gap:20px
}

.textual-block .spec-triple .label { 
    font-variant-caps: all-small-caps;
    opacity: 0.65;
    font-size: 16px;
    color: #193d1c9c;
    margin-bottom: 6px;
    text-align: right;
 }

/* Icons for spec labels */
.textual-block .spec-triple .spec-col .label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
    vertical-align: -2px;
    opacity: 0.65;
}
.textual-block .spec-triple .spec-col.notes .label::before { background-image: url(/myfamilychef.ca/static/imgs/icons/text.svg); }
.textual-block .spec-triple .spec-col.allergies .label::before { background-image: url(/myfamilychef.ca/static/imgs/icons/allergies.svg); }
.textual-block .spec-triple .spec-col.sauces .label::before { background-image: url(/myfamilychef.ca/static/imgs/icons/ingredients.svg); }

.textual-block .spec-triple .chips { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; justify-content: flex-end; }
.textual-block .spec-triple .chip { 
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1e0dec4;
    color: #3f3131;
    font-size: 10px;
    line-height: 1.2;
    text-transform: capitalize;
 }
 
.textual-block .spec-triple .note { 
    font-size: 13px;
    color: #4a3f3f;
    opacity: 0.85;
    text-align: right;
    font-style: italic;
    line-height: 0.9;
    max-width: 80%;
    padding-left: 20%;
}

.textual-block .spec-triple .notes .note::before { content: "\201C"; margin-right: 4px; opacity: 0.4; font-size: 16px; vertical-align: baseline; }

/* Admin icon tooltip (labels on hover) */
.recettes-left-menu .icon {
    position: relative;
    overflow: visible;
}
.recettes-left-menu .icon::after {
    content: attr(for);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 239, 237, 0.32);
    color: #193D1C;
    font-family: 'TitleFont';
    text-transform: capitalize;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    z-index: 9999;
}
.recettes-left-menu .icon::before {
    content: "";
    position: absolute;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgba(255, 239, 237, 0.32) transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    z-index: 9998;
}
.recettes-left-menu .icon:hover::after,
.recettes-left-menu .icon:hover::before {
    opacity: 1;
    visibility: visible;
}

.legal-content {
    margin-top: 93px;
}

.holder-tabs {
    text-align: center;
    margin-bottom: -45px; 
}

.holder-tab.chef-btn.active {
    background-color: white;
}

/* Scroll reveal animations */
.scrolShow { will-change: opacity, transform; }
.scrolShow.will-scroll { 
    opacity: 0; 
    transform: translateY(24px); 
    transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); 
    transition-delay: var(--sr-delay, 0ms);
}
.scrolShow[data-scroll="up"].will-scroll { transform: translateY(28px); }
.scrolShow[data-scroll="down"].will-scroll { transform: translateY(-28px); }
.scrolShow[data-scroll="right"].will-scroll { transform: translateX(28px); }
.scrolShow[data-scroll="left"].will-scroll { transform: translateX(-28px); }
.scrolShow.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .scrolShow { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.textual-block .spec-triple .notes .note::after { content: "\201D"; margin-left: 2px; opacity: 0.4; font-size: 16px; vertical-align: baseline; }
.textual-block .spec-triple .no-chip { font-size: 12px; color: #8a7a7a; opacity: 0.6; }