@font-face {
    font-family: 'rocaone-rgregular';
    src: url('../font/roca/roca_regular-webfont.woff2') format('woff2'),
         url('../font/roca/roca_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'myriad_proregular';
    src: url('../font/myriad/myriadpro-regular-webfont.woff2') format('woff2'),
         url('../font/myriad/myriadpro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {
  transition: all 0.3s ease-in-out;
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px; /* width of the vertical scrollbar */
  height: 10px; /* height of the horizontal scrollbar */
}
#importReelUrlOption button.btn-primary{
    padding:10px 20px !important;
}
#uploadReelOption button.btn-primary{
    padding:10px 20px !important;
}
.create_new_cookbook{
    background-color:#9fb89e;
    color:#fff;
}
.footer-form .container {
  background-color: #A0B89F;
  padding: 30px;
  border-radius: 20px;
  margin-bottom:30px;
}
.footer-form .header{
    text-align:center;
    color:#fff;
}
.white-bg-modal{
    background-color:#fff !important;
}
#categoryExtra .progress-bar{
    background-color:#e17864 !important;
}
#categoryHeading{
  font-family: 'RocaOne', "Georgia", "Times New Roman", serif;
  font-size: 36px;
  margin-bottom: 12px;
  color: #333333;
  text-align:center;
  font-weight:bold;
}
#categoryDescription{
   font-family: 'myriad_proregular';
   font-size: 15px;
   color: #777777;
   text-align:center;
   margin: 0 auto;
   line-height: 1.5;
   max-width: 520px;
}
#packageContainer small{
    color:#a1b89f;
    font-size:13px;
    font-family: 'myriad_proregular';
}
#openBuy{
    background-color:#e17864;
    padding:12px 25px;
    border-radius:8px;
    color:#fff;
    border:0;
}
.payment-body{
    border:1px solid #dbdbdb;
    border-radius:30px;
}
#packageContainer .btn-buy{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  background: #e17864;
  border: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: 'RocaOne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.token-header .bg-danger{
  border-radius: 30px;
  background-color: #e17864 !important;
}
.payment-header{
    border-bottom:0 !important;
}
.pay-logo{
   width: 120px;
   margin-right:20px;
}
#packageContainer {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-bottom: 20px;
  margin-top: 25px;
}
#buyModal small.text-center {
  font-family: 'myriad_proregular';
  font-size: 13px;
  color: #9f9f9f;
  width: 100%;
  float: left;
}
#categoryExtra{
  max-width: 950px;
  margin: auto;
}
#packageContainer h4{
  font-family: 'RocaOne', "Georgia", "Times New Roman", serif;
  font-size: 20px;
  margin-bottom: 12px;
  color: #333333;
  font-weight:bold;
}
#packageContainer h5{
  font-size:24px;
  color:#333333;
}
#packageContainer h6{
  font-family: 'myriad_proregular';
}
#packageContainer p {
  font-family: 'myriad_proregular';
  font-size: 13px;
  line-height: 20px;
}
.fore {
  background-color: #e17864;
  border-radius: 50px;
  font-family: 'myriad_proregular';
  font-size: 13px;
  margin-right: 20px;
  padding: 7px 15px;
  color: #fff;
}
.pay-close{
    background-color: #a1b89f;
}
.product-badge {
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  background: #a1b89f;
  font-family: 'RocaOne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  max-width: 160px;
  margin: auto;
}
.category-toggle .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active{
    background-color:inherit !important;
    color:#e17864 !important;
}
.category-toggle label{
    font-family: 'myriad_proregular' !important;
    font-weight:normal;
    font-size:13px;
}
.token-header {
  font-family: 'myriad_proregular';
  color: #e17864;
  margin-bottom: 15px;
  font-weight: 600;
  text-transform: capitalize;
}
.storage-header {
  font-family: 'myriad_proregular';
  color: #e17864;
  margin-bottom: 15px;
}
#packageContainer .card{
  background: #f7f7f7;
  border-radius: 26px;
  padding: 32px 18px 30px;
  width: 260px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05);
  border:0;
}
#cookbook h3{
    float:left;
}
#quickRecipeOptionsModal .btn-close-white{
    background-color:#fff;
}
#change_recipe_by_image i{
    color:#fff !important;
}
#add_recipe_related_images i{
    color:#fff !important;
}
.generate-thumbnail-btn i{
    color:#fff !important;
}
#add_new_social_recipe_link i{
    color:#fff !important;
}
#remove_recipe_by_image {
  width: auto !important;
  height: auto !important;
  padding: 4px 6px !important;
  background-color:#dc3545 !important;
}
#remove_recipe_by_image i{
  margin: 0 !important;
  color: #fff !important;
}
.reel_card_container .reel_author{
    margin-top:-15px;
    margin-bottom:10px !important;
}
.video-link-row .remove-video-link {
  padding: 8px 10px !important;
}
.remove-related-image{
    padding:5px !important;
}
.remove-video-link i{
    margin:0 !important;
    color:#fff !important;
}
.preparation-step .remove-step {
  background-color:#dc3545 !important;
  color: #fff !important;
  padding:4px 7px !important;
}
#calories_per_serving_value{
    margin-left:0 !important;
}
.preparation-step .remove-step i{
  color: #fff !important;
}
#ingredients-sections .remove-section-btn{
  background-color: #dc3545 !important;
  padding: 10px !important;
  border-radius: 50px !important;
}
#ingredients-sections .remove-section-btn i{
  color: #fff !important;
  font-size: 20px !important;
  margin-left: 0 !important;
}
.footer-form .card {
  padding: 30px;
  border-radius: 20px;
  width:100%;
  margin: auto;
  border:0;
}
.footer-form .card .form-group{
    width:100%;
    float:left;
    margin:10px 0;
}
.friends_option{
    margin-bottom:12px;
}
#cookbook h6{
    display:block;
}
.friend_opt-Btn-1{
    background-color:#ff6b6b;
    padding:7px 15px;
    border-radius:50px;
    color:#fff;
    border:0;
    font-family: 'myriad_proregular' !important;
    font-weight: 500 !important;
    font-size:11px;
}
.friend_opt-Btn-2{
    background-color:#dc3545;
    padding:7px 15px;
    border-radius:50px;
    color:#fff;
    border:0;
    font-family: 'myriad_proregular' !important;
    font-weight: 500 !important;
    font-size:11px;
}
.friend_opt-Btn-3{
    background-color:#ff8f7a;
    padding:7px 15px;
    border-radius:50px;
    color:#fff;
    border:0;
    font-family: 'myriad_proregular' !important;
    font-weight: 500 !important;
    font-size:11px;
}
.footer-form .card .form-group label{
    color:#fff;
}
.footer-form .footer p {
  color: #fff;
  text-align: center;
  margin-top: 20px;
  margin-bottom:0;
  font-size:18px;
}
.footer-form .footer p a{
  color: #fff;
}
.footer-form .card .form-group label{
    width:100%;
    float:left;
    font-size:18px;
}
.footer-form .card .form-group input {
  width: 100%;
  float: left;
  border:2px solid #E8ECE5;
  padding: 12px;
  border-radius: 8px;
  margin-top: 7px;
}
.footer-form .char-count{
    width:100%;
    float:left;
    text-align:right;
    margin-top:10px;
    color:#fff;
}
.footer-form .card .form-group textarea{
  width: 100%;
  float: left;
  border:2px solid #E8ECE5;
  padding: 12px;
  border-radius: 8px;
  margin-top: 7px;
  min-height: 160px;
}
.footer-form .card .form-group select{
  width: 100%;
  float: left;
  border:2px solid #E8ECE5;
  padding: 12px;
  border-radius: 8px;
  margin-top: 7px;
  background-color:#fff;
}
.footer-form button{
    width: 100%;
    padding: 12px 24px;
    background-color: #F7A497;
    color: white;
    border: none;
    border-radius: 24px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
.recipe_type_filter{
  gap:10px !important;
  justify-content: center !important;
}
.upload_profile_pic {
  background-color: #9fb89e;
  padding: 10px 22px;
  border: 0;
  border-radius: 50px;
  margin-top: 20px;
  color: #fff;
}
.main_recipes_section .dummy-ad{
  height:100% !important;
  max-height: 385px !important;
}
.cookbook_info p{
    width:100% !important;
}
.reset_today_filter{
  background-color: #fff;
  padding: 12px 40px;
  border-radius: 50px;
  border: 2px solid #ff8f7a;
  margin-left:10px;
}
.contact-item-wrapper{
    overflow:hidden;
}
.main_recipes_section .dummy-ad img{
  border-radius:20px !important;
}
#usersTable .badge{
    background-color:#a9c0aa !important;
    font-weight:normal;
}
#usersTable .btn-primary{
    background-color:#ff8f7a !important;
    border:1px solid #d64e34 !important;
}
#usersTable thead th{
    background-color:#cfe9d0 !important;
    margin-top:20px;
}
.friends_bg .btn-group{
    width:100% !important;
}
.searchcookbookbtn{
  width: auto;
  background-color: #f8a494;
  float: left;
  padding: 11px;
  border: 0;
  border-radius: 30px;
  margin-left: -48px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin-top: -4px;
  position: relative;
  color: #fff;
  font-size: 24px;
}
.searchrecipebtn{
  width: auto;
  background-color: #f8a494;
  float: left;
  padding: 11px;
  border: 0;
  border-radius: 30px;
  margin-left: -48px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin-top: -4px;
  position: relative;
  color: #fff;
  font-size: 24px;
}
.reset_reel_filter_btn{
    padding:0 !important;
}
.reset_reel_filter_btn img{
    width:50px !important;
    height:50px !important;
}
.moderate-bg{
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 5px;
}
.moderate-buttons .btn-light{
    background-color:#f0f0f0 !important;
    border:1px solid #d5d5d5;
}
.mo-credit li {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius:10px;
  border:1px solid #dddada !important;
  box-shadow: 0;
}
.mo-page h4{
    font-weight:bold;
}
.moderate-back{
    color:#2d2d2dd;
}
#assignedusersTable thead th{
    background-color:#cfe9d0 !important;
}
.advanced_new {
  background-color: #afc4ae;
  border-radius: 30px;
  color: #fff;
  height: 33px !important;
  padding: 5px 15px;
  border: 0;
  margin-top: 11px;
  margin-right: 10px;
  float: right;
  font-family: 'myriad_proregular';
}
.advanced_new_2{
  background-color: #afc4ae;
  border-radius: 30px;
  color: #fff;
  height: 33px !important;
  padding: 5px 15px;
  border: 0;
  margin-top: 5px;
  margin-right:25px;
  float:left;
  font-family: 'myriad_proregular';
}
.reset_recipe_filter_btn{
    padding:0 !important;
}
.reset_recipe_filter_btn img{
    width:50px !important;
    height:50px !important;
}
.advance_search_wrapper .user_filter_section{
    justify-content:center !important;
}
.slick-prev{
    padding:0 !important;
}
.slick-next{
    padding:0 !important;
}
.slick-slide{
    height:auto !important;
}
.cancel_friend {
  background-color: #9fb89e;
  padding:7px 10px 5px 10px;
  border: 0;
  border-radius: 50px;
  color: #fff;
  border:2px solid #738672;
  font-size:14px;
  font-family: 'myriad_proregular';
}
.hide_friend{
  background-color: #9fb89e;
  color: #fff;
  font-size: 15px;
  padding: 4px 9px;
  border-radius: 50px;
  border: 0;
  font-family: 'myriad_proregular';
  margin-left:5px;
}
#contact-list .contact-item{
    padding:15px 10px;
}
.expand_new{
  background-color: #afc4ae;
  border-radius: 30px;
  color: #fff;
  height: 33px !important;
  padding: 5px 15px;
  border: 0;
  margin-top: 15px;
  margin-right: 20px;
}
::-webkit-scrollbar-track {
  background: #f0f0f0;
  background: none; /* background of the track */
}

::-webkit-scrollbar-thumb {
  background-color: #f8a494; /* color of the scroll handle */
  border-radius: 10px; /* roundness of the handle */
  border: 3px solid #f8a494; /* padding around the handle */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #f8a494;
}
#clear_search {
  background-color: #ff8f7a;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  text-align: center;
  line-height: 1.6;
  font-size: 10px;
}
.feed_filter_buttons .selected_filter{
    background-color:#fac1b7;
    border:0 !important;
    color:#fff;
}
#newGroupModal .modal-footer #createGroupBtn{
    background-color:#ff8f7a;
    border:0;
}
#newGroupModal .modal-footer .btn-secondary{
    background-color:#9fb89e;
    border:0;
}
.contact_details .badge{
     font-size:12px !important;
}
.feed_filter_buttons .user_filter{
    background-color:#fff;
    border:1px solid #a3a3a3;
    color:#a3a3a3;
    font-weight:normal;
}
body{
    margin:0;
    padding:0;
    font-family: 'rocaone-rgregular';
    height: 100%;
    overflow-x:hidden;
    overflow-y:auto !important;
}
.video-book {
    margin-top: 200px !important;
}
.video-book h2{
    margin-top:20px;
}
.serchcookbooktext{
    width:100% !important;
}
.main_reel_section_top h2{
    font-size: 60px;
    margin-bottom: 20px;
    font-weight: bold;
}
.main_reel_section_top .refresh{
    float:right;
}
#dynamic-recipes .row{
    display:flex;
}
#dynamic-recipes .row .col-md-3{
    flex: 0 0 25%;
    max-width: 25%;
}
.serchreeltext{
  border-radius: 50px;
  margin-right: -5px;
  background-color: #fffcf8;
  border: 2px solid #a2b49a;
  padding: 9px 15px 5px 15px;
  width:100%;
  float: left;
}
.recipe_type_filter .filter_group {
  width: 18%;
  margin: 0 1%;
}
.selected_tags_container .tag-item {
  background-color: #e0f5e9;
  border: 1px solid #b2dfdb;
  color: #00796b;
  border-radius: 16px;
  padding: 6px 12px;
  font-size:13px;
  float: left;
  margin: 5px;
}
.system{
  font-family: 'myriad_proregular';
}
.system strong{
    color:#9fb89e;
    font-size:20px;
}
.two-factor{
  font-family: 'myriad_proregular';
}
.two-factor strong {
  color: #9fb89e;
  font-size: 20px;
}
.two-factor em{
  color: #fd8f7a;
}
.two-factor h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 17px;
}
.communications{
   font-family: 'myriad_proregular'; 
}
.communications .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.communications h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 17px;
}
.communications strong {
  color: #9fb89e;
  font-size: 20px;
}
.communications label{
  color: #fd8f7a;
}
.store{
   font-family: 'myriad_proregular'; 
}
.store h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 17px;
}
.store strong {
  color: #9fb89e;
  font-size: 20px;
}
.store p{
    color:#fd8f7a;
}
.system h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 17px;
}
.linked{
   font-family: 'myriad_proregular'; 
}
.linked h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 17px;
}
.linked p{
  color: #fd8f7a;
  font-size: 20px;
}
.linked p strong{
  color: #a9c0aa;
}
.linked button{
    padding: 0.4rem 0.8rem;
    background: #2980b9;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s ease;
    margin-bottom:20px;
    font-size: 20px;
}
.tokens{
   font-family: 'myriad_proregular'; 
}
.tokens h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 17px;
}
.tokens p{
  color: #fd8f7a;
  font-size: 20px;
}
.tokens .stat-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.tokens .stat {
  background: #ecf0f1;
  padding: 1rem;
  flex: 1;
  min-width: 160px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  color: #2c3e50;
  font-size: 22px;
}
.transactions{
   font-family: 'myriad_proregular'; 
}
.transactions h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 17px;
}
.transactions .scroll-box {
    max-height:300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
    padding: 1rem;
    margin-top: 1rem;
}
.transactions .scroll-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.transactions .scroll-box li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #ddd;
    font-size: 0.95rem;
}
.transactions .scroll-box li span{
    color:#fd8f7a;
    font-size:20px;
}
.banned{
   font-family: 'myriad_proregular'; 
}
.banned h2{
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 17px;
}
.banned .scroll-box {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fafafa;
  padding: 1rem;
  margin-top: 1rem;
}
.banned .scroll-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.banned .scroll-box li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #ddd;
    font-size: 0.95rem;
}
.banned .scroll-box li span{
    color:#fd8f7a;
    font-size:20px;
}
.banned .btn{
    padding: 0.4rem 0.8rem;
    background: #7f8c8d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size:20px;
    transition: background 0.2s ease;
}
#fullWidthBtn{
    border:0;
    background:none;
}
#show-plus-icon img{
    width:57px !important;
}
#halfWidthBtn{
    border:0;
    background:none;
}
.tag_search {
  background-color: inherit;
  border: 0;
}
.tag_search img{
  width:70px;
  height:70px;
}
#sent-request h3 {
  font-size: 75px;
  color: #ec8c79;
  margin: 0px 0 20px 0;
  font-weight: 700;
}
.sent-user {
  width: 12.5%;
  text-align: center;
}
.sent-user img{
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:10px;
}
.sent-user h4{
    text-align: center;
    font-size: 14px;
    margin: 15px 0;
    font-family: 'myriad_proregular';
}
#sent-request .row {
  background-color: #fffdf7;
  border-radius: 20px;
  padding: 30px;
  border: 1px solid #d6d6d6;
}
.sent-user button{
  background-color: #9fb89e;
  color: #fff;
  font-size: 15px;
  padding: 4px 9px;
  border-radius: 50px;
  border: 0;
  font-family: 'myriad_proregular';
}
.add_hashtag img{
    width:60px;
    height:60px;
}
.reset_filter_btn img{
    width:60px;
    height:60px;
}
.create_new_collection{
    text-align:right;
}
.tag_name::before{
    content:"#";
}
.tag_close{
    margin-top:0 !important;
}
.tag_close i{
    color:#555;
}
.recipe_type_filter .filter_dropdown_toggle{
    width:100%;
    float:left;
    background-color:#fff;
    border:1px solid #9fb89e;
    color:#9fb89e;
    border-radius:50px;
    padding:10px 25px;
}
.filter_group .filter_dropdown{
    margin-top:50px;
    height:400px;
    overflow-x:hidden;
    overflow-y:scroll;
    scrollbar-width:thin;
}
.deselect_all{
    color:#ff8f7a;
}
.link-preview img{
    border-radius:5px;
}
.link-preview a {
  color: #2d2d2d;
  margin-top: 5px !important;
  float: left;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}
.personal-profile p{
    color:#f8a495 !important;
    font-size:20px;
}
.personal-profile p strong{
    color:#9fb89e !important;
}
.personal-profile{
    color:#f8a495;
    font-family: 'myriad_proregular';
}
#recover #email{
    padding:10px;
}
#recover label{
  width: 100%;
  text-align: center;
  color: #9fb89e;
  font-size: 21px;
}
.main_reel_section_top .cust-reel-head div{
    width:70%;
}
#recover {
  height: 100vh; /* Full screen height */
  display: flex;
  align-items: center; /* Vertical center */
  justify-content: center; /* Horizontal center */
  background-image:url(../img/login.jpg);
  background-position: center;
  background-size:cover;
}
.recov-but{
    background-color:#f8a495;
}
.reel_btn_icon{
    text-align:center;
}
.recov-but {
  background-color: #f8a495;
  border: 0;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
}
.reel_btn img{
    width:27px;
}
#recover .card {
  width: 100%;
  max-width: 520px;
  margin: auto;
  border-radius: 15px;
  padding: 40px 30px !important;
}
#recover .center-box {
     height: 100vh;
}
#recover .container {
  max-width: 800px;
  width: 100%;
}
.cust-reel-head h4{
    font-size:70px;
    font-weight:bold;
}
.cust-reel-head div{
    width:50%;
}
.recover {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* center logo in column */
}
.form-wid-10 {
  width: 100%;
}
.recipes_content{
  background-color: #fdfbf5;
  background-image: url(../img/veg.png);
  padding: 30px;
  border-radius: 50px;
  margin-top:30px;
}
.recipe_small_title{
  font-size: 50px;
  color: #2d2d2d;
}
.recipe_count_text{
  font-size:24px;
  color: #2d2d2d;
}
.new_shopping_list{
    width:100%;
    float:left;
    margin:0;
    padding:0;
}
#new-pass #email{
    padding:10px;
}
#new-pass label {
  width: 100%;
  color: #9fb89e;
  font-size: 17px;
  margin-bottom: 5px;
}
#new-pass {
  height: 100vh; /* Full screen height */
  display: flex;
  align-items: center; /* Vertical center */
  justify-content: center; /* Horizontal center */
  background-image:url(../img/login.jpg);
  background-position: center;
  background-size:cover;
}
.new-pass-but{
    background-color:#f8a495;
}
.new-pass-but {
  background-color: #f8a495;
  border: 0;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
}
#new-pass .card {
  width: 100%;
  max-width: 520px;
  margin: auto;
  border-radius: 15px;
  padding: 40px 30px !important;
}
#new-pass .center-box {
     height: 100vh;
}
#new-pass .container {
  max-width: 800px;
  width: 100%;
}
.new_shopping_list li {
  width: 100%;
  float: left;
  margin:10px 0;
  padding: 0;
}
.sp_image{
    display:flex;
    gap:10px;
}
.new_shopping_list li input[type="checkbox"] {
  width:20px;
  accent-color: #a9c0aa;
}
.new_shopping_list .sp_image{
    width:12%;
    float:left;
}
.new_shopping_list .sp_title {
  width: 58%;
  float: left;
  margin: 0 1%;
  font-size: 25px;
}
.new_shopping_list .accordion-toggle{
    width:20%;
    float:left;
    font-size:24px;
}
.new_shopping_list .accordion-panel h4{
    width:100%;
    float:left;
    color:#9fb89e;
}
.new_shopping_list .accordion-panel ol{
    width:100%;
    float:left;
    padding:0;
}
.new_shopping_list .accordion-panel ol li {
  width: 100%;
  float: left;
  margin: 0 0 0 15px;
  padding: 0;
  list-style-type: circle;
}
.new_shopping_list .delete_shopping_list{
    width:8%;
    float:left;
}
.new_shopping_list .sp_image img{
    width:100% !important;
    float:left;
    height:100px;
    object-fit:cover;
    border-radius:15px;
}
.pop_up_list a{
    font-size:12px !important;
    text-align:left;
}
.recipe_toggle_list {
  background-color: #fd8f7a;
  padding:15px 40px 11px 40px;
  color: #fff;
  font-size: 17px;
  display: block;
  float: right;
  border-radius: 30px;
  border: 0;
}
.recipe_search_area{
    width:100%;
    float:left;
    margin-top:20px;
}
.recipe_search_area input{
  width:99%;
  float: left;
  padding: 10px 20px 7px 20px;
  border-radius: 30px;
  border: 2px solid #a2b49a;
  background-color: #fffcf8;
}
#recipes_count{
}
.recipe_search_area button{
  width: auto;
  background-color: #f8a494;
  float: left;
  padding: 11px;
  border: 0;
  border-radius: 30px;
  margin-left: -48px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin-top: -4px;
  position: relative;
}
.recipe_search_area button img{
  width:30px;
  height:30px;
}
.recipe_container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
    }

    .recipe_block {
      width: clamp(200px, 22vw, 320px);
      background: #fff;
      border: 1px dashed #ccc;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease;
    }
    .recipe_author {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
    .recipe_author_name {
       font-weight: 900;
       font-size: 0.9rem;
       white-space: nowrap;
       color: rgba(0, 0, 0, 0.7);
       letter-spacing: -0.02em;
       text-align:left;
    }

    .recipe_reactions {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
    }

    .recipe_reactions img {
      cursor: pointer;
    }

    .scale_label {
      text-align: center;
      font-size: 14px;
      margin-bottom: 8px;
      color: #888;
    }
*{
    margin:0;
    padding:0;
    list-style:none;
    text-decoration:none;
}
.create_new_cookbook{
  position: relative; /* Needed for tooltip positioning */
  cursor: pointer;
}

/* Tooltip text container */
.create_new_cookbook::after {
  content: "New Cookook";
  position: absolute;
  bottom: -70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffe3dc;
  color: #707070;
  padding: 6px 10px;
  border-radius:20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size:14px;
  z-index: 1000;
}

/* Show tooltip on hover */
.create_new_cookbook:hover::after,
.create_new_cookbook:hover::before {
  opacity: 1;
}
.create_new_cookbook{
  color: #fff;
  border-radius: 40px;
  padding: 5px !important;
  border: 0;
  width: auto !important;
  float:right !important;
}
#createrecipemodalmain button.btn-close{
    color:#fff;
}
.show_create_recipe_modal {
  position: relative; /* Needed for tooltip positioning */
  cursor: pointer;
}

/* Tooltip text container */
.show_create_recipe_modal::after {
  content: "Create a new recipe";
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffe3dc;
  color: #707070;
  padding: 6px 10px;
  border-radius:20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size:14px;
  z-index: 1000;
}
.profile-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.profile-header h2 {
  margin: 0;
  font-size: 28px;
  color: #2c3e50;
}
.profile-header a{
    font-size: 0.95rem;
    color: #3498db;
    text-decoration: none;
}
/* Show tooltip on hover */
.show_create_recipe_modal:hover::after,
.show_create_recipe_modal:hover::before {
  opacity: 1;
}
.show_create_recipe_modal{
  color: #fff;
  border-radius: 40px;
  padding: 5px !important;
  border: 0;
  width: auto !important;
  float:right !important;
}
.dummy-ad{
    display: flex;
    flex-direction: column;
    height: 100%;
}
#right-icons .show_create_recipe_modal {
  float: left !important;
  padding-top:0 !important;
  margin-right:24px;
}
#recipeCommentsModalLabel{
    text-align:center;
    color:#ff8f7a;
    font-size:40px;
}
#recipeCommentsModal p{
    text-align:center;
    font-size:18px;
    color:#6c757d;
    font-weight:bold;
}
.close_comment{
  background-color: #fff;
  padding: 5px 20px;
  border-radius: 40px;
  margin-bottom: 10px;
  color: #f8a494;
  border: 1px solid #f8a494;
}
.recipe_filter_group button{
  width: 100%;
  float: left;
  margin: 1%;
  background-color: #fff;
  padding: 10px 25px;
  border: 1px solid #A2b49a;
  border-radius: 50px;
  color: #A2b49a;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
}
.meal_planner_header{
    margin-top:40px;
}
.today_mp{
  background-color: #fff;
  padding: 12px 40px;
  border-radius: 50px;
  border: 2px solid #b6cfb4;
}
.todays_date{
  background-color:#b6cfb4;
  color:#fff;
  padding: 12px 40px;
  border-radius: 50px;
  text-align:center;
}
.week_filter_section{
    text-align:center;
}
#view_single_selected_recipe_mp{
    background-color:#fef7ef;
    padding:30px;
    border-radius:20px;
}
#save-shopping-list{
    background-color:#f27b65;
    border-radius:50px;
    padding:12px 30px;
    color:#fff;
    text-decoration:none;
    margin-top:10px;
    float:left;
    border:0;
}
#view_complete_recipe{
    background-color:#f27b65;
    border-radius:50px;
    padding:12px 30px;
    color:#fff;
    text-decoration:none;
    margin-top:20px;
    float:left;
}
.cookbook_single_info {
  text-align: center;
  background-color: #fefaf2;
  border-radius: 30px;
}
.cook_book_cover img {
  border-radius: 40px;
  height: 550px;
  object-fit: cover;
  width: 80%;
  margin-top: 50px;
}
.cookbook_title h2 {
  color: #a0b89e;
  font-size: 80px;
  margin-top: 30px;
  margin-bottom: 0;
}
.cookbook_info p {
  color: #a0b89e;
  font-size: 24px;
  margin-top: 0px;
}
#view_single_selected_recipe_mp .col-md-4 img {
  border-radius: 20px;
  height: 270px;
  object-fit: cover;
}
.shopping_list_mp{
    background-color:#fff;
    padding:20px;
    border-radius:20px;
    width:100%;
    float:left;
}
#view_single_selected_recipe_mp h3{
    font-size:30px;
    font-weight:bold;
    color:#9eb89d;
}
#view_single_selected_recipe_mp ul{
     padding:0;
}
#view_single_selected_recipe_mp li{
     color:#9eb89d;
}
.ingredients_contain_mp{
    background-color:#fff;
    padding:20px;
    border-radius:20px;
    width:100%;
    float:left;
}
.instructions_contain_mp{
    background-color:#fff;
    padding:20px;
    border-radius:20px;
    width:100%;
    float:left;
}
#view_single_selected_recipe_mp h2{
  color: #f27b65;
  text-align: center;
  font-size: 50px;
  align-content: center;
  align-items: center;
}
.week_range{
  font-size: 36px;
  width: 100%;
}
.week_filter_options button{
    background-color:inherit;
    border:0;
}
.week_name{
    color:#767676;
}
.day_green_section {
  background-color: #e5eee6;
  padding: 19px;
  border-radius: 15px;
  height: 380px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}
.recipe_content {
  background-color: #fff;
  border-radius:10px;
  padding: 15px;
  float: left;
  width: 100%;
  margin-bottom: 10px;
  margin-top:10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.recipe_title_mp {
  width: 75%;
  float: left;
  font-size: 15px;
  align-content: center;
  align-items: center;
  line-height: 15px;
}
.recipe_image_mp {
  width: 14%;
  float: right;
  margin-left: 2%;
}
.recipe_image_mp img {
  border-radius: 8px;
  width: 100% !important;
  height: 35px;
  object-fit: cover;
}
.recipe_delete {
  width: 100%;
  float: left;
  text-align: right;
}
.recipe_delete i {
  background-color: #f27b65;
  font-size: 10px;
  padding: 3px 4px;
  border-radius: 19px;
  color: #fff;
  margin-top: -22px;
  margin-right: -19px !important;
  float: right;
}
.day_red_section .recipe_image_mp img {
  height: 30px;
}
#submitNote {
  background-color: #f27e68;
  color: #fff;
  padding: 7px 20px;
  border-radius: 50px;
  border: 0;
}
#confirmDeleteNote{
  background-color: #f27e68;
  color: #fff;
  padding: 7px 20px;
  border-radius: 50px;
  border: 0;
}
.day_red_section {
  background-color: #fdeae6;
  padding: 15px;
  border-radius: 15px;
  float: left;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  height:370px;
  scrollbar-width: none;
}
.additional_notes {
  width: auto;
  margin-top: -15px !important;
  margin-right: -16px !important;
  cursor: pointer;
}
.additional_notes_section .note_value {
  list-style-type: disc;
  padding:15px 20px;
  width:100%;
  float: left;
  margin-right: 2%;
  background-color: #fff;
  padding:10px !important;
  box-sizing: border-box;
  border-radius:13px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.note_value p {
  margin-bottom: 0;
  width: 100%;
  float: left;
}
.note_value small{
  margin-bottom: 0;
  width: 100%;
  float: left;
}
.col-md-3 .recipe_header {
  margin-top: 3px;
  text-align: left;
}
.note_value {
  background: white;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  align-items: center;
  justify-content: space-between;
}
.notes_header h3{
    font-weight:bold;
    text-transform:uppercase;
    color:#000;
}
.note_delete {
  background-color: #f27b65;
  font-size: 10px;
  padding: 3px 4px;
  border-radius: 19px;
  color: #fff;
  float: right;
  margin-left: 10px;
  margin-top: 4px;
}
.day_red_section h3{
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.notes_header button {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 6px;
  color: #d68479;
  background-color: inherit;
  border: 0;
  text-transform: lowercase;
}
.create_new_daily_recipe {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 6px;
  color: #d68479;
  background-color: inherit;
  border: 0;
  text-transform: lowercase;
}
.column-3{
     display: flex;
     gap: 20px; /* Equal gap between all columns */
}
.column-3 .column {
      padding: 20px;
      background-color: #e0e0e0;
      flex-grow: 0;
    }

.column-3 .col1, .col2 {
      width:36%;
    }

.column-3 .col3 {
      width:28%;
    }
.meal_planner_content{
  background-color: #fdfbf5;
  background-image: url(../img/veg.png);
  padding: 30px;
  border-radius: 50px;
  font-family: 'myriad_proregular';
}
.day_green_section h3{
    font-weight:bold;
}
.additional_notes_section {
  background-color: #f1f3f7;
  padding:15px;
  border-radius: 20px;
  width: 100%;
  float: left;
  height: 380px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}
.recipe_header {
  color: #ff8f7a;
  text-align:left;
}
.meal_planner_header h2 {
  color: #484752;
  font-size: 90px;
  font-weight: bold;
}
#open-all-tabs{
    margin-left:10px;
}
.generate-list{
    float:right;
    text-align:right;
}
.meal_planner_header input{
  width:98%;
  float: left;
  padding: 10px 20px 7px 20px;
  border-radius: 30px;
  border: 2px solid #a2b49a;
  background-color: #fffcf8;
}
#search_meal_panner_btn{
  width: auto;
  background-color: #f8a494;
  float: left;
  padding: 11px;
  border: 0;
  border-radius: 30px;
  margin-left: -48px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin-top: -4px;
  position: relative;
}
#search_meal_panner_btn img{
  width:30px;
  height:30px;
}
.share_comment{
  background-color: #f8a494;
  padding: 5px 20px;
  border-radius: 40px;
  margin-bottom: 10px;
  color: #fff;
  border:0;
}
#post-container .cus-col{
    border-radius:10px;
}
.cus-col i{
    font-size:30px;
    cursor:pointer;
}
#related_images_input{
  border-radius: 50px;
  border: 1px solid #f68e7c;
  color: #f68e7c;
}
#image_visibility{
  border-radius: 50px;
  border: 1px solid #f68e7c;
  color: #f68e7c;
}
.cus-col .fa-heart{
    font-size:30px;
    color:#f8a494 !important;
    cursor:pointer;
}
#load-more-posts{
    width:auto !important;
    float:none !important;
    background-color:#f68e7c !important;
}
#post-container .cus-col img{
  height: 100%;
  max-height: 200px;
  object-fit: cover;
}
#post-container h5{
  font-size: 18px;
  margin: 20px 0 10px 0 !important;
}
#loadMoreRecipes {
  background-color: #9fb89e;
  border-radius: 50px;
  padding: 10px 25px 7px 25px;
  border: 0;
  font-size: 20px;
}
.related-para{
    width:100%;
    float:left;
    font-size:16px;
    color:#333333;
}
#related_images_modal label {
  color: #f68e7c;
  font-size: 20px;
  font-weight: 700;
}
#related_images_modal small {
  width: 100%;
  float: left;
  font-size: 13px;
  margin-top: 12px;
  color: #505050;
  font-weight:normal;
}
#related_images_modal h6 {
  width: 100%;
  float: left;
  font-size: 14px;
  margin-top: 15px;
  line-height: 22px;
}
#related_images_modal h6 a{
  color:#9fb89e;
}
#relatedImagesModalLabel {
  color: #f68e7c;
  font-size: 30px;
  font-weight: bold;
}
.view_recipe_comments .comment_list{
    width:70%;
    margin:auto;
    height:350px;
    border: 1px solid #d6d6d6;
    border-radius:30px;
}
.view_recipe_comments .comment_avtar {
   width:4%;
}
.view_recipe_comments .comment_user_details strong {
  font-size: 17px;
}
.view_recipe_comments .comment_user_details p{
    font-size:18px !important;
}
.view_recipe_comments .comment_avtar img {
  width: 44px;
  height: 44px;
  border: 2px solid #9fb89e;
}
.view_recipe_like_ico{
  border: 2px solid #f9b6a9 !important;
  border-radius: 50px;
  padding: 11px;
  margin-top: 0px;
}
.view_recipe_like_ico i{
  color: #f9b6a9;
  font-size: 27px;
}
#related .related-para{
    width:100%;
    float:left;
    color:#464646;
    font-size:16px;
    text-align:left;
}
.view_all_btn{
  width: auto;
  background-color: #fff;
  padding: 10px 30px;
  border-radius: 40px;
  border: 1px solid #ff8f7a;
  color:#ff8f7a;
  text-decoration:none;
  margin-top:20px;
  float:left;
}
.find_friends_btn {
  width: auto;
  background-color: #f68e7c;
  padding: 10px 30px;
  border-radius: 40px;
  border: 0;
  color: #fff;
  text-decoration: none;
  margin-top: 20px;
  float: right;
}
.who-recipe{
    width:100%;
    float:left;
    padding:20px 0;
}
#your #view_all_suggestions_friends {
  width: auto;
  background-color: #fff;
  padding: 10px 30px;
  border-radius: 40px;
  border: 1px solid #ff8f7a;
  color: #ff8f7a;
  text-decoration: none;
  float: left;
  margin-top: 20px;
}
#comment-text {
  height: 90px;
  margin-bottom: 10px;
  border: 1px solid #a0b89e;
  border-radius: 20px;
}
#recipeCommentsModal ul li img{
    width:80px;
}
#recipeCommentsModal ul li span{
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #6c757d;
}
.rating-options{
    width:100%;
    float:left;
    text-align:center;
    padding:0;
}
.rating-options li{
    width:31.333%;
    float:left;
    margin:1%;
}
.comment_area h2{
    margin-top:20px;
    color: #ff8f7a;
    font-size:36px;
}
.form-wid-4 {
    width: 48%;
    float: left;
    margin-left: 2%;
    align-items: center;
    align-content: center;
    height: 350px;
}
.form-wid-6 {
    width: 50%;
    float: left;
    border-left: 2px solid #fff;
    padding-left: 50px;
}
.form-wid-10{
    width:100%;
    float:left;
}
.modal.show .modal-dialog {
  z-index: 999999 !important;
}
.border-white {
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 20px;
  margin:20px 0 !important;
}
.border-white p{
  margin:0 !important;
}
.global_search .row{
    background-color:#fefaf2;
    padding:20px;
    border-radius:20px;
}
.global_search-head{
    width:100%;
    float:left;
    margin:20px 0;
}
.global_search-head h2{
    width:100%;
    float:left;
    font-size:70px;
    color:#484752;
    font-weight:bold;
}
.global_search-head hr{
  border: 2px solid #f7beb2;
  margin-top: 20px;
  float: left;
  width: 100%;
}
.main_recipes_section hr{
  border: 2px solid #f7beb2;
  margin-top: 20px;
  display:block;
}
.global_search-head h6{
    width:100%;
    float:left;
    font-size:24px;
    color:#555555;
}
.global_search-head h6 strong{
    color:#a1b99f;
}
.global_search-head h6 span{
    color:#f8a494;
}
#view-recipe .container{
    background-color:#fefaf2;
    padding:20px;
    border-radius:20px;
}
.home-share .content h4{
  font-size: 18px;
  text-align: center;
  border-top: 1px solid #3a3a3a;
  color: #474747;
  padding-top: 12px;
  font-weight:normal;
}
.close_share {
  background-color: #fff;
  padding: 5px 30px;
  border-radius: 50px;
  border: 1px solid #ff8f7a;
  color: #ff8f7a;
  float: right;
  margin-top: 15px;
}
.selected_recipe_mp{
    width:100%;
    float:left;
    margin-bottom:20px;
}
.recipe_mp_form input{
    border-radius:30px;
    border:1px solid #bfccba;
}
.recipe_mp_form select{
    border-radius:30px;
    border:1px solid #bfccba;
}
.recipe_mp_form textarea{
  height:90px;
}
.invite_guest_btn {
  background-color: #ff8f7a;
  padding: 7px 20px 3px 20px;
  border-radius: 50px;
  border: 0;
  color: #fff;
}
.selected_recipe_mp .recipe_title_mp {
  width: 83%;
  float: left;
  margin-right: 2%;
  font-size: 22px;
  color: #434343;
  line-height:30px;
}
.attendees_block span{
    float:right;
    margin-top:25px;
}
.cancel_btn{
    background-color:#fff;
    border:1px solid #f6a190;
    color:#f6a190;
    border-radius:40px;
    padding: 6px 30px;
}
.save_button{
    background-color:#f6a190;
    color:#fff;
    border-radius:40px;
    padding: 6px 30px;
    border:0;
}
.selected_recipe_mp .recipe_image_mp{
    width:15%;
    float:left;
    margin-left:0;
}
.selected_recipe_mp .recipe_image_mp img{
    width:100%;
    border-radius:10px;
}
#mealPlannerModal h5 {
  color: #f6a190;
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  width: 100%;
}
#select_cook_book {
  width: 100%;
  float: left;
  background-color: #fff;
  border-radius: 50px;
  border: 1px solid #f6a190;
  padding: 6px 10px;
  color: #d6d6d6;
  margin-bottom: 5px;
}
.create_new_cookbook {
  color: #fff;
  border-radius: 40px;
  border: 0;
  width: auto !important;
  float: right;
}
h2.page_title{
    font-size:75px;
    color: #ec8c79;
    font-weight:700;
}
#friend-search-input {
  padding: 5px 20px 5px 20px;
  border-radius: 30px;
  border: 2px solid #a2b49a;
  background-color: #fffcf8;
}
.rest_friends_filter{
  width: auto;
  float: left;
  background-color: #fabaae;
  color: #fff;
  border: 0;
  margin-left: 1%;
  padding: 11px;
  border-radius: 30px;
  position: relative;
}
#search_friends_btn {
  background-color: #f8a494;
  padding:14px;
  border: 0;
  border-radius: 30px;
  margin-left: -39px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin-top: -1px;
  position: relative;
  color: #fff;
}
.unfollow{
  background-color: #a2b49a;
  color: #fff;
  font-size: 13px;
  border-radius: 50px;
  padding: 5px 15px;
  border: 0;
  font-family: 'myriad_proregular';
}
#friends-container .chat-friend {
  background-color: #a2b49a;
  color: #fff;
  font-size: 13px;
  border-radius: 50px;
  padding: 5px 4px 2px 4px;
  border: 0;
}
.reset_recipe_filters{
    padding:0;
}
.reset_recipe_filters img{
    width:50px;
    height:50px;
}
.freinds_area{
  background-image: url(../img/veg.png);
  border-radius: 20px;
  padding: 30px;
  border: 1px solid #efefef;
}
.friends_bg{
  background-color: #fffdf7;
  border-radius: 20px;
  padding: 30px;
  border: 1px solid #d6d6d6;
  margin: 30px 0;
}
#friends-container .delete-friend {
  background-color: #ff8f7a;
  color: #fff;
  font-size: 13px;
  border-radius: 50px;
  padding:5px 6px 2px 6px;
  border: 0;
}
#friends-container img{
    border-radius:10px;
}
#friends-container h4{
  font-size: 15px;
  margin-top: 13px;
}
#mealPlannerModal #recipe-name{
    font-size:20px;
}
#mealPlannerModal label {
  font-size: 18px;
  color: #282828;
  margin-top: 20px;
  margin-bottom: 2px;
}
#mealPlannerModal label button{
  background-color:#fff;
  border:1px solid #ff8f7a;
  border-radius:5px;
  color:#ff8f7a;
}
#google_translate_element {
  width: 155px;
  float: left;
  margin-top: 20px;
  overflow: hidden;
}
.home-share h4 {
  color: #f6a190;
  font-size: 34px;
  text-align: center;
  font-weight: bold;
}
.share-white {
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid #c5cfbe;
  background-color: #fff;
  padding: 20px;
}
#store-recipe .col-md-7{
  border:1px solid #f9c5bb;
  border-radius: 20px;
  padding:20px;
  margin-top:20px;
}
#sharing-recipe{
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#sharing-recipe table{
    background-color: rgb(255, 251, 246);
}
#sharing-recipe table b{
    margin-left:20px;
    color:#9fb89e;
}
#sharing-recipe table p {
  margin-left: 9px;
  float: left;
  margin-top: 15px;
}
#sharing-recipe table button:first-child{
    background-color:#9fb89e;
    border-radius:50px;
    padding:2px 15px 3px 15px;
    font-size:16px;
    color:#fff;
    border:0;
    margin-left:20px;
}
#sharing-recipe h3 {
  width: 100%;
  float: left;
  color: #f8a595;
  font-size: 28px;
}
#create-detailed aside{
  background-color: #fffbf6;
  padding: 30px 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid #e7e7e7;
}
.comment_user_details{
  width:70%;
  float: left;
  margin-left:3%;
}
.comment_user_details strong {
  width: 100%;
  float: left;
  font-size: 13px;
}
.comment_user_details p {
  width: 100%;
  float: left;
  font-size: 12px !important;
  text-align: left !important;
  font-weight: normal !important;
  margin-bottom:0;
}
#preparation-textarea{
    width:100%;
    float:left;
}
#meal-planner-list{
  padding: 30px 20px;
  background-image: url(../img/veg.png);
  background-color: #fdfbf5;
  margin-top: 30px;
  border-radius: 30px;
}
#notes h5{
    font-size:30px;
}
#recipe_ai #chat {
    width: 85%;
    position: relative;
    bottom: 70px;
}
.green_meal aside {
    width:100%;
    float:left;
  background-color: #e8eee8;
  padding: 20px !important;
  border-radius: 30px !important;
}
.green_meal aside h5{
  width:100%;
  float:left;
  font-size:30px;
}
.green_meal aside div.notes{
  width:49%;
  float:left;
  margin-right:1%;
  height:260px;
  overflow-y: scroll;
  scrollbar-color: #f9bfb5 #e8eee8;
  scrollbar-width: thin;
}
.red_meal .notes ul li span {
  width: auto;
  float: right;
  background-color: #ef9a8b;
  border-radius: 50px;
  padding: 0px 4px;
  color: #fff;
  font-size: 9px;
  margin-top: 5px;
}
.red_meal .recipe-item {
  width: 100%;
  float: left;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
}
.red_meal aside div strong {
  color: #f27e68;
  border-bottom: 2px solid #f27e68;
  padding-bottom: 5px;
  float: left;
  width: 100%;
  text-align: right;
  margin-bottom: 15px;
  text-decoration: none;
}
#reel-wrapper .dummy-ad img {
  height: 100% !important;
  margin-bottom: 0 !important;
}
.dummy-ad img {
  width: 100%;
  float: left;
  height:100%;
  border-radius:20px !important;
  object-fit: cover;
  margin-bottom:30px !important;
}
.main_recipes_section #create_new_recipe{
    width:100% !important;
    margin-bottom:20px;
}
.main_recipes_section .serchrecipetext{
    width:100%;
}
#recipe-books .advance_search_wrapper .user_filter_section{
    justify-content:left !important;
}
.selected_filter{
    background-color:#f8b2a5 !important;
    color:#fff !important;
}
#loadMoreCookbooks{
    background-color:#b4c9b6;
    border-radius:50px;
    border:1px solid #8ba98c;
}
.video-book .selected_filter{
    border:0 !important;
}
.video-book .user_filter {
  width: auto;
  float: left;
  text-align: center;
  border: 1px solid #c0c0c0;
  color: #c0c0c0;
  background: none;
  background-color: rgba(0, 0, 0, 0);
  background-color: #fff;
  padding: 8px 10px;
  border-radius: 30px;
  font-family: 'myriad_proregular';
  font-size: 15px;
  font-weight: 400;
}
#confirmdialyDeleteNote{
  background-color: #f27e68;
  color: #fff;
  padding: 7px 20px;
  border-radius: 50px;
  border: 0;
}
.red_meal .notes ul li {
  width: 100%;
  float: left;
  margin-bottom: 12px;
  border-bottom: 2px solid #fff;
  padding-bottom: 7px;
}
.red_meal div.notes strong{
  color: #f27e68;
  border-bottom: 2px solid #f27e68;
  padding-bottom: 5px;
  float: left;
  width: 100%;
  text-align: right;
  margin-bottom: 15px;
  text-decoration: none;
}
.green_meal .notes ul{
  width:100%;
  float:left;
}
.green_meal .notes ul li {
  width: 100%;
  float: left;
  margin-bottom: 12px;
  border-bottom: 2px solid #fff;
  padding-bottom: 7px;
}
#meal-planner-list .red_meal{
  background-color: #fdeae6;
  padding: 20px 10px 100px 10px;
  border-radius: 30px;
  float: left;
  height: 370px;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: #f9bfb5 #fefefe;
  scrollbar-width: thin;
  width: 18%;
  margin:1%;
}
#meal-planner-list aside h5{
  display: block;
  text-align: center;
  font-size: 30px;
}
.recipe_block_react_btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip styling */
.recipe_block_react_btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -80%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffe3dc;
  color: #808285;
  padding:6px 10px 3px 10px;
  border-radius: 26px;
  white-space: nowrap;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
  font-family: 'rocaone-rgregular';
}

/* Show tooltip on hover */
.recipe_block_react_btn:hover::after,
.recipe_block_react_btn:hover::before {
    opacity: 1;
}
.green_meal .notes ul li span {
  width: auto;
  float: right;
  background-color: #ef9a8b;
  border-radius: 50px;
  padding: 0px 4px;
  color: #fff;
  font-size: 9px;
  margin-top: 5px;
}
.green_meal aside div.sortable {
  width: 48%;
  float: left;
  margin-left: 2%;
  height:260px;
  overflow-y: scroll;
  scrollbar-color: #f9bfb5 #e8eee8;
  scrollbar-width: thin;
}
.green_meal .recipe-item {
  width: 100%;
  float: left;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  margin-bottom:5px;
}
.green_meal .recipe-item img{
    width:30%;
    float:right;
}
.green_meal .recipe-item div {
  width: 68%;
  float: left;
  margin-right: 2%;
  font-size: 12px;
}
.red_meal .recipe-item img{
    width:30%;
    float:right;
}
.red_meal .recipe-item div {
  width: 68%;
  float: left;
  margin-right: 2%;
  font-size: 12px;
}
.green_meal aside div strong{
  color: #f27e68;
  border-bottom: 2px solid #f27e68;
  padding-bottom: 5px;
  float: left;
  width: 100%;
  text-align: right;
  margin-bottom: 15px;
  text-decoration: none;
}
.notif{
  background-color: #db000a;
  color: #fff;
  padding: 11px 8px;
  border-radius: 50px;
  line-height: 0;
  font-size:12px !important;
  position: absolute;
}
#create-detailed aside a{
  color: rgb(255, 255, 255);
  font-size: 17px;
  border-radius: 60px;
  float: left;
}
.img-square{
  width: 100%;
  height:240px;
  object-fit: cover;
}
.img-cover {
  width: 100%;
  height: 450px;
  object-fit: cover;
}
#detailed-form #des-editor{
    width:100%;
    float:left;
}
#create-detailed aside h3 {
  color: rgb(248, 164, 148);
  font-size: 24px;
  float: left;
  font-weight: 600;
  margin-left: 17px;
  margin-top: 9px;
}
.remove-step {
  border: 1px solid #f9b2a4;
  background-color: #fff;
  color: #f9b2a4;
  padding: 10px 26px;
  border-radius: 40px;
  margin-top: 20px !important;
  float: left;
}
.preparation-step{
    margin-top:10px;
    width:100%;
    float:left;
}
#createrecipemodalmain .modal-dialog{
    max-width: 900px;
}
.object img {
  width: 200px;
  height:200px;
  border-radius:10px;
  object-fit: cover;
}
.object a {
  float: left;
  color: #9fb89e;
  text-decoration: navajowhite;
  width: 100%;
  margin-top: 14px;
  font-size: 20px;
}
#preparation #add_step_prepration{
    width:12%;
    float:left;
    background-color: #f6a190 !important;
    border-radius: 30px;
    border: 0;
    padding: 10px 20px;
    color: #fff;
    margin-right: 10px;
    margin-top:20px;
}
#create-detailed aside p {
  width: 90%;
  float: left;
  font-size: 18px;
  color: rgb(171, 170, 175);
  margin-left: 60px;
}
#category .tag-input-wrapper{
  width:50%;
  float:left;
  margin:10px 0;
}
#category .tag-input-wrapper input{
  width:100%;
  height:100px;
}
#category .dropdown-buttons{
  width:47%;
  float:left;
  margin-left:3%;
}
#category .dropdown-buttons button {
  width: 46%;
  float: left;
  background-color: #fff;
  margin: 1% 2%;
  border-radius: 50px;
  border: 1px solid #9fb89e;
  color: #9fb89e;
  padding: 13px;
}
#category .tag-input-wrapper .tag-container{
  width:100%;
  float:left;
  border:1px solid #d6d6d6;
  border-radius:15px;
  margin-bottom:10px;
}
#category #dropdown-menu{
  display: block;
  width: 100%;
  float: left;
  position: relative;
  top:15 !important;
  left:0 !important;
}
#page-back {
  width: auto;
  background-color: #9fb89e;
  border: 1px solid #d6d6d6;
  padding: 4px 40px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 20px;
  margin-bottom: 14px;
  color: #fff;
  line-height: 2;
}
#category #dropdown-menu aside {
  background-color: #fff;
  border-radius: 10px;
  padding: 8px;
  width: auto;
  float: left;
  border: 1px solid #d6d6d6;
  margin: 5px;
  color:#f6a190;
}
#category #dropdown-menu aside:hover{
  cursor:pointer;
}
#category .tag {
  width: auto;
  float: left;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  padding: 5px 10px;
  margin: 6px;
  border-radius: 11px;
}
#category .tag span{
  color:#9fb89e;
}
#category .tag .remove-tag {
  color: #2d2d2d;
  float: right;
  margin-left: 9px;
  cursor: pointer;
  font-size: 30px;
  height: 2px;
  line-height: 1;
}
#create-detailed aside form {
  width: 100%;
  float: left;
}
#create-detailed aside form input {
  width: 68%;
  float: left;
  padding: 7px;
  border-radius: 50px;
  border: 2px solid rgb(248, 164, 148);
  font-size: 14px;
}
#create-detailed aside form button {
  background-color: rgb(248, 164, 148);
  padding: 7px 20px 4px;
  border-radius: 50px;
  color: rgb(255, 255, 255);
  font-size: 18px;
  border: 0px;
  margin-left: 20px;
  float: right;
  margin-top: 0px;
  margin-bottom: 15px;
}
.chat-contact-list .border-end {
  background-color: #fff2f0;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
}
.chat_head {
  background-color: #ff8f7a;
  width: 100%;
  float: left;
  padding: 15px;
  border-radius: 7px;
  margin: 15px 0 20px 0;
  color: #fff;
  font-size: 20px;
}
.chat-contact-list #contact-list{
    background-color:#fff;
    border-radius:10px;
    padding:20px;
    width:100%;
    float:left;
}
.chat-contact-list{
    font-family: 'myriad_proregular';
}
.chat-contact-list .received{
    text-align: left;
    color: #444;
    background-color: #ffe8e3;
    padding: 20px;
    border-radius: 15px;
    width: 70%;
    float: left;
    font-size: 14px;
    line-height: 1.6;
    position:relative;
}
.chat-contact-list .sent{
    text-align: left;
    color: #444;
    background-color: #e6efe6;
    padding: 20px;
    border-radius: 15px;
    width: 70%;
    float: right;
    font-size: 14px;
    line-height: 1.6;
    position:relative;
}
.received::after {
  content: '';
  position: absolute;
  bottom: 0;
  left:30px;
  width: 0;
  height: 0;
  border: 20px solid transparent;
    border-top-color: transparent;
    border-bottom-width: 20px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    border-left-width: 20px;
    border-left-style: solid;
    border-left-color: transparent;
  border-top-color: #ffe8e3;
  border-bottom: 0;
  border-left: 0;
  margin-bottom: -18px;
}
#chat-area .bg-primary
.chat-contact-list .dot-menu {
  float: right;
  margin-top: -38px;
  font-size: 26px;
}
.chat-contact-list .chat-contact{
  margin-bottom:15px;
}
.chat-contact-list #contact-list img{
  float: left;
}
.chat-contact-list #contact-list span{
  margin-left: 12px;
  font-size: 20px;
  margin-top: 1px;
  float: left;
}
#sharing-recipe table button:last-child{
    background-color:#f8a494;
    border-radius:50px;
    padding:2px 15px 3px 15px;
    font-size:16px;
    color:#fff;
    border:0;
    margin-left:10px;
}
#sharing-recipe select{
    background-color: #9fb89e;
    border-radius: 50px;
    padding: 2px 15px 3px 15px;
    font-size: 16px;
    color: #fff;
    border: 0;
    margin-left: 20px;
}
#sharing-recipe td img{
  width:25px;
  height:25px;
  border-radius:100px;
  float:left;
  margin-bottom:15px;
  margin-top:5px;
}
#sharing-recipe td span{
    float: left;
  margin-top: 11px;
  margin-left: 10px;
}
#sharing-recipe td{
    border-right:1px solid #d6d6d6;
}
#search_friends_for_edit {
  width: 100%;
  float: left;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 16px;
  border: 1px solid #d6d6d6;
  padding: 8px 15px;
}
#friends-list th{
    padding:7px 10px 0 10px;
}
#friends-list td{
    padding:7px 10px 0 10px;
}
#sharing-recipe tr{
    border-bottom:1px solid #d6d6d6;
}
#sharing-recipe tr:first-child{
    border-bottom:0;
}
#sharing-recipe tr:last-child{
    border-bottom:0;
}
#store-recipe aside {
  background-color: #fef9f4;
  padding: 20px 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
}
#red-butt{
  width:auto;
  float: left;
  background-color: #f8a494;
  margin-left: 2%;
  border-radius: 50px;
  padding: 12px;
  border: 0;
  color: #fff;
  font-size:16px;
}
#store-recipe aside h3 {
  width: 100%;
  color: #f8a494;
  font-size: 24px;
  float: left;
  font-weight: 600;
  margin: 10px 0 6px 0;
}
#uploaded {
    width:100%;
    float:left;
}
#uploaded label{
    width:100%;
    float:left;
}
#uploaded iframe{
    float:left;
}
#uploaded button {
  width: auto !important;
  float: right !important;
  padding: 5px 35px !important;
}
#store-recipe aside span {
  width: 100%;
  color: #939393;
  font-size: 18px;
  float: left;
  font-weight: 500;
  margin-bottom: 10px;
}
#store-recipe aside p{
  width: 100%;
  color: #939393;
  font-size:16px;
  float: left;
  font-weight: 500;
}
#store-recipe aside select {
  width:100%;
  float: left;
  background-color: #fff;
  border: 1px solid #f8a494;
  border-radius: 50px;
  padding: 12px;
  color: #abaaaf;
}
#life-storage{
  background-color: rgb(255, 251, 246);
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#life-storage h3{
  width: 100%;
  float: left;
  color: #f8a595;
  font-size: 28px;
  margin-top: 20px;
}
#life-storage p{
  width: 100%;
  float: left;
  color: #abaaaf;
}
#congrats{
  background-color: rgb(255, 251, 246);
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#create-feed-reel{
  background-color: rgb(255, 251, 246);
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#create-feed-reel h3{
  width: 100%;
  float: left;
  color: #f8a595;
  font-size: 28px;
  margin-top: 20px;
}
#create-feed-reel input {
  width:100%;
  float: left;
  background-color: #fff;
  border: 1px solid #f8a494;
  border-radius: 50px;
  padding:10px 25px;
  color: #abaaaf;
  margin-bottom:20px;
}
#create-feed-reel span {
  width: 100%;
  float: left;
  color: #abaaaf;
  font-size: 18px;
  margin-bottom: 10px;
}
.related-social{
    margin-top:20px !important;
}
#create-feed-reel .form-group h5 {
  width: 87%;
  float: left;
  margin-top: 0px;
  margin-left: 2%;
  color: rgb(171, 170, 175);
  font-size: 24px;
}
#create-feed-reel .form-group {
  width: 100%;
  float: left;
  margin-top: 20px;
}
#create-feed-reel p{
  width: 100%;
  float: left;
  color: #abaaaf;
}
#congrats h3{
  width: 100%;
  float: left;
  color: #f8a595;
  font-size: 28px;
  margin-top: 20px;
}
#congrats p{
  width: 100%;
  float: left;
  color: #abaaaf;
}
#saved-generated ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
#saved-generated ul li {
  width: 23%;
  float: left;
  margin:1%;
  padding: 0;
}
#saved-generated ul li img {
  width: 100%;
  float: left;
}
#saved-generated h4{
  width:100%;
  float: left;
  font-size:22px;
}
#saved-generated{
  background-color: rgb(255, 251, 246);
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#life-storage b {
  width: 100%;
  float: left;
  color: #abaaaf;
  font-weight: normal;
  margin: 8px 0;
}
#life-storage b input{
  color: #f8a595;
}
#life-storage i {
  width: 100%;
  float: left;
  color: #abaaaf;
  font-weight: normal;
  font-size: 15px;
  margin-top: 20px;
}
#life-storage ul{
  width: 100%;
  float: left;
  margin:15px 0 0 0;
  padding:0;
}
#life-storage ul li{
  width: 100%;
  float: left;
  margin:0;
  padding:0;
  color: #abaaaf;
}
#store-recipe .form-group {
  width: 100%;
  float: left;
  margin-top: 20px;
}
#store-recipe .form-group h5 {
  width: 90%;
  float: left;
  margin-top: 0px;
  margin-left: 2%;
  color: #abaaaf;
  font-size: 24px;
}
#store-recipe aside #in{
  width:100%;
  float: left;
  background-color: #fff;
  border: 1px solid #f8a494;
  border-radius: 50px;
  padding: 12px;
  color: #abaaaf;
}
#store-recipe aside button {
  width: auto;
  background-color: #f8a494;
  border-radius: 50px;
  padding: 10px 20px;
  border: 0;
  color: #fff;
  font-size: 16px;
  margin-top: 20px;
}
#upload-video a{
    width:auto;
    float:left;
}
#upload-video form{
  width: 89%;
  float: left;
  margin-left: 2%;
  margin-top: 6px;
  font-size: 26px;
  color: #a5a6a9;
}
#upload-reel h3 {
  width: 100%;
  float: left;
  color: #9fb89e;
  font-size: 60px;
  font-weight: 800;
  margin-top: 30px;
}
#cookbook{
    width:100%;
    float:left;
    padding:20px 0;
}

#upload-video-2{
  background-color: #fffbf6;
  padding: 20px 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid #efefef;
}
#upload-video-2 a {
  color: #fff;
  font-size: 17px;
  border-radius: 60px;
  float: left;
}
#upload-video-2 p {
  width: 80%;
  float: left;
  font-size: 17px;
  color: #abaaaf;
  margin-left: 60px;
  line-height: 28px;
  text-align: left;
  margin-bottom: 0;
}
#upload-video-2 button {
  background-color: #f8a494;
  padding: 5px 20px 1px 20px;
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  border: 0;
  margin-left: 20px;
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}
#upload-video-2 ul {
  width: 100%;
  float: left;
  margin-top: 20px;
}
#upload-video-2 ul li {
  width: 80%;
  float: left;
  font-size: 17px;
  color: #abaaaf;
  margin-left: 30px;
  line-height: 28px;
  text-align: left;
  margin-bottom: 0;
}
#upload-video-2 h3 {
  color: #f8a494;
  font-size: 24px;
  float: left;
  font-weight: 600;
  margin-left: 17px;
  margin-top: 8px;
}
#upload-video-2 label {
  width: 100%;
  float: left;
  color: #abaaaf;
  font-size: 28px;
  margin-top: 20px;
}
#upload-video-2 .form-group {
  width: 100%;
  float: left;
  margin-top: 20px;
}
#cookbook h6{
    width:18%;
    float:left;
    margin-right:2%;
}
#cookbook select {
  width: 28%;
  float: left;
  margin-right: 2%;
  background-color: #fff;
  border: 1px solid #f8a494;
  border-radius: 50px;
  padding: 11px;
  color: #abaaaf;
}
#detailed-page h2 {
  width: 100%;
  float: left;
  padding: 0;
  font-size: 50px;
  color: #f6a190;
  margin: 20px 0 0 0;
}
#recipe-info ul li input{
    width:48%;
    float:left;
    margin-right:2%;
    background-color: #fff;
    border: 1px solid #f8a494;
    border-radius: 50px;
    padding:8px;
    color: #abaaaf;
}
#detailed-page aside p {
  width: 100%;
  float: left;
  color: rgb(171, 170, 175);
  font-size: 24px;
  margin:0;
}
#open_sharing_option_modal{
    width:auto !important;
    float:right !important;
    background-color:#9fb89e !important;
    color:#fff !important;
    padding: 7px 30px !important;
    margin-right:0 !important;
}
.detailed-button-green{
  width: auto;
  float: right;
  margin-right: 2%;
  background-color: #b7cab8;
  border-radius: 50px;
  padding: 7px 15px;
  border: 0px;
  color: rgb(255, 255, 255);
  font-size: 20px;
}
#recipe-info {
  width: 100%;
  float: left;
  padding-top: 0px;
}
#recipe-info ul{
  width:100%;
  float:left;
  margin:0;
  padding:0;
}
#recipe-info ul li{
  width:70%;
  float:left;
  margin:0;
  padding:0;
}
#recipe-info ul li:last-child{
  width:28%;
  float:left;
  margin-left:2%;
}
#recipe-info ul li img{
  width:100%;
  float:left;
  margin-bottom:30px;
  border-radius:10px;
}
#recipe-info p {
  border: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  color: #a8a9ae !important;
  margin-bottom: 10px !important;
}
#recipe-info button {
  float: left;
  background-color: #f6a190 !important;
  border-radius: 30px;
  border: 0;
  padding: 10px 20px;
  color: #fff;
  margin-right: 10px;
}
#recipe-info b {
  font-size: 24px;
  color: #4a4954;
  font-weight: 600;
  width: 100%;
  float: left;
  margin-top: 17px;
}
#detailed-page aside p label{
    float:right;
}
#recipe-info #youtube_url{
    width:70%;
    float:left;
    border-radius:50px;
    padding:10px;
}
#recipe-info #fetch_thumbnail{
    width:28%;
    float:left;
    margin-left:2%;
    margin-right:0;
}
#preparation-textarea .ck-blurred{
    height:200px;
}
#preparation-textarea .ck-editor__main{
    width:50%;
}
.note{
    width:50%;
}
#salad-recipe .ck-blurred{
    height:450px !important;
}
.ck-editor .ck-blurred{
    height:200px; 
    border-radius: 20px 20px 0 0 !important;
    padding:20px !important;
    
}
.ck-editor .ck-toolbar{
    border-radius:0 0 20px 20px !important;
}
#show_generate_ai_images{
    width:35% !important;
}
#cookbook button{
    width:28%;
    float:left;
    margin-right:2%;
    background-color: rgb(248, 164, 148);
    border-radius: 50px;
    padding:7px;
    border: 0px;
    color: rgb(255, 255, 255);
    font-size: 20px;
    margin-top:0;
}
.who-recipe label{
    font-size:30px;
    margin-right:1%;
    color:#2d2d2d;
    float:left;
}
#recipe_type{
    width:20% !important;
    cursor:pointer;
}
#detailed-page aside {
  background-color: #fefbf4;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  float: left;
  border: 1px solid #d6d6d6;
}
#detailed-page h3{
  color: #9fb89e;
  font-size:24px;
  font-weight: bold;
}
#detailed-page i {
  color: #9c9c9c;
  font-size: 100px;
  margin-left: 10px;
}
#detailed-page #social a{
  width:7% !important;
  margin-right:1% !important;
  margin-left:0 !important;
}
#recipe-info h3{
  color: #f6a190;
  font-size:24px;
  font-weight: bold;
}
#cookbook h6{
  color: #9fb89e;
  font-size:24px;
  font-weight: bold;
  padding: 5px 0;
}
#pro-tab tr{
    margin-bottom:12px;
}
#cookbook hr{
    width:100%;
    float:left;
    border:1px solid #afafaf;
}
#detailed-form input {
  width: 50%;
  float: left;
  background-color: #fff;
  border: 1px solid #929292;
  border-radius: 20px;
  padding: 8px;
  color: #abaaaf;
}
#detailed-form hr{
  width:100%;
  float: left;
  border:1px solid #5c5c5c;
  margin-top: 20px;
}
#salad-recipe{
    width:100%;
    float:left;
    margin-top:40px;
}
#salad-recipe h2{
    color: #f6a190;
    font-size: 24px;
    font-weight: bold;
    border-bottom:0;
}
#salad-recipe h3{
    color:#f6a190;
}
#salad-recipe ul{
    width:100%;
    float:left;
    margin:0;
    padding:0;
}
#salad-recipe figure{
    width:40%;
    float:left;
}
#salad-recipe figure:last-child{
    width:58%;
    float:left;
    margin-left:2%;
}
.ck-content{
    height:580px;
    border-radius:20px !important;
}
#category{
    width:100%;
    float:left;
}
#category figure{
    width:58%;
    float:left;
}
#category figure:last-child{
    width:40%;
    float:left;
    margin-left:2%;
}
#category figure textarea{
    width:100% !important;
    float:left;
}
#des-editor .ck-reset{
    width:50%;
}
#preparation{
    width:100%;
    float:left;
    border-top:1px solid #d6d6d6;
    border-bottom:1px solid #d6d6d6;
    padding:30px 0;
    margin:30px 0;
}
#preparation textarea{
    width:40% !important;
}
#preparation #preparation_step_img{
    width: auto;
    float: left;
    margin-left: 20px;
}
#preparation #preparation_step_img i{
  font-size: 116px;
}
#preparation h3 {
  font-size: 24px;
  color: #f8a494;
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}
#preparation h1 {
  font-size: 36px;
  color: #f8a494;
  font-weight: bold;
}
#category figure button {
  width: 48%;
  float: left;
  margin: 4px 1%;
  background-color: #fff;
  padding: 10px 10px;
  border: 2px solid #9fb89e;
  color: #9fb89e;
  border-radius: 40px;
}
#salad-recipe figure textbox{
    height:580px;
    border:1px solid #d6d6d6;
    border-radius:30px !important;
}
#upload-image{
  background-color: rgb(255, 251, 246);
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#drag{
  background-color: rgb(255, 251, 246);
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#drag h4{
  font-size: 20px;
  color: #bcbcbc;
  margin-bottom: 15px;
}
#image-generator{
  background-color: rgb(255, 251, 246);
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#image-generator h4{
  float: left;
  width: 100%;
  color:#a0b99f;
  font-size:40px;
  font-weight:bold;
}
#image-generator p{
  float: left;
  width: 100%;
  color:#bfbec1;
  font-size:20px;
}
#image-generator textarea {
  float: left;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #f6a190;
  height: 130px;
  padding: 20px;
}
#upload-image h3 {
  width: 100%;
  float: left;
  color: #f8a494;
  font-size: 22px;
  font-weight: 600;
}
#drag .crop-wrapper {
  width: 100%;
  margin: auto;
  position: relative;
}
#drag .crop-box {
  width: 100%;
  height: 200px;
  overflow: hidden;
  resize: vertical;
  border: 1px dashed #333;
  background: #fff;
  border-radius: 15px;
  padding: 20px;
}
#drag .crop-box img {
    width: 100%;
    height: auto;
    display: block;
}
#drag .hint {
    text-align: left;
    margin-top: 10px;
    color: #555;
    font-size: 14px;
}
#upload-image h4 {
  width: 100%;
  float: left;
  color: #f8a494;
  margin-top: 20px;
  font-size: 20px;
}
#upload-image .form-group h5 {
  width: 87%;
  float: left;
  margin-top: 5px;
  margin-left: 2%;
  color: #707070;
  font-size: 19px;
  font-weight: 500;
}
#upload-image p{
    width:100%;
    float:left;
    color:#bcbcbc;
}
#upload-image b{
    width:100%;
    float:left;
    color:#bcbcbc;
}
#cooking-player {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background:#000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  text-align: center;
}
#cooking-step{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    column-gap: 5rem;
}
.controls #prev-step {
  background-color: inherit;
  border: 0;
  color: #fff;
  text-align: center;
  margin-right: 15px;
}
.ingredient-section{
    width:100%;
    float:left;
    margin-top:10px;
}
.ingredient-section input {
  width: 100% !important;
  float: left;
  border-radius: 15px !important;
  border:1px solid #f8a494 !important;
}
.ingredient-section textarea{
    width:100% !important;
    float:left;
}
#add-ingredient-section {
  width: auto;
  float: left;
  background-color: #b7cbb5;
  border: 0;
  padding: 10px 20px;
  border-radius: 50px;
}
.ingredient-section .btn-danger{
   width: auto;
  float: left;
  background-color: #f8a495;
  border: 0;
  padding: 10px 20px;
  border-radius: 50px; 
}
#ingredients-list{
    width:100%;
    float:left;
    margin:0;
    padding:0;
}
#ingredients-list li{
    width:100%;
    float:left;
    text-align:left;
    margin:0;
    padding:0;
}
#voice_recognition_text {
  background-color: inherit;
  color: #2d2d2d;
  padding: 10px;
    padding-bottom: 10px;
  margin-top: 20px;
  border: 1px solid #d6d6d6;
  bottom: 0;
  position: fixed;
  width: 100%;
  border: 0;
    border-top-width: 0px;
    border-top-style: none;
    border-top-color: currentcolor;
  border-top-width: 0px;
  border-top-style: none;
  border-top-color: currentcolor;
  border-top: 1px solid #2d2d2d;
  border-radius: 0;
  color: #fff;
  padding-bottom: 0;
}
#cooking-step .step-image-container{
    
}
#cooking-step .step-image-container img {
    width: 100%;
    float: left;
    border-radius: 20px;
    max-width: 650px;
}
#cooking-step .step-content-container {
  text-align:center;
}
#next-step{
  font-size: 1.1rem;
  padding: 0.7rem 1.5rem;
  margin-right: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: #28a745;
  color: white;
}
#exit-player{
  background: #666;
  color: white;
  font-size: 1.1rem;
  padding: 0.7rem 1.5rem;
  margin-right: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#cooking-player h2{
    color:#fff;
    width:100%;
    float:left;
}
#cooking-player p{
    color:#fff;
    width:100%;
    float:left;
}
.player-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}
#next-step {
  margin-top: 20px;
  padding: 10px 20px;
}
#upload-image button {
  width: auto !important;
  float: left;
  border-radius: 7px;
  padding: 10px 25px;
  background-color: #f9b2a4;
  border: 0;
  color: #fff;
}
#image-generator button {
  width: 23% !important;
  float: left;
  border-radius: 50px;
  padding: 10px 20px;
  background-color: #f9b2a4;
  border: 0;
  margin-top: 20px;
  color: #fff;
}
#salad-recipe ul li{
    width:100%;
    float:left;
    margin:0;
    padding:0;
    font-size:20px;
    color:#5c5c5c !important;
}
#salad-recipe ul li p{
    color:#5c5c5c !important;
}
#salad-recipe p{
    font-size: 20px !important;
}
#detailed-form textarea{
  width:50%;
  float: left;
  background-color: #fff;
  border: 1px solid #f8a494;
  border-radius:20px;
  padding: 8px;
  color: #abaaaf;
  height:95px;
}
#detailed-form h3 {
  margin-top: 15px;
  margin-bottom:10px;
  float: left;
  width: 100%;
  color:#f6a190;
}
#detailed-form h2 {
  margin-top: 15px;
  margin-bottom: 10px;
  float: left;
  width: auto;
  color: #f6a190;
  font-size: 26px;
  font-weight: bold;
}
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content{
    border:0 !important;
}
.video-container {
      max-width: 640px;
      margin: auto;
      text-align: center;
      margin-bottom:20px;
    }

.video-container video {
      width: 100%;
      max-height: 360px;
      background: #000;
      margin-bottom: 10px;
    }
.video-container .controls button {
  margin: 5px !important;
  padding: 5px 8px !important;
  font-size: 14px !important;
  cursor: pointer;
  float: left !important;
}
.video-container input[type="file"] {
      margin-bottom: 15px;
}
.controls{
    width:100%;
    float:left;
    margin-top:50px !important;
}
#upload-reel aside{
  width:100%;
  float:left;
  margin:30px 0;
  background-color:#fef9f4;
  border-radius:30px;
  padding:20px;
  border:1px solid #ffe0da;
}
#upload-reel aside label{
  width:100%;
  float:left;
  color:#abaaaf;
  font-size:28px;
  margin-top:20px;
}
#upload-reel aside p{
  width:100%;
  float:left;
  color:#abaaaf;
  font-size:18px;
}
#upload-reel aside b{
  width:100%;
  float:left;
  color:#abaaaf;
  font-size:18px;
}
#meal-pop .col-md-7 {
  margin-top: 20px;
}
#meal-pop .tabs {
  margin: 0;
  background-color: #fdeae6;
  width: 100%;
  float: left;
  padding: 20px;
  max-width: 100%;
  border-radius: 10px;
}
#meal-pop #pro-tab button {
  margin-top: 0 !important;
  padding: 5px 15px;
}
#meal-pop table{
    background-color:#fff;
    padding:15px;
    border-radius:10px;
}
#meal-pop aside {
  background-color: #fdeae6;
  padding: 20px 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
}
#meal-pop aside h3 {
  width: 100%;
  color: #f8a494;
  font-size:30px;
  float: left;
  font-weight:500;
  margin: 10px 0 6px 0;
}
#meal-pop aside input{
  width: 100%;
  float: left;
  background-color: #fff;
  border: 1px solid #f8a494;
  border-radius: 50px;
  padding: 12px;
  color: #abaaaf;
  margin-bottom:10px;
}
#meal-pop aside select {
  width: 100%;
  float: left;
  background-color: #fff;
  border: 1px solid #f8a494;
  border-radius: 50px;
  padding: 12px;
  color: #abaaaf;
  margin-bottom:10px;
}
#meal-pop aside p{
  width: 100%;
  float: left;
  font-size:18px;
  color:#6f6f6f;
  margin-top:5px;
}
#meal-pop aside label{
  width: 100%;
  float: left;
  font-size:20px;
  color:#6f6f6f;
  margin-top:20px;
}
#meal-pop aside button {
  width: auto;
  background-color: #f8a494;
  border-radius: 50px;
  padding: 10px 20px;
  border: 0;
  color: #fff;
  font-size: 16px;
  margin-top: 20px;
}
#meal-pop aside label span{
  width:auto;
  float:right;
}
#meal-pop aside textbox{
  width: 100%;
  float: left;
  background-color: #fff;
  border: 1px solid #f8a494;
  border-radius:12px;
  padding: 12px;
  color: #abaaaf;
  margin-bottom:10px;
  height:80px;
}
#reel-buttons {
  width: 100% !important;
  float: left;
  margin:30px 0 0 0;
  padding: 0;
}
#reel-buttons li {
  width: 35% !important;
  float: left;
  padding: 0;
  margin-right: 13px;
  margin-left: 0 !important;
}
#reel-buttons li #white-butt{
    border:1px solid #f9b2a4;
    background-color:#fff;
    color:#f9b2a4;
}
#generated{
  background-color: rgb(255, 251, 246);
  padding: 20px;
  float: left;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgb(239, 239, 239);
}
#generated ul{
    width:100%;
    float:left;
    margin:0;
    padding:0;
}
#generated ul li {
  width: 23%;
  float: left;
  margin: 0 1%;
  padding: 0;
}
#generated ul li img{
    width:100%;
    float:left;
}
#generated ul li img:hover{
    border:3px solid #f8a494;
}
#saved-generated ul li img:hover{
    border:3px solid #f8a494;
}
#image-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border: 1px solid #ccc;
}
#drag #source-image {
    max-width: 100%;
    display: block;
}
.selected-rating {
  border: 3px solid #4f714e;
  border-radius: 50px !important;
}
#drag #crop-box {
    position: absolute;
    border: 2px dashed red;
    cursor: move;
    resize: both;
    overflow: auto;
    width:600px;
    height:300px;
    top: 20px;
    left: 20px;
}
#drag canvas {
    margin-top: 20px;
    border: 1px solid #ccc;
    width:100%;
    float:left;
}
#drag #download {
    margin-top: 10px;
    display: none;
}
#generated p{
  width: 70%;
  float: left;
  margin-top: 30px;
}
#generated button{
  width: 23% !important;
  float: right;
  border-radius: 50px;
  padding: 10px 20px;
  background-color: #f9b2a4;
  border: 0;
  margin-top: 20px;
  color: #fff;
}
.video aside img{
  border-radius:15px;
}
#upload-reel aside h4{
    color:#f47f6a;
    font-size:30px;
    font-weight:bold;
    width:100%;
    float:left;
    margin-top:20px;
}
#registerForm .form-group{
    width:48%;
    float:left;
    margin:1%;
}
#registerForm .form-group:nth-child(10){
    width:98%;
}
#registerForm .form-group:nth-child(11){
    width:98%;
}
#registerForm .form-group p{
    width:100%;
    float:left;
    text-align:center;
}
#registerForm .form-group p a{
    color:#cfeccd;
}
#verifyEmailModalLabel {
  width: 100%;
  float: left;
  color: #f8a494;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
#verifyEmailModal .btn-close-white {
  background-color: #9fb89e !important;
  border-radius: 20px;
  font-size: 10px;
  filter: inherit;
  color: #fff !important;
}
.okay_btn{
    background-color:#f8a494;
    padding:10px 30px;
    color:#fff;
    border:0;
    border-radius:50px;
}
#reel-buttons li button{
    width:100% !important;
    float:left;
    border-radius:50px;
    padding:10px 20px;
    background-color:#f9b2a4;
    border:0;
    color:#fff;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px !important;
  height: 34px;
  float:left;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  height: 25px;
}
#uploaded-video .form-group{
    width:100%;
    float:left;
    margin-top:20px;
}
#uploaded-video .form-group h6{
    color:#f47f6a;
    width:100%;
    float:left;
    font-size:24px;
}
#uploaded-video .form-group h5 {
  width: 90%;
  float: left;
  margin-top: 20px;
  margin-left: 2%;
  color: #abaaaf;
  font-size:24px;
}
#uploaded-video .form-group p{
    width:100%;
    float:left;
}
.slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
#custom-upload{
    margin-top:30px;
}
#create_recipe h6{
  color: #9fb89e;
  font-size: 40px;
  font-weight: bold;
}
#create_recipe ul{
  width:100%;
  float:left;
  margin-top:20px;
}
#create_recipe .form-group {
  width: 100%;
  float: left;
  margin-top: 20px;
}
#create_recipe aside label {
  width: 100%;
  float: left;
  color: #abaaaf;
  font-size: 28px;
  margin-top: 20px;
}
#create_recipe .form-group p{
  width: 90%;
  float: left;
  margin-top: 20px;
  margin-left: 2%;
  color: #abaaaf;
  font-size:18px;
}
#create_recipe ul li{
  width: 80%;
  float: left;
  font-size: 17px;
  color: #abaaaf;
  margin-left:30px;
  line-height: 28px;
  text-align: left;
  margin-bottom: 0;
}
input:checked + .slider {
  background-color: #fd8f7a;
}

input:focus + .slider {
  box-shadow: 0 0 1px #fd8f7a;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
#upload-reel aside input{
  width:70%;
  float:left;
  background-color:#fff;
  border:1px solid #f8a494;
  border-radius:50px;
  padding:12px;
  color:#abaaaf;
}
#upload-reel aside textarea{
  width:100%;
  float:left;
  background-color:#fff;
  border:1px solid #f8a494;
  border-radius:20px;
  padding:12px;
  color:#abaaaf;
  margin-top:20px;
}
#upload-reel aside select{
  width:70%;
  float:left;
  background-color:#fff;
  border:1px solid #f8a494;
  border-radius:50px;
  padding:12px;
  color:#abaaaf;
}
#upload-reel aside h2{
    width:100%;
    float:left;
    color:#f47f6a;
    font-size:32px;
    font-weight:bold;
}
#upload-reel aside button{
  width:28%;
  float:left;
  background-color:#f8a494;
  margin-left:2%;
  border-radius:50px;
  padding:7px;
  border:0;
  color:#fff;
  font-size: 20px;
}
#upload-video form span{
  float: left;
  font-size:20px;
}
#upload-video p{
  width:100%;
  float:left;
  font-size:20px;
}
#upload-video ul{
  width:100%;
  float:left;
  margin:0;
  padding:0;
}
#upload-video ul li{
  width:100%;
  float:left;
  margin:0;
  padding:20px 0;
}
#recipe-owner h4 {
  color: #a0b89e;
  font-size: 60px;
  text-align: center;
  font-weight: bold;
}
#view-search{
    margin-bottom:20px;
}
#view-search input{
  width:98%;
  float: left;
  padding: 9px 17px;
  border-radius: 25px;
  border: 2px solid #9fb89e;
  background-color: #fffcf8;
}
#recipe-owner p {
  color: #a0b89e;
  font-size: 32px;
  text-align: center;
}
#recipe-owner aside{
    text-align:right;
}
#recipe-owner img {
  width: 700px;
  border-radius: 20px;
  margin: 20px 0;
}
#recipe-owner button{
    border:0;
    background-color:inherit;
}
#upload-video form button {
  float: right;
  background-color: #f8a494;
  padding: 5px 20px 1px 20px;
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  border: 0;
  margin-left: 20px;
  margin-top: 0px;
  margin-bottom: 15px;
}
.view-list{
  width: auto;
  float: right;
  background-color: #ff8f7a;
  color: #fff;
  border: 0;
  margin-left: 2%;
  padding:8px 20px;
  border-radius: 30px;
  font-size: 18px;
  font-family: 'rocaone-rgregular';
}
.zoom-wrapper {
  transform: scale(0.8);
  transform-origin: top left;
  width: 125%;
}
#choose-pop{
    background-color:#fef9f4;
    padding:20px;
    border-radius:10px;
    width:100%;
    float:left;
}
#choose-pop label {
  width: 100%;
  float: left;
  color: #abaaaf;
  font-size: 30px;
  font-weight: bold;
  margin-top: 30px;
}
#choose-pop select{
    width:49%;
    float:left;
    margin-right:1%;
    background-color:#fff;
    padding:12px;
    border-radius:30px;
    border:1px solid #f8a494;
    color: #abaaaf;
}
#choose-pop button {
  background-color: #f8a494;
  padding: 5px 20px 1px 20px;
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  border: 0;
  margin-left: 20px;
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}
#choose-pop input {
  width: 49%;
  margin-right: 1%;
  background-color: #fff;
  padding: 12px;
  border-radius: 30px;
  border: 1px solid #f8a494;
  margin-bottom: 2%;
  color: #abaaaf;
  margin-top: 1%;
}
#choose-pop .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-top: -59px;
  margin-left: 10px;
}

#choose-pop .switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

#choose-pop .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

#choose-pop .slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 3px;
  background-color: #f47f6a;
  -webkit-transition: .4s;
  transition: .4s;
}
#choose-pop p{
    width:100%;
    float:left;
    color:#abaaaf;
    font-size:20px;
}
#choose-pop .form-group{
    width:100%;
    float:left;
}
#choose-pop .form-group #create{
    float:right;
}
#choose-pop .form-group #cancel {
  float: right;
  margin: 0;
}
#choose-pop p span{
    color:#f47f6a;
}
#lifetime aside{
  background-color: #fef9f4;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  float: left;
  margin-top:20px;
}
#lifetime aside label {
  width: 100%;
  float: left;
  color: #f8a494;
  font-size: 30px;
  font-weight: bold;
  margin-top: 30px;
}
#lifetime aside h6 {
  font-size: 24px;
  margin: 20px 0;
  float: left;
  width: 100%;
  color:#abaaaf;
}
#lifetime aside span {
  float: left;
  width: 100%;
  font-size: 22px;
  margin: 8px 0 8px 0;
  color: #abaaaf;
}
#lifetime{
    display:none;
}
#choose{
    display:none;
}
#choose-pop{
    display:none;
}
#lifetime aside ul{
  float: left;
  width: 100%;
  margin:0;
  padding:0;
}
#lifetime aside ul li {
  float: left;
  width: 100%;
  margin: 0;
  margin-left: 0px;
  padding: 0;
  font-size: 22px;
  list-style: disc;
  margin-left: 20px;
  color:#abaaaf;
}
#lifetime aside p {
  width: 100%;
  float: left;
  font-size: 20px;
  margin-top: 20px;
  color:#abaaaf;
}
#buy {
  float: left !important;
  background-color: #f47f6a !important;
  margin-left: 0 !important;
  font-family: 'myriad_proregular';
}
#choose-pop input:checked + .slider {
  background-color: #fff;
  border: 1px solid #f47f6a;
}

#choose-pop input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

#choose-pop input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
#choose-pop .slider.round {
  border-radius: 34px;
}

#choose-pop .slider.round:before {
  border-radius: 50%;
}
#choose-pop textarea{
    width:100%;
    height:100px;
    background-color:#fff;
    padding:12px;
    border-radius:10px;
    border:1px solid #f8a494;
}
#choose-pop button {
  width: auto;
  float: right;
  margin: 0 1%;
  padding: 10px 20px;
}
#choose{
    margin-top:30px;
}
.modal-crt{
  display: none; /* Hidden by default */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center; align-items: center;
  z-index: 1000;
}

.modal-content-crt{
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.terms-modal-content button{
  background-color: #5a715a;
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding:6px 15px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: 'rocaone-rgregular';
}
.nav-item.active {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s;
}
a.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
#mobile_menu_content h5{
    color:#f8a494;
    font-size:30px;
    text-align:right;
    font-weight:800;
}
.my-popup-overlay-xyz {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
}
.my-popup-box-xyz {
      display: none;
      position: fixed;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -30%);
      background-color:#fef1ef;
      border-radius:10px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      z-index: 1000;
      width: 400px;
}
.my-popup-close-btn-xyz {
      margin-top: 10px;
      padding: 5px 10px;
      cursor: pointer;
}
.recipe_filter_section button{
    background-color:#fd8f7a;
    color:#fff;
}
.cust-recipe-head h4{
  font-size:60px;
  font-weight: bold;
  line-height:55px;
}
.serchrecipetext{
  border-radius: 50px;
  margin-right: -5px;
  background-color: #fffcf8;
  border: 2px solid #a2b49a;
  padding: 9px 15px 5px 15px;
  width: 90%;
  float: left;
}
.expandReelsBtn {
  background-color: #f8a494;
  padding: 5px;
  border-radius: 5px;
  color: #fff;
  border: 0;
  font-size: 20px;
  float: right;
  position: relative;
  bottom: 5px;
}
.cust-reel-head input {
  width:92%;
  float: left;
  padding: 10px 20px 7px 20px;
  border-radius: 30px;
  border: 2px solid #a2b49a;
  background-color: #fffcf8;
}
.text-bubble {
  position: absolute;
  bottom: 40px;
  right: -50px;
  background-color: #fa8f7c;
  color: white;
  padding: 20px 80px 20px 50px;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 70px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

    @media (max-width: 600px) {
      .text-bubble {
        font-size: 1.1em;
        padding: 12px 20px;
        bottom: 20px;
        right: 20px;
      }
    }
.reel-filter-tags .show_reel_selected_tags {
  width:100%;
  float: left;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 50px;
  padding: 12px;
  margin: 10px 0;
}
.user_filter {
  width: auto;
  float: left;
  text-align: center;
  border: 2px solid #ff8f7a;
  color: #ff8f7a;
  background: none;
  padding: 8px 10px;
  border-radius: 30px;
  font-family: 'myriad_proregular';
  font-size: 15px;
  font-weight: 600;
}
.contact_details{
    width:100%;
}
#contact-list .text-muted{
    margin-left:12px;
}
.create_recipe_buttons button{
  background-color: #fd8f7a;
  color: #fff;
}
.recipe_block {
  background-color: #fff;
  border: 1px solid #efefef;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  border-radius:25px;
  width: 100%;
  float: left;
  margin-bottom: 30px;
  overflow:visible;
}
.recipe_about_info {
  padding: 10px;
  box-sizing: border-box;
  float: left;
  width: 100%;
}
.recipe_about_info .recipe_like span{
    text-align:center;
    width:100%;
    float:left;
    font-size:14px;
}
.recipe_about_info .recipe_rating span{
  text-align: center;
  width:100%;
  float:left;
  font-size:14px;
}
.recipe_reactions{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.1rem 0.5rem 0.4rem;
    margin-top: 0.1rem;
    gap: 0;
}
.main_recipes_section{
    background-image: url(../img/veg.png);
    border-radius:20px;
    padding:30px;
    border:1px solid #efefef;
}
.main_reel_section_top{
    background-color:#fcece8;
    border-radius:20px;
    padding:30px;
    border:1px solid #efefef;
}
.recipe_about_info .recipe_like {
  width:20%;
  float: left;
  text-align: center;
}
.recipe_about_info .recipe_like i{
  color:#ff8f7a;
  font-size:16px;
}
.recipe_about_info .recipe_like img{
    width:20px;
}
.recipe_about_info .recipe_author {
  width: 59%;
  float: left;
  margin: 0 0 0 1%;
}
.recipe_about_info .recipe_rating {
  width:20%;
  float: left;
  text-align: center;
}
.recipe_about_info .recipe_rating img{
    width:22px;
}
.recipe_reactions .recipe_block_react_btn img{
   width:100%;
   opacity: 0.85;
}
.author_img{
    width:25%;
    float:left;
}
.author_img img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f8a494;
}
.author_info {
  width: 70%;
  float: left;
  margin:0 5%;
  text-align:center;
}
#prof p{
    margin:0;
}
#prof i{
    float:left;
    width:100%;
}
.recipe_filter_section{
    display:block !important;
}
.recipe_filter_section .active{
   background-color:#c1645e !important;
}
.user_filter_section {
  display: flow-root;
  padding: 0px 0;
  display: flex;
  justify-content:left;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.reset_filter_btn {
  background-color:inherit;
  border:0;
}
.expanded_reel_section{
  margin-bottom:15px;
}
.reel_type_btn,.recipe_type_btn{
    width:100%;
    float:left;
    margin:1%;
    background-color:#fff;
    padding:10px 25px;
    border:1px solid #A2b49a;
    border-radius:50px;
    color:#A2b49a;
    box-shadow: 4px 3px 7px 1px #c4c4c4;
}
.reel-scroll-container {
    overflow-x:hidden;
    white-space: nowrap;
    padding:22px 0;
    scroll-behavior: smooth;
    transition: all 0.4s ease;
}
.expanded_reel_section #reels-container{
   display: flex;
   row-gap: 3.5rem;
   overflow-x: auto;
   white-space: nowrap;
   padding-bottom:20px;
  }
  .reel_dropdown,.recipe_dropdown,.recipe_global_dropdown{
    width: 250px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    background: #fff;
    border: 1px solid #ccc;
    margin-top: 50px;
}
.reel_dropdown .select_all_btn{
    color:#ff8f7a;
}
.md-margin-reverse{
    margin-top:-330px;
}
.view-rcipe-titltes h4{
  color: #f8a494;
  font-size: 80px;
  display: block;
  padding: 20px 0 0 0;
  font-weight: bold;
  float: left;
  width: 100%;
}
.view-rcipe-titltes h5 {
  color: #9fb89e;
  font-size: 28px;
  display: block;
  padding: 20px 0 0 0;
  font-weight: 500;
  float: left;
  width: 100%;
  text-transform: capitalize;
}
.view-rcipe-titltes p {
  color: #9fb89e;
  width: 36%;
  float: left;
  font-size: 20px;
}
.recipe_dropdown .select_all_btn{
    color:#ff8f7a;
}
.reel_filter_group,.recipe_filter_group{
  position: relative;
  width: 19%;
}
.reel_type_btn.active {
    background-color: #e1e1e1;
}
.reel_block {
  height: 410px;
  border-radius: 15px;
}
#reels-container .dummy-ad{
  height: 410px;
}
.reel_block .reel_thumbnail{
  width: 100%;
  height: 100%;
  object-fit:cover;
  object-position: center;
  border-radius: 20px;
}
#scrollLeftBtn {
  background-color: #f6a190;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  border: 4px solid #e37660;
  font-size: 14px;
  color: #fff;
}
#scrollRightBtn{
  background-color: #f6a190;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  border: 4px solid #e37660;
  font-size: 14px;
  color: #fff;
}
.reels-container img{
    border-radius:7px;
}
.tag_close{
    margin-left:15px;
    cursor:pointer;
    margin-top:4px;
}
.selected_tags_container {
  width:83%;
  float: left;
  background-color: #fff;
  border-radius: 40px;
  padding: 10px 30px;
  border: 1px solid #d6d6d6;
  display: block;
  gap: 10px;
}
.hashtag-input-wrapper{
    display: flex;
    align-items: center;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ccc;
}
.hashtag-input-wrapper span{
      font-size: 26px;
    color: #999;
    padding: 0 12px;
}
.hashtag-input-wrapper input{
      flex: 1;
    padding: 0.7rem;
    font-size: 1rem;
    border: none;
    outline: none;
}
.hashtag-modal-buttons{
    margin-top: 1.2rem;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.hashtag-modal-buttons button{
  padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}
.hashtag-cancel-btn{
  background-color: white;
}
.hahstag-add-btn{
    background: #fd8e7b;
    color: white;
}
.add_hashtag {
  background-color:inherit;
  border:0;
}
.reel_tag_search {
  width: auto;
  background-color: #f8a494;
  padding: 13px 15px;
  border: 0;
  border-radius: 30px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin: 0px 3% 0 0%;
  float: left;
}
.recipe_tag_search {
  width: auto;
  background-color: #f8a494;
  padding: 13px 15px;
  border: 0;
  border-radius: 30px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin: 0px 3% 0 0%;
  float: left;
}
.reel_info{
  margin-top: 20px;
  font-family: 'myriad_proregular';
}
.reel_author_img{
    width:20%;
    float:left;
    margin-right: 10px;
}
.reel_author_img img{
    border-radius:50px;
    width:100%;
    float:left;
}
.reel_tag,.recipe_tag,.recipe_global_tag{
   background-color: #e0f5e9;
    border: 1px solid #b2dfdb;
    color: #00796b;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}
#reel-scroll-controls{
  background-color: #fff;
  padding: 20px;
  border-radius: 30px;
  border: 1px solid #d6d6d6;
}
/* FULLSCREEN EXPANDED MODE */
.reel-scroll-container.expanded {
    position: relative;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 40px;
    white-space: normal;
}
.reel-scroll-container.expanded .row {
    flex-wrap: wrap !important;
}
.cust-reel-head button{
  width: auto;
  background-color: #f8a494;
  float: left;
  padding: 11px;
  border: 0;
  border-radius: 30px;
  margin-left: -48px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin-top: -4px;
  position: relative;
  color:#fff;
  font-size:24px;
}
.cust-reel-head img{
    width:32px;
    height:32px;
}
#comment-popup h4 {
  text-align: center;
  color: #f8a494;
  font-size: 36px;
  font-weight: bold;
  display:block;
}
#comment-popup p {
  color: #2d2d2d;
  font-size: 18px;
  text-align: center;
  display: block;
  margin:0;
}
#comment-popup ul{
    display:block;
    margin:20px 0 0 0;
    padding:0;
}
#list_pop .pop_up_list {
  height:240px;
  overflow: hidden;
  overflow-y: hidden;
  overflow-y: hidden;
  overflow-y: scroll;
  border-radius: 20px;
  background-color: #fefbf4;
  padding: 20px;
}
#list .pop_up_list h4{
    font-size:16px !important;
}
#list .pop_up_list li{
    font-size:14px;
    text-align:left;
}
#view-recipe .col-md-4 ul{
    margin:0;
    padding:0;
}
#view-recipe .col-md-4 ul li{
    width:21.333%;
    float:left;
}
#view-recipe .col-md-4 span {
  color: #9fb89e;
  text-align: center;
  display: block;
}
#ul-three{
    margin:0;
    padding:0;
    width:100%;
    float:left;
}
#ul-three li {
  width: 32.333%;
  float: left;
}
#ul-three li span {
  color: #9fb89e;
  text-align: center;
  display: block;
}
#ul-three li img{
  width: 40px;
  margin:auto;
  display: block;
}
#ul-three li h4 {
  color: #9fb89e;
  text-align: center;
  display: block;
  font-size: 36px;
  font-weight: bold;
}
#view-recipe .col-md-4 h4 {
  color: #9fb89e;
  text-align: center;
  display: block;
  font-size: 36px;
  font-weight: bold;
}
#view-recipe .col-md-9 aside button {
  background-color: #f8a494;
  padding:9px 20px 6px 20px;
  border-radius:50px;
  color: #fff;
  font-size: 18px;
  border:0;
  float: left;
  margin-top: 15px;
  margin-bottom: 15px;
  box-shadow: 5px 4px 8px #b1b1b1;
  margin-left:0;
}
#new-list{
    width:100%;
    float:left;
    margin:25px 0 0 0;
    padding:0;
}
#new-list li {
  width: 100%;
  float: left;
  margin:0 0 20px 0;
  padding:0;
  padding-bottom: 0px;
  border-bottom:1px solid #d6d6d6;
  padding-bottom: 20px;
}
.accordion-panel {
  display: none;
  margin-top: 30px;
  width: 100%;
  float: left;
  background-color: #fff;
  padding: 20px;
  border-radius: 30px;
  border: 1px solid #d6d6d6;
}
#mydiv #chat {
  width: 550px;
  bottom: 160px;
  margin-left: -260px !important;
}
#comment-pro {
  width: 100%;
  float: left;
  margin-top: 20px;
  background-color:#fff;
  border: 1px solid #d6d6d6;
  height: 100%;
  max-height: 500px;
  overflow-y: scroll;
  border-radius:20px;
}
#comm{
    margin-top:40px;
    border-top:1px solid #d6d6d6;
    padding:15px 0;
}
#comm h4{
  color: #f8a494;
  font-size:42px;
  display: block;
  padding:20px 0 0 0;
  font-weight: bold;
  float: left;
  width: 100%;
  text-align: left;
}
#comment-pro li {
  width:70%;
  float: left;
  padding: 10px 0;
  margin:1% 15%;
}
#comment-pro p{
  width:100% !important;
  margin-bottom:0;
  color:#989898 !important;
}
#comment-pro li aside img{
  width:70px;
}
#comment-pro span{
  float: right;
  margin-top: -30px;
  color: #d6d6d6;
}
#comment-pro li aside{
  width:10%;
  float:left;
}
#comment-pro #data {
  width: 75%;
  float: left;
  text-align: left;
  margin-left: 5%;
}
.accordion-panel h3{
  color:#f8a494 !important;
  font-size:30px !important;
  width: 100%;
  float: left;
}
.accordion-panel h4{
  font-size:30px !important;
  width: 100%;
  float: left;
}
.accordion-panel h5 {
  font-size:26px !important;
  width: 100%;
  float: left;
  margin-top: 25px;
}
#indgre{
    width:100%;
    float:left;
    margin:0;
    padding:0;
}
#indgre li{
    width:100%;
    float:left;
    margin:0 0 8px 0;
    padding:0;
    border:0;
    font-size:20px;
}
#indgre li input[type="checkbox"] {
  accent-color: green;
  margin-right:7px;
}
#new-list li a {
  width:22%;
  float: left;
  margin: 0;
  padding: 0;
}
#new-list li a i{
  display:block;
  font-style: normal;
  font-size:15px;
  font-weight:normal;
}
#new-list li a span{
  color:#f6a190;
  font-weight:bold;
}
#new-list li a:nth-child(2) {
  width: 45%;
  font-weight:bold;
}
#view-recipe .col-md-4 li img{
  width: 40px;
  margin:auto;
  display: block;
}
#view-recipe .col-md-12 img {
  width: 100%;
  float: left;
  border-radius: 50px;
  margin: 20px 0 30px 0;
  height: 650px;
  object-fit: cover;
}
table {
      width: 100%;
      border-collapse: collapse;
    }
    tr.list-header {
      background-color: #f2f2f2;
      cursor: pointer;
    }
    tr.list-content {
      display: none;
      background-color: #fafafa;
    }
    tr.list-header:hover {
      background-color: #e0e0e0;
    }

#view-recipe .col-md-12 h4{
  color: #f8a494;
  font-size:80px;
  display: block;
  padding:20px 0 0 0;
  font-weight: bold;
  float: left;
  width: 100%;
}
#view-recipe .col-md-9 {
    flex: 0 0 auto;
    width: 70%;
    margin-right: 5%;
}
#view-recipe .col-md-12 h5 {
  color: #9fb89e;
  font-size: 28px;
  display: block;
  padding: 20px 0 0 0;
  font-weight: 500;
  float: left;
  width: 100%;
  text-transform: capitalize;
}
.play_steps {
  background-color: #f8a494 !important;
  padding: 9px 20px 6px 20px;
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  float: right;
  margin-top: -105px;
  margin-right: 30px;
}
#view-recipe aside h6 {
  color: #f8a494;
  font-size:40px;
  display: block;
  padding:20px 0 0 0;
  font-weight: bold;
  float: left;
  width: 100%;
  text-align: left;
}
#view-recipe aside h5 {
  color: #f8a494;
  font-size: 27px;
  display: block;
  padding:20px 0 0 0;
  font-weight: bold;
  float: left;
  width: 100%;
  text-align: left;
}
#view-recipe aside button:hover .hidden-element {
  width: 100px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  font-size: 16px;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
  padding: 0px 8px;
    padding-top: 0px;
  padding-top: 0px;
  left: -27px;
  font-family: 'rocaone-rgregular';
}
#time {
  width: 100%;
  float: left;
  padding:12px;
  background-color: #fde8e4;
  border-radius:30px;
}
#time li {
  width: 48%;
  float: left;
  padding:15px 7px;
  background-color: #fef4f1;
  margin:1%;
  border-radius:15px;
}
#time li h3 {
  display: block;
  text-align: center;
  color: #f6a190;
  font-size:15px;
  font-weight: 600;
}
#time li h6{
  display: block;
  text-align: center;
  color: #9fb89e;
  font-size:22px;
  font-weight: 600;
}
#dp{
  width:100%;
  float:left;
}
#dp img{
  border-radius:20px;
  margin-top:30px;
  width:100%;
}
#dp p {
  font-size: 20px !important;
  width: 100% !important;
  float: left !important;
  text-align: left;
  margin-top: 20px;
  font-weight:500;
}
#play{
    width:100%;
    float:left;
}
#play h1 {
  width: 100%;
  float: left;
  color: #f8a494;
  text-align: left;
  margin-top:100px;
  font-size: 40px;
}
#play p{
  width:100% !important;
  float: left;
  color: #9fb89e;
  font-size:20px;
  text-align: left;
  margin-top:10px;
}
#play h2 {
  width: 100%;
  float: left;
  color: #f8a494;
  text-align: left;
  margin-top:25px;
  font-size: 24px;
  margin-bottom: 0;
}
#salad{
  width:100%;
  float:left;
  margin:0;
  padding:0;
}
#related{
    margin-top:40px;
    width:100%;
    float:left;
}
#related h3{
  width:100%;
  float:left;
  text-align:left;
  color:#9fb89e;
  font-size:22px;
}
#related h3 span {
  text-align: left;
  color: #9fb89e;
  font-size: 22px;
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
#related h3 a {
  float: left;
  margin-left: 5px;
}
#related h3 img{
  width:100%;
  float:left;
  border-radius:50px;
}
#related iframe{
  border-radius:15px;
}
#related ul{
  width:100%;
  float:left;
  margin:0;
  padding:0;
}
#related ul li{
  width:31.333%;
  float:left;
  margin:1%;
  padding:0;
}
.related{
  width: 100%;
  float: left;
  background-color: #d6d6d6;
  border-radius: 10px;
  height: 94px;
  color: #fff;
  font-size: 40px;
  align-content: center;
  text-align: center;
}
#related ul li img {
  width: 100%;
  border-radius: 15px;
  height: 95px;
  object-fit: cover;
}
#salad li {
  width: 100%;
  float: left;
  margin:0 0 10px 0;
  padding:0;
  color: #9fb89e;
  text-align: left;
  font-size: 20px;
}
#salad li input[type="checkbox"] {
  width: 1em;
  height: 1rem;
  accent-color:#9fb89e;
}
#view-recipe p {
  color: #9fb89e;
  width: 36%;
  float: left;
  font-size:20px;
}
#view-recipe aside{
    text-align:right;
}
#view-recipe aside button{
   margin-left:5px;
   position:relative;
   float:left;
}
#view-recipe button{
    background-color:inherit;
    border:0;
}
.pink-button button {
  background-color:#fab9ad !important;
  padding:7px 20px;
  padding-top: 7px;
  border-radius:50px;
  color: #fff;
  padding-top:5px;
  border:0;
  font-family: 'myriad_proregular';
}
#comment-popup ul li{
  width: 31.333%;
  float: left;
  margin:1%;
  text-align:center;
}
#comment-popup ul li img{
    margin:auto;
    border-radius:0;
    width:80%;
    cursor:pointer;
}
#comment-popup ul li .comment_active_image{
    border: 3px solid #3498db;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    border-radius:50px;
}
#comment-popup input {
  width: 100%;
  float: left;
  padding:10px 10px 60px 10px;
  border:2px solid #91c1b8;
  margin-top: 30px;
  border-radius:25px;
}
#comment-popup button {
  background-color: #f8a494;
  padding:3px 25px;
  border-radius:40px;
  color: #fff;
  font-size: 18px;
  border:0;
  margin-top: 14px;
  float: right;
  font-family: 'rocaone-rgregular';
}
#jean-drop{
  width:100%;
  position: relative; /* BP-292: Arial removed (banned font) -- inherits site font */
}
#jean-drop summary {
  background-color: #ff8f7a;
  border-radius: 50px !important;
  margin-top: 20px;
  cursor: pointer;
  padding:2px 10px 2px 2px;
  color: #fff;
  font-family: 'rocaone-rgregular';
  text-align: center;
  font-size: 14px;
  width:100%;
  float: left;
  text-indent: 8px;
}
.orange-butt span{
  margin-top:12px;
  float: left;
}
#jean-drop img {
  border-radius:50px;
  object-fit: cover;
  width:42px !important;
  height:42px;
  float:left;
}
.user_name {
  float: left;
  width: 70%;
  margin-top: 9px;
  text-align: left;
  margin-left: 1%;
  font-size: 18px;
}
#jean-drop[open] summary {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
#jean-drop .dropdown {
  background-color: #fff;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #efefef;
  border-radius: 10px;
  position: absolute;
  z-index: 999;
  float: left;
  right: 0;
  top: 60;
  /* BP-292: shrink-to-fit capped the panel at its 85px containing block while
     nowrap items overflowed past the viewport. A real width + right:0 makes it
     grow LEFTWARD into the page instead -- safe at every window size. */
  width: max-content;
  min-width: 230px;
  max-width: calc(100vw - 16px);
}
#video-menu{
    width:100%;
    float:left;
    padding:50px 0;
    text-align:center;
}
#video-menu li {
  width: auto;
  display: contents;
  margin:0 1%;
}
#video-menu li a {
  color: #2d2d2d;
  text-decoration:none;
  font-size: 22px;
  padding:20px 10px;
  font-weight:bold;
}
#video-menu span {
  color: #000;
  font-weight: bold;
  font-size: 25px;
}
.tomato:hover {
  background-image: url("../img/tomato.png");
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
}
.carrot:hover{
  background-image:url("../img/carrot.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
}
#jean-drop .dropdown li {
      padding: 10px;
      cursor: pointer;
    }
#jean-drop .dropdown li a{
    font-size:15px !important;
    font-family: 'rocaone-rgregular';
    background-color:inherit !important;
}
#create_recipe_pop{
    position: absolute;
    top: -460px;
    left: -41px !important;
}
#list_pop {
  position: absolute;
  top: -345px;
  left: -299px !important;
  background-color: #bed0be;
  padding: 20px;
  border-radius: 40px;
  width: 500px;
}
.pop_up_list .sp_image img{
    height:40px !important;
}
.pop_up_list .delete_shopping_list img{
   width:25px !important; 
}
#list .pop_up_list a {
  height:40px !important;
}
#list_pop table{
    background-color:#f4fbf7;
}
ul.head {
  width: 100%;
  float: left;
  margin:0;
  padding:15px 0;
  background-color: #f4fbf7;
}
ul.head li h4 {
  color: #fabfb4;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  text-align: left;
}
ul.head li h5{
  color: #fabfb4;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  text-align: left;
}
ul.head li h3 {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 0;
  text-align:center;
  color: #2d2d2d !important;
}
ul.head li:nth-child(1){
    width:25%;
    float:left;
}
ul.head li:nth-child(2){
    width:50%;
    float:left;
}
ul.head li:nth-child(3){
    width:25%;
    float:left;
}
#recipe_ai{
    position: absolute;
    top:-373px;
    left: -41px !important;
}
#search_bar {
  position: absolute;
  top: -100px;
  left: -41px !important;
  width: 100%;
}
.global_search_input_nav_2{
  width: 93%;
  padding: 6px 10px 7px 10px;
}
#search_bar #search-butt {
  padding: 11px;
  margin-left: -48px;
  margin-top: -5px;
}
.custom-popup-overlay {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, 0.3);
}

.custom-popup-box {
  background:#fff;
  width: 700px;
  margin:11% auto 10% auto;
  padding:5px 20px;
  border-radius:12px;
  position: relative;
  height: 450px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.popup-close-btn {
  cursor: pointer;
}
#video_recipe #cancel{
  background-color: #f8a494;
  padding:5px 20px 1px 20px;
  border-radius:50px;
  color: #fff;
  font-size: 20px;
  border:0;
  margin-left: 20px;
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}
.add-new {
  width: auto;
  float: left;
  background-color: inherit;
  color: #fff;
  border: 0;
  padding: 5px 6px;
  border-radius: 30px;
  margin-top: 15px;
  position: relative;
  margin-left:-9px;
}
.custom-hide{
    padding:10px 0;
}
.logo img{
    width:50%;
}
#foot-mob-menu {
  width: 94%;
  float: left;
  padding:3px 20px 5px 20px;
  border-radius:100px;
  display: none;
  background-color: #fdf1ee;
  margin:3%;
}
#foot-search img {
  width: 100px !important;
  margin-left: -50px;
  margin-top: -32px;
  position: absolute;
}
#foot-mob-menu a {
  width: 18%;
  float: left;
  margin:0 1%;
  text-align: center;
  padding:5px;
  text-decoration:none;
}
#foot-mob-menu a p {
  display: block;
  text-align: center;
  font-size: 12px;
  font-family: 'myriad_proregular';
  color: #717171;
  text-decoration:none;
  margin-bottom: 0;
}
#foot-mob-menu a img {
  width: 45px;
}
.mob-buttons .dropdown {
  width: auto;
  float: right;
  margin: 15px 5px;
}
.mob-buttons .dropdown .dropbtn{
  margin:0;
  padding:0;
}
.plus{
    background-color:inherit !important;
    border:0;
    float: right;
    margin: 15px 5px;
}
.chef{
    background-color:inherit !important;
    border:0;
    float: right;
    margin: 15px 5px;
}
.mob-menu{
    background-color:inherit !important;
    border:0;
}
.add-new i{
    font-size:30px;
}
.add-new:hover .hidden-element {
  width: 180px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 5px;
  padding: 0px 8px;
  float: left;
  left: -70px;
  z-index: 999;
}
.dropbtn {
    background-color: inherit;
    color: #fff;
    padding: 0 15px;
    font-size: 26px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    float: right;
    margin: 10px;
    border: 0;
}
.chat-img img{
    margin-right:12px;
}
.dropbtn:hover, .dropbtn:focus {
  color:#000;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: -59px;
    width:100%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: auto;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 40px;
  margin-left: 11px;
  border-radius: 6px;
  right: 10px;
}
.chat .dropdown-content {
  margin-top: 50px;
  right: -249px;
}
.dropdown-content a {
    color: black;
    padding: 4px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #eee;
}
.add{
  background-color: #efefef;
  color: #000;
  font-size: 15px;
  padding: 4px 9px;
  border-radius: 50px;
  border:1px solid #d6d6d6;
  font-family: 'myriad_proregular';
  margin: right:0;
}
.chat-img .dropdown{
    float: right;
    margin-bottom: 0 !important;
    margin-top: -40px;
}
.chat-img .dropdown button{
    background-color:inherit !important;
    border:0;
    color:#000;
}
.show {display: block;}

element {
}
#advance-menu:hover .hidden-element {
  width:170px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  font-size:16px;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 20px;
  padding: 0px 8px;
  left: -39px;
  font-family: 'rocaone-rgregular';
}
#recipePhotoInput.form-control::file-selector-button {
  background-color: #fabaae;
  color: #000;
  padding: 10px 20px 13px 20px;
}
#recipePhotoInput.form-control {
    padding:5px;
}
#importUrlBtn{
    padding:10px 20px !important;
}
#reelFileInput.form-control::file-selector-button {
  background-color: #fabaae;
  color: #000;
  padding: 10px 20px 13px 20px;
}
#reelFileInput.form-control {
    padding:5px;
}
#uploadPhotoBtn{
    padding:10px 20px !important;
}

#importReelUrlBtn{
    padding:10px 20px !important;
}
#uploadReelBtn{
    padding:10px 20px !important;
}
#search-butt:hover .hidden-element {
  width: 100px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 20px;
  padding: 0px 8px;
  left: -28px;
}
.modal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color:#9fb89e;
      justify-content: center;
      align-items: center;
      animation: fadeIn 0.3s ease;
    }

    .modal.show {
      display: flex;
    }

    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
    }

    .modal-content {
      background-color:#fdeae6;
      padding: 25px;
      border-radius:20px;
      min-width: 300px;
      z-index: 999999 !important;
}

#con-social{
    width:100%;
    float:left;
}
#con-social a {
  width:18%;
  float: left;
  margin:0 1%;
}
.msgDate {
  width: 100%;
  float: left;
  margin-bottom: 15px;
  font-weight: normal;
  text-transform: uppercase;
}
#con-social a img{
    width:100%;
    float:left;
    border-radius:50px !important;
}
.tabs {
      width: 100%;
      max-width: 600px;
      margin: auto;
    }

    /* Hide radio buttons */
    .tabs input[type="radio"] {
      display: none;
    }

    .tab-labels {
      display: flex;
      cursor: pointer;
      background: #eee;
      border-radius: 8px 8px 0 0;
      overflow: hidden;
    }

    .tab-labels label {
      flex: 1;
      padding: 15px;
      text-align: center;
      background: #ddd;
      transition: background 0.3s;
    }
.tabs input[type="radio"]:checked + label {
  background-color: #f9d1ca;
  border-radius:20px;
  padding-top: 3px;
}

    .tab-content {
      display: none;
    }

    /* Show the content of the selected tab */
    #tab1:checked ~ .content #content1,
    #tab2:checked ~ .content #content2,
    #tab3:checked ~ .content #content3 {
      display: block;
    }

.padd .modal-content h4{
  font-size:40px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #f8a494;
  text-align:center;
}
.tabs label{
  padding:0px 20px;
  margin-bottom: 10px;
}
a.tooltip span.tooltiptext{
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
#pro-tab button {
  background-color: #f6a190;
  padding:3px 10px;
  border-radius:30px;
  font-size: 16px;
  color: #fff;
  border:0;
  margin-right: 20px;
}
#pro-tab img{
    border-radius:50px !important;
    margin-bottom:15px;
}
#table-scrollable {
  height:250px;
  overflow-y: scroll;
  width: 100%;
}
#store-recipe table{
    width:100%;
    float:left;
    background-color:#fff;
}
#store-recipe table th {
  border: 1px solid #d6d6d6;
  padding: 10px;
  text-align: center;
}
#store-recipe table td{
    border:1px solid #d6d6d6;
    padding: 10px;
  text-align: center;
}
#store-recipe table p{
    width:100%;
    float:left;
    color:#9fb89e;
}
#store-recipe table h6 img{
    margin-right:10px;
}
#modify{
    background-color:#9fb89e !important;
    padding:3px 10px !important;
    border-radius:30px !important;
    margin-top:0 !important;
}
#revoke{
    background-color:#f8a494 !important;
    padding:3px 10px !important;
    border-radius:30px !important;
    margin-top:0 !important;
    margin-left:10px !important;
}
#mydivheader .parent-element-1:hover .hidden-element {
  width:90px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top:60px;
  padding: 0px 8px;
  left:-10px;
  font-size:14px;
}
#content2 input {
  width: 100%;
  float: left;
  margin-bottom: 10px;
  border-radius:40px;
  border:2px solid #c5cfbe;
  padding:11px 20px;
}
#content2 textarea{
  width: 100%;
  float: left;
  margin-bottom: 10px;
  border-radius:10px;
  border:2px solid #c5cfbe;
  padding:11px 20px;
}
#content2 button {
  background-color: #f6a190;
  padding: 4px 20px 1px 20px;
  border-radius: 40px;
  color: #fff;
  font-size: 17px;
  border: 0;
  float: right;
}
.bubble strong {
  float: left;
  width: 100%;
  margin-top: 10px;
  font-size: 20px;
  color: #809d7d;
  font-weight: 500;
}
.bubble ul {
  display: block;
  margin: 0;
  padding: 0;
}
.bubble li{
    display:block;
    margin-top:0 !important;
}
#mydivheader .parent-element-2:hover .hidden-element {
  width: 110px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top:60px;
  padding: 0px 8px;
  left: -20px;
  font-size:14px;
}
#mydivheader .parent-element-3:hover .hidden-element {
  width:120px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top:60px;
  padding: 0px 8px;
  left: -20px;
  font-size:14px;
}
#mydivheader .parent-element-4:hover .hidden-element {
  width: 150px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top:20px;
  padding: 0px 8px;
  left:-40px;
}
#trend-icons .parent-element-1:hover .hidden-element {
    width: 70px;
    display: block;
    position: absolute;
    background-color: #ffe3dc;
    color: #2d2d2d;
    text-align: center;
    border-radius: 20px;
    margin-top: 5px;
    padding: 0px 8px;
    left:-7px;
    font-size:14px;
}
#trend-icons .parent-element-2:hover .hidden-element {
  width: 180px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 5px;
  padding: 0px 8px;
  left: -60px;
}
#trend-icons .parent-element-3:hover .hidden-element {
    width: 120px;
    display: block;
    position: absolute;
    background-color: #ffe3dc;
    color: #2d2d2d;
    text-align: center;
    border-radius: 20px;
    margin-top: 5px;
    padding: 0px 8px;
    left: -30px;
}
#trend-icons .parent-element-4:hover .hidden-element {
  width: 165px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 5px;
  padding: 0px 8px;
  left: -49px;
}
#trend-icons .parent-element-5:hover .hidden-element {
    width: 80px;
    display: block;
    position: absolute;
    background-color: #ffe3dc;
    color: #2d2d2d;
    text-align: center;
    border-radius: 20px;
    margin-top: 5px;
    padding: 0px 8px;
    left: -13px;
}
a.tooltip:hover span.tooltiptext {
  visibility: visible;
}
header {
  padding:20px 0 0 0;
  display: block;
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  background-color: #fff;
  z-index: 999;
  margin-bottom: 15px;
}
.orange-butt{
    background-color:#ff8f7a;
    border:0;
    border-radius:50px;
    margin-top:20px;
}
header .navbar{
    background-color:inherit !important;
    margin-top:15px !important;
}
.navbar li{
    border-right:3px solid #9fb89e;
}
header li:last-child a{
    border-right:0 !important;
}
header .nav-new li a {
  font-size: 18px !important;
  padding:0 33px !important;
}
.meatballs .row{
    background-color:#fef7ee;
    padding:20px;
    border-radius:20px;
}
.meatballs h3{
    color:#f47f6a;
    font-size:50px;
    font-weight:bold;
    margin-top:30px;
    text-align:center;
}
.meatballs aside{
    background-color:#fff;
    padding:30px 20px;
    border-radius:20px;
    margin-top:45px;
}
#trend-icons .green-parent-element-1:hover .hidden-element {
    width: auto;
    display: block;
    position: absolute;
    background-color: #ceddcd;
    color: #2d2d2d;
    text-align: center;
    border-radius: 20px;
    margin-top:10px;
    padding: 0px 8px;
    left: 6px;
}
#trend-icons .green-parent-element-2:hover .hidden-element {
    width: 180px;
  display: block;
  position: absolute;
  background-color: #ceddcd;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
  padding: 0px 8px;
  left: -57px;
}
#trend-icons .green-parent-element-3:hover .hidden-element {
    width: auto;
  display: block;
  position: absolute;
  background-color: #ceddcd;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
  padding: 0px 8px;
  left:-17px;
}
#trend-icons .green-parent-element-4:hover .hidden-element {
    width: auto;
  display: block;
  position: absolute;
  background-color: #ceddcd;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
  padding: 0px 8px;
  left:0;
}
#trend-icons .green-parent-element-5:hover .hidden-element {
   width: auto;
  display: block;
  position: absolute;
  background-color: #ceddcd;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
  padding: 0px 8px;
  left:-2px;
}
#no-bg{
    background-color:inherit !important;
}
.meatballs img{
    border-radius:10px;
}
.meatballs h4{
    color:#9fb89e;
    font-weight:bold;
}
.meatballs p{
    color:#9fb89e;
}
.meatballs h5{
    color:#9fb89e;
    font-weight:bold;
}
.meatballs ul{
    margin:20px 0 0 0;
    padding:0;
}
.meatballs ul li{
    color:#9fb89e;
}
.meatballs button {
    width: auto;
    float: left;
    background-color: #f9b8ac;
    color: #fff;
    border: 0;
    margin-left: 2%;
    padding: 8px 75px;
    border-radius: 30px;
    font-size: 18px;
    margin-top: 5px;
    box-shadow:4px 3px 7px 1px #c4c4c4;
}
#account-2 {
  border-bottom:1px solid #fbd5ce;
  padding:10px 0;
  margin-bottom: 10px;
  border-top:1px solid #fbd5ce;
}
#account-2 img {
  width: 40px;
  border: 2px solid #f9b8ac;
  border-radius: 50px;
  margin-right: 10px;
}
#right-icons {
  display: flex;
  justify-content: flex-end;
}
#search{
    border-bottom:4px solid #fdebe8;
    padding-bottom:20px;
}
#search input {
    width:45%;
    float: left;
    padding:10px 20px 7px 20px;
    border-radius: 30px;
    border: 2px solid #a2b49a;
    background-color: #fffcf8;
}
#recipe_ai #chat li{
    margin-top:15px !important;
}
#list_pop td {
    font-size: 13px !important;
    padding: 10px !important;
}
#list_pop table a {
    padding: 5px 8px !important;
    font-size: 14px !important;
}
#list_pop table a img {
    width: 14px !important;
}
#search_bar input {
    width:98%;
    float: left;
    padding: 10px 20px 7px 20px;
    border-radius: 30px;
    border: 2px solid #a2b49a;
    background-color: #fffcf8;
    margin-bottom:20px;
}
.advance {
    width:auto;
    float: left;
    background-color: #ff8f7a;
    color: #fff;
    border: 0;
    margin-left: 2%;
    padding: 13px 8px;
    border-radius: 30px;
    font-family: 'myriad_proregular';
    font-size: 18px;
    position:relative;
}
#search .refresh {
    width:auto;
    float: left;
    background-color: #fabaae;
    color: #fff;
    border: 0;
    margin-left: 1%;
    padding: 11px;
    border-radius: 30px;
    position:relative;
}
#search .refresh i {
    font-size:20px;
}
#right-icons a {
  float: right;
  padding:0;
  margin:0 5px; /* BP-294b: 10px layout gap = exactly 8 visual px under the 0.8 scale -- integers round identically at every width */
  position:relative;
}
#right-icons a:nth-child(1):hover{
  content:"List";
  color:#2d2d2d;
}
#right-icons img {
    width:50px;
    height:auto;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.parent-element {
    text-align: center;
}
.hidden-element {
    display: none;
    transition: 0.3s;
    padding-top: 4px !important;
    color: #808285 !important;
}
#right-icons .parent-element:hover .hidden-element {
  width: 120px;
  display: block;
  position: absolute;
  background-color: #ffe3dc;
  color: #2d2d2d;
  text-align: center;
  border-radius: 20px;
  margin-top: 5px;
  padding: 4px 8px 0px 8px;
  left: -33px;
}
#right-icons a:nth-child(1)::before {
    content: "12";
    background-color: #ff0000;
    border-radius: 50px;
    padding: 2px 5px;
    font-size: 10px;
    color: #fff;
    text-decoration: none;
    float: right;
    position: absolute;
    margin-top: -10px;
    margin-left: 33px;
    font-family: 'myriad_proregular' !important;
    display:none;
}
#right-icons a:nth-child(2)::before {
    content: "12";
    background-color: #ff0000;
    border-radius: 50px;
    padding: 2px 5px;
    font-size: 10px;
    color: #fff;
    text-decoration: none;
    float: right;
    position: absolute;
    margin-top: -10px;
    margin-left: 33px;
    font-family: 'myriad_proregular' !important;
    display:none;
}
#right-icons a:nth-child(5)::before {
    content: "12";
    background-color: #ff0000;
    border-radius: 50px;
    padding: 2px 5px;
    font-size: 10px;
    color: #fff;
    text-decoration: none;
    float: right;
    position: absolute;
    margin-top: -10px;
    margin-left: 33px;
    font-family: 'myriad_proregular' !important;
    display:none;
}
#right-icons a i{
    color:#fff;
}
#ai .row{
    background-color:#fefaf2;
    padding:40px 20px;
    border-radius:30px;
}
#ai h3{
    background-color:#c2d1c0;
    padding:8px 12px;
    border-radius:0 70px 70px 0;
    font-size:40px;
    text-align:left;
}
#chat img {
    width: 60%;
    margin-top:-30px;
}
.li-top aside{
    padding:20px 0;
}
#chat li h5{
    color:#ff8f7a;
    font-size:18px;
}
#chat{
    background-color:#b7cbb5;
    padding:50px 20px 55px 20px;
    border-radius:30px;
    width: 100%;
    float: left;
    height:470px;
}
#chat li {
    background-color: #f4fbf7;
    padding:15px;
    border-radius: 30px;
    margin-top: -40px;
    width: 100%;
  float: left;
}
#ai-result {
  width: 100%;
  float: left;
  height: 140px;
  line-height: 1.6;
  max-height: 400px; /* Adjust height as per your design */
  overflow-y: auto;  /* Enables vertical scroll when content is long */
  padding-right: 10px;
  white-space: normal;
  word-break: break-word;
  overflow-y: scroll;
  border: 2px solid #86a483;
  border-radius: 10px;
  margin-top: 20px;
  scrollbar-color:#fff #d2e9cf;
  scrollbar-width: thin;
}

#ai-result h3 {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}

#ai-result strong {
  font-weight: bold;
}

#ai-result em {
  font-style: italic;
}

#ai-result ul, #ai-result ol {
  margin: 10px 0;
  padding-left: 20px;
}

#ai-result li {
  margin-bottom: 5px;
  list-style-type: disc;
}

#ai-result p {
  margin: 10px 0;
}
#search .col-md-8{
    margin-top:15px;
}
.drop aside:hover{
    background-color:#fde1db;
}
#sel {
  height: 30px;
  background-color: #fff;
  position: fixed;
  padding:20px 0;
  margin-top: -21px;
  border-radius:5px;
  width: 200px;
  float: left;
}
#separate {
  padding: 5px 0;
  border-top: 1px solid #fbd5ce;
  border-bottom: 1px solid #fbd5ce;
  margin:20px 0;
}
#li-top {
  margin-top: -25px;
  padding: 40px 15px 20px 15px !important;
}
#chat li:last-child{
  background-color:inherit !important; 
  padding:0;
}
#chat li:last-child textarea {
  text-align: left;
  display: block;
  width: 100%;
  float: left;
  background-color: #fffcf7;
  border-radius: 50px;
  padding: 20px 15px;
  border: 0;
  margin-top: 5px;
  height:60px;
  overflow: hidden;
  font-size:12px !important;
}
.expanded #chat-messages {
  height:500px !important;
}
.expanded img{
    width:200px !important;
    height:auto !important;
}
#chat li:last-child button {
  width: auto;
  padding: 0px 22px;
  background-color: #588354;
  border: 0;
  border-radius: 50%;
  color: #fff;
  float: right;
  margin-top: 5px;
  height: 58px !important;
}
#chat aside a {
    color: #2d2d2d;
    text-decoration: none;
    border-right: 2px solid #2d2d2d;
    padding: 0px 10px;
}
#chat aside a:hover{
    color:#738a72;
}
#chat aside{
    text-align:right;
}
#chat #li-top input{
    width:100%;
    background-color:#f4fbf7;
    border-right:1px solid #d6d6d6;
    border-left:0;
    border-bottom:0;
    border-top:0;
    padding:20px 5px 98px 5px;
}
#chat aside a:last-child{
    border:0;
}
.rec img {
  border-radius: 30px;
  height: 100%;
  max-height: 470px;
  width: 100%;
  object-fit: cover;
}
.rec img:before{
    content:"Recipe Of The Week";
}
#trending .container .row{
    padding:30px 20px;
    background-image:url(../img/veg.png);
    background-color:#fdfbf5;
    margin-top:30px;
    border-radius:30px;
}
.meal-1 .container{
    padding:30px 20px;
    background-image:url(../img/veg.png);
    background-color:#fdfbf5;
    margin-top:30px;
    border-radius:30px;
}
.meal-2 .container{
    padding:30px 20px;
    background-image:url(../img/veg.png);
    background-color:#fdfbf5;
    margin-top:30px;
    border-radius:30px;
}
.meal-3 .container{
    padding:30px 20px;
    background-image:url(../img/veg.png);
    background-color:#fdfbf5;
    margin-top:30px;
    border-radius:30px;
}
#view button {
    width: auto;
    float: right;
    text-align: center;
    background-color: #fbc9bf;
    color: #fff;
    border: 0;
    margin-left: 2%;
    padding: 8px 14px;
    border-radius: 30px;
    font-family: 'myriad_proregular';
    font-size: 16px;
}
#trending aside i{
    color:#ff8f7a;
}
#trending aside a {
    text-decoration: none;
    text-align: center;
    float: left;
    width: 20%;
    margin: auto;
    position:relative;
}
#trending aside span{
    color:#000;
    margin-left:5px;
    font-size:12px;
    font-family: 'myriad_proregular';
}
#col-white aside button{
    font-family: 'myriad_proregular';
}
.video span{
    border-radius:50px;
    margin-left:-40px;;
}
#trending h2 {
  font-size: 75px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #53525b;
}
.home-share{
    width:400px;
}
#trending h3{
  font-size: 75px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #f8a494;
}
#trending #search{
    border:0 !important;
}
#trending #search input {
    width:72% !important;
}
#trending h6 {
  text-align: center;
  font-size: 18px !important;
  color: #53525b;
  margin-top: 5px;
  font-weight: 500;
  padding: 0 30px;
  float: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#trending h5{
    font-size:26px;
}
#trend{
    margin-bottom:20px;
}
#edit-1 a img{
    width:30px;
}
#trend input {
  width: 70%;
  float: left;
  padding: 9px 17px;
  border-radius: 25px;
  border: 2px solid #9fb89e;
  background-color:#fffcf8;
}
.refresh {
  width: auto;
  float: left;
  background-color: inherit;
  color: #fff;
  border: 0;
  margin-left:10px;
  border-radius: 30px;
}
.reset_recipe_filters img{
  width:50px;
  height:50px;
}
#trend-icons {
    margin: 20px 0;
    width: 100%;
    float: left;
}
#trend-icons a {
  margin: 0 1%;
}
#trend-icons a i{
    color:#fff;
    font-size:16px;
}
#col-white{
    background-color: #fff;
    border-radius: 30px;
    margin:5px 0 20px 0;
    box-shadow: 5px 7px 12px #b0b0b0;
    width:100%;
    float:left;
}
#col-white .padd {
    padding:0 5px 15px 5px;
}
#trending img{
    border-radius:30px 30px 0 0;
}
#trending-2 img{
    border-radius:30px 30px 0 0;
}
#most img{
    border-radius:30px 30px 0 0;
}
#most aside i{
    color:#ff8f7a;
}
#layout a {
    width: 13%;
    float: left;
    margin: 0 1%;
}
#layout {
  width: 100%;
  float: left;
  margin:10px 0 14px 0;
}
#layout button {
    width:60%;
    float: left;
    margin: 0;
    padding: 0;
}
#layout button span{
   width:20%;
   float:left;
}
#layout button p {
  width: 65%;
  float: left;
  margin:0 0 0% 10%;
  text-align: left;
}
#layout button p b {
  float: left;
  text-align: left;
  text-indent: 2px;
  font-weight: 600;
  width: 100%;
  line-height: 1;
  font-size: 12px;
}
#layout button p span {
    float: left;
    text-align: left;
    text-indent: 0;
    width: 100%;
    margin: 0;
    font-size: 10px;
    line-height: 1.3;
}
#layout a i{
    display:block;
    text-align:center;
}
#layout a span{
    display:block;
    text-align:center;
}
#most aside a {
    text-decoration: none;
    text-align: center;
    width: 20%;
    float: left;
    margin: 0;
    position:relative;
}
#most aside span{
    color:#000;
    margin-left:5px;
    font-size:12px;
}
#most h2 {
  font-size:75px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #53525b;
}
#most h2 span{
  font-size: 60px;
}
#most h6 {
  text-align: center;
  font-size: 20px !important;
  color: #676767;
  margin-top: 15px;
  font-weight: 500;
  padding: 0 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#prof {
    width: 100%;
    float: left;
    padding: 15px 0 5px 0;
    margin: 0;
}
.video aside{
    padding:5px;
}
#prof .col-md-2{
    width:20%;
    float:left;
}
#prof .col-md-2 img{
    width:90%;
    float:left;
    border-radius:50px;
}
#recipe-books .dropdown{
    top:10px;
}
#prof .col-md-10{
    width:78%;
    float:left;
    margin-left:2%;
    font-family: 'myriad_proregular';
}
.video{
    padding: 30px 20px;
    background-image: url(../img/veg.png);
    background-color: #f6f9f6;
    margin-top: 30px;
    border-radius: 30px;
}
#most .container{
    padding: 30px 20px;
    background-image: url(../img/non-veg.png);
    background-color: #fffbf4;
    margin-top: 30px;
    border-radius: 30px;
}
.video iframe{
    border-radius:20px;
}
.newsletter input {
  border-radius: 50px !important;
  border: 2px solid #f8a494;
  font-size: 22px;
}
.newsletter input::placeholder{
    color: #8a8c8f !important;
}
.dropdown-menu{
    transition: 0.3s;
}
.newsletter span {
  border-radius: 50px;
  background-color: #9fb89e !important;
  color: #fff;
  margin-left: -50px;
  border: 0;
}
.video h2 {
    font-size: 75px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #53525b;
}
#mydivheader{
  background-color: #fdece9;
  padding:10px 10px;
  border-radius: 50px;
  width:100%;
  float: left;
  bottom:50;
  z-index: 999999 !important;
  right:50;
  box-shadow:5px 7px 7px -1px #c4c4c4;
}
.search {
    width: auto;
    background-color: #f8a494;
    padding: 11px;
    border: 0;
    border-radius: 30px;
    box-shadow: 4px 3px 7px 1px #c4c4c4;
    margin: -5px 3% 0 3%;
    float: left;
}
#mydivheader a {
    border-radius: 50px;
    width:23% !important;
    float: left;
    margin:0 1%;
    position:relative;
}
#mydivheader a img{
    width:100%;
    float: left;
}
#mydivheader a:last-child{
    background-color:#fabbb0;
}
mydivheader a i{
    color:#ffffff;
    font-size:20px;
}
.newsletter{
    border-radius:80px;
    border:2px solid #f8a494;
    margin-top:50px;
    margin-bottom:50px;
}
.newsletter .row{
    padding:30px;
}
.newsletter h4 {
    font-size:34px;
    color: #9fb89e;
    float: left;
    margin-top: 15px;
    font-weight:bold;
}
.social{
    margin-top:50px;
    margin-bottom:50px;
}
.social h3{
    text-align:center;
}
.social aside {
  width: fit-content;
  margin:8px auto;
}
.social aside a{
    width:auto;
    float:left;
    margin:0 5px;
}
.social aside a img{
    width:50px;
    border-radius: 40px;
}
#footer{
    background-color:#fffdf7;
    padding:60px 0;
}
#footer button img{
    border-radius:50px;
}
#footer h4{
    color:#f5a190;
    font-size:17px;
    line-height:27px;
    margin-top: 13px;
}
#footer h5 {
    color: #9ab59a;
    font-size: 26px;
    line-height: 27px;
    margin-bottom: 20px;
}
#footer nav{
    width:100%;
    float:left;
}
#footer nav a{
    width:50%;
    float:left;
    color:#474747;
    text-decoration:none;
    padding-bottom:11px;
    font-size:18px;
}
#copyright p{
    width:100%;
    float:left;
    color:#9ab59a;
    padding:20px 0;
    margin:0;
    text-align:center;
    font-size:18px;
}
#login .logo{
    padding: 20px;
    border-radius: 10px;
    width: 350px;
    margin:auto;
}
#login{
    background-image:url(../img/login.jpg);
    font-family: 'myriad_proregular';
    background-position: center;
    background-size:cover;
    height:100vh;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
#login .row{
    align-items:center;
}
#login form {
    background-color: #9fb89e;
    border-radius: 50px;
    padding:40px 30px;
    float: left;
}
#login form img{
    width:50px;
}
.for a{
    width:auto;
    margin-right:20px;
    color:#ffffff;
}
#register .logo {
    padding: 20px;
    border-radius: 10px;
    width: 350px;
    margin:200px auto;
    display: block;
}
#register{
    background-image:url(../img/login.jpg);
    padding:100px 0;
    font-family: 'myriad_proregular';
    background-size:cover;
}
#register form{
    width:100%;
    float:left;
    background-color:#9fb89e;
    border-radius:30px;
    padding:30px;
}
#login form button {
    background-color: #fde4df;
    color: #ff9985;
    border: 0;
    border-radius: 30px;
    padding:10px 30px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'rocaone-rgregular';
}
#login #signupBtn{
    background-color: #fff;
    color:#f8a494;
    border-radius: 30px;
    padding:10px 30px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'rocaone-rgregular';
}
#register form button {
    background-color: #fde4df;
    color: #ff9985;
    border: 0;
    border-radius: 30px;
    padding:10px 30px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'rocaone-rgregular';
}
/* Button Style */
    .terms-open-modal-btn {
      font-size: 16px;
      cursor: pointer;
      margin: 50px;
    }

    /* Modal Background */
    .terms-modal {
      display: none; 
      position: fixed;
      z-index: 1000;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      justify-content: center;
      align-items: center;
    }

    /* Modal Content Box */
    .terms-modal-content {
  background: #dee7de;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width:580px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  position: relative;
}
.terms-modal-content aside {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  height:400px;
  overflow-y: scroll;
}
.terms-modal-content aside h2{
  font-family: 'rocaone-rgregular';
  font-size:24px;
  margin-bottom: 20px;
}
.terms-modal-content aside h3 {
  font-size: 20px !important;
  color: #2d2d2d !important;
  margin-bottom: 10px !important;
}
.terms-modal-content aside p {
  font-family: 'rocaone-rgregular';
  color: #adadad;
  font-size: 14px;
}
.terms-modal-content aside b{
  font-family: 'rocaone-rgregular';
}
.terms-modal-content aside ul{
  margin:0;
  padding:0;
}
.terms-modal-content span{
    width:100%;
    float:left;
    margin-top:20px;
}
.terms-modal-content span input{
    width:5%;
    float:left;
}
.terms-modal-content span label{
    width:95%;
    float:left;
    font-family: 'rocaone-rgregular';
}

    /* Close Button */
    .terms-close-btn {
      position: absolute;
      top: 10px; right: 15px;
      font-size: 20px;
      cursor: pointer;
      border: none;
      background: none;
    }

    @media (max-width: 500px) {
      .terms-modal-content {
        width: 95%;
      }
    }
#login form input {
    font-family: 'rocaone-rgregular';
    border-radius: 12px;
    padding: 5px 10px;
}
#register form input {
    font-family: 'rocaone-rgregular';
    border-radius: 12px;
    padding: 10px;
}
#register form select {
    font-family: 'rocaone-rgregular';
    border-radius: 12px;
    padding: 10px;
}
#login form p{
    color:#fff;
    text-align:center;
    font-family: 'rocaone-rgregular';
    font-size:16px;
    margin-bottom: 6px;
    margin-top:20px;
}
#login form p a{
    color:#fff;
    text-align:center;
    font-family: 'rocaone-rgregular';
    font-size:18px;
    margin:2%;
}
#register form p{
    color:#fff;
    font-family: 'rocaone-rgregular';
}
#register form img{
    width:50px;
}
#login h3{
    font-family: 'rocaone-rgregular';
    color: #fff;
    font-size: 36px;
    margin-bottom: 20px;
}
#register h3 {
    font-family: 'rocaone-rgregular';
    color: #fff;
    font-size: 36px;
    margin-bottom: 20px;
}
/* Modal Background */
    .verify-modal {
      display: none; 
      position: fixed;
      z-index: 1000;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      justify-content: center;
      align-items: center;
    }

    /* Modal Content Box */
    .verify-modal-content {
     background: #dee7de;
     padding: 40px 20px;
     border-radius: 10px;
     width: 90%;
     max-width: 480px;
     box-shadow: 0 0 10px rgba(0,0,0,0.3);
     position: relative;
}
    .verify-modal-content aside{
      text-align:center;
      display:block;
    }
    .verify-modal-content h2{
      text-align:center;
      display:block;
    }
    .verify-modal-content p {
  text-align: center;
  display: block;
  margin-top: 20px;
}
    .verify-modal-content label {
  text-align: center;
  display: block;
  margin-bottom: 20px;
}
     .verify-modal-content span{
      display:block;
    }
    .verify-modal-content span input {
  width: 10%;
  float: left;
  margin: 0 3%;
  padding: 10px;
}
.verify-modal-content #resend{
  background-color: #fff;
  padding: 5px 40px;
  color: #f8a494;
  border:1px solid #f8a494;
  border-radius: 40px;
  border: 0;
  align-content: center;
  justify-content: center;
  line-height: 20px;
  padding-top: 9px;
  margin-top:5px;
}
.verify-modal-content #verify {
  background-color: #f8a494;
  padding:5px 40px;
  color: #fff;
  border:1px solid #f8a494;
  border-radius: 40px;
  border: 0;
  align-content: center;
  justify-content: center;
  line-height: 20px;
  padding-top: 9px;
  margin-top: 30px;
}

    /* Close Button */
    .close-btn {
      position: absolute;
      top: 10px; right: 15px;
      font-size: 20px;
      cursor: pointer;
      border: none;
      background: none;
    }

    @media (max-width: 500px) {
      .verify-modal-content {
        width: 95%;
      }
    }
#recipe-books input {
  border-radius: 50px;
  margin-right: -5px;
  background-color: #fffcf8;
  border: 2px solid #a2b49a;
  padding: 9px 15px 5px 15px;
  width:100%;
  float: left;
}
#recipe-books .refresh{
    float:right;
}
#recipe-books #basic-addon2{
    border-radius:50px;
    margin-left:-20px;
}
#recipe-books #basic-addon2 i{
    color:#fff;
    font-size:26px;
}
.video-book span {
  background-color: #fff;
  color: #2d2d2d;
  border-radius: 50px;
  padding: 10px 20px;
  border: 3px solid #f5a190;
  width: 80%;
  float: left;
  margin: 0 10%;
    margin-top: 0px;
  position: relative;
  margin-top: -170px;
  text-align: center;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
}
#video-pro{
    width:100%;
    float:left;
    text-align:center;
}
#video-pro p {
  width: 100%;
  float: left;
  font-size: 20px;
  color: #212529;
  line-height: 1.4;
  font-family: 'rocaone-rgregular';
}
#video-pro p b{
    width: 100%;
    float: left;
    font-size:20px;
    color: #212529;
    font-weight:normal;
}
#video-pro img {
  margin: -60px auto 15px auto;
  position: relative;
  border: 3px solid #f8a494;
  border-radius: 60px;
  width:100px;
  height:100px;
  object-fit:cover
}
.video-book .col-md-3{
  justify-content: right;
  font-family: 'myriad_proregular';
}
#recipe-books .container .row{
    background-color: #fdfbf5;
    background-image: url(../img/veg.png);
    padding:30px;
    border-radius:50px;
}
.video-book .col-md-3 img{
    border-radius:20px;
}
.check-recipe label{
    font-size:20px;
    margin-left:10px;
}
span.input-group-text {
    width: auto;
    background-color: #f8a494;
    float: left;
    padding: 14px;
    border: 0;
    box-shadow: 4px 3px 7px 1px #c4c4c4;
    margin-top: -4px;
}
.input-group-append{
    z-index:999;
}
.video .advance{
    float: left;
    background-color: #ff8f7a;
    color: #fff;
    border: 0;
    margin-left:1%;
    padding: 12px;
    border-radius: 30px;
}
.video .refresh {
    width:auto;
    float: left;
    background-color: #f8a494;
    color: #fff;
    border: 0;
    margin-left:1%;
    padding: 14px;
    border-radius: 30px;
}
.video .add {
    border: 1px solid #d6d6d6;
    padding: 11px 30px;
    border-radius: 30px;
}
#col-white iframe{
    margin-bottom:10px;
    border-radius:20px;
}
#recipe-books h2{
    font-size: 60px;
    margin-bottom: 20px;
    font-weight: bold;
}
#share-recipe h4{
   color:#a2b49a;
   font-size:34px;
   display:block;
}
#share-recipe h3{
    color:#f47f6a;
    font-size:34px;
    display:block;
    margin-top:20px;
}
#share-recipe a{
    color:#000;
    font-size:20px;
    margin:20px 0;
    display:block;
}
#share-recipe h5{
    color:#f47f6a;
    font-size:90px;
    display:block;
    margin-top:30px;
    font-weight:bold;
}
#share-recipe aside{
    margin-top:0;
}
#share-recipe img{
    border-radius:30px;
    margin-top:0;
}
#share-recipe aside h3 {
  font-size: 28px;
  color: #ec8c79;
  margin-bottom: 24px;
  margin-top: 0;
}
#share-recipe aside h2{
    font-size:34px;
    color:#ec8c79;
    margin-bottom:30px;
}
#share-recipe aside p {
  font-size: 18px;
  color: #a2b49a;
  margin-bottom: 4px;
}
#share-recipe aside h6{
    font-size:30px;
    color:#a2b49a;
    line-height:40px;
}
.visit {
    background-color: #f8a494;
    padding: 10px 10px;
    border-radius: 50px;
    color: #fff;
    border: 0;
    font-size: 27px;
    width: 100%;
    margin:0 !important;
    float: left;
    margin-top:50px !important;
}
.sear input {
    width: 98%;
    float: left;
    border-radius: 50px;
    border: 2px solid #a2b49a;
    padding: 14px;
}
#suggestions h3 {
    font-size: 75px;
    color: #ec8c79;
    margin: 0 0 20px 0;
    font-weight: 700;
}
#suggestions h4{
    font-size:18px;
    color:#2d2d2d;
    font-family: 'myriad_proregular';
    display:block;
    text-align:center;
    margin:12px 0;
}
.friends-section h4 a {
  text-decoration: none;
  color: #2d2d2d;
  font-size: 18px;
  font-family: 'myriad_proregular';
  margin: 10px 0;
  float: left;
  width: 100%;
}
.btn-red{
   background-color:#ec8c79;
   color:#fff;
   font-size:15px;
   padding:4px 9px;
   border-radius:50px;
   border:0;
   font-family: 'myriad_proregular';
   margin:right:0;
}
.btn-green{
    background-color:#a2b49a;
    color:#fff;
    font-size:15px;
    padding:4px 9px;
    font-family: 'myriad_proregular';
    border-radius:50px;
    border:0;
    margin-right: 5px !important;
    margin-left: 0 !important;
 }
 #pending h3{
    font-size: 75px;
    color: #ec8c79;
    margin:0px 0 20px 0;
    font-weight: 700;
}
#sent-requests h3 {
  font-size: 75px;
  color: #ec8c79;
  margin:0px 0 20px 0;
  font-weight: 700;
}
#pending img {
  width: 47%;
  float: left;
  border-radius: 5px;
}
#pending .accept {
  width: 48%;
  float: left;
  margin-left: 5%;
}
.friends-section img{
    border-radius:10px;
    border: 1px solid #cecece;
}
#pending h4{
    font-size:18px;
    color:#2d2d2d;
    font-family: 'myriad_proregular';
    display:block;
    margin:12px 0;
}
.pink-bg .row{
    background-color:#fffdf7;
    padding:30px;
    border-radius:20px;
    border:2px solid #eaeaea;
}
#your h3{
    font-size: 75px;
    color: #ec8c79;
    margin:50px 0 20px 0;
    font-weight: 700;
}
.cancel_friend{
  background-color: #ec8c79;
  color: #fff;
  font-size: 15px;
  padding: 4px 9px;
  border-radius: 50px;
  border: 0;
  font-family: 'myriad_proregular';
}
.block_friend{
  background-color: #9fb89e;
  color: #fff;
  font-size: 15px;
  padding: 4px 9px;
  border-radius: 50px;
  border: 0;
  font-family: 'myriad_proregular';
  margin-left: 5px;
}
#your h4{
    font-family: 'myriad_proregular';
    color:#2d2d2d;
    font-size:15px; 
}
.pro-buttons{
    padding:30px 0;
    font-family: 'myriad_proregular';
}
.pro-buttons button {
  background-color: inherit;
  color: #3498db;
  padding: 10px 30px 10px 0px;
  font-size: 22px;
  border: 0;
  font-family: 'myriad_proregular';
}
.pro-buttons h5 {
  font-family: 'myriad_proregular';
  font-size: 34px;
  font-weight: bold;
}
.cus-img-account{
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin-left:55px !important;
}
.account-page h5{
    color:#9fb89e;
    font-size:45px;
}
.account-page h6{
    color:#ec8c79;
    font-size:45px;
}
.account-page ul{
    margin:0;
    padding:0;
}
.account-page ul li {
    color: #9bb59a;
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: bold;
}
.account-page h4 {
    color: #9bb59a;
    font-size: 35px;
    text-align: center;
    padding: 20px;
}
#account-info #social a{
  width: 14%;
  float: left;
  margin-left: 2%;
}
#account-info h3{
  font-size: 43px;
  color: #f8a494;
  margin-top:60px;
}
#account-info aside button {
  padding: 8px 25px;
  border: 2px solid #9bb59a;
  color: #9bb59a;
  border-radius: 30px;
  float: right;
  margin-left:270px !important;
  margin-top: 20px;
  position: absolute;
}
.account-details h3{
    color:#ec8c79;
    font-size:40px;
    font-weight:bold;
}
.account-details h3 button{
    background-color:#f8a494;
    border-radius:50px;
    padding:10px 20px;
    font-size:18px;
    color:#fff;
    border:0;
    float:right;
    margin-right:20%;
    font-weight:600;
    box-shadow: 5px 10px 18px #888888;
}
.account-details aside {
    width: 100%;
    float: left;
    margin: 20px 0;
}
.account-details aside ul{
    margin:0;
    padding:0;
}
.account-details ul li {
    color: #9bb59a;
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: bold;
}
.account-details p{
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: bold;
    color: #9bb59a;
}
#env{
    width:100%;
    float:left;
}
#env li{
    width:24%;
    float:left;
    margin-right:1%;
}
#env li h6{
    text-align:center;
    margin-top:20px;
    font-size:22px;
    color: #9bb59a;
}
#env li img {
    width: 80%;
    margin: 5% 5%;
    border: 3px solid #00afff;
    border-radius: 50%;
}
.account-details h1 {
    color: #9bb59a;
    font-size: 22px;
    font-weight:600;
    margin-bottom: 8px;
    border: 2px solid #dfe8df;
    padding: 25px;
    border-radius: 30px;
    line-height: 33px;
}
#social a{
    width:10%;
    float:left;
    margin-left:2%;
}
#social a img{
    width:100%;
    border-radius:50%;
}
#privacy h2{
    color:#9fb89e;
    font-size:45px;
    margin:30px 0;
}
#privacy h3{
    color:#f8a494;
    font-size:22px;
    margin-top:20px;
}
#privacy b {
    font-size: 22px;
    color: #a9a9a9;
    margin-bottom: 10px;
    float: left;
    width: 100%;
}
#privacy ul li{
    color: #9bb59a;
    font-size: 22px;
    list-style-type:square;
}
#privacy p{
    color:#9bb59a;
    font-size:22px;
}
#view-friends{
    padding:50px 0;
}
#view-friends button {
    background-color: #9fb89e;
    color: #fff;
    font-size: 24px;
    padding: 7px 30px;
    font-family: 'myriad_proregular';
    border-radius: 50px;
    border: 0;
    width: 31%;
    float: left;
    margin: 3% 1%;
}
.table td .parent-element{
    position:relative;
}
.table td .parent-element:hover .hidden-element {
    width: 120px;
    display: block;
    position: absolute;
    background-color: #ffe3dc;
    color: #2d2d2d;
    text-align: center;
    border-radius: 20px;
    margin-top:15px;
    padding:4px 8px 0px 8px;
    left: -33px;
}
.nav-new {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0;
}
.nav-new li {
    width:auto;
    float: left;
    padding: 28px 0px;
}
.hov-1:hover{
  background-image: url(../img/mushroom.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hov-2:hover{
  background-image: url(../img/beet.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hov-3:hover{
  background-image: url(../img/onion.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hov-4:hover{
  background-image: url(../img/egg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-new li a {
    width: 100%;
    float: left;
    text-align: center;
    font-size: 18px !important;
    border-right: 3px solid #9fb89e;
}
#view-friends button:hover{
    background-color: #f8a494;
}
#view-friends h3{
    color:#9fb89e;
    display:block;
    margin:10px 0 5px 0;
    font-size:20px;
}
#view-friends h4{
    color:#959595;
    display:block;
    font-size:18px;
    margin-bottom:20px;
}
#view-friends h4 img {
  border-radius: 50px;
  margin-right: 7px;
}
.meal h3{
    font-size: 60px;
    margin-bottom: 20px;
}
.meal-date button {
    width: 100%;
    float: left;
    background-color: #e8eee8;
    padding: 15px 30px;
    border-radius: 50px;
    border: 0;
    font-size: 20px;
}
.meal-date .col-md-2 button {
    width: 100%;
    float: left;
    border: 2px solid #e8eee8 ! IMPORTANT;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 20px;
    color: #57575f;
    background-color: inherit;
}
.meal input {
    width:98%;
    float: left;
    padding: 10px 20px 7px 20px;
    border-radius: 30px;
    border: 2px solid #a2b49a;
    background-color: #fffcf8;
}
.meal-date input {
    width: 100%;
    float: left;
    padding: 4px 10px;
    text-align: center;
    border-radius:50px;
    border:1px solid #d6d6d6;
}
.meal-date label{
    display:block;
    text-align:center;
}
.meal-2 aside {
    background-color: #e8eee8;
    padding: 20px;
    border-radius: 30px;
    width: 100%;
    float: left;
}
.meal-2 aside ul{
    width:100%;
    float:left;
    margin:0;
    padding:0;
}
.meal-2 aside ul li{
    width:50%;
    float:left;
}
.meal-2 aside ul li h6 {
    width: 70%;
    float: left;
    margin-bottom: 0px;
    font-size: 12px;
    padding: 7px 7px 3px 7px;
    color: #656565;
}
#note li h6 i {
  color: #ef9a8b;
  float: right;
}
.meal-2 aside ul li h5 {
  width: 100%;
  float: left;
  margin-bottom: 0;
  font-size: 14px;
}
.meal-2 aside ul li h5 i {
  color: #ef9a8b;
  float: right;
}
.meal-2 aside ul li img {
    width: 30%;
    float: right;
}
#note {
    margin-top: 20px;
    width: 48%;
    margin: 1%;
}
#note li {
    width: 100%;
    float: left;
    padding: 10px 0;
    border-bottom: 2px solid #fff;
    padding-bottom: 16px;
}
#notes #note {
    width: 98%;
    margin: 1%;
    float: left;
    padding:0;
}
#note li:first-child{
    background-color:inherit;
    padding:0;
    border:0;
}
#note li a {
    color: #f27e68;
    border-bottom: 2px solid #f27e68;
    padding-bottom: 5px;
    float: left;
    width: 100%;
    text-align: right;
    margin-bottom: 15px;
    text-decoration: none;
}
#school{
    margin-top: 20px;
    width: 48%;
    margin: 1%;
    height:260px;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-color: #f9bfb5 #fefefe;
    scrollbar-width: thin;
}
#school li:first-child{
    background-color:inherit !important;
    padding:0;
}
#school li {
    width: 98%;
    float: left;
    background-color: #fff;
    padding: 0;
    border-radius: 10px;
    margin: 1% 1% 1% 0;
}
#school a {
    color: #f27e68;
    border-bottom: 2px solid #f27e68;
    padding-bottom: 5px;
    float: left;
    width: 100%;
    text-align: right;
    margin-bottom: 15px;
    text-decoration: none;
}
#school li:hover{
    background-color:#ecc7b7;
}
.meal-2 p{
    margin-bottom:0;
}
#notes {
    background-color: #f7f8fc;
    padding: 20px;
    border-radius: 30px;
    width: 100%;
    float: left;
    height: 350px;
}
#notes p{
    color:#444444;
}
.meal-3 aside {
    background-color: #fdeae6;
    padding:20px 10px 100px 10px;
    border-radius: 30px;
    float: left;
    height:370px;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color:#f9bfb5 #fefefe;
    scrollbar-width: thin;
    width:18%;
    margin:0 1%;
}
#layout img{
    border-radius:50px;
}
.meal-3 aside h4 {
    width: 70%;
    float: left;
    font-size: 14px;
    padding: 10px 5px;
    color: #656565;
}
.meal-3 aside img{
    width:30%;
    float:right;
}
.meal-3 aside h6{
    display:block;
    text-align:center;
    font-size:30px;
}
.meal-3 aside p {
  display: block;
  text-align: right;
  color: #ea7a62;
  font-size: 15px;
  margin-bottom: 0;
  border-bottom: 2px solid #ea7a62;
  margin-bottom: 15px;
}
.meal-3 aside b{
    display:block;
    text-align:left;
    color:#2d2d2d;
    font-size:15px;
    margin-bottom:15px;
    font-weight:normal;
}
.meal-3 aside i{
    color:#f29c8c;
    float:right;
}
.meal-3 aside span {
  width: 100%;
  float: left;
  background-color: #fff;
  padding:0;
  border-radius:10px;
  margin: 1% 0;
}
#meal-options h4{
    font-size: 60px;
    margin-bottom: 20px;
}
#meal-options img{
    border:1px solid #707070;
    border-radius:30px;
    margin-bottom:20px;
}
.chat-messages{
    font-family: 'myriad_proregular';
}
.chat-online {
    color: #34ce57;
    font-size:10px;
}

.chat-offline {
    color: #e4606d;
    font-size:10px;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    max-height: 800px;
    overflow-y: scroll
}

.chat-message-left,
.chat-message-right {
    display: flex;
    flex-shrink: 0
}

.chat-message-left {
    margin-right: auto
}

.chat-message-right {
    flex-direction: row-reverse;
    margin-left: auto
}
.py-3 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
}
.px-4 {
    padding-right: 1.5rem!important;
    padding-left: 1.5rem!important;
}
.flex-grow-0 {
    flex-grow: 0!important;
}
.border-top {
    border-top: 1px solid #dee2e6!important;
}
.list-group-item{
    font-family: 'myriad_proregular';
    margin-bottom:15px;
    border-bottom: 2px solid #d6d6d6 !important;
    padding-bottom: 15px;
}
.chat-message-left .bg-light{
    background-color:#fff0ed !important;
    margin-left:15px;
}
.chat-message-right .bg-light{
    background-color:#e9f5e9 !important;
    margin-right:15px;
}
.chat{
    font-family: 'myriad_proregular';
    margin:30px 0 30px 0;
    width:100%;
}
.new{
    display:block;
}
.new p {
    width: auto;
    float: right;
    font-family: 'myriad_proregular';
    color: #777777;
    font-size: 20px;
    margin-left: 16px;
}
#chat-search {
    width: 100%;
    float: left;
    margin-bottom: 20px;
}
#chat-search input {
    width: 98%;
    float: left;
    padding:10px;
    border-radius: 30px;
    border: 2px solid #ff8f7a;
}
#chat-search button {
    width: auto;
    background-color: #ff8f7a;
    float: left;
    padding: 12px;
    border: 0;
    border-radius: 30px;
    margin-left: -48px;
}
.video input{
    border-radius:50px !important;
}
.new p a {
    background-color: #ea7a62;
    border-radius: 50%;
    padding: 8px 6px;
    color: #fff;
    font-size: 12px;
    margin-left: 4px;
}
#edit-1 a {
    background-color: #fab8ac;
    border-radius: 50%;
    padding:5px 12px;
    color: #fff;
    font-size:30px;
}
#edit-1 a i{
    font-size:20px;
}
#edit-1 button {
    background-color: #fab8ac;
    border-radius: 50px;
    padding: 10px 30px;
    border: 0;
    color: #fff;
    font-size: 17px;
}
#edit-1 .container{
    border-bottom: 4px solid #fdebe8;
    padding-bottom:30px;
}
#edit-2 .row{
    background-color:#fffbf3;
    padding:50px 30px;
    border-radius:30px;
    margin-top:20px;
}
#edit-2 h3{
    font-size:42px;
    color:#f8a494;
    border-bottom:1px solid #aaaaaa;
    padding-bottom:10px;
}
.edit-2-1 p{
    color:#9fb89e;
    font-size:28px;
}
.edit-2-1 p span{
    color:#f8a494;
    font-size:28px;
}
.edit-2-1 button {
    background-color: #f8a494;
    border-radius: 50px;
    padding: 10px 40px;
    border: 0;
    color: #fff;
    font-size: 24px;
    margin-left: 30px;
}
.edit-2-1{
    border-bottom:1px solid #aaaaaa;
}
.edit-2-2 p{
    color:#f8a494;
    font-size:28px;
}
.edit-2-2 button{
    background-color: #fab8ac;
    border-radius: 50px;
    padding: 10px 40px;
    border: 0;
    color: #fff;
    font-size:24px;
    margin-right:20px;
}
.edit-2-2 aside{
    width:50%;
    float:left;
    padding:20px 0;
}
.edit-2-2 aside img{
    width:50%;
    float:left;
}
.edit-2-2{
    border-bottom: 1px solid #aaaaaa;
}
.edit-2-2 input{
    padding:12px;
    border:2px solid #2d2d2d;
    border-radius:8px;
}
.edit-2-2 textarea{
    padding: 20px 15px 80px 15px;
    border:2px solid #2d2d2d;
    border-radius:8px;
}
.edit-2-3 input {
  width: 10% !important;
  margin-left: 20px !important;
  margin-right: 10px !important;
  border: 1px solid #d6d6d6 !important;
  font-size: 17px !important;
  padding: 5px !important;
}
.edit-2-3 select{
    width:8% !important;
    margin-left: 20px !important;
    margin-right: 10px !important;
    border:1px solid #d6d6d6 !important;
    font-size: 17px !important;
    padding: 5px !important;
    background-color:#fff !important;
    border-radius:10px !important;
}
#detailed-form .edit-2-3 {
  margin-top: 40px !important;
  width: 100%;
  float: left;
}
#detailed-form .edit-2-3 h1 {
  color: #f6a190;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 20px;
}
.edit-2-3 p {
  width: 100% !important;
  float: left !important;
  color: #9fb89e !important;
  font-size: 28px !important;
  border: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 10px !important;
}
.edit-2-3 span{
    width:32% !important;
    float:left !important;
    font-size:22px !important;
}
.edit-2-4 p {
    width: 100%;
    float: left;
    color: #9fb89e;
    font-size: 28px;
}
.edit-2-4 aside{
    width:50%;
    float: left;
}
.edit-2-4 input{
    border:2px solid #2d2d2d;
}
.edit-2-4 img{
    width:50%;
    margin-top:20px;
    border:2px solid #2d2d2d;
}
.edit-2-4 a{
    display:block;
    margin-left:40px;
    color: #9fb89e;
    font-size:24px;
    text-decoration:none;
    margin-top:12px;
}
.edit-2-4 textarea {
    padding: 20px 15px 80px 15px;
    border: 2px solid #2d2d2d;
    border-radius: 8px;
}
#prep aside{
   width:20%;
   float:left;
   background-color:#fef3f2;
   padding:20px 10px;
   border:1px solid #d6d6d6;
   text-align:center;
   box-sizing:border-box;
}
#prep aside p{
    color:#f47f6a;
    font-size:22px;
    margin:0;
}
#prep aside p span {
    color: #a7b399;
    font-size: 36px;
}
#prep aside:first-child{
    border-radius:50px 0 0 50px;
}
#prep aside:last-child{
    border-radius:0 50px 50px 0;
}
#prep2 .row{
    background-color: #fffbf3;
    padding:10px 20px;
    border-radius: 30px;
    margin-top: 20px;
}
#prep2 h3 {
    font-size:28px;
    color: #f8a494;
    margin-top:25px;
}
#prep2 p{
    font-size:24px;
    color: #2d2d2d;
}
#prep2 h4 {
    color: #a7b399;
    font-size: 27px;
    text-align: center;
    margin-top:30px;
} 
#prep2 i {
    font-size: 62px;
    color: #f8a494;
    text-align: center;
    width: 100%;
}
#list aside{
    width:50%;
    float:left;
}
#list .row {
  padding: 10px 20px;
  border-radius: 30px;
}
#list h3{
    color:#9fb89e;
    font-size:44px;
    font-weight:600;
}
#list a {
  color: #595959;
  text-decoration: inherit;
  height: 100px;
  align-content: center;
  font-size:20px;
}
#list img{
    border-radius:10px;
}
#list td{
    font-size:22px;
    padding:30px 20px 20px 20px;
}
#list table{
    border-top:2px solid #797979;
    border-bottom:2px solid #797979;
}

#list table a {
    color: #fff;
    padding: 10px;
    background-color: #f8a494;
    border-radius: 60px;
    font-size: 16px;
}
#list table a img{
    width:25px;
}
#list table span{
    color:#9fb89e;
    display:block;
    font-weight:bold;
}
#create_recipe{
    padding:30px 0;
}
#create_recipe h2 {
    color: #9fb89e;
    font-size:40px;
    text-align:left;
    font-weight:bold;
}
#create_recipe h3 {
    color: #f8a494;
    font-size:25px;
    text-align:left;
}
#create_recipe aside {
  background-color: #fffbf6;
  padding:20px 20px;
  float: left;
  width: 100%;
  border-radius:20px;
  margin-bottom: 20px;
  border: 1px solid #efefef;
}
#but {
  background-color: #f47f6a !important;
  padding: 10px 30px !important;
  float: left !important;
}
#create_recipe aside a {
    color: #fff;
    font-size: 17px;
    border-radius: 60px;
    float: left;
}
#create_recipe aside h3{
    color: #f8a494;
    font-size:24px;
    float: left;
    font-weight: 600;
    margin-left: 17px;
    margin-top:8px;
}
#create_recipe button {
  background-color: #f8a494;
  padding:5px 20px 1px 20px;
  border-radius:50px;
  color: #fff;
  font-size:18px;
  border:0;
  margin-left: 20px;
  float: right;
  margin-top:15px;
  margin-bottom:15px;
  line-height:0;
  padding:20px 0 !important;
  font-family: 'myriad_proregular';
}
#cancel {
  border:2px solid #f8a494 !important;
  color: #f8a494 !important;
  background-color: inherit !important;
}
#create_recipe p {
  width: 80%;
  float: left;
  font-size: 17px;
  color: #abaaaf;
  line-height: 28px;
  text-align: left;
  margin-bottom: 0;
}
#video_recipe aside{
    background-color: #fffbf6;
    padding: 30px 20px;
    float: left;
    width: 100%;
    border-radius: 20px;
    margin-bottom:20px;
    border: 1px solid #e7e7e7;
}
#video_recipe h2{
    color: #9fb89e;
    font-size:40px;
}
#video_recipe h3{
    color: #f8a494;
    font-size:20px;
}
#video_recipe aside a {
    color: #fff;
    font-size: 17px;
    border-radius: 60px;
    float: left;
}
.upload-video .row{
    background-color:#fffbf6;
    padding:20px;
}
#video_recipe p {
  width: 100%;
  float: left;
  font-size: 20px;
  color: #abaaaf;
  margin-left: 60px;
}
#video_recipe ul{
  width: 100%;
  float: left;
  margin:0;
  padding:0;
}
#video_recipe ul li{
  width: 100%;
  float: left;
  margin:0;
  padding:0;
}
#video_recipe aside h3 {
    color: #f8a494;
    font-size:24px;
    float: left;
    font-weight: 600;
    margin-left: 17px;
    margin-top:9px;
}
#video_recipe form{
    width:100%;
    float:left;
}
#video_recipe form input {
  width: 68%;
  float: left;
  padding:7px;
  border-radius:50px;
  border:2px solid #f8a494;
  font-size:14px;
}
#video_recipe form button {
  background-color: #f8a494;
  padding:5px 20px 1px 20px;
  border-radius:50px;
  color: #fff;
  font-size:18px;
  border:0;
  margin-left: 20px;
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}
#ai-2 .container{
    background-color:#fefaf2;
    padding:40px 20px;
    border-radius:30px;
}
.meal .input-group input{
    border-radius:50px !important;
}
.meal .input-group span {
    border-radius: 50px;
    margin-left: -30px;
}
#create_recipe_pop aside {
    background-color: #fffbf6;
    padding:10px 10px 0 10px;
    float: left;
    width: 100%;
    border-radius: 20px;
    margin-bottom: 10px;
}
#create_recipe_pop aside a {
    padding: 5px 4px;
    background-color: #f8a494;
    color: #fff;
    font-size: 9px;
    border-radius: 60px;
    float: left;
}
#create_recipe_pop aside h3 {
    color: #f8a494;
    font-size: 15px;
    float: left;
    font-weight:500;
    margin-left: 8px;
    margin-top: 6px;
}
#white_bg{
    background-color:#fff;
    padding:5px;
    border-radius:10px;
    border:1px solid #ff8f7a;
    display:block;
    float:left;
}
#white_bg h4 {
    display: block;
    float: left;
    color: #9fb89e;
    font-size: 20px;
    padding:10px 15px 0 15px;
    text-align:left;
}
#white_bg h2{
    display:block;
    float:left;
    float: left;
    color:#fd8f7a;
    font-size:17px;
    padding:0 15px;
    text-align:left;
}
#create_recipe_pop aside button {
    background-color: #f8a494;
    padding: 5px 10px;
    border-radius: 50px;
    color: #fff;
    font-size: 11px;
    border: 0;
    margin-left: 20px;
    float: right;
}
#chat-area #close-btn{
    display:none;
}
#create_recipe_pop p {
    width: 100%;
    float: left;
    font-size: 12px;
    color: #abaaaf;
    margin-left: 37px;
    line-height: 17px;
    text-align: left;
}
#ai-2 h3{
    background-color:#c2d1c0;
    padding:8px 12px;
    border-radius:0 70px 70px 0;
    font-size:40px;
    text-align:left;
}
#ai-2 h3 img{
    width:100px;
}
#ai-2 p{
    font-size:26px;
}
#ai-2 #chat li h5 {
    color: #ff8f7a;
    font-size: 30px;
}
#ai-2 #chat li{
    padding: 70px 15px;
}
#search-butt {
  width: auto;
  background-color: #f8a494;
  float: left;
  padding: 11px;
  border: 0;
  border-radius: 30px;
  margin-left: -48px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin-top: -4px;
  position:relative;
}
#active-button{
    width:100%;
    float:left;
    padding:0;
    margin:20px 0 0 0;
}
#active-button li{
    width:20%;
    float:left;
}
#active-button li a {
  width: 90%;
  float: left;
  margin: 0 10% 0 0;
  text-align: center;
  background-color: #fefefa;
  padding: 7px !important;
  border-radius: 50px;
  border: 1px solid #A2b49a;
  color: #A2b49a;
  text-decoration: none;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
}
#mydiv {
  position:fixed;
  z-index: 9;
  text-align: center;
  right:10;
  bottom:10;
  transition:none;
  width:250px;
}

#mydivheader {
  cursor: move;
  z-index: 10;
  position:relative;
}

#inp-search {
  width: 100%;
  float: left;
  padding: 10px 10px 80px 10px;
  border: 1px solid #9ab59a;
  border-radius: 30px;
  margin-top: 15px;
  margin-bottom:10px;
  background-color: #fefefa;
}
#advance-menu-options{
    display:none;
}
.drop {
  background-color: #fff;
  border:1px solid #d6d6d6;
  border-radius:20px;
  padding:20px 10px 10px 10px;
  width: 235px;
  display: none;
  position: absolute;
  margin-top: 50px;
  z-index: 999 !important;
  height:520px;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: #f8a595 white;
  scrollbar-width: thin;
}
.drop::-webkit-scrollbar-thumb {
    border-radius: 10px;
}
.drop aside{
  padding:3px 0;
  width:100%;
  float:left;
}
.drop aside label{
  cursor:pointer;
}
.drop aside button {
  background-color: inherit;
  margin-right: 0;
  border:0;
  color: #bababa;
  font-size: 15px;
}
.drop aside button:first-child {
  float: left;
}
.drop aside input{
  margin-right:5px;
}
#checks {
    width:55%;
    float: left;
    margin: 0 15%;
    padding: 26px 0 0 0;
}
#adv .advance {
  width: 59%;
  margin-left: 5%;
  font-family: 'myriad_proregular';
  padding: 10px;
  font-size: 18px;
}
.hash {
    width: auto;
    float: left;
    background-color: #fabaae;
    color: #fff;
    border: 0;
    margin-left: 1%;
    padding:13px 15px;
    border-radius: 30px;
}
.hash b {
    font-size: 22px;
    line-height: 32px;
}
.refresh:hover .hidden-element {
    width: 100px;
    display: block;
    position: absolute;
    background-color: #ffe3dc;
    color: #2d2d2d;
    text-align: center;
    border-radius: 20px;
    margin-top:20px;
    padding: 0px 8px;
    font-size: 16px;
    float: left;
    margin-left: -41px;
}
.search:hover .hidden-element {
    width: 100px;
    display: block;
    position: absolute;
    background-color: #ffe3dc;
    color: #2d2d2d;
    text-align: center;
    border-radius: 20px;
    margin-top:20px;
    padding: 0px 8px;
    font-size: 16px;
    float: left;
    margin-left:-30px;
}
.hash:hover .hidden-element {
    width: 100px;
    display: block;
    position: absolute;
    background-color: #ffe3dc;
    color: #2d2d2d;
    text-align: center;
    border-radius: 20px;
    margin-top:20px;
    padding: 0px 8px;
    font-size: 16px;
    float: left;
    margin-left: -41px;
}
#checks li {
    width: auto;
    float: left;
    text-align: center;
    background-color: #fbc9bf;
    color: #fff;
    border: 0;
    margin-left: 2%;
    padding:8px;
    border-radius: 30px;
    font-family: 'myriad_proregular';
    font-size:16px;
}
#checks li:hover{
    background-color:ff8f7a;
}
#checks li a {
    color: #fff;
    text-decoration: none;
    font-size:16px !important;
}
#checks li input{
    margin-right:10px;
}
#adv {
  width:15%;
  float: left;
  margin: 0;
  padding: 20px 0 0 0;
}
#search-butt svg{
    color:#fff;
}
.dropdown-menu li a {
    font-size: 15px !important;
    padding-bottom: 10px !important;
}
#env{
    width:100%;
    float:left;
}
#env a {
    width: 100%;
    float: left;
    margin: 0 2%;
    text-decoration: none;
}
#env a:nth-child(3) img{
    border:4px solid #00afff;
    border-radius:50%;
}
#env a:nth-child(4) img{
    border:4px solid #00afff;
    border-radius:50%;
}
#footer h3{
    width:100%;
    float:left;
    text-align:right;
    color:#f8a494;
    margin-top:30px;
}
#footer h5{
    width:100%;
    float:left;
    text-align:center;
    color:#a2b49a;
    margin-top:10px;
    font-size:20px;
}
#trend-icons a img {
  width:49px;
  border-radius:0;
  margin:auto;
}
.foot-2 h6{
    color:#9fb89e;
    font-size:26px; 
}
.foot-2 input{
    width:70%;
    float:left;
    border:2px solid #9fb89e;
    border-radius:50px;
}
.foot-2 button {
    width: 30%;
    float: left;
    background-color: #f8a494;
    border-radius: 50px;
    color: #fff;
    text-align: center;
    padding: 8px 20px;
    border: 0;
    margin-left: -40px;
}
.foot-2 h2{
    text-align:right;
    color:#f8a494;
    font-size:22px;
}
.foot-2 h2 span{
    text-align:right;
    color:#2d2d2d;
    font-size:22px;
}
#trending-2 .container{
    padding:30px 20px;
    background-image:url(../img/non-veg.png);
    background-color:#fdfbf5;
    margin-top:30px;
    border-radius:30px;
}
#trend .search{
    width: auto;
    background-color: #ff8f7a;
    float: left;
    padding: 9px;
    border: 0;
    border-radius: 30px;
    margin-left: -48px;
}
#trend .search img{
    width:30px;
}
#trending-2 aside i{
    color:#ff8f7a;
}
#trending-2 aside a.like_recipe{
    text-decoration: none;
    text-align: center;
    width: 20%;
    float: left;
    margin: 0 !important;
    position:relative;
}
#trending-2 aside a.comment_recipe{
    text-decoration: none;
    text-align: center;
    width: 20%;
    float: left;
    margin: 0 !important;
    position:relative;
}
#trending-2 aside span{
    color:#000;
    margin-left:5px;
    font-size:12px;
}
#trending-2 h2{
    font-size:60px;
    margin-bottom:20px;
    color:#ff8f7a;
}
#confirmdialyDeleteRecipe{
  background-color: #f27e68;
  color: #fff;
  padding: 7px 20px;
  border-radius: 50px;
  border: 0;
}
#submitdailyNote{
  background-color: #f27e68;
  color: #fff;
  padding: 7px 20px;
  border-radius: 50px;
  border: 0;
}
.add_to_mp_for_recipe{
  background-color: #f27e68;
  color: #fff;
  padding: 7px 20px;
  border-radius: 50px;
  border: 0; 
}
.recipe_cookbook_name {
  font-size: 0.75rem;
  text-align: left;
  color: #444;
  height: 1.5em;
  overflow: hidden;
}
.recipe_link img{
  width: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  float: left;
  aspect-ratio: 16/9;
}
.recipe_title a{
  margin-top: .5rem;
  margin-bottom: 0.7rem;
  text-align: center;
  font-family: 'rocaone-rgregular';
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0.4rem 0.8rem 0.1rem;
  line-height: 1.1;
  flex-grow: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height:3.5rem;
  text-align-last: center;
  color: #000;
  text-decoration: navajowhite;
}
.recipe_title h6{
  font-size: 24px !important;
}
.back_button{
    margin-bottom:20px;
}
.white-butt{
    background-color:#fff !important;
    color:#a9c0aa !important;
    border:1px solid #a9c0aa !important;
    padding:10px 25px !important;
    border-radius:50px !important;
}
.custom-hide{
    display:none;
} 
#trending-2 a{
    text-align:center;
    font-size:20px;
    color:#676767;
    margin-top:15px;
    padding:0;
    position:relative;
}
#trending-2 #trend-icons a {
    margin: 0 1%;
    text-decoration:none;
}
#trending-2 #trend-icons img{
    width:49px;
}


#email-template .email-container {
    width:100%;
    float:left;
    background-color: #ffffff;
    margin: auto;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    }
    #email-template .logo {
      font-size: 28px;
      font-weight: bold;
    }
    #email-template .logo span {
      color: #ff6b6b; /* Cook */
    }
    #email-template .logo span:last-child {
      color: #4CAF50; /* moi */
    }
    #email-template .message {
      margin-top: 20px;
      font-size:18px;
    }
    #email-template .invite-msg {
      color: #f6a190;
      font-weight: bold;
      margin-bottom:0;
    }
    #email-template p strong{
      color: #f6a190;
      font-weight: bold;
      margin-bottom:0;
    }
    #email-template hr{
        border:1px solid #2d2d2d;
    }
    #email-template .invite-green{
      color: #a5bda5;
      font-weight:400;
    }
    #email-template .buttons {
      margin-top: 20px;
    }
    #email-template .btn {
      display: inline-block;
      margin-right: 10px;
      padding: 10px 20px;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
    }
#trending-list .container .row {
  padding: 30px 20px;
  background-image: url(../img/veg.png);
  background-color: #fdfbf5;
  margin-top: 30px;
  border-radius: 30px;
}
#trending-list table img{
  margin-bottom:20px;
}
#trending-list table h5{
  font-size:24px;
}
#email-template .btn-accept {
  background-color: #f6a190;
  border-radius: 30px;
  padding: 6px 20px 3px 20px;
}
#email-template .btn-accept:nth-child(2){
  background-color: #fff;
  border:1px solid #f6a190;
  color:#f6a190;
}
#email-template .btn-accept:nth-child(3){
  background-color: #fff;
  border:1px solid #f6a190;
  color:#f6a190;
}
    #email-template .btn-tentative { background-color: #f39c12; }
    #email-template .btn-decline { background-color: #7f8c8d; }
    #email-template .footer {
      margin-top:10px;
      font-size: 14px;
      color: #555;
      padding-top:10px;
    }
    #email-template .footer a {
      color: #3498db;
      text-decoration: none;
    }


@media screen and (min-width:100px) and (max-width:700px) {
.custom-hide{
    display:block;
    padding:2px 20px;
}
.mob-20{
    width:20%;
}
.mob-80{
    width:80%;
}
.cust-recipe-head h4{
  font-size:32px;
  line-height:40px;
}
.serchrecipetext{
    width:88%;
}
.user_filter_section {
  float: left;
  width: 100%;
}
.meal-2 aside {
  margin: 10px 0;
}
#recipe-books input{
    width:85% !important;
    padding:5px 15px 5px 15px;
}
.serchrecipetext{
    padding:5px 15px 5px 15px;
    width: 85%;
}
#recipe-books h2{
    font-size:30px !important;
    margin:0;
}
.advance {
    width: 29%;
}
 #recipe-books .col-md-6 button {
    padding:3px 10px 3px 10px;
    margin-right: 0px;
    font-size: 12px;
  }
#chat{
    margin-bottom:20px;
}
.newsletter {
  border-radius: 30px;
  margin: 6%;
  width: 88%;
}
header .container:nth-child(1){
    display:none;
}
.meal-3 aside {
  margin: 2% 1%;
  width:98%;
}
.meal-3 aside h4 {
  font-size: 13px;
}
.mob-buttons .dropdown-content{
  min-width:220px !important;
  margin-top:60px !important;
  border-radius: 20px !important;
  border: 2px solid #f8a494 !important;
  padding: 20px 10px !important;
  transition-delay: 1s;
}
.mob-buttons a {
  color: #a8a8a8 !important;
  display: block;
  text-decoration:none;
  padding: 5px 0;
}
#mobile_menu_content a:hover{
  color:#000 !important;  
}
.logo img{
    width:60%;
}
.mob-buttons .dropdown{
  margin: 3px;
}
.chef{
  margin: 3px;
}
#mobile_menu_toggler{
    margin:3px;
}
.plus{
  margin:1px;
}
.custom-hide .col-md-6{
    width:50%;
}
.mob-buttons img{
    width:37px !important;
}
}
@media screen and (min-width:600px) and (max-width:1100px) {
header li a {
  font-size: 16px !important;
  padding: 0px 15px !important;
}
.video-book .user_filter{
    font-size:10px;
}
#right-icons a {
    padding:0 2px 10px 2px;
}
.mob-80 #serchcookbooktext{
    width:100% !important;
}
#meal-planner-list .col-md-4{
    width:50%;
}
.nav-new li {
   padding: 0 6px;
}
.orange-butt {
  margin-top: 10px;
}
#right-icons a img {
    height: auto;
}
.container{
    max-width:95%;
}
header .col-md-3{
    width:20%;
}
header .col-md-6{
    width:60%;
}
#navbarSupportedContent{
    display:inherit !important;
}
.nav-new li{
  width:auto;
}
.nav-new li a {
  font-size: 13px !important;
}
header .col-md-3 .img-fluid{
    margin-top:14px;
}
#search .refresh {
  width:8%;
}
#search .col-md-8{
    width:60%;
}
#search .col-md-4{
    width:40%;
}
#search input {
  width:60%;
}
 #search .advance {
    width: 22%;
    padding: 11px;
    font-size: 15px;
  }
}
@media screen and (min-width:1101px) and (max-width:1199px) {
.container{
    max-width:95%;
}
}
@media screen and (min-width:601px) and (max-width:700px) {
.user_filter {
  padding: 5px 10px;
  font-size: 11px;
}
.author_info{
    font-size:10px;
}
.add_hashtag {
    height: auto;
}
.reset_filter_btn {
  width:auto;
  height:auto;
  margin-top: 0px;
}
.reset_filter_btn i{
  font-size:17px;
}
.recipe_about_info {
  padding: 7px 5px 2px 5px !important;
}
.recipe_type_filter .filter_dropdown_toggle {
  padding: 10px 5px 7px 5px !important;
  font-size: 12px !important;
}
#search .refresh {
    width: auto !important;
    padding: 14px 14px !important;
}
#search .refresh i {
  font-size: 13px !important;
}
#search .advance {
  padding: 8px !important;
  font-size: 14px !important;
}
#search-butt {
  padding: 11px !important;
  margin-left: -42px !important;
  margin-top: -4px !important;
}
#search-butt img{
  width:20px !important;
  height:20px !important;
}
#search input {
  padding: 5px 20px 4px 20px !important;
}
}
@media screen and (min-width:700px) and (max-width:768px) {
.today_mp {
  width: 100%;
} 
}
@media screen and (min-width:601px) and (max-width:767px) {
 .friends_bg .col-md-2 {
    width: 33.333%;
    margin-bottom: 20px;
 }
}
@media screen and (min-width:300px) and (max-width:599px) {
.recipe_type_filter .filter_dropdown_toggle{
    font-size:10px;
    padding:5px;
}
.author_img img {
  height:23px;
}
.cust-recipe-head .col-md-6{
    width:100%;
}
.advanced_new_2 {
    width:auto !important;
    font-size: 12px;
    margin-right: 5px;
  }
.cust-recipe-head{
    display:block !important;
}
.main_recipes_section .serchrecipetext{
    width:100% !important;
}
.main_recipes_section #create_new_recipe{
    width:auto !important;
}
.main_recipes_section .user_filter{
    padding: 1px 6px;
    font-size: 9px;
}
.video-book .user_filter {
  padding: 1px 6px;
  font-size:11px;
}
.filter_group:last-child .filter_dropdown {
  margin-left: -90px;
}
#register .logo{
    margin:20px auto;
}
#register {
  padding: 50px 0;
}
.show_create_recipe_modal{
    padding:0 !important;
}
 #recipe-books .col-md-6 button {
    padding:3px !important;
  }
.recipe_about_info .recipe_like i{
    font-size:14px;
}
.recipe_about_info .recipe_rating img{
  width: 20px;
}
.filter_dropdown input{
    width: 10px;
    height: 10px;
    margin-top: 2px;
}
.selected_tags_container .tag-item {
  padding: 3px 6px;
}
.tag_name{
    font-size:10px;
}
.tag_close i {
  font-size: 9px;
}
.tag_close{
    margin-left:0;
}
.selected_tags_container {
  padding:10px;
}
#scrollLeftBtn {
  padding: 5px 8px;
  border: 2px solid #e37660;
  width: 30px;
  height: 30px;
}
#scrollRightBtn{
  padding: 5px 8px;
  border: 2px solid #e37660;
  width: 30px;
  height: 30px;  
}
.filter_dropdown label{
    font-size:10px;
}
.reset_filter_btn i{
    font-size:18px;
}
.recipe_tag_search {
  padding: 6px 6px;
  margin: 0px 1% 0 1%;
}
.recipe_tag_search img{
  width:20px !important;
  height:20px !important;
}
.column-3{
   display:block; 
}
.column-3 .col1, .col2 {
  width: 100%;
}
.column-3 .col3{
    width:100%;
}
.five-col .col {
  flex:auto;
}
.show_cook_book_recipes 
.create_new_collection img{
    width:30px !important;
}
.recipe_toggle_list {
  width: 100%;
  margin-top: 20px;
}
#show_cook_book_recipes .col-md-3{
    width:50%;
}
.recipe_search_area input{
    width:98%;
}
.cook_book_cover img {
  height: 250px;
}
.ingredients_contain_mp{
    margin:20px 0;
}
#view_single_selected_recipe_mp h2{
    margin-top:30px;
}
.col-md-3 .recipe_header{
    margin:0 !important;
}
#post-container .cus-col img {
  max-height: 120px;
}
#post-container h5 {
  font-size: 14px;
  margin: 10px 0 6px 0 !important;
}
.view_all_btn{
    width:100% !important;
    text-align:center;
}
#suggestions h3 {
  margin:0;
}
.find_friends_btn {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
}
.slick-prev{
    padding:0 !important;
}
#your #view_all_suggestions_friends{
    width:100% !important;
    text-align:center !important;
}
.slick-next{
    padding:0 !important;
}
.slick-prev::before, .slick-next::before {
  font-size:10px;
}
.create_new_cookbook{
    margin-top:-5px;
}
#suggestions .row {
  padding: 10px;
}
.today_mp {
  padding: 8px 40px;
  width: 100%;
  float: left;
  margin: 20px 0;
}
.day_green_section {
  margin-bottom: 20px;
}
.day_red_section {
  margin:20px 0;
}
#ai .row {
  padding:15px 0px;
}
#chat {
  padding: 40px 20px 25px 20px;
}
.cust-reel-head input {
  width:98%;
}
.dummy-ad{
    margin-bottom:20px;
    float:left;
}
.btn-red{
    font-size:12px;
}
.add{
    font-size:12px;
}
.btn-green{
    font-size:12px;
}
#friends-container .col-md-2{
    width:50%;
}
#friend-search-input {
  width: 87%;
}
.freinds_area {
  padding: 20px;
}
.freinds_area .mt-4{
    margin-top:10px !important;
}
.main_recipes_section .col-md-3{
    width:50%;
}
.view-rcipe-titltes h4 {
  font-size: 38px;
}
.main_recipes_section{
    margin-bottom:15px !important;
}
#dynamic-recipes-trending .col-md-3{
    width:50%;
}
#trending .col-md-3{
    width:50%;
}
.video-book .col-md-3 {
  width:100% !important;
}
.expand_new{
    font-size:12px;
    margin-top:0;
    margin-right:5px;
}
.mob-hide{
    display:none;
}
.video-book #serchcookbooktext{
    width:100% !important;
    font-size:14px;
}
.video-book .advance_search_wrapper{
    margin-top:0 !important;
}
.advance_search_wrapper{
    margin-top:20px;
}
#video-pro img {
  margin: -30px auto 15px auto;
  width:50px;
  height:50px;
}
#video-pro p {
  font-size: 14px;
}
#google_translate_element{
    display:none;
}
#video-pro p b{
  font-size: 14px;
}
#login form img {
  width: 35px;
}
#login form p{
    margin-top:5px;
}
#login form button {
  padding: 5px 20px;
}
#login #signupBtn {
  padding: 5px 20px;
}
#login form p {
  line-height: 17px;
  font-size: 14px;
}
#login form p a {
  font-size: 14px;
}
.reel_filter_group, .recipe_filter_group {
    width:16%;
    float: left;
    text-align: center;
    margin:1%;
}
.recipe_filter_group button {
  padding: 6px;
}
.show_reel_selected_tags, .show_recipe_selected_tags {
  padding: 16px 30px;
  width:60%;
}
.reel_type_btn, .recipe_type_btn {
  margin: 1%;
  font-size: 10px;
  padding: 5px 10px;
}
#view-recipe .col-md-9 {
    width:100%;
    margin-right:0;
}
.md-margin-reverse{
    margin-top:10px;
}
#jean-drop summary {
  margin:0 !important;
}
.orange-butt span {
  margin-top:8px;
}
#jean-drop img {
  width: 32px !important;
  height: 32px;
}
.user_name {
    font-size: 14px;
    margin-top: 7px;
}
#trend-icons a img {
    width: 30px !important;
}
.img-square {
  height:120px;
}
#layout button{
    width:100%;
}
#layout a:last-child{
    top:-70px;
    float:right;
}
#layout {
  margin: 10px 0 0px 0;
}
#trending h6 {
  font-size: 14px !important;
}
}
@media screen and (min-width:601px) and (max-width:699px) {
#dynamic-recipes .col-md-3{
    width:50%;
}
.mob-grid-col .reel_card_container .recipe_image {
  height: 115px !important;
}
.mob-grid-col .reel_card_container {
  max-height: 280px !important;
}
.cust-reel-head{
  margin: 20px 0 30px 0 !important;
}
#dynamic-recipes-trending .col-md-3{
    width:50%;
}
#dynamic-recipes-most .col-md-3{
    width:50%;
}
#chat aside a {
  font-size: 10px;
}
#video-pro p {
  font-size: 12px;
}
#video-pro p b {
  font-size: 14px;
}
.video-book span{
    font-size:12px;
}
#video-pro img {
  margin: -30px auto 15px auto;
  width: 60px;
  height:60px;
}
.cust-reel-head h4 {
  font-size: 40px;
}
.today_mp {
  padding: 8px 40px;
  margin: 10px 0;
  width:100%;
}
#show_meal_planner .col-md-4{
    width:50%;
    margin-bottom:20px;
}
#show_meal_planner .col-md-3{
    width:50%;
    margin-bottom:20px;
}
.meal_planner_header h2{
  font-size: 50px;
}
.cust-reel-head input {
  padding: 5px 20px 2px 20px;
}
.cust-reel-head button {
  margin-left: -38px;
}
.cust-reel-head img {
  width: 20px;
  height: 20px;
}
.reset_recipe_filter_btn{
  margin-left: -38px;
  font-size: 13px;
  height: 40px;
}
.create_new_cookbook{
    margin-top:0;
}
#privacy p {
  font-size: 16px;
}
#privacy ul li {
  font-size:16px;
}
.img-cover {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
}
@media screen and (min-width:450px) and (max-width:700px) {
  .main_recipes_section #dynamic-recipes .col-md-3 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}
@media screen and (min-width:300px) and (max-width:400px) {
.reel_block {
  height: 300px;
}
#cookbooks_container .col-md-3{
    width:100%;
}
}
@media screen and (min-width:400px) and (max-width:600px) {
#cookbooks_container .col-md-3{
    width:50% !important;
}   
}
@media screen and (min-width:100px) and (max-width:319px) {
.main_recipes_section #dynamic-recipes .col-md-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.cust-reel-head h4 {
  font-size: 30px;
}
}
@media screen and (min-width:100px) and (max-width:299px) {
.feed_filter_buttons .user_filter {
  font-size: 10px;
}
}
@media screen and (min-width:300px) and (max-width:900px) {
.mob-half{
    width:50% !important;
    float:left;
} 
}
@media screen and (min-width:300px) and (max-width:700px) {
.main_recipes_section .serchrecipetext {
    height: 40px;
}
.main_recipes_section #search-butt {
    height: 44px;
}
.reset_recipe_filters img {
  width:35px;
  height:35px;
}
}
@media screen and (min-width:300px) and (max-width:600px) {
.add_hashtag img {
  width:40px;
  height:40px;
}
.cookbook_single .justify-content-end{
    justify-content:center !important;
}
.mob-grid-col .reel_card_container .recipe_image {
  height:130px !important;
}
.mob-grid-col .reel_card_container {
    max-height:249px !important;
}
.footer-form .card {
  width:90%;
}
#packageContainer {
  display:block;
}
.footer-form h1{
  font-weight:bold;
}
.main_recipes_section .cust-reel-head div{
  width:100% !important;
}
.main_recipes_section .cust-reel-head input {
  width: 100%;
}
.reset_recipe_filters img {
  width: 40px;
  height: 40px;
}
.create_new_cookbook{
    margin-bottom:20px;
}
.cust-reel-head .reset_input{
    width:90% !important;
}
.reset_recipe_filter_btn img {
  width:35px !important;
  height:35px !important;
}
.advanced_new {
  margin-top: 0;
  font-size: 13px;
}
.tag_search img {
  width:50px;
  height:50px;
}
#reels-container .col-md-3{
    width:50%;
}
.reset_filter_btn img{
  width:40px;
  height:40px;
}
header .col-md-3{
   width:50% !important;
}
 .advance_search_wrapper .user_filter_section {
    padding-top: 0px;
    margin-bottom:10px;
  }
.video-book .mob-half{
    width:50% !important;
}
.author_img img {
  width:20px;
  height:20px;
}
#reels-container .col-12{
  width: 50%;
}
#dynamic-recipes .col-12{
  width: 50%;
}
#reel-buttons li button{
    margin-bottom:10px;
    margin-left:0 !important;
}
#chat.expanded {
  width: 90% !important;
  padding: 40px 20px !important;
  margin: 20px auto !important;
  height:auto !important;
}
#list a{
  font-size:13px;
}
.new_shopping_list .sp_image img{
    height:40px;
}
.accordion-panel h4 {
  font-size:16px !important;
}
#generate-combined-list {
  padding: 6px 20px 4px 20px !important;
  font-size: 12px;
  float: right !important;
}
#list h3 {
  font-size: 18px;
}
.zoom-wrapper{
    overflow:hidden;
}
.main_reel_section_top{
    padding:10px;
}
#footer nav a {
  font-size: 13px;
}
.reel_author_img {
  width: 15%;
}
.reel_title strong{
    font-size:12px;
}
.author_name{
    font-size:10px;
}
.reel_views{
    font-size:10px;
}
.cust-reel-head{
    width:100%;
    display: inline flow-root list-item !important;
}
.trend-div{
  width:85% !important;
}
.cust-reel-head h4{
    font-size:36px;
    margin-right:20px;
}
.cust-reel-head input {
  padding: 4px 20px 2px 10px;
}
.cust-reel-head button {
  padding: 6px;
  float:right;
}
.reel_type_btn {
  padding: 5px 5px 2px 5px;
  font-size: 10px;
}
.reel_tag_search {
  padding:3px 8px;
  box-shadow: 4px 3px 7px 1px #c4c4c4;
  margin: 0px 0% 0 0%;
}
  .show_reel_selected_tags {
    padding: 0px 5px !important;
    height: 40px;
    width: 60%;
  }
.reel_tag {
  margin-top: 4px;
  padding: 2px 10px;
}
.user_filter {
  padding:3px;
  font-size: 12px;
}
.feed_filter_buttons .user_filter {
  font-size: 10px;
}
#reel-scroll-controls {
  padding: 20px 10px;
}
.cust-reel-head img {
  width: 26px;
  height: 26px;
}
.main_recipes_section {
  padding: 15px;
  margin-top: 30px !important;
}
#dynamic-recipes .col-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
.recipe_about_info .recipe_rating span {
  font-size: 11px;
}
.recipe_about_info .recipe_like span {
  font-size: 11px;
}
.recipe_author_name strong{
    font-size:11px;
}
.form-wid-4 {
    width: 100%;
    margin-left: 0;
    height: auto;
    padding: 10px 0;
}
#login .col-md-5{
    text-align:center;
}
#login .col-md-5 img{
    width:150px;
}
#login form {
  padding: 10px 30px;
}
.form-wid-6 {
    width:100%;
    border-left:0;
    padding-left:0;
}
#cookbook h6 {
  width:40%;
  font-size: 22px;
  padding: 5px 0;
}
#cookbook select {
  width:56%;
  padding: 6px;
}
#detailed-page h2 {
  font-size: 22px !important;
  margin: 0 !important;
}
 #cookbook button {
    width: 100% !important;
    padding: 3px;
    font-size:16px;
    margin-top: 5px;
    margin-left: 0 !important;
}
#recipe-info #youtube_url {
  width: 100%;
  padding: 5px 10px;
}
#recipe-info #fetch_thumbnail {
  margin-bottom: 10px;
}
#detailed-form input{
    width:100%;
}
#des-editor .ck-reset {
  width: 100%;
}
#category .dropdown-buttons {
  width: 100%;
  margin-left: 0;
}
#category .dropdown-buttons button {
  padding: 5px;
}
#salad-recipe figure:last-child {
  width: 100%;
  margin-left: 0;
}
#salad-recipe figure {
  width: 100%;
  float: left;
}
#category .tag-input-wrapper{
  width: 100%;
}
 #recipe-info b {
  font-size:18px;
}
#detailed-page aside p{
    font-size:14px !important;
}
#salad-recipe ul li {
  font-size: 16px;
}
#preparation textarea {
  width: 72% !important;
}
#preparation #add_step_prepration {
  width: 48%;
  margin-top: 0px;
}

.edit-2-3 span {
  width: 45% !important;
  font-size: 16px !important;
}
.edit-2-3 select {
  width: 17% !important;
}
.edit-2-3 input{
    width:20% !important;
    margin-right:0 !important;
    margin-left:10px !important;
}
.object img {
  width: 40px;
  height: 40px;
  float:left;
  margin-top: 10px;
}
 .object a {
    width: 68%;
    margin-top: 15px;
    margin-left: 10px;
}
.note {
  width: 100%;
}
.rlt_social_icons{
  width: 100%;
  float: left;
  margin-top: 10px;
}
.rlt_social_icons img{
  margin-left:0;
  margin-right:10px;
}
#reel-buttons{
    margin-top:5px !important;
}
#reel-buttons li{
    width:100% !important;
}
#create-detailed img{
    width:30px !important;
}
#create-detailed aside form input{
  width: 100%;
}
#create-detailed aside form button {
  padding: 2px 20px 1px;
  font-size: 16px;
  margin-left: 20px;
  float: right;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
  margin-top: 5px;
}
#create-detailed aside h3 {
  font-size: 16px;
  margin-left: 10px;
  margin-top: 8px;
}
#create-detailed aside p {
  width: 100%;
  font-size: 15px;
  margin-left: 0px;
  margin-top: 10px;
}
#cooking-step{
    display:block;
}
.video-book span{
    font-size:13px;
}
.pink-button{
   margin-bottom:20px; 
}
#cooking-step .step-image-container {
    width:100%;
    padding:30px;
}
#cooking-step .step-content-container{
  width:100%;
  padding:30px;
}
.account-details h3 {
  font-size: 26px;
}
.account-details p {
  font-size:18px;
}
.cus-img-account {
  width: 200px;
  height: 200px;
  margin-left: 85px !important;
}
#account-info aside button {
  margin-left: 230px !important;
}
.account-page h4 {
  font-size: 22px;
}
#account-info h3 {
  font-size: 30px;
  margin-top: 0px;
}
.account-details aside {
  margin: 10px 0;
}
.account-details ul li {
  font-size: 17px;
  font-weight:normal;
}
#meal-planner-list .red_meal{
    width:100%;
}
.meal h3 {
  font-size: 40px;
  margin-bottom: 10px;
  text-align: center;
  margin-top: 10px;
}
.controls {
  margin-top: 20px !important;
}
.pro-buttons button {
  padding: 10px 20px;
  font-size:11px;
  box-shadow: 1px 2px 6px #d6d6d6;
  width: 100%;
  margin-bottom: 10px;
}
.account-page h6 {
  font-size: 30px;
}
.account-page h5 {
  font-size: 36px;
}
.account-page ul li {
  font-size: 16px;
  font-weight: 400;
}
.pro-buttons .col-md-2{
    width:50%;
}
.pro-buttons .col-md-4{
    width:50%;
}
#view-recipe .col-md-12 img {
  height: 300px;
}
#jean-drop summary {
    width:auto;
}
#view-recipe .col-md-12 h4 {
  font-size: 33px;
}
#view-recipe p {
  width: 100%;
}
#salad li {
  font-size:16px;
}
#play h1 {
  margin-top: 40px;
}
#comment-pro li {
  width: 100%;
  margin: 0;
}
#comment-pro li aside img{
  width:40px !important;
}
#comment-pro li aside h4{
  font-size:16px !important;
}
#comment-pro span {
  font-size:14px !important;
}
#comment-pro li aside p{
    font-size:14px !important;
}
.custom-popup-box{
    width:90% !important;
    height:550px;
}
#create_recipe aside h3{
    font-size:18px;
}
#create_recipe p {
  width: 100%;
  font-size: 13px;
  margin-left: 0;
  line-height: 20px;
  margin-top: 11px;
}
#create_recipe button {
  margin-left: 0;
  float: left;
  font-size:14px;
}
#create_recipe aside{
    padding:10px;
}
#video_recipe h2 {
  font-size: 20px !important;
}
#video_recipe h3 {
  font-size: 16px !important;
}
#video_recipe form input {
  width: 100%;
}
#video_recipe form button {
  width: 100%;
  font-size:14px;
}
#video_recipe p {
  width: 100%;
  font-size: 15px;
  margin-left: 0;
  line-height: 20px;
}
#play h2 {
  font-size: 18px !important;
  margin-bottom: 0 !important;
}
#play p{
  font-size: 16px;
  margin-top: 5px !important;
}
#dp img {
  width: 40%;
  float: left;
}
#dp p{
  font-size:15px;
}
#comm .col-md-6{
    width:50% !important;
}
#comm h4 {
  font-size: 34px;
  padding: 15px 0 0 0;
}
#view-recipe aside button{
    float:left;
}
.mob-buttons img {
    width:38px !important;
}
#chat-area #close-btn {
    width: 20%;
    background-color: #ff4a3b;
    border-radius: 5px;
    padding: 5px 10px;
    color: #fff;
    border: 0;
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
}
#chat-area {
    position: fixed;
    top: 0;
    width:100%;
    height:100vh;
    background-color: #f1f1f1;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.4s ease;
    padding: 20px;
    z-index: 999;
}
#chat-messages {
  max-height:360px !important;
}
.chat-contact-list .sent {
    width: 100%;
    white-space:normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    overflow: hidden; 
}
.chat-contact-list .received{
    width:100%;
    white-space:normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    overflow: hidden; 
}
#chat-area.open {
    right: 0;
    height:100vh !important;
}
#recipe-books .container .row {
  padding: 10px;
}
#suggestions .col-md-2{
    width:50%;
}
#pending h3 {
  font-size: 50px;
}
.social {
  margin-top: 10px;
  margin-bottom: 10px;
}
#your h3 {
  font-size: 50px;
}
#your .col-md-2{
    width:50%;
}
 #view-friends button {
    font-size: 10px;
    padding: 7px 0px;
    margin-top: 0;
  }
.friend-pro img{
    width:25px !important;
    margin-right:10px;
}
#post-container{
    font-size:10px;
}
#view-friends .col-md-3{
    width:50%;
}
#view-friends h3 {
  margin: 10px 0;
  font-size: 13px;
}
#view-friends .col-md-3 h4 img{
  width:25px !important;
}
#view-friends .col-md-3 h4{
  font-size:15px;
}
#trending-2 #trend-icons a {
  width: 18%;
  float: left;
}
#trending-2 #trend-icons img {
  width: 55px;
}
#recipe-books .dropdown {
  top: 10px !important;
}
.wid-20{
    width:20% !important;
    float:left;
}
.wid-80{
    width:80% !important;
    float:left;
}
.add-new{
    margin-top:0;
}
#upload-reel aside input {
  font-size: 13px;
}
#upload-reel aside select {
  font-size: 13px;
}

#upload-reel aside label{
    font-size:18px;
}
#upload-reel aside button {
  font-size: 13px;
}
#suggestions h3{
    font-size:36px;
    margin-top:20px;
}
#layout button p {
  width: 70%;
  margin: 0 0 0% 5%;
}
#trend-icons a img {
  width: 55px;
}
header{
    margin-bottom:0;
}
#trending .mob-col-2 {
    width: 49%;
    margin:0 1px;
}
.mob-buttons{
    margin:auto;
}
#trending .container .row {
    padding: 15px 0px;
    margin-top: 10px;
}
.mob-col-2 #layout button p {
  width: 72%;
  font-size:10px;
}
.mob-col-2 #layout button p b {
  line-height: 10px;
}
#trending .mob-col-2 h6 {
  text-align: center;
  font-size: 12px;
  color: #53525b;
  margin-top: 15px;
  font-weight: 500;
  padding:0 10px;
}
.mob-col-2 #layout button span img{
    width:100% !important;
}
.mob-col-2 #trend-icons a img {
  width: 27px;
}
.custom-hide .col-md-4 {
    width:25%;
    float: left;
}
.custom-hide .col-md-8 {
    width:75%;
    float: left;
    padding:0;
}
header {
  padding:10px 0 0px 0;
}
#view button{
    width:100%;
    margin-bottom:20px;
}
.custom-hide .logo img{
    width:100%;
}
.mob-col{
    background-color:inherit;
    border:0;
}
.sear input {
  padding:6px;
}
#suggestions .col-md-2 img{
    margin-top:20px;
}
#suggestions .col-md-2 button {
    width: 47%;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
  }
#right-icons a:nth-child(1)::before {
    margin-left:23px;
}
#foot-mob-menu {
    display: block !important;
    position: fixed;
    bottom: 0;
}
#mydiv{
    display:none;
}
#close_mobile_menu{
    background-color:inherit;
    border:0;
}
#close_mobile_menu i{
    color:#f8a494;
    font-size:25px;
}
#right-icons a:nth-child(2)::before {
    margin-left:23px;
}
#right-icons a:nth-child(5)::before {
    margin-left:23px;
}
header .col-md-2{
   width:50% !important;
}
header .col-md-7{
   display:none;
}
.social aside {
  width: 100%;
  margin: 20px 0;
}
.social aside a {
  width:13%;
  margin: 0 5px;
  text-align:center;
}
.social aside a img{
    width:40px;
}
.orange-butt{
    margin-top:0;
}
#right-icons a {
  padding: 18px 13px 10px 13px;
}
#search input {
  width:55%;
  font-size: 12px;
}
#search-butt {
    width: auto;
    padding: 9px;
    margin-left: -38px;
}
#search-butt img{
  width: 25px !important;
  height: 25px !important;
}
.meal input {
  padding: 5px 20px 3px 20px;
  width:96%;
}
.meal-date button {
  padding: 5px 30px;
  font-size: 16px;
}
.meal-date .col-md-2 button {
  padding: 5px 30px;
  font-size: 16px;
  margin-bottom: 10px;
}
 #search .advance {
    width:auto;
    padding:7px 6px;
}
#search .refresh i {
  font-size: 22px;
}
#search .refresh {
  width: auto;
  padding:8px 8px;
}
#right-icons{
  width: 100%;
  float: left;
  margin-top:0;
}
#right-icons a {
  padding:2px 0px 0px 0px;
}
#trend input {
  width:56%;
  padding: 6px 17px;
}
.advance {
  width:auto;
  padding:7px;
}
.newsletter h4 {
  font-size: 30px;
}
h2 {
  font-size: 35px !important;
  margin-bottom: 10px !important;
}
#privacy h2{
    font-size:26px !important;
}
#privacy p {
  font-size: 14px;
}
#privacy ul li {
  font-size:14px;
}
#right-icons a img {
    width: 35px;
    height: auto;
}
.parent-element:hover .hidden-element {
  width: 74px;
  margin-left: -19px;
}
#ai h3{
   font-size:30px; 
}
#checks {
  width: 50%;
}
#checks li {
  width: 100%;
  text-align: left;
}
#adv {
  width: 50%;
}
}
@media screen and (min-width:900px) and (max-width:1000px){
.author_img img {
  width:25px;
  height:25px;
}
}
@media screen and (min-width:600px) and (max-width:900px){
#trend-icons a img {
  width:46px;
}
.reset_recipe_filter_btn{
  background-color:inherit !important;
  box-shadow:inherit !important;
}
.trend-div{
    width:32% !important;
}
.mob-20{
    width:20%;
}
.mob-80{
    width:80%;
}
.author_img img {
  width:30px;
  height:30px;
}
.wid-10{
    width:10%;
}
.wid-70{
    width:70%;
}
#checks {
  width: 70%;
  margin:0;
}
#adv {
  width: 30%;
}
header .nav-new li a {
  font-size: 14px !important;
  padding: 0 8px !important;
}
.nav-new{
    margin-top:20px;
}
.user_name{
    display:none;
}
#recipe-books h2 {
  font-size: 40px;
}
.wid-20 {
    width: 20%;
}
.wid-80 {
    width:80%;
}
.add-new{
   margin-top:0;
}
.add-new img{
   width:30px;
}
.video-book .col-md-3{
    width:33%;
    margin-bottom:20px;
}
#trending-2 .col-md-3{
    width:50%;
}
#trending-2 #trend-icons a {
  width: 18%;
  float:left;
}
.pink-button{
    margin-bottom:20px;
}
#trending-2 #trend-icons img {
  width: 43px !important;
}
.custom-hide .col-md-4 {
    width:20%;
    float: left;
}
 .custom-hide .col-md-8 {
    width:80%;
    float: left;
    padding: 0;
  }
#jean-drop summary {
  margin-top: 10px;
  padding: 5px;
  width: auto;
  float: right;
}
#search {
  margin-top:20px !important;
}
#jean-drop .dropdown {
  width: 170px;
}
#ai .col-md-4{
    width:50%;
}
#ai .col-md-8{
    width:50%;
}
#chat img {
  width: 50%;
}
#chat li:last-child textarea {
  padding:10px 15px;
}
#chat {
  padding: 50px 20px 25px 20px;
}
.rec img {
  object-fit: cover;
  white-space: nowrap;
}
.nav-new li a {
  border-right: 1px solid #9fb89e;
}
#search .col-md-8 {
  margin-top:0;
}
#right-icons a img {
    width: 40px;
    height: auto;
}
 #search .refresh {
    width: 12%;
    padding: 14px;
  }
.nav-new li {
    padding: 0 5px;
}
#trending h6{
    padding:0;
}
.advance {
  width: 24%;
}
#trend input{
    width:60%;
}
}
@media screen and (min-width:601px) and (max-width:700px){
#dynamic-recipes .col-md-3 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}
#reels-container{
    display:flex;
}
#reels-container .col-md-3{
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
}
@media screen and (min-width:600px) and (max-width:700px){
.recipe_title a {
  min-height: 3.2rem;
}   
}
@media screen and (min-width:600px) and (max-width:800px){
#trending .col-md-3{
  width:50%;
}
.main_recipes_section .reset_input{
    width:40%;
}
#search-butt {
  margin-left: -37px !important;
}
#most .col-md-3{
  width:50%;
}
.video .col-md-3{
  width:50%;
}
}
@media screen and (min-width:800px) and (max-width:1000px) {
#trending-2 #trend-icons img {
    width:26px !important;
}
#trending-2 #trend-icons a {
    margin: 0;
}
#trending #trend-icons img {
    width:26px !important;
}
#trending #trend-icons a {
    margin: 0;
}
}
@media (min-width:701px) and (max-width:800px) {
#search input {
   width: 50%;
}
.mob-grid-col .reel_card_container {
  max-height: 260px !important;
}
.mob-grid-col .reel_card_container .recipe_image {
  height: 100px !important;
}
}
@media (min-width:901px) and (max-width:991px) {
#right-icons img {
  width: 40px !important;
}
#show-plus-icon img {
  width: 49px !important;
}
.recipe_title{
    font-size: 16px;
}
}
@media (min-width:740px) and (max-width:900px) {
#search .refresh {
  width: auto;
  padding: 14px;
}
}
@media (min-width:300px) and (max-width:380px) {
.mob-buttons img {
    width: 30px !important;
}
}
@media (min-width:901px) and (max-width:1050px) {
header .nav-new li a {
  font-size: 14px !important;
  padding: 0 8px !important;
}
header .col-md-3 .img-fluid {
  margin-top:0;
}
.user_name {
  width: 56%;
}
#jean-drop summary{
    margin-top:0;
}
#search .col-md-8 {
  margin-top: 9px;
}
}
@media (min-width:700px) and (max-width:900px) {
.col-md-3 {
  width: 25%;
}
#right-icons .show_create_recipe_modal{
    margin-left:0 !important;
    margin-right: 7px;
}
#right-icons a img {
    width:40px !important;
}
#right-icons #show-plus-icon img {
  width: 50px !important;
}
.mob-hide{
    display:none;
}
.video-book span{
    font-size:15px;
}
#video-pro p {
  font-size: 15px;
}
#video-pro p b {
  font-size:15px;
}
#video-pro img {
  margin: -36px auto 15px auto;
  width: 60px;
  height:60px;
}
.recipe_about_info .recipe_like i {
  font-size:10px;
}
.recipe_about_info .recipe_like span {
  font-size:10px;
}
.recipe_about_info .recipe_rating img{
  width:15px;
}
.recipe_about_info .recipe_rating span{
  font-size:10px;
}
.recipe_author_name strong{
    font-size:10px;
}
.recipe_cookbook_name{
    font-size:10px;
    height:15px;
}
.reel_title strong{
  font-size:13px;
}
.author_name{
  font-size:10px;
}
.reel_views{
    font-size:12px;
}
.reel_title{
    overflow:hidden;
}
#reel-scroll-controls{
    padding:10px;
}
#recipe-books .container .row {
  padding: 15px;
}
.create_new_cookbook{
    margin-top:0 !important;
}
.pink-button button{
    width:32%;
}
.cust-reel-head h4 {
  font-size: 40px;
  font-weight: normal;
}
header .nav-new li a {
  font-size: 13px !important;
  padding: 0 8px !important;
}
header .nav-new li a {
    font-size: 14px !important;
    padding: 0 7px !important;
  }
.reel_type_btn, .recipe_type_btn {
  padding: 7px 7px;
  font-size: 12px;
}
.reset_filter_btn {
    width: auto;
}
.reset_filter_btn i{
    font-size:17px;
}
 #google_translate_element {
    float: left;
    position: relative;
    left: 0;
    width: 100px;
}
}

@media (min-width: 768px) and (max-width:900px) {
.chat-contact-list .chat-contact {
  font-size: 10px;
}
#recipe-books .col-md-5{
    width:50%;
}
.meal_planner_header h2 {
  font-size: 50px;
}
.five-col .col {
  flex: 1 0 50%;
  margin-bottom:20px;
}
#mydivheader {
  right: 120;
}
.today_mp {
  padding: 8px 20px;
}
.todays_date {
  padding:8px 20px;
}
.meal_planner_header .col-md-6{
    margin-top:0 !important;
}
.week_range {
  font-size: 17px;
}
.new_chat_buttons button {
  padding:6px 10px !important;
  font-size: 12px !important;
}
.orange-butt span {
  display: none;
}
#jean-drop summary {
    text-indent:0 !important;
}
#footer img {
  width: 250px;
}
#jean-drop img {
  width: 32px !important;
  height: 32px !important;
}
.meal-date button {
  padding: 15px 5px;
  font-size: 14px;
}
.meal-date .col-md-2 button {
  padding: 14px;
  font-size: 14px;
}
.meal h3 {
  font-size: 34px;
}
#view-recipe .col-md-12 img {
  height: 300px;
}
#view-recipe .col-md-12 h4{
  font-size:40px;
}
#view-recipe .col-md-9{
  width:100% !imoortant;
}
#view-recipe .col-md-3{
  width:100% !important;
}
#dp img {
  width: 40%;
  float: left;
}
}


@media screen and (min-width:1000px) and (max-width:1400px) {
#trending-2 #trend-icons img {
    width:44px !important;
}
#trending-2 #trend-icons a {
    margin: 0 1px;
}
#trend-icons a img {
  width:44px;
}
#trending #trend-icons img {
    width:37px !important;
}
#trending #trend-icons a {
    margin: 0;
}
header .nav-new li a {
  font-size:18px !important;
  padding:0 20px !important;
}
}


@media screen and (min-width:600px) and (max-width:1400px) {
#trend input {
  width: 60%;
} 
}



#mobile_menu_content {
  position: fixed;
  top:85px;
  right:20;
  width: 200px;
  background-color: #fff;
  transition: right 0.3s ease-in-out;
  padding:10px;
  border-radius: 20px;
  border: 2px solid #f8a494;
  right:-300;
  height: 350px;
  overflow: hidden scroll;
}
.float_icon_active img {
    border: 4px solid #fac0b5;
    border-radius: 100%;
}
#mobile_menu_content.show {
    right:20 !important;  /* Slide to the right */
}
#menu_arrow.rotate {
    transform: rotate(90deg); /* Rotate the arrow downwards */
    transition: transform 0.3s ease; /* Smooth transition */
}
.mob-buttons button{
    float:right;
    margin:3px;
}

.float_popup{
    display:none;
}
.float_show{
    display:block !important;
}

#chat.expanded {
  position: fixed;
  top: 0;
  left: 0;
  width:70%;
  height:100%;
  z-index: 9999;
  overflow: auto;
  padding: 50px 20px;
  margin: auto;
  right: 0;
}
#chat.expanded #ai-result{
  height:360px;
  padding:25px;
}
#chat.expanded input{
  height: 120px;
  overflow-y: scroll;
  border-radius: 80px;
  padding: 30px;
}
#chat.expanded img{
  width: 390px;
}
/* Optional: smooth transition */
#chat {
  transition: all 0.3s ease;
}
#chat-messages {
  flex-direction: column;
  gap: 12px;
  max-height: none; /* BP-297: 600px capped the thread at 480 visual px under the 0.8 scale; flex fills the 80vh column */
  overflow-y: auto;
  padding: 10px;
  border-radius: 0;
  height: 160px;
  border: 1px solid #8ea98b;
  overflow-y: scroll;
}
.message .meta img{
  border-radius: 50px;
  width: 30px;
  height: 30px;
  border: 2px solid #2d2d2d;
}
#image-preview{
  position: relative;
  margin: 15px 0;
    margin-right: 0px;
}
#image-preview img{
  height:60px !important;
  width:60px !important;
}
#image-preview span {
  left: 45px !important;
  padding: 10px 6px;
  line-height: 0;
  right: inherit !important;
}
.chat-head{
  background-color: #e3eee2;
  border-radius: 10px 10px 0 0;
}
.sent p{
    text-align:right;
}
.new_chat_buttons .new_chat{
    width:50%;
    float:left;
}
.new_chat_buttons .new_group{
    width:50%;
    float:left;
}
.new_chat_buttons button{
  width:95%;
  float: left;
  border-radius:6px;
  padding: 10px 20px;
  background-color:#b7cbb5;
  border:0;
  color:#fff;
}
.chat-contact-list .msg-time{
  position: absolute;
  bottom: 10;
  right: 11;
  background-color: #fff;
  padding: 2px 5px;
}
.chat-contact-list #chat-form {
  background-color: #e3eee2;
  padding: 20px;
  border-radius: 0 0 10px 10px;
}
.chat-contact-list #chat-form div{
  width:100%;
}
.chat-contact-list #chat-form label{
  padding:18px;
}
.chat-contact-list #chat-form button{
  padding:20px;
}
#chat-placeholder h4{
    font-size:40px;
}
.search_box_area input{
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #ff8f7a;
}
.new_chat_buttons{
    margin:20px 0;
}
#chat-with-name strong{
  font-size: 24px;
  font-weight: normal;
}
#share_friends_list button {
  width: auto;
  float: right;
  background-color: #ff8f7a;
  color: #fff;
  border: 0;
  margin-left: 0%;
  padding: 1px 10px;
  border-radius: 30px;
  font-size: 13px;
  right: 30px;
  position: absolute;
}
.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom:25px;
  font-size:14px;
}
#chat-messages .bg-primary {
  background-color: #e1eee1 !important;
  border-radius: 10px;
  margin-bottom: 10px;
  color:#2d2d2d !important;
}
#chat-messages .bg-light{
  background-color: #fff0ed !important;
  border-radius: 10px;
  margin-bottom: 10px;
}
.dot-menu{
    font-size:30px;
}
.sent::after {
  content: '';
  position: absolute;
  bottom: 0;
  right:30px;
  width: 0;
  height: 0;
  border: 20px solid transparent;
    border-top-color: transparent;
    border-bottom-width: 20px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    border-left-width: 20px;
    border-left-style: solid;
    border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-width: 20px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  border-left-width: 20px;
  border-left-style: solid;
  border-left-color: transparent;
  border-top-color: #e6efe6;
  border-bottom: 0;
  border-left: 0;
  margin-bottom: -18px;
  margin-left: 10px;
}
.message.user {
  flex-direction: row-reverse;
}

.message .avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  margin-top: 0px !important;
}

.message .bubble {
  background: white;
  padding: 10px 15px;
  border-radius: 16px;
  max-width: 70%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  word-wrap: break-word;
}

.message.user .bubble {
  background: #d1e7dd;
}

.message.ai .bubble {
  background: #fffcf7;
}

.chat-input {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.chat-input textarea {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  resize: none;
}

.chat-input button {
  background: #0d6efd;
  border: none;
  color: white;
  padding: 10px 15px;
  border-radius: 10px;
  cursor: pointer;
}

.blinker {
  animation: blink 1s step-start 0s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}
.mobile-only {
    display: none;
}

/* Show only on mobile (screens ≤ 768px) */
@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
}



.comment_list{
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  width:100%;
  overflow-y: scroll;
  height:200px;
}
.comment_avtar {
  width: 10%;
  float: left;
}
.comment_avtar img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  object-position: center;
}
.comment_box {
  border-bottom: 1px solid #2d2d2d;
  width: 100%;
  float: left;
  padding: 10px 0;
}
.comment_user_ratings {
  width: 10%;
  float: left;
}
.comment_user_ratings img{
  width:30px;
}
.comment_icon{
  width:7%;
  float: left;
}
.comment_icon i{
  color:#2d2d2d;
}
.comment_icon .custom-dropdown-menu{
    padding:10px !important;
}
.comment_icon .custom-dropdown-menu li{
    padding:5px;
}
.comment_icon .custom-dropdown-menu li:hover{
    background-color:#efefef;
}
.comment_icon .custom-dropdown-menu li a{
    font-size:11px;
}
 .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 12px;
            padding:20px 40px;
            text-align: center;
            color: #6c757d;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 30px;
            background: #f8f9fa;
            width:100%;
            float:left;
        }

        .upload-area:hover {
            border-color: #9fb89e;
            background: #f0f4f0;
            transform: translateY(-2px);
        }

        .upload-area.dragover {
            border-color: #9fb89e;
            background: #f0f4f0;
            border-style: solid;
        }

        .upload-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0.6;
        }

        .upload-text {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: #2c3e50;
        }

        .upload-subtext {
            font-size: 1rem;
            color: #6c757d;
        }
         .cropper-container {
            display: none;
            margin-bottom: 30px;
            width:100%;
            float:left;
        }

        .cropper-wrapper {
            position: relative;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .cropper-canvas {
            max-width: 100%;
            height: auto;
            display: block;
            cursor: move;
        }

        .crop-overlay {
            position: absolute;
            border: 2px solid #f8a494;
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
            cursor: move;
        }

        .crop-handle {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #f8a494;
            border: 2px solid white;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        .crop-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
        .crop-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
        .crop-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
        .crop-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px 10px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #dee2e6;
  margin-top: 10px !important;
}

        .control-group {
            display: flex;
            align-items: center;
            gap: 10px;
            width:32%;
        }

        .control-label {
            font-weight: 600;
            color: #2c3e50;
            font-size: 0.9rem;
            min-width: 60px;
        }

        .scaleSlider{
            width:100px;
            height: 6px;
            border-radius: 3px;
            background: #dee2e6;
            outline: none;
            -webkit-appearance: none;
        }
        
        .rotateSlider{
            width:100px;
            height: 6px;
            border-radius: 3px;
            background: #dee2e6;
            outline: none;
            -webkit-appearance: none;
        }

        .slider::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #9fb89e;
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
      .crop-reset {
            background: #6c757d !important;
            border-radius: 8px !important;
       }
       .crop-fit{
        background: #9fb89e !important;
        border-radius: 8px !important;
       }
        .scaleSlider::-webkit-slider-thumb,
.rotateSlider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #9fb89e;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    -webkit-appearance: none; /* Required for Chrome/Safari */
    appearance: none;
}

.scaleSlider::-moz-range-thumb,
.rotateSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #9fb89e;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}


        .btn {
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: #9fb89e;
            color: white;
        }

        .btn-primary:hover {
            background: #8aa68a;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(159, 184, 158, 0.3);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #5a6268;
            transform: translateY(-2px);
        }

        .btn-success {
            background: #f8a494;
            color: white;
        }

        .btn-success:hover {
            background: #f69082;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(248, 164, 148, 0.3);
        }

        .preview-section {
            margin-top: 30px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 12px;
            border: 1px solid #dee2e6;
            width:100%;
            float:left;
        }

        .preview-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }

        .preview-image {
            max-width: 280px;
            border-radius: 8px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            border: 3px solid white;
        }

        .format-info {
            background: #e3f2fd;
            border: 1px solid #bbdefb;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            color: #1565c0;
            width:100%;
            float:left;
        }

        .format-info strong {
            color: #0d47a1;
        }

        @media (max-width: 768px) {
            .container {
                margin: 10px;
                border-radius: 12px;
            }

            .content {
                padding: 20px;
            }

            .controls {
                flex-direction: column;
                align-items: stretch;
            }

            .control-group {
                justify-content: space-between;
            }

            .slider {
                width: 120px;
            }
        }

        .hidden {
            display: none !important;
        }

        .success-message {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
            text-align: center;
        }
/* Cookbook block reaction button base styling */
.cookbook_block_react_btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Cookbook reactions container - ensures buttons display in a row */
.cookbook_reactions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
}

/* CRITICAL FIX: Set width to 22px to match recipe buttons */
.cookbook_reactions .cookbook_block_react_btn {
    width: 22px;
}

/* Scale images to fit the 22px container */
.cookbook_reactions .cookbook_block_react_btn img {
    width: 100%;
    opacity: 0.85;
}

/* Tooltip styling for cookbook buttons - matches recipe button tooltips */
.cookbook_block_react_btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -80%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffe3dc;
    color: #808285;
    padding: 6px 10px 3px 10px;
    border-radius: 26px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    font-size: 12px;
    z-index: 1000;
}

/* Show tooltip on hover */
.cookbook_block_react_btn:hover::after {
    opacity: 1;
}

/* Active/selected states for cookbook buttons - full opacity when active */
.cookbook_block_react_btn.has_saved img,
.cookbook_block_react_btn.has_bookmarked img,
.cookbook_block_react_btn.has_liked img {
    opacity: 1;
}

/* Hover effect for cookbook buttons */
.cookbook_block_react_btn:hover img {
    opacity: 1;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Ensure cookbook block structure matches recipe block */
.cookbook_block {
    margin-bottom: 20px;
}

.cookbook_block .cookbook_reactions {
    margin-top: 10px;
}

/* ===================================================== 
   END OF COOKBOOK BUTTON FIX
   ===================================================== */


   /* ===================================
   DETAILED RECIPE - OTHER OPTIONAL INFO SECTION
   =================================== */

/* Recipe Images Section */
#related-images {
    margin: 30px 0;
}

#related_images_info h2 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

#related_images_info p {
    color: #666;
    margin-bottom: 15px;
}

#related_images_preview {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Other Optional Information Table */
.other-optional-info {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 15px;
    margin: 20px 0;
}

.other-optional-info tr {
    margin-bottom: 15px;
}

.other-optional-info td {
    padding: 8px 15px;
    vertical-align: top;
}

.other-optional-info td:first-child {
    width: 45%;
}

.other-optional-info td:last-child {
    width: 55%;
}

.other-optional-info label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.other-optional-info input[type="text"],
.other-optional-info input[type="number"],
.other-optional-info textarea {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s;
}

.other-optional-info input[type="text"]:focus,
.other-optional-info input[type="number"]:focus,
.other-optional-info textarea:focus {
    outline: none;
    border-color: #e16e6e;
}

.other-optional-info textarea {
    min-height: 150px;
    resize: vertical;
}

/* Calories field with inline select */
#calories_per_serving {
    display: flex;
    align-items: center;
    gap: 10px;
}

#calories_per_serving input {
    flex: 1;
}

#calories_per_serving select {
    width: auto;
    min-width: 80px;
    padding: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
}

#calories_per_serving select:focus {
    outline: none;
    border-color: #e16e6e;
}

/* Submit Recipe Section */
#submit-recipe {
    text-align: center;
    margin: 40px 0;
    padding: 30px 0;
}

#submit-recipe-btn {
    background: linear-gradient(135deg, #e16e6e 0%, #c85454 100%);
    color: white;
    border: none;
    padding: 18px 60px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(225, 110, 110, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#submit-recipe-btn:hover {
    background: linear-gradient(135deg, #c85454 0%, #b04444 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(225, 110, 110, 0.4);
}

#submit-recipe-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(225, 110, 110, 0.3);
}

/* Related Images Button */
.show_upload_related_images {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.show_upload_related_images:hover {
    background: #45a049;
}

/* Detailed button green (existing button class) */
.detailed-button-green {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.detailed-button-green:hover {
    background: #45a049;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .other-optional-info td:first-child,
    .other-optional-info td:last-child {
        width: 100%;
        display: block;
    }
    
    .other-optional-info tr {
        display: block;
        margin-bottom: 20px;
    }
    
    #submit-recipe-btn {
        padding: 15px 40px;
        font-size: 16px;
    }
}
/* ===== Nav Menu Equal Spacing Fix - OPUS-Kiddo2 Dec 31 2025 ===== */
/* Remove border from last nav item */
.nav-new li:last-child a {
    border-right: none !important;
}

/* Ensure equal padding on nav links */
.nav-new li a {
    padding-left: 33px !important;
    padding-right: 33px !important;
}

/* ===== Navbar Hide/Show on Scroll - OPUS-Kiddo2 Dec 31 2025 ===== */
header.nav-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

header {
    transition: opacity 0.3s ease !important;
}

/* ===== Language Switcher Active Checkmark - OPUS-Kiddo2 Dec 31 2025 ===== */
.lang-option.active-lang a::before,
.language-switcher-cookie.active-lang::before {
    content: "✓ ";
    color: #4CAF50;
    font-weight: bold;
}

/* Loading spinner for language switch */
.lang-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.lang-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #f6a190;
    border-radius: 50%;
    animation: lang-spin 1s linear infinite;
}

@keyframes lang-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.lang-loading-text {
    margin-top: 15px;
    font-size: 16px;
    color: #333;
}

/* ===== Hide Google Translate Banner - OPUS-Kiddo2 Jan 1 2026 ===== */
.goog-te-banner-frame,
.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
    visibility: hidden !important;
}

body {
    top: 0 !important;
    position: static !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}






/* RECIPE CARD IMAGE HEIGHT FIX v3.7.0 - ASPECT RATIO */
#dynamic-recipes .recipe_block .recipe_image { aspect-ratio: 275/180 !important; overflow: hidden !important; }
#dynamic-recipes .recipe_block .recipe_image a.recipe_link { display: block !important; width: 100% !important; height: 100% !important; }
#dynamic-recipes .recipe_block .recipe_image a.recipe_link img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top !important; }


/* RECIPE CARD TIGHTER SPACING v3.7.0 */
#dynamic-recipes .recipe_block .recipe_title { margin-bottom: 0 !important; padding-bottom: 0 !important; }
#dynamic-recipes .recipe_block .recipe_reactions { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 5px !important; }
#dynamic-recipes .recipe_block .recipe_about_info { padding-top: 5px !important; padding-bottom: 5px !important; }


/* REEL SCROLL BUTTONS OVERLAY FIX - Mar 10, 2026 */
#reel-scroll-controls {
    position: relative !important;
}
#reel-scroll-controls #scrollLeftBtn,
#reel-scroll-controls #scrollRightBtn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    margin: 0 !important;
}
#reel-scroll-controls #scrollLeftBtn {
    left: 0 !important;
}
#reel-scroll-controls #scrollRightBtn {
    right: 0 !important;
}
#reel-scroll-controls #reel-wrapper {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* FIXED NAVBAR WIDTH CONSTRAINT */
#nav-test #desktop-nav { width: 100% !important; max-width: 1080px !important; margin: 0 auto !important; }
#nav-test #desktop-nav > .container { max-width: 100% !important; padding: 0 15px !important; }


/* NAVBAR INSIDE NAV-TEST OVERRIDES */
#nav-test #desktop-nav {
    position: static !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}
#nav-test #desktop-nav.navbar-hidden {
    transform: none !important;
}
#nav-test #desktop-nav > .container {
    max-width: 100% !important;
    width: 100% !important;
    min-width: auto !important;
}

/* BP-236 - ONE WIDTH CONTRACT. The navbar lives in #nav-inner and the page lives
   in .zoom-wrapper; both are transform:scale(0.8) + width:125%, so both layout
   boxes are 1.25x the viewport while media queries fire on the REAL viewport.
   Pinning the navbar to 1350px while Bootstrap sized .container for the real
   viewport put content at 84-97% of the bar and overflowed the bar itself below
   1080px. One rule for both keeps them identical at every width.
   Guarded at min-width:1040px - below that the desktop nav is display:none and
   the mobile rules (.container{margin:10px} at 768) must stay untouched. */
@media (min-width: 1040px) {
    #nav-test #desktop-nav > .container,
    .zoom-wrapper .container {
        width: 100% !important;
        max-width: 1350px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Logged-out auth pages keep their narrow box if a logged-in user lands there. */
    .zoom-wrapper #recover .container,
    .zoom-wrapper #new-pass .container {
        max-width: 800px !important;
    }
}

/* BP-237 - MY RECIPES DOUBLE PANEL. #recipe-books .container .row (7886) paints a
   #fdfbf5 + veg.png pill with a 50px radius. On the Cookbooks block that is the ONLY
   background and it is correct, so 7886 stays. On the Recipes block .main_recipes_section
   (4885) ALREADY paints the panel, so 7886 lands a second, yellower one inside it -- and
   any .row injected into #dynamic-recipes gets it too, which is why the cream runs on
   behind the cards. Strip the background there only; padding stays, because BP-235's
   tier tuning is measured against its 30px. Specificity 0,4,0 beats 7886's 0,3,0. */
#recipe-books .container .main_recipes_section .row {
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
}

/* BP-238 - FULL-WIDTH RECIPES PANEL. The Cookbooks panel is painted on a Bootstrap
   .row, which carries margin-inline: calc(var(--bs-gutter-x) * -.5) = -12px and so
   cancels .container's 12px padding and sits flush with the navbar. The Recipes panel
   is painted on .main_recipes_section - a PLAIN div with no negative margin - so it
   rendered 12px inset each side, 24px narrower. Give it the row's own margins.
   Guarded at min-width:768px: the max-width:767px block in my-recipes.php already
   handles mobile with -8px margins and width:calc(100% + 16px). */
@media (min-width: 768px) {
    #recipe-books .container > .main_recipes_section {
        margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5) !important;
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5) !important;
    }
}

/* BP-239 - NESTED CONTAINER. pages/recipes/my-recipes.php is MISSING A </div>, so the
   Recipes .container (source line 87) is reparented by the browser INSIDE
   .my-recipes-top-container (line 54) instead of being its sibling. A .container inside a
   .container is always inset by exactly the outer's padding: the outer resolves to 1350
   with 12px padding = 1326 of content, the inner takes width:100% = 1326 so max-width:1350
   never binds and margin:auto has no free space to distribute (measured ml=0 on the inner
   vs ml=246.25px on the outer). Every descendant inherits the 24px deficit, which is why
   the Recipes panel sat 9.6px inside the Cookbooks panel at every viewport.
   Widen the inner container by one gutter and pull it back with the negative margins a
   .row would carry, so it fills the outer's border box.
   THE REAL FIX IS THE MISSING </div> - this is the safe CSS neutralisation, and it stays
   correct even after the markup is repaired, because a top-level .container has no
   .my-recipes-top-container ancestor and so never matches this rule. */
@media (min-width: 768px) {
    #recipe-books .my-recipes-top-container > .container {
        width: calc(100% + var(--bs-gutter-x, 1.5rem)) !important;
        max-width: calc(100% + var(--bs-gutter-x, 1.5rem)) !important;
        margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5) !important;
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5) !important;
    }
}
/* HIDE FIXED NAVBAR ON MOBILE - mobile has its own nav */
@media (max-width: 1039px) {
    #nav-test { display: none !important; }
}


/* ============================================================
   Cookmoi - assets/css/style.css
   BP-107 - Global pill-button ink centering (Nunito high-glyph fix)
   v1.0.0 - 2026-06-06
   ============================================================ */
#cancelDeleteReel,
#confirmDeleteReel,
#convertReelToRecipeModal #cancelConvert,
#convertReelToRecipeModal #confirm_conversion_btn,
#cancelEditCookbook,
#saveEditCookbookBtn,
.chm-invite-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
    padding: 10px 20px 6px !important;
}


/* ==========================================================================
   BP-257  ORC-56  2026-07-31  -  desktop navbar, 1040px to 1100px only

   #nav-test is visible from 1040px up (see the max-width:1039 rule that hides
   it below that). The wider band that opens earlier in this file,
   "screen and (min-width:600px) and (max-width:1100px)", was written for an
   older navbar: it forces the logo column to 20% and then sets a 60% width on
   a col-md-6 that no longer exists in the markup. Today the three columns are
   col-md-3 / col-md-7 / col-md-2, so between 1040 and 1100 the row adds up to

       20%  logo   (forced by that band)
     + 58.333%     (Bootstrap col-md-7, nothing overrides it)
     + 16.667%     (Bootstrap col-md-2)
     = 95%

   The missing 5% is why the user dropdown stops ~65px short of the right edge
   instead of aligning with it. Above 1100 the band stops applying and
   Bootstrap's own 25 / 58.333 / 16.667 sums to 100, which is why the same
   navbar looks correct one pixel wider.

   That band also replaces .nav-new li's "padding: 28px 0" with "padding: 0 6px",
   which is why the Feed | Me | Planner links sit high in this window.

   The .wid-20 / .wid-70 / .wid-10 classes on those columns were meant to say
   20/70/10 = 100, but they are defined only inside a 600-900px band and never
   apply on desktop. They are left untouched; this block states the intent
   directly, for the window where the desktop navbar is actually on screen.

   Scoped to #nav-test, so nothing outside the desktop navbar is affected, and
   bounded to 1040-1100, so nothing above or below this window changes.
   ========================================================================== */
@media screen and (min-width: 1040px) and (max-width: 1100px) {

    /* 20 + 70 + 10 = 100. The row fills, and the user pill lands on the
       right edge because the columns before it are finally the right width. */
    #nav-test header .col-md-7 { width: 66%; }
    #nav-test header .col-md-2 { width: 14%; } /* BP-293: 20+66+14=100 -- the pill needs ~145px for avatar+name; the links column never used its slack */

    /* Restore only the VERTICAL rhythm the wider band strips out, so the links
       sit at the same height here as they do above 1100. The band's 6px of
       horizontal padding is deliberately kept - this fix has no business
       changing horizontal spacing. */
    #nav-test .nav-new li { padding: 28px 6px; }
}
/* BP-343: site headings in brand grey. Roca is the body default in this sheet
   (line ~604), and headings inherit near-black unless styled. LOW SPECIFICITY
   ON PURPOSE -- no !important -- so every explicit colour still wins: white
   Roca on coral modal headers, coral/sage accents, and the #333/#2d2d2d modal
   titles all keep their set colours. #666666 matches Feed/Me/Planner (BP-319)
   and the reel-card username -- the only grey already applied to Roca. */
h1, h2, h3, h4, h5, h6 { color: #666666; }


/* ==========================================================================
   BP-432 - FONT VARIABLES
   --------------------------------------------------------------------------
   These three custom properties are referenced by 46 declarations across the
   site (advance_search.php, home.php, my-recipes.php, view-Reel-Page.php,
   view-cookbook.php, create-recipe.php, account.php, user-recipes.php).

   They were only ever DEFINED in assets/css/cookmoi-global-fonts.css, which is
   not linked on any page. An undefined var() invalidates the whole font-family
   declaration, so all 46 were falling back to body's display serif.

   Defined here - in the stylesheet every page already loads - WITHOUT the
   universal !important reset that made cookmoi-global-fonts.css unsafe to link.

   Values copied verbatim from cookmoi-global-fonts.css so the two files agree.
   ========================================================================== */
:root {
    --font-display:     'rocaone-rgregular', serif;
    --font-body:        'Nunito', system-ui, -apple-system, sans-serif;
    --font-handwriting: 'Caveat', cursive;

    /* aliases, for backwards compatibility */
    --font-serif: var(--font-display);
    --font-sans:  var(--font-body);
}


/* =========================================================================
   BP-472  FULL-BLEED PANELS ON MOBILE
   .main_recipes_section is the panel on BOTH my-recipes.php and
   feed/home.php. It lives inside a .container, so its background stops at
   the container edge -- while the Cookbooks section above it is painted by
   a full-width parent and therefore looks wider. That mismatch is what reads
   as "too much space on the left".
   width:100vw + margin-left:calc(50% - 50vw) is the standard full-bleed. It
   cancels whatever inset the container has WITHOUT hardcoding a pixel value,
   which matters here because the inset is a global .container{margin:10px}
   plus Bootstrap's gutter, and that global rule is marked do-not-touch.
   ========================================================================= */
@media (max-width: 767px) {
    .main_recipes_section,
    #reel-scroll-controls {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   File: assets/css/style.css  |  BP-476  |  Version 1.0.0
   THE ONE PAGE-TITLE SYSTEM - SINGLE SOURCE OF TRUTH.

   Measured on DEV 2026-08-29:
       #cm-top-nav   (phone,   < 1040px) = 105px
       #desktop-nav  (desktop, >=1040px) = 169px

   RULES - read before touching any page title anywhere:
     1. Every page title is  <h1 class="cm-page-title">Text</h1>
     2. Top spacing is ALWAYS  calc(var(--cm-nav-h) + var(--cm-title-gap))
        - use the .cm-page-head class, or that calc() inline. Never a raw px.
     3. NEVER set font-size, color or a hardcoded margin-top on a page title
        in a page file. If a title is wrong, fix it HERE and every page moves
        together. Per-page overrides are what caused years of drift.
   ========================================================================== */
/* ---------------------------------------------------------------------------
   THE 0.8 THAT BROKE EVERY TITLE FOR YEARS (BP-476 v1.2.0, measured 2026-08-29)

   .zoom-wrapper { transform: scale(0.8); }   <-- no media query, ALL widths.

   Every page's content lives inside that wrapper and is therefore rendered at
   80% of its CSS size. BOTH navbars are position:fixed OUTSIDE the wrapper, so
   they are NOT scaled. That means a CSS offset of N px only clears N * 0.8
   real pixels of navbar.

   This is why hand-tuned numbers never agreed with each other:
       old 220px desktop offset -> 176 real px, just clears the 169px nav (a
                                   blind empirical fit for the scale)
       old 100px mobile offset  ->  80 real px, 25px UNDER the 105px nav
       a naive 125px            -> 100 real px, still 5px under it

   So the offset must be divided by the zoom. Change --cm-nav-raw / --cm-gap-raw
   below (real pixels, what you actually measure on screen); the division is
   handled here. If .zoom-wrapper's scale ever changes, change --cm-zoom ONCE.
   --------------------------------------------------------------------------- */
:root {
    --cm-zoom: 0.8;        /* .zoom-wrapper { transform: scale(0.8) } */
    --cm-nav-raw: 105px;   /* #cm-top-nav  measured height, real px */
    --cm-gap-raw: 20px;    /* breathing room under the nav, real px */

    --cm-nav-h: calc(var(--cm-nav-raw) / var(--cm-zoom));
    --cm-title-gap: calc(var(--cm-gap-raw) / var(--cm-zoom));
}
@media (min-width: 1040px) {
    :root { --cm-nav-raw: 169px; }   /* #desktop-nav measured height, real px */
}
/* SPECIFICITY NOTE (BP-476 v1.3.0, measured 2026-08-29)
   A legacy blanket rule exists:
       @media (max-width: 1039px) {
           h1:first-of-type, h2:first-of-type, h3:first-of-type { margin-top: 85px !important; }
       }
   That is the OLD nav-compensation hack (85 * 0.8 = 68 real px -- another blind
   fit for the .zoom-wrapper scale). Its specificity is 0,1,1, IDENTICAL to
   h1.cm-page-title, so the winner came down to source order -- and it was winning,
   adding 85px on top of .cm-page-head's correct clearance.

   The :first-of-type selectors below are 0,2,1 and beat it outright, in any order.

   TODO: once EVERY page title is on this system, delete the legacy rule and these
   extra selectors can go with it. */
h1.cm-page-title, h2.cm-page-title, h3.cm-page-title,
h1.cm-page-title:first-of-type,
h2.cm-page-title:first-of-type,
h3.cm-page-title:first-of-type,
.cm-page-title {
    font-family: 'rocaone-rgregular', serif !important;
    font-size: 2.5rem !important;
    line-height: 1.25 !important;
    color: #666666 !important;
    margin: 0 !important;
}
/* declared AFTER .cm-page-title on purpose: when both classes sit on the same
   element, this margin-top must win over the shorthand margin:0 above. */
.cm-page-head {
    margin-top: calc(var(--cm-nav-h) + var(--cm-title-gap)) !important;
    padding-top: 0 !important;
}


/* ==========================================================================
   BP-476 Part 2 - retiring the last per-page nav compensations.
   .friends-page-spacer was the friends page's own hardcoded top spacer. It is
   superseded by .cm-page-head. Zeroed here rather than deleted from the markup,
   because the element is marked DO NOT REMOVE and other code may look for it.
   ========================================================================== */
.friends-page-spacer {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   File: assets/css/style.css  |  BP-480  |  Version 1.0.0   [cm-cfbline-only]

   REVERT of the full-bleed rules from BP-478.

   BP-478 targeted .main_recipes_section GLOBALLY at <=767px. That class is used
   on BOTH /home and /my-recipes, wrapped in DIFFERENT structures. The rules were
   measured and tuned on /my-recipes and regressed /home:
       section L=-6 Rgap=6   (hanging off the LEFT edge, horizontal scrollbar)
       LEFT GAP 1 vs RIGHT GAP 231, card width 426  -> cards collapsed to 1/row

   The site's own negative-margin full-bleed (margin:-8px; padding:8px;
   width:calc(100% + 16px)) is left alone. It was working before I touched it.

   ONLY the .cfb-line change is kept - verified working on both sections and it
   is what was asked for: search row above the filter row, search right-aligned.

   LESSON: .main_recipes_section is shared by several pages. Any page-specific
   alignment fix must be scoped to that page's own wrapper, never to this class
   site-wide. Measure on the page you are changing AND on every other page that
   uses the same class before shipping.
   ========================================================================== */
@media (max-width: 767px) {
    .cfb-line {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .cfb-line .cfb-search {
        order: 1 !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }
    .cfb-line .advance_search_wrapper {
        order: 2 !important;
        width: 100% !important;
    }
}
/* ==========================================================================
   File: assets/css/style.css  |  BP-479  |  Version 1.0.0   [cm-cropper-head-fix]

   The cropper modal's title is <h3 id="vrdcovTitle"> and it is the FIRST h3 in
   .vrdcov-head, so it was being hit by the legacy blanket rule in
   includes/mobile-nav.php:102 :
       @media (max-width: 1039px) { h1,h2,h3:first-of-type { margin-top:85px !important } }
   85 * 0.8 (the .zoom-wrapper scale) = 68 real px of dead space above "Recipe
   photo" inside a modal. That rule has now caused THREE separate bugs today:
   the page titles, the my-recipes spacing, and this.

   These selectors are ID-scoped (1,2,1) so they beat it outright. The real fix
   is to DELETE mobile-nav.php:102 once every page title is on .cm-page-head.

   Same modal is used for the reel cover (vrdMode === 'card' swaps the text), so
   fixing it here fixes both.
   ========================================================================== */
#vrdCoverModal .vrdcov-head h3,
#vrdCoverModal .vrdcov-head h3:first-of-type,
#vrdCoverModal .vrdcov-head #vrdcovTitle {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-family: 'rocaone-rgregular', serif !important;
    text-align: center !important;
}
#vrdCoverModal .vrdcov-head p {
    text-align: center !important;
    margin-top: 0 !important;
}
/* the close X is positioned; centring the text must not shift it */
#vrdCoverModal .vrdcov-head {
    position: relative !important;
}

/* ==========================================================================
   File: assets/css/style.css  |  BP-481  |  Version 1.0.0   [cm-myrecipes-edge]

   MEASURED CHAIN on /recipes/ @440 (real px, content is inside the 0.8 wrapper):
       #recipe-books                          L=0   Rgap=0    pad 0     mar 0
         .container.my-recipes-top-container  L=8   Rgap=-8   pad 8px   mar 10px
           .container                         L=22  Rgap=-10  pad 12px  mar 10px
             .main_recipes_section            L=26  Rgap=-6   pad 8px   mar -8px

       8 + 6.4 + 8 + 9.6 - 6.4 = 25.6  ->  the 26px left inset.
   Two nested containers each contribute a margin AND a padding; the section's
   own -8px only claws back 6 of it. Every box is also wider than its space,
   which is why each right edge runs past the viewport instead of sitting flush.

   SCOPING - this is the whole point of this BP:
   An earlier attempt (BP-478) fixed this by targeting .main_recipes_section
   GLOBALLY. That class is on /home too, in a different structure, and it
   regressed the feed (section hung off the left edge, horizontal scrollbar,
   cards collapsed to one per row). It was reverted in BP-480.

   #recipe-books is VERIFIED present on /recipes/ and VERIFIED ABSENT on / :
       PATH: /          current_page: nofetch      #recipe-books: false
       PATH: /recipes/  current_page: my-recipes   #recipe-books: true
   So nothing here can reach the feed. Re-verify that if this selector changes.
   ========================================================================== */
@media (max-width: 767px) {
    #recipe-books .container,
    #recipe-books .my-recipes-top-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #recipe-books .main_recipes_section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   File: assets/css/style.css  |  BP-482  |  Version 1.0.0   [cm-feed-edge]

   The feed twin of BP-481. Yves: "the my recipes page is great. the feed is not
   even. can you make it like the my recipes page?"

   MEASURED CHAIN on / @440 (real px, content is inside the 0.8 wrapper):
       .zoom-wrapper                              L=0   Rgap=0
         .container.position-relative.cm-page-head  L=8   Rgap=-8   pad 12px  mar 10px
           .main_recipes_section                  L=11  Rgap=-5   pad 8px   mar -8px

       8 + 9.6 - 6.4 = 11.2  ->  the 11px left inset on the background.
   Home has ONE container above the section; my-recipes has TWO, which is why the
   two pages were off by different amounts and why one rule could never fix both.

   SCOPING - verified from SOURCE, not from a browser:
       grep -rn 'cm-page-head' pages/ includes/
         home.php:455       container position-relative cm-page-head   <- ONLY match
         friends.php:32     container cm-page-head
         my-recipes.php:54  container my-recipes-top-container cm-page-head
   .container.position-relative.cm-page-head therefore selects the feed container
   and nothing else on any page, including pages not opened during this session.
   Re-run that grep if the selector or the markup changes.

   Do NOT widen this to .main_recipes_section - that class is shared with
   my-recipes and doing so regressed the feed once already (BP-478, reverted in
   BP-480).
   ========================================================================== */
@media (max-width: 767px) {
    .container.position-relative.cm-page-head {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .container.position-relative.cm-page-head .main_recipes_section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   File: assets/css/style.css  |  BP-483  |  Version 1.0.0   [cm-feed-gutter]

   Finishes BP-482. Yves: "almost, the problem is that there does need to be a
   margin like the my recipe page. can you make it the SAME"

   MEASURED, both pages @440, after BP-481/482 put both backgrounds at L=0 Rgap=0:
       /recipes/   .row  mar -12px  pad 10px  ->  card L = -1
       /           .row  mar -12px  pad  0    ->  card L = -9

   Both rows carry Bootstrap's -12px gutter margin. my-recipes cancels most of it
   with padding:10px on the row; the feed had no such padding, so its cards were
   pulled out to the screen edge. One property, copied from the page that looks
   right - not a number invented to taste.

   NOTE: the two pages' cards do not have identical internal padding
   (my-recipes 12px, feed 15px), so the feed's visible gap lands ~2px wider than
   my-recipes'. Structurally they now match; if pixel-identical is wanted, the
   card padding is the remaining difference.

   Scoped through the same feed-only hook as BP-482. See that block for the grep
   proving .container.position-relative.cm-page-head is unique to home.php:455.
   ========================================================================== */
@media (max-width: 767px) {
    .container.position-relative.cm-page-head .main_recipes_section .row {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ==========================================================================
   File: assets/css/style.css  |  BP-484  |  Version 1.0.0   [cm-feed-searchright]

   Yves: "feed, align the search bar to the right"

   MEASURED on / @440:
       .cust-reel-head   display = "flow-root list-item"   justify = space-between
         child[0] H1.cm-page-title  L=12  w=418
         child[1] DIV (search)      L=12  w=272

   The markup is <div class="d-flex justify-content-between ... cust-reel-head">,
   but the computed display is flow-root list-item, NOT flex. Something overrides
   Bootstrap's d-flex on this element, so justify-content:space-between has no
   effect at all and the two children stack as blocks - which is why the search
   sat under the title on the left instead of beside it on the right.

   Restoring flex makes the existing space-between do its job. The search block is
   allowed to shrink (flex 0 1 auto + min-width 0) so a long title cannot push it
   off screen, and the input is capped at 100% of its box for the same reason.

   Scoped through the feed-only hook - see the [cm-feed-edge] block for the grep
   proving .container.position-relative.cm-page-head is unique to home.php:455.
   .cust-reel-head is NOT used by my-recipes (that page uses .cfb-line), but the
   hook is kept for consistency and safety.
   ========================================================================== */
@media (max-width: 767px) {
    .container.position-relative.cm-page-head .cust-reel-head {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        list-style: none !important;
    }
    .container.position-relative.cm-page-head .cust-reel-head > h1 {
        flex: 0 0 auto !important;
    }
    .container.position-relative.cm-page-head .cust-reel-head > div {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .container.position-relative.cm-page-head .cust-reel-head input {
        max-width: 100% !important;
    }
}

/* BP-497 (2026-08-30): no scrollbars on touch devices -- fingers swipe.
   The global ::-webkit-scrollbar above is honoured by Android's WebView, which
   drew a 10px coral bar under the home reel strip; iOS uses overlay scrollbars
   and never showed it. pointer:coarse = touch, regardless of screen width. */
@media (pointer: coarse) {
  ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
}

/* ==== CM-NAV-ADV-ALIGN v1.2.0 (Y-0915-03, 2026-09-15) ====================
   includes/navbar.php desktop search bar (#search .SearchBar): give the
   "Advanced/Avance" button (#advance-menu) even padding and match the refresh
   circle (.refresh) to its height, both centred on the bar beside the coral
   search circle. 34px tall (= 27.2 real px inside the 0.8 zoom-wrapper);
   top:5px lifts them onto the bar's centre line. Refresh dimensions use
   !important to beat the navbar's existing .refresh rules. The coral search
   circle is untouched. Button ORDER (refresh before Advanced) is handled in
   navbar.php, not here. CSS-only, additive. */
#search .SearchBar #advance-menu {
    height: 34px;
    padding: 0 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    top: 5px;
}
#search .SearchBar .refresh {
    height: 34px !important;
    width: 34px !important;
    padding: 0 !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    top: 5px !important;
}
/* ==== end CM-NAV-ADV-ALIGN ============================================== */

/* ==== CM-NAV-ADV-TIP v1.0.0 (Y-0915-03, 2026-09-15) =====================
   #advance-menu is display:inline-flex (see CM-NAV-ADV-ALIGN), which pins its
   abspos hover tooltip (.hidden-element) to the button centre -> it renders on
   top of the button. Anchor it to the button bottom so it drops BELOW, matching
   the magnifier / refresh tooltips. Additive, id-scoped. */
#advance-menu:hover .hidden-element {
    top: 100% !important;
    margin-top: 8px !important;
}
/* ==== end CM-NAV-ADV-TIP ============================================== */