.planner{padding: 4rem 0 10rem 0; margin: 0 auto; width: 90%; font-size: 3rem; background-color: #fff;}
.planner h1{font-size: 5rem;  margin: 0;}

.attentionmessage{border: 1px solid #333; padding: 3rem; border-radius: 0.5rem; font-size: 2rem; color: #777}

.sendidea{display: inline-block; background: url('/images/favorit/send-idea-link-color-64.png') 1rem center no-repeat; font-size: 2.5rem; background-size: 5rem 5rem; padding: 2rem 1rem 2rem 7rem; margin-bottom: 2rem; height: 4rem; line-height: 3rem; cursor: pointer; color: #fff; background-color: #1F90D7; text-decoration: none; height: auto; border-radius: 0.5rem;}
.sendidea strong{display: block;}

.headerandnav{margin: 0 auto;}
.headerandnav .hanback img{width: 4rem; height: 4rem; display: inline-block; opacity: 0.5;}
.headerandnav h2{font-size: 4rem!important; display: inline-block; margin-left: 3rem;}

.planner .addbutton{display: inline-block; background-color: #1B6DFF; color: #fff; padding: 10px 20px; font-size: 18px; cursor: pointer; text-align: center; border-radius: 5px; margin-top: 5px; text-decoration: none; display: inline-block;}

.planner .authbutton{display: block; width: 100%; background-color: #8DC63F; color: #fff; padding: 2rem 0; font-size: 3rem; cursor: pointer; text-align: center; border-radius: 0.5rem; margin-top: 3rem; text-decoration: none; display: inline-block;}

.planner input[type="text"]{width: 50%; border: 1px solid #ccc; padding: 10px; font-size: 16px; border-radius: 5px;}
.planner input[type="date"]{width: 30%; border: 1px solid #ccc; padding: 10px; font-size: 16px; border-radius: 5px;}
.planner textarea{width: 50%; border: 1px solid #ccc; padding: 10px; font-size: 16px; border-radius: 5px;}

.planner{}
.planner .pdndays a{display: inline-block; font-size: 2.5rem; padding: 1rem; margin: 0 1rem 1rem 0; border-radius: 5px; background-color: #8DC63F; text-decoration: none; color: #fff;}
.planner .pdndays .curday{background-color: #62A600!important; color: #fff!important;}
.planner .pdndays .pdndaysintervals{margin-top: 1rem;}

.recipesplanner{}
.recipesplanner .rpdayname{font-size: 4rem; background-image: linear-gradient(to top right, rgb(255, 227, 204), rgb(255, 228, 199), rgb(255, 229, 195), rgb(255, 230, 190), rgb(255, 231, 186), rgb(255, 232, 181), rgb(255, 227, 185), rgb(255, 223, 189), rgb(255, 218, 193), rgb(255, 213, 196), rgb(255, 209, 200), rgb(255, 204, 204)); padding: 2rem; border-radius: 0.5rem; color: #333;}
.recipesplanner .rpobj{padding-bottom: 10px;}
.recipesplanner .rpobj .rpobjrecipe{position: relative; display: inline-block; width: 100%; text-align: center; border-bottom: 1px solid #f2f2f2; padding: 2rem 0;}
.recipesplanner .rpobj .rpobjrecipe:last-child{border: 0!important;}
.recipesplanner .rpobj .rpobjrecipe .rpobjrleft{width: 30%; border-radius: 5px; float: left;}
.recipesplanner .rpobj .rpobjrecipe .rpobjrright{width: 65%; margin: 0 0 1rem 5%; padding-bottom:5rem; float: left; text-align: left;}
.recipesplanner .rpobj .rpobjrecipe .rpobjname{font-size: 3.5rem;}
.recipesplanner .rpobj .rpobjrecipe .rpobjingr{margin-top: 2rem;}
.recipesplanner .rpobj .rpobjrecipe .rpobjingr p{margin: 0; font-size: 2rem;}
.recipesplanner .rpobj .rpobjrecipe .rpobjingr strong, .recipesplanner .rpobj .rpobjrecipe .rpobjingr strong{font-size: 2rem;}

.recipesplanner .rpobj .rpobjbuttons{margin-left: 35%; text-align: left;}
.recipesplanner .rpobj .rpobjbuttons .rpobjdel{display: inline-block; font-size: 2rem; bottom: 2rem; padding: 1rem 1rem 1rem 3rem; border-radius: 0.5rem; color: #fff; cursor: pointer; background: #000 url('/images/favorit/delete-red-32.png') 1rem center no-repeat; background-size: 1.5rem 1.5rem;}
.recipesplanner .rpobj .rpobjbuttons .rbrfavorit{display: inline-block; font-size: 2rem; bottom: 2rem; padding: 1rem 1rem 1rem 3rem; border-radius: 0.5rem; color: #fff; cursor: pointer; background: #EC7000 url('/images/favorit/bookmark-white-32.png') 1rem center no-repeat; background-size: 1.5rem 1.5rem;}



.pllist{font-size: 3rem; margin: 0 auto; padding-top: 2rem;}
.pllist .listok{margin: 0; padding: 0;}
.pllist .listok li{background: url('/images/favorit/listok-64.png') left top no-repeat; background-size: 32px 32px; padding: 0 0 0 40px; list-style: none; margin: 2rem 0; font-size: 2.5rem; min-height: 32px;}

.olstep{
  counter-reset: myCounter;
  padding: 0;
  margin: 0;
}

.olstep li{
  list-style: none;
  line-height: 3rem;
  margin: 0 0 2rem 0; font-size: 2.5rem;
}

.olstep li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #002988;
  display: inline-block;
  text-align: center;
  line-height: 3rem;
  height: auto;
  width: auto;
  margin: 0 2rem 0 0;
  padding: 1rem;
  border-radius: 3rem;
  width:3rem;
  height:3rem;
}



.datepicker{width: 95%!important; padding: 1rem 0 1rem 5%!important; font-size: 2.7rem!important; border: 1px solid #000!important; background: url('/images/planner/calendar-64-ico.png') 1% center no-repeat!important; background-size: 3% auto!important; }
.datepicker::placeholder{color: #000!important;}
.custom-datepicker {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 1rem #333;
}

.custom-datepicker .ui-datepicker-header {
    background: transparent;
    border: none;
    color: white;
    font-weight: bold;
}

.custom-datepicker .ui-datepicker-title {
    padding: 2rem 0 1rem 0;
}

.custom-datepicker .ui-datepicker-title select{
	font-size: 2.5rem; margin: 0 1rem; border-radius: 0.5rem; color: #000; padding: 1rem;
}

.custom-datepicker .ui-datepicker-calendar {
    background: white;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.custom-datepicker .ui-datepicker-calendar th {
    background: #f8f9fa;
    color: #6c757d;
    font-weight: 600;
    font-size: 2rem;
}

.custom-datepicker .ui-datepicker-calendar td{
	padding: 1rem;
}

.custom-datepicker .ui-datepicker-calendar td a {
    color: #495057;
    display: inline-block;
    text-align: center;
    font-size: 2.5rem; width: 3rem; height: 3rem; padding: 0.5rem; text-decoration: none;
}


.custom-datepicker .ui-datepicker-prev, 
.custom-datepicker .ui-datepicker-next {
    display: none !important;
}

.custom-datepicker .highlighted-date a {
    background: #ff6b6b !important;
    color: white !important;
    border-radius: 0.5rem!important;
}


.plannernoreg{}
.plannernoreg h1{text-align: center;}

.plannernoreg .pnrcenter{text-align: center;}
.plannernoreg .pnrgray{color: #555; font-size: 2.5rem;}
.plannernoreg hr{background-color: #ccc; border: 0; height: 1px; margin: 5rem 0;}

.plannernoreg .pllist{font-size: 3rem; margin: 0 auto;}
.plannernoreg .pllist h2{font-size: 4rem!important; margin: 0!important;}
.plannernoreg .pllist .listok{margin: 0; padding: 0;}
.plannernoreg .pllist .listok li{background: url('/images/favorit/listok-64.png') left top no-repeat; background-size: 32px 32px; padding: 0 0 0 40px; list-style: none; margin: 4rem 0; font-size: 2.5rem; min-height: 32px;}
.plannernoreg .pllist .listok p{margin: 0; padding: 0;}

.plannernoreg .pnrcreen{width: 100%; margin: 0 auto; border-radius: 0.5rem; margin: 5rem 0;}