.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
.loading, .loading2 {
	float: left;
	margin-right: 10px;
	padding-left: 20px;
	margin-top: -7px;
}

.plus{
	margin-top: -8px;
	padding-left: 10px;
}

.highlight-red .header-light .header-logo, .header-logo-home {
	background-image: url(../images/logo_80hc.png)
}

.highlight-red .header-dark .header-logo {
	background-image: url(../images/logo_80hc.png)
}

.highlight-red .footer-light .footer-logo {
	background-image: url(../images/logo-dark-red.png)
}

.highlight-red .footer-dark .footer-logo,
.highlight-red .menu-dark .sidebar-logo a {
	background-image: url(../images/logo_80hc.png)
}

.highlight-red .menu-light .sidebar-logo a {
	background-image: url(../images/logo-dark-red.png)
}

.highlight-blue .header-light .header-logo {
	background-image: url(../images/logo-dark-blue.png)
}

.highlight-blue .header-dark .header-logo {
	background-image: url(../images/logo-light-blue.png)
}

.highlight-blue .footer-light .footer-logo {
	background-image: url(../images/logo-dark-blue.png)
}

.highlight-blue .footer-dark .footer-logo,
.highlight-blue .menu-dark .sidebar-logo a {
	background-image: url(../images/logo-light-blue.png)
}

.highlight-blue .menu-light .sidebar-logo a {
	background-image: url(../images/logo-dark-blue.png)
}

.highlight-green .header-light .header-logo {
	background-image: url(../images/logo-dark-green.png)
}

.highlight-green .header-dark .header-logo {
	background-image: url(../images/logo-light-green.png)
}

.highlight-green .footer-light .footer-logo {
	background-image: url(../images/logo-dark-green.png)
}

.highlight-green .footer-dark .footer-logo,
.highlight-green .menu-dark .sidebar-logo a {
	background-image: url(../images/logo-light-green.png)
}

.highlight-green .menu-light .sidebar-logo a {
	background-image: url(../images/logo-dark-green.png)
}

.highlight-pink .header-light .header-logo {
	background-image: url(../images/logo-dark-pink.png)
}

.highlight-pink .header-dark .header-logo {
	background-image: url(../images/logo-light-pink.png)
}

.highlight-pink .footer-light .footer-logo {
	background-image: url(../images/logo-dark-pink.png)
}

.highlight-pink .footer-dark .footer-logo,
.highlight-pink .menu-dark .sidebar-logo a {
	background-image: url(../images/logo-light-pink.png)
}

.highlight-pink .menu-light .sidebar-logo a {
	background-image: url(../images/logo-dark-pink.png)
}

.highlight-orange .header-light .header-logo {
	background-image: url(../images/logo-dark-orange.png)
}

.highlight-orange .header-dark .header-logo {
	background-image: url(../images/logo-light-orange.png)
}

.highlight-orange .footer-light .footer-logo {
	background-image: url(../images/logo-dark-orange.png)
}

.highlight-orange .footer-dark .footer-logo,
.highlight-orange .menu-dark .sidebar-logo a {
	background-image: url(../images/logo-light-orange.png)
}

.highlight-orange .menu-light .sidebar-logo a {
	background-image: url(../images/logo-dark-orange.png)
}

.highlight-magenta .header-light .header-logo {
	background-image: url(../images/logo-dark-magenta.png)
}

.highlight-magenta .header-dark .header-logo {
	background-image: url(../images/logo-light-magenta.png)
}

.highlight-magenta .footer-light .footer-logo {
	background-image: url(../images/logo-dark-magenta.png)
}

.highlight-magenta .footer-dark .footer-logo,
.highlight-magenta .menu-dark .sidebar-logo a {
	background-image: url(../images/logo-light-magenta.png)
}

.highlight-magenta .menu-light .sidebar-logo a {
	background-image: url(../images/logo-dark-magenta.png)
}

.highlight-simple .header-light .header-logo {
	background-image: url(../images/logo-dark.png)
}

.highlight-simple .header-dark .header-logo {
	background-image: url(../images/logo-light.png)
}

.highlight-simple .footer-light .footer-logo {
	background-image: url(../images/logo-dark.png)
}

.highlight-simple .footer-dark .footer-logo,
.highlight-simple .menu-dark .sidebar-logo a {
	background-image: url(../images/logo-light.png)
}

.highlight-simple .menu-light .sidebar-logo a {
	background-image: url(../images/logo-dark.png)
}

.sidebar-logo a {
	background-repeat: no-repeat;
	background-size: auto 40px;
	height: 40px
}

.footer .footer-logo,
.header .header-logo,
.header .header-logo-home {
	background-size: auto 40px;
	width: 183px;
	margin-left: -97px
}

.footer .footer-logo {
	background-size: auto 40px;
	position: relative;
	width: 100%;
	height: 40px;
	left: auto;
	margin: 0 auto
}



input[type=date]:required:invalid::-webkit-datetime-edit {
		color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
		color: black !important;
}

input[type=date]:required:invalid {
		color: transparent;
}
input[type=date]:required:valid {
		color: black !important;
}

.left{
	text-align: left;
}
.t-right{
	text-align: right;
}
.q{
	max-width: 35%;
	float:left;
	text-align: right;
}
.p{
	max-width: 55%;
	margin-left: 10%;
	text-align: right;
}
.s{
	min-height: 43px;
}
.total{
	margin: 5px 0 0 0;
	font-size: 0.95em;
	text-align: right;
	line-height: 46px;
	margin-right: 2.5%;
	font-weight: 800;
}

.buttonhidden {
	display: none!important;
}

.footer{margin-top:15px;}
/* material design input*/
/*https://codepen.io/soutomario/embed/LbENBr*/

.input input {
	border: 0;
	border-bottom: 2px solid #5264AE;;
	outline: none;
	transition: .2s ease-in-out;
	box-sizing: border-box;
}

.input label {
	top: 0;
	left: 0; right: 0;
	color: #5264AE;
	font-weight: 500;
	display: flex;
	align-items: center;
	position: absolute;
	font-size: 1rem;
	cursor: text;
	transition: .2s ease-in-out;
	box-sizing: border-box;
}

.input input,
.input label {
	width: 100%;
	height: 2rem;
	font-size: 1rem;
	margin-top: 1rem;
}

/* Interation */
.input input:valid,
.input input:focus {
	border-bottom: 2px solid #26a69a;
}

.input input:valid + label,
.input input:focus + label
 {
	color: #5264AE;
	font-size: .7rem;
	top: -1rem;
	pointer-events: none;
}
.input input:read-only{
	color:#888;
}

.input input:read-only + label
 {
	color: #5264AE;
	font-size: .7rem;
	top: -1rem;
	pointer-events: none;
}

.input input:-moz-read-only + label
 {
	color: #5264AE;
	font-size: .7rem;
	top: -1rem;
	pointer-events: none;
}



/* select starting stylings ------------------------------*/
.select {
position: relative;
width: 100%;
margin-top: 18px;
}

.select-text {
position: relative;
font-family: inherit;
background-color: transparent;
width: 100%;
padding: 10px 10px 10px 0;
font-size: 14px;
border-radius: 0;
border: none;
border-bottom: 1px solid #757575;
}

/* Remove focus */
.select-text:focus {
outline: none;
border-bottom: 1px solid rgba(0,0,0, 0);
}

/* Use custom arrow */
.select .select-text {
appearance: none;
-webkit-appearance:none;
-moz-appearance:none;
}

.select select::-ms-expand {
    display: none;
}

.select:after {
position: absolute;
top: 18px;
right: 10px;
/* Styling the down arrow */
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.12);
pointer-events: none;
}


/* LABEL ======================================= */
.select-label {
color: #5264AE;
font-size: 16px;
font-weight: 500;
position: absolute;
pointer-events: none;
left: 0px;
top: 10px;
transition: 0.2s ease all;
}

/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
color: #5264AE;
top: -20px;
transition: 0.2s ease all;
font-size: 12px;
}

/* BOTTOM BARS ================================= */
.select-bar {
position: relative;
display: block;
width: 100%;
}

.select-bar:before, .select-bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #2F80ED;
transition: 0.2s ease all;
}

.select-bar:before {
left: 50%;
}

.select-bar:after {
right: 50%;
}

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
width: 50%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}




/*-----------------------------*/

@keyframes heartbeat {
  0% {
    transform: scale( .75);
  }
  20% {
    transform: scale( 1);
  }
  40% {
    transform: scale( .75);
  }
  60% {
    transform: scale( 1);
  }
  80% {
    transform: scale( .75);
  }
  100% {
    transform: scale( .75);
  }
}
.heart {
	animation: heartbeat 1s infinite;
	color: red;
}




/*
material checkboxes
*/

.checkbox {
  display: inline-block;
  position: relative;
  margin: 12px 0 0px 10px;
  font-size: 16px;
  line-height: 24px;
	width: 100%;
	padding: 6px 10px 4px 10px;
	border-bottom: 2px solid #5264AE;
}
.checkbox__input {
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  z-index: 0;
}
.checkbox__label {
  display: block;
  padding: 0 0 0 24px;
  cursor: pointer;
}
.checkbox__label:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid rgba(0, 0, 0, 0.54);
  border-radius: 2px;
  z-index: 1;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: background-color, border-color;
}
.checkbox__label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 6px;
  height: 12px;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 2;
  transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.checkbox__input:checked + .checkbox__label:before {
  background-color: #3f51b5;
  border-color: #3f51b5;
}
.checkbox__input:checked + .checkbox__label:after {
  border-color: #fff;
}

@media (max-width: 800px) {
    .checkbox__label { font-size: 0.9em; }
}

@media (max-width: 500px) {
    .checkbox__label { font-size: 0.7em; }
}


/*
	months buttons
*/

.block {
  /*float: left;*/
  padding: 1rem 0;
}
.block legend{
	float: left;
	color: #5264AE;
	font-size: 16px;
	font-weight: 500;
	min-width: 4%;
	left: 0px;
	top: 10px;
	transition: 0.2s ease all;
}
.block input {
  position: absolute;
  visibility: hidden;
}
.block input:hover + label {
  background: #eaeaea;
}
.block input:checked + label {
  background: #337ab7;
  color: #FFF;
}
.block input:checked + label:hover {
  background: #3b87c8;
}
.block legend {
  margin-bottom: .5rem;
}
.block label {
  background: #DDD;
  cursor: pointer;
  display: block;
  float: left;
  font-weight: normal;
  margin: 1px 0 0 1px;
  padding: .5rem 0;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  /*width: calc(8% - 1px);*/
}

.block legend.tools{
	float: left;
	color: #5264AE;
	font-size: 16px;
	font-weight: 500;
	min-width: 4%;
	left: 0px;
	top: 10px;
	transition: 0.2s ease all;
}

.block input:hover + label.tools {
  background: #e1d7c7;
}
.block input:checked + label.tools {
  background: #ff9f00;
  color: #333;
}
.block input:checked + label.tools:hover {
  background: #fbb848;
}


.day label{
	width: calc(13.67% - 1px);
}
.daym label{
	width: calc(3.07% - 1px);
}
.freq label{
	width: calc(8.72% - 1px);
}
.month label{
	width: calc(7.34% - 1px);
}
.full{
	display:block;
}
.short{
	display:none;
}

.username{
  min-width: 190px;
  text-transform: uppercase;
  font-size:14px;
  color:#007d03;
  font-weight: 700;
}

input:invalid {
background-color: pink;
}
.h5switch{
  font-size: 0.9em;
  color: #fff;
  width:190px!important;
}
.switchinput{
  background-color: #1c222e;
  color:#fff;
}
.switchinput:focus{
  color:#ff0000;
}

@media (max-width: 600px)
{
		.block{
			padding:0.3rem 0;
		}
		.block legend{
			float:none;
			margin-bottom: 0;
		}
		.block label{
			width: calc(16.6% - 1px);
		}
		.day label, .freq label, .month label{
			width: calc(25% - 1px);
		}

		.full{
			display:none;
		}
		.short{
			display:block;
		}

  .cal-dates a{
    line-height: 27px!important;
    height: 27px!important;
  }
  .username{
      width: 80px;
  }
}