/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21-Jan-2021, 18:34:49
    Author     : jamachree
*/

/* ====================== Alart/Notifications ====================== */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: #fff;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.alert.success {background-color: #4CAF50;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.alert strong {
  color: #FFFFFF;
}
.closebutton {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebutton:hover {
  color: black;
}

/* =============== Collapsible ============================= */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #6699cc;
  color: #000;
  font-weight: 700;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible_active, .collapsible:hover {
  background-color: #b3cce6;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible_active:after {
  content: "\2212";
}

.collapsible_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #ffffff;
  border:1px dotted #ccc;
  border-top: 1px solid #6699cc;
}

/* ==+++++ SLIDER ====================== */

/* The switch - the box around the slider */
.switch {
 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

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

.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 -webkit-transition: .4s;
 transition: .4s;
}

input:checked + .slider {
 background-color: #CC0000;
}

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

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%;
}

/* ===========LOADER============== */
#page-content{
    display: none;
}
#loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  border-bottom: 16px solid red;
  width: 150px;
  height: 150px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin: 75px 0 0 -75px;
  
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

/*============================ */
/*      OTHERS                 */
/* =========================== */
.align-right{
    text-align: right;
}
.align-left{
    text-align: left;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
.btn.fit {
        width: 100%;
}
.hide{
    display: none;
}

.sticker{
  position: -webkit-sticky;
  position: sticky;
  top:0;
  z-index: 900;
}

.clogo{
  height:45px;
}
.mobile_no_show{
  display:inherit;
}
@media screen and (max-width: 480px) {
	.clogo{
    height:70px;
    display:none;
	}
  .top_clogo{
    display: flex;
    height:25px;
  }
  .mobile_no_show{
    display:none;
  }
}
@media screen and (max-width: 740px) {
	.clogo{
    height:160px;
    display:none;
	}
  .top_clogo{
    display: flex;
    height:25px;
  }
  .mobile_no_show{
    display:none;
  }
}

.cdiet-card-content {
  width: 36vw; /* 30rem*/
  padding: 1rem;
}
.package-image {
  width: 100%;
  height: 250px;
  /*padding: 2rem;*/
}
@media (max-width: 600px) {
	
  .cdiet-card-content {
    width:85vw;
    padding: 1rem;
  }
}
@media (max-width: 740px) {
	
  .package-image {
    width: 100%;
    height: 200px;
  }
  
}
@media (min-width: 601px) and (max-width: 900px){
  .cdiet-card-content {
    width:40vw;
    padding: 1rem;
  }
}
@media (min-width: 600px) and (orientation: portrait) {
  .cdiet-card-content {
    width:85vw;
    padding: 1rem;
  }
  .package-image {
    width: 100%;
    height: 260px;
  }
}
.dialog-full-screen{
  z-index: 1000;
  width: 100vw; 
  height: 100vh; 
  min-width: 100vw; 
  min-height: 100vh; 
  border-radius: 0; 
  padding-top: 10px;
}
.dlg-fullscreen{
  z-index: 1000;
  width: 100vw; 
  height: 100vh; 
  min-width: 100vw; 
  min-height: 100vh; 
  border-radius: 0; 
  padding-top: 10px;
}
.cooked-mypanel {
  margin: 0 0.625rem 1.25rem 0.625rem;
}
.list-content-parent {
  height: 100%; 
  overflow: hidden;
}
.list-content{
  width:100%;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.list-content::-webkit-scrollbar {
  display: none;
}

.hide {
  display: none;
}
.strikethrough {
  text-decoration:line-through;
}
#sm-amount{
  display: none;
}
#md-amount {
  display: block;
}

#coverImage{
  width:100%;
  display:visible;
}

@media (max-width: 510px){
  #coverImage{
    display:none;
  }
  #sm-amount{
    display: block;
  }
  #md-amount {
    display: none;
  }
}
.mycookedimg{
  display: block;
}
@media (max-width: 600px){
  #mycookedimg{
    display: none;
  }
}
.dashedline-dk {
  border-bottom: 1px dashed rgb(153, 155, 151);
  margin-bottom: 20px;
}
.dashedline-lt {
  border-bottom: 1px dashed #CCCCCC;
  margin-bottom: 20px;
}

.noscrollbar {
  overflow: hidden;
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

.noscrollbar::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

.button-fit {
  width: 100%;
}
.btn-fit{
  width:inherit;
}
.badge-position {
  position: absolute;
  z-index: 1;
  top: 11.813rem;
}
html:not([dir='rtl']) .badge-position {
  right: 0;
}

html[dir='rtl'] .badge-position {
  left: 0;
}

/* ACTION CARD SEGMENT */
demo-profile-card-layout:not(.oj-complete) {
  visibility: visible;
}

demo-profile-card-layout .demo-profile-card-layout-container {
  width: 330px;
  height: 395px;
  border: 1px solid #CC0000;
}

demo-profile-card-layout .demo-profile-card-layout-inner {
  padding-top: 70px;
  padding-left: 32px;
  padding-right: 32px;
}

demo-profile-card-layout .demo-profile-card-layout-inner-more {
  padding-top: 122px;
  text-align: center;
}

demo-profile-card-layout .demo-profile-card-layout-more-image {
  margin: auto;
  width: 96px;
  height: 96px;
  margin-bottom: 94px;
}

demo-profile-card-layout .demo-profile-card-layout-emp-image {
  margin-bottom: 16px;
}

demo-profile-card-layout .demo-profile-card-layout-emp-name {
  overflow: hidden;
  width: 261px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

demo-profile-card-layout .demo-profile-card-layout-emp-title {
  width: 261px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

demo-profile-card-layout .demo-profile-card-layout-emp-more {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

demo-profile-card-layout .demo-profile-card-layout-emp-spacer {
  height: 4px;
  width: 261px;
}

/* For IE11 Support */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* For IE11 to load content urls, you must put in :after or :before */
  demo-profile-card-layout .demo-profile-card-layout-more-image:after {
    margin: auto;
    width: 96px;
    height: 96px;
    margin-bottom: 94px;
  }
  /* Use max height to do line clamping */
  demo-profile-card-layout .demo-profile-card-layout-emp-name {
    overflow: hidden;
    width: 261px;
    max-height: 3rem;
  }
  /* Use Max height to do line clamping */
  demo-profile-card-layout .demo-profile-card-layout-emp-title {
    width: 261px;
    overflow: hidden;
    max-height: 1.25rem;
  }
}