@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
body {
  font-family: 'Work Sans', sans-serif;
  color: #12262F;
  font-weight: 600;
}
.bold-green {
  color: #2C6B5C;
  font-weight: bold;
}

.weekly_content p, .weekly_content ul, .weekly_content li {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #12262F;
}

.weekly_content ul {
  margin-left: 2em;
}

.font-foodsteps-18 {
  font-size: 18px
}
p, .font-foodsteps-poppins {
  font-family: 'Poppins', sans-serif;
}
.font-poppins {
  font-family: 'Poppins', sans-serif;
}
h2, .font-worksans {
  font-family: 'Work Sans', sans-serif;
}
.font-foodsteps-600 {
  font-weight: 600
}
.font-foodsteps-400 {
  font-weight: 400
}
.font-foodsteps-500 {
  font-weight: 500
}

/*
 * jsCalendar v1.4.4
 * 
 * 
 * MIT License
 * 
 * Copyright (c) 2019 Grammatopoulos Athanasios-Vasileios
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * 
 */

.jsCalendar *{margin:0;padding:0}.jsCalendar table,.jsCalendar table td,.jsCalendar table th{border:0}.jsCalendar table{background-color:#fff;border-collapse:collapse;border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4);color:#000;font-family:Tahoma,Geneva,sans-serif;margin:5px}.jsCalendar thead .jsCalendar-title{height:40px;line-height:40px}.jsCalendar thead .jsCalendar-title-left{float:left}.jsCalendar thead .jsCalendar-title-right{float:right}.jsCalendar thead .jsCalendar-nav-left,.jsCalendar thead .jsCalendar-nav-right{border-radius:10px;color:#999;cursor:pointer;font-family:"Courier New",Courier,monospace;font-size:12px;font-weight:700;height:20px;line-height:20px;margin:10px 8px;text-align:center;transition:color .2s,background-color .2s;width:20px}.jsCalendar thead .jsCalendar-nav-left:hover,.jsCalendar thead .jsCalendar-nav-right:hover{background-color:#e2e2e2;color:#000}.jsCalendar thead .jsCalendar-nav-left{float:left}.jsCalendar thead .jsCalendar-nav-right{float:right}.jsCalendar thead .jsCalendar-title-name{cursor:default;float:left;font-size:18px;font-weight:lighter;padding:0 20px}.jsCalendar thead .jsCalendar-nav-left:after{content:"<"}.jsCalendar thead .jsCalendar-nav-right:after{content:">"}.jsCalendar thead .jsCalendar-week-days th{text-shadow:0 0 1px rgba(0,0,0,.2)}.jsCalendar tbody td,.jsCalendar thead .jsCalendar-week-days th{border-radius:18px;cursor:default;display:inline-block;font-size:12px;font-weight:lighter;height:36px;line-height:36px;margin:1px 2px;text-align:center;transition:color .1s,background-color .2s;width:36px}.jsCalendar tbody td:hover{background-color:#e6e6e6}.jsCalendar tbody td.jsCalendar-selected{background-color:#fff;border:2px solid #e6e6e6;box-sizing:content-box;height:32px;line-height:32px;width:32px}.jsCalendar tbody td.jsCalendar-current{background-color:#52c9ff;border-radius:18px;color:#fff}.jsCalendar tbody td.jsCalendar-next,.jsCalendar tbody td.jsCalendar-previous{color:#cacaca}.jsCalendar tbody td.jsCalendar-next:hover,.jsCalendar tbody td.jsCalendar-previous:hover{color:#fff}.jsCalendar thead{display:block;margin:4px 4px 0 4px}.jsCalendar tbody{display:block;margin:0 4px 4px 4px}.jsCalendar ::-moz-selection{background:#83d8ff}.jsCalendar ::selection{background:#83d8ff}.jsCalendar.yellow tbody td.jsCalendar-current{background-color:#ffe31b}.jsCalendar.yellow ::-moz-selection{background:#fde74c}.jsCalendar.yellow ::selection{background:#fde74c}.jsCalendar.orange tbody td.jsCalendar-current{background-color:#ffb400}.jsCalendar.orange ::-moz-selection{background:#ffb400}.jsCalendar.orange ::selection{background:#ffb400}.jsCalendar.red tbody td.jsCalendar-current{background-color:#f6511d}.jsCalendar.red ::-moz-selection{background:#f6511d}.jsCalendar.red ::selection{background:#f6511d}.jsCalendar.green tbody td.jsCalendar-current{background-color:#7fb800}.jsCalendar.green ::-moz-selection{background:#7fb800}.jsCalendar.green ::selection{background:#7fb800}.jsCalendar.material-theme table{border-radius:0}.jsCalendar.material-theme thead{background-color:#52c9ff;color:#fff;margin:0;padding:4px 4px 0 4px}.jsCalendar.material-theme thead .jsCalendar-title{display:block;position:relative}.jsCalendar.material-theme thead .jsCalendar-title-name{border-bottom:1px solid rgba(255,255,255,.4);color:#fff;font-size:16px;left:15px;position:absolute;right:15px;text-align:center}.jsCalendar.material-theme thead .jsCalendar-title-left,.jsCalendar.material-theme thead .jsCalendar-title-right{position:absolute;z-index:1}.jsCalendar.material-theme thead .jsCalendar-nav-left,.jsCalendar.material-theme thead .jsCalendar-nav-right{color:#fff}.jsCalendar.material-theme thead .jsCalendar-nav-left:hover,.jsCalendar.material-theme thead .jsCalendar-nav-right:hover{background-color:#03a9f4}.jsCalendar.material-theme thead .jsCalendar-title-right{right:0}.jsCalendar.material-theme thead .jsCalendar-week-days th{font-size:14px;text-shadow:none}.jsCalendar.material-theme.yellow thead{background-color:#ffe31b}.jsCalendar.material-theme.yellow thead .jsCalendar-nav-left:hover,.jsCalendar.material-theme.yellow thead .jsCalendar-nav-right:hover{background-color:#e2ca23}.jsCalendar.material-theme.orange thead{background-color:#ffb400}.jsCalendar.material-theme.orange thead .jsCalendar-nav-left:hover,.jsCalendar.material-theme.orange thead .jsCalendar-nav-right:hover{background-color:#d49600}.jsCalendar.material-theme.red thead{background-color:#f6511d}.jsCalendar.material-theme.red thead .jsCalendar-nav-left:hover,.jsCalendar.material-theme.red thead .jsCalendar-nav-right:hover{background-color:#bb3d16}.jsCalendar.material-theme.green thead{background-color:#7fb800}.jsCalendar.material-theme.green thead .jsCalendar-nav-left:hover,.jsCalendar.material-theme.green thead .jsCalendar-nav-right:hover{background-color:#639000}.jsCalendar.classic-theme table,.jsCalendar.classic-theme tbody td,.jsCalendar.classic-theme tbody td.jsCalendar-current,.jsCalendar.classic-theme thead .jsCalendar-nav-left,.jsCalendar.classic-theme thead .jsCalendar-nav-right,.jsCalendar.classic-theme thead .jsCalendar-week-days th{border-radius:0}.jsCalendar.classic-theme thead{background-color:#52c9ff;margin:0;padding:4px 4px 0 4px}.jsCalendar.classic-theme thead .jsCalendar-title,.jsCalendar.classic-theme thead .jsCalendar-title-row{display:block;width:100%}.jsCalendar.classic-theme thead .jsCalendar-title{position:relative}.jsCalendar.classic-theme thead .jsCalendar-title-name{color:#fff;font-size:16px;left:41px;position:absolute;right:41px;text-align:center;text-shadow:none}.jsCalendar.classic-theme thead .jsCalendar-title-left,.jsCalendar.classic-theme thead .jsCalendar-title-right{position:absolute;z-index:1}.jsCalendar.classic-theme thead .jsCalendar-title-right{right:0}.jsCalendar.classic-theme thead .jsCalendar-nav-left,.jsCalendar.classic-theme thead .jsCalendar-nav-right{color:#fff;text-shadow:none}.jsCalendar.classic-theme thead .jsCalendar-nav-left:hover,.jsCalendar.classic-theme thead .jsCalendar-nav-right:hover{background-color:#03a9f4}.jsCalendar.classic-theme thead .jsCalendar-week-days{background-color:#fff;display:block;margin:0 -4px}.jsCalendar.classic-theme thead .jsCalendar-week-days th{font-size:10px;height:20px;line-height:20px;text-shadow:none}.jsCalendar.classic-theme tbody td{border-left:1px solid #dadada;border-top:1px solid #dadada;margin:-1px 0 0 -1px;padding:1px 1px 0 1px;width:38px}.jsCalendar.classic-theme tbody{margin:0}.jsCalendar.classic-theme tbody td.jsCalendar-selected{background-color:#ccefff;border-bottom:0;border-left:1px solid #dadada;border-right:0;border-top:1px solid #dadada;height:36px;line-height:36px}.jsCalendar.classic-theme tbody td.jsCalendar-current.jsCalendar-selected{background-color:#52c9ff;text-shadow:0 0 3px #000}.jsCalendar.classic-theme.yellow thead{background-color:#ffe31b}.jsCalendar.classic-theme.yellow thead .jsCalendar-nav-left:hover,.jsCalendar.classic-theme.yellow thead .jsCalendar-nav-right:hover{background-color:#e2ca23}.jsCalendar.classic-theme.orange thead{background-color:#ffb400}.jsCalendar.classic-theme.orange thead .jsCalendar-nav-left:hover,.jsCalendar.classic-theme.orange thead .jsCalendar-nav-right:hover{background-color:#d49600}.jsCalendar.classic-theme.red thead{background-color:#f6511d}.jsCalendar.classic-theme.red thead .jsCalendar-nav-left:hover,.jsCalendar.classic-theme.red thead .jsCalendar-nav-right:hover{background-color:#bb3d16}.jsCalendar.classic-theme.green thead{background-color:#7fb800}.jsCalendar.classic-theme.green thead .jsCalendar-nav-left:hover,.jsCalendar.classic-theme.green thead .jsCalendar-nav-right:hover{background-color:#639000}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Hide scrollbar for Chrome, Safari and Opera */
 *::-webkit-scrollbar {
   display: none;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
 * {
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
 }
 
.top-shadow {
   box-shadow: 0 -5px 5px -5px #ced4d4;
}

/********** Range Input Styles **********/
 /*Range Reset*/
 input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 100%;
 }
 
 /* Removes default focus */
 input[type="range"]:focus {
   outline: none;
 }
 
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #d1d5db;
    border-radius: 0.5rem;
    height: 0.5rem;  
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -4px; /* Centers thumb on the track */
 
    /*custom styles*/
    background-color: #14b8a6;
    height: 1rem;
    border-radius: 100%;
    width: 1rem;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   border: 1px solid #d1d5db;
   outline: 3px solid #d1d5db;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #d1d5db;
    border-radius: 0.5rem;
    height: 0.5rem;
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
 
    /*custom styles*/
    background-color: #14b8a6;
    height: 2rem;
    width: 1rem;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   border: 1px solid #d1d5db;
   outline: 3px solid #d1d5db;
   outline-offset: 0.125rem; 
 }


.-bottom-100 {
   bottom: -1000px;
}

#eating-calendar {
   /* background-color: white; */
}
.jsCalendar-title-name {
   text-align: center;
}

.weekly_summary svg {
   display: inline-block;
   /* padding-right: 12px; */
}