@font-face {
    font-family: "Poppins-Regular";
    src: url("../fonts/Poppins-Regular.ttf") format("truetype"),
         url("../fonts/Poppins-Regular.otf") format("opentype");
}
@font-face {
    font-family: "Poppins-Bold";
    src: url("../fonts/Poppins-Bold.ttf") format("truetype"),
         url("../fonts/Poppins-Bold.otf") format("opentype");
}
@font-face {
    font-family: "Poppins-SemiBold";
    src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"),
         url("../fonts/Poppins-SemiBold.otf") format("opentype");
}
@font-face {
    font-family: "Poppins-Light";
    src: url("../fonts/Poppins-Light.ttf") format("truetype"),
         url("../fonts/Poppins-Light.otf") format("opentype");
}


body {
    font-family: 'Poppins-Regular';
}

#landing-page {
      background:url(../images/landing-bg.jpg) no-repeat center center fixed; 
      background-size: cover;
      width: 100vw;
      height: 100vh;
      margin:0 auto;
}

#landing-page .col-md-6 {
     padding:3rem 6rem;
}

#landing-page .landing-box {
    background-color:#fff;
    border-radius:1rem;
    padding:2rem 3rem;
    text-align:center;
    min-height: 600px;
}
 

#landing-page .brand-logo {
    max-height: 70px;
    margin-bottom: 3rem;
}

#landing-page .school-logos {
    padding-top:1.5rem; 
    padding-bottom:1.5rem;
}

#landing-page h1 {
    font-size:1.3rem;
    color:#000;
    font-family: 'Poppins-SemiBold';
    padding-top:2rem;
    padding-bottom:1rem;
}

#landing-page .credit {
    position: absolute;
    bottom: 2rem;
    color: #bbbbbb;
    font-size: 0.8rem;
}

#login-page {
    background:url(../images/login-bg.jpg) no-repeat center center fixed; 
      background-size: cover;
      width: 100vw;
      height: 100vh;
      padding:3rem;
      margin:0 auto;
}

#login-page .login-box {
    background-color:#fff;
    border-radius:2rem;
    padding:4rem;
}

#login-page .bc-logo {
    margin-top:1rem;
    margin-bottom:3rem;
}

#login-page .form-control {
    border:0;
    margin-bottom: 2rem;
    border-bottom:1px solid #dddddd;
    border-radius: 0;
    background:none;
 }
 
#login-page  .form-select {
    border: 0;
    font-size: 1rem;
    border-bottom: 1px solid #dddddd;
    border-radius: 0;
}


 ::placeholder {
    font-family: 'Poppins-Regular';
 
 }
 
 #username::placeholder {
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color:#666566; 
 }
 
#password::placeholder {
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    color:#666566; 
 }

 .btn-default {
    width: 100%;
    border-radius: 3rem;
    padding: 1.4rem;
    margin-top: 15%;
    background: #134270;
    color: #fff;
    font-family: 'Poppins-Regular';
    font-size: 1.3rem;
 }


 .btn-default:hover {
     color: #134270;
     border:2px solid #134270;
 }
 
 .btn-primary {
    width: 100%;
    border-radius: 1rem;
    padding: 1rem 1rem;
    margin-top: 1rem;
    background: #134270;
    border:1px solid #134270;
    color: #fff;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
 }


 .btn-primary:hover {
     color: #134270;
     border:1px solid #134270;
     background:#ffffff;
 }
 
  .btn-brown {
    width: 8rem;
    border-radius: 0.5rem;
    padding: 0.7rem 1rem;
    margin-top: 1rem;
    background: #876E4C;
    color: #ffffff;
    font-family: 'Poppins-SemiBold';
    font-size: 0.9rem;
    border: 1px solid #876E4C;
 }


 .btn-brown:hover {
     color: #876E4C;
     border:1px solid #876E4C;
     background:#ffffff;
 }
 
  .btn-grey {
    width: 100%;
    border-radius: 1rem;
    padding: 1rem 1rem;
    margin-top: 1rem;
    background: #F5F5F5;
    color: #000000;
    font-family: 'Poppins-Regular';
    font-size: 0.8rem;
    border:1px solid #876E4C;
 }


 .btn-grey:hover {
     color: #ffffff;
     border:1px solid #876E4C;
     background:#876E4C;
 }
 
 .btn-small-white {
     font-size:0.7rem;
     border:1px solid #999999;
     color:#000000;
     width:100%;
     
 }
 
 .btn-small-white:hover {
     background:#134270;
     color:#ffffff;
     border:1px solid #134270;
     
 }
 
 .btn-icon {
    background: #fff;
    padding: 1rem;
    border-radius: 1rem;
    border:2px solid #fff;
 }
 
.btn-icon-selected {
    border:2px solid #876E4C;
}
 
.btn-icon img {
    width: 2.5rem;
    padding-bottom: 0.7rem;
}

.btn-text {
    color: #999;
    font-size: 0.8rem;
}

.btn-icon:hover {
    border:2px solid #134270;
}

.btn-icon:active {
    border:2px solid #876E4C;
}

#login-page .btn-default {
    margin-bottom:1rem;
}

#login-page a {
    text-decoration:none;
    color:#B9AB6B;
}

#login-page a:hover {
    color:;
}

#login-page p.text-center {
    color:#B9AB6B;
}

#login-page p.account-fn {
    margin-bottom:2rem;
}

.light-grey {
    color:#C5C5C5;
}

#login-page .light-grey a {
    color:#C5C5C5;
    text-decoration:none;
    font-size:0.8rem;
    padding-top:2rem;
}

#three-col-layout {
    margin:0 auto;
}

#left-area {
    background:#ffffff;
    padding:1.5rem 2rem;
}

#left-area img.sidebar-logo {
    padding-bottom: 2rem;
    padding-top: 3rem;
}

#left-area ul.menu {
    list-style:none;
    padding-left:0;
}

#left-area ul.menu li {
    padding-top:1rem;
    padding-bottom:1rem;
    text-align: left;
    padding-left: 1rem;
}

#left-area ul.menu li img {
    width:1.5rem;   
}

#left-area ul.menu li:hover {
    background:#134270;     
    border-radius:1rem;
}

#left-area ul.menu li:hover a {
    color:#ffffff;
}

#left-area ul.menu li a {
    color:#876E4C;
    text-decoration:none;
    font-size:0.9rem;
    padding:1rem;
}

#left-area .advert-1 {
    padding-bottom:2rem;
}

/************************ CENTER AREA ***************************/

#center-area {
    background:#f5f5f5;
    padding:4rem 3rem;
}

h1 {
    font-size:1.7rem;
    color:#000;
    font-family: 'Poppins-Bold';
    padding-bottom:3rem;
}

h2 {
    color:#134270;
    font-size:1.1rem;
    font-family: 'Poppins-Bold';
    padding-bottom:1.5rem;
}

#center-area .panel-white {
    background:#ffffff;
    padding:2.5rem;
    border-radius:1rem;
    margin-bottom:3rem;
}

.form-control {
    border:1px solid #876E4C;
    background:#F3F0ED;
    margin-bottom:2rem;
}
 .form-select {
    border:1px solid #876E4C;
    margin-bottom:2rem;
    background: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e)#F3F0ED no-repeat 95%;
    background-size: 16px;
    font-size:0.9rem;
 }

#center-area label {
    font-size:0.9rem;
}

#center-area .select-date {
    margin-bottom:2rem;
}

#center-area .select-meal {
    margin-bottom:2rem;
}

#center-area .select-category {
    margin-bottom:2rem;
}

#center-area .select-items {
    margin-bottom:2rem;
}

#center-area .btn-meal {
    width:100%;
}

#center-area .p-text {
    font-size:0.9rem;
    color:#2E2E2E;
}

#center-area .product-row {
    min-height: 6.5rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1rem;
}

#center-area .p-price {
    color:#876E4C;
    font-family: 'Poppins-Bold';
}

#center-area .fa-square-plus {
    color:#F6BD27;
    font-size: 2.5rem;
    padding-top: 1rem;
}

#center-area .btn-plus {
    border:none;
    background:none;
}

#center-area .fa-square-plus:hover {
    color:#876E4C;
}

#right-area a.logout {
    color:#D2042D;
}

#center-area a.logout:hover {
    color:#FF3131;
}

button.close {
    border:0;
}


/************************ RIGHT AREA ***************************/

#right-area {
    padding: 2.8rem 2rem;
}

#right-area .avatar {
    padding-top:1rem;    
}

#right-area .avatar-img {
    width:3.5rem;   
}

#right-area .parent-name {
    float:right;
    color:#000000;
    font-size:1.1rem;
    font-family: 'Poppins-Bold';
    line-height: 3.5rem;
}

.blue {
    color:#134270;
}

.grey {
    color:#999999;
}

.bold-font {
    font-family: 'Poppins-Bold';
}

.light-font {
    font-family: 'Poppins-Light';
}

#right-area .ordering-for {
    font-size:0.8rem;
    margin-top:2rem;
}

#right-area .cart {
    margin-top:4rem;
}

.alert-primary {
    color:#134270;
    background:#CCEAFF;
    border:none;
    font-size:0.8rem;
}

#right-area h2 {
    padding-bottom:1rem;
}

#right-area .total-widget {
    background: url(../images/balance.png) no-repeat 100% 100%;
    background-size: contain;
    width: 100%;
    text-align: right;
    padding-top: 2.2rem;
    padding-right: 2.2rem;
    height: 8rem;
    margin-top: 2rem;
}

#right-area .total-label {
    font-size:0.7rem;
    color:#2E2E2E;
    font-family: 'Poppins-Light';
}

#right-area .total-value {
    font-family: 'Poppins-Bold';
    font-size:1.8rem;
    color:#000000;
}

#right-area .action-btns {
    margin-top:1.5rem;
}

#otp .form-control {
    border: 1px solid #dddddd;
    line-height: 5rem;
    font-family: 'NunitoSans-Bold';
    color: #18468D;
    font-size: 2rem;
    width: 4rem;
}

 .date-scroller {
      display: inline-flex;
      align-items: center;
      background:#fff;
    padding: 1rem;
    border-radius: 1rem;
}

.arrow {
      cursor: pointer;
    font-size: 1.7rem;
    padding: 2rem 1rem;
    border: 3px solid #F6BD27;
    border-radius: 1rem;
}

.dates {
      display: flex;
      margin: 0 10px;
}

.date {
      display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 1px solid #ddd;
    margin: 15px;
    cursor: pointer;
    text-align: center;
    border-radius: 0.5rem;
}

.date:hover {
      background-color: #134270;
}

.day-label {
    color:#999;
}
 
.date-label {
    font-size: 1.5rem;
    font-weight: bold;
}
 
.month-label {
    color:#999;
}
 
.selected {
      background-color: #876E4C;
      color: white;
}

.date:hover  .day-label{
    color:#fff;
}

.selected  span.day-label{
    color:#fff;
}

.date:hover .date-label{
    color:#F6BD27;
}

.selected  span.date-label{
    color:#F6BD27;
}

.date:hover .month-label{
    color:#fff;
}

.selected  span.month-label{
    color:#fff;
}

.btn-meal-time-selected {
    background-color: #876E4C;
    color: #F6BD27;
}

.move-left {
    text-align:left;
}

.move-right {
    text-align:right;
}

.move-center {
    text-align:center;
}

i.fa-minus {
    color:#d73038;
}

.cart-row {
    border-bottom:1px solid #ddd;
    font-size: 0.9rem;
}

.cart-row small a {
    color:#876E4C;
    font-size:0.8rem;
    text-decoration:none;
}

.dt-row {
    margin-bottom:2rem;
}

.bg-dark-blue {
    background:#134270;
}

.bg-brown {
    background:#876E4C;
}


.bg-yellow {
    background:#F6BD27;
}


.date.disabled {
    color: grey; 
    pointer-events: none; 
    opacity: 0.6; 
}



.date.disabled:hover {
    background-color: inherit; 
    cursor: default; 
}

/* ============ Phone & Tablet ============ */

@media (max-width: 768px) {
  .date {
        padding:0.1rem;
        margin:1px;
  }
  .arrow {
      padding:0.3rem;
  }
  #right-area {
      padding:2rem 2rem 20rem 2rem;
  }
  .select-items img {
      padding-bottom:1rem;
      padding-top:1rem;
  }
  #center-area .btn-plus {
      margin-bottom:1.5rem;
  }
  #center-area .fa-square-plus {
      padding-top:0;
  }
  #left-area ul.menu li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    }
  
}