/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.dark { background-color:#07426d !important; }
#copyrights { font-size: 12px; }

.container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 18px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default radio button */
.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark { background-color: #ccc; }
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark { background-color: #2196F3; }
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	 content: "";
	 position: absolute;
	 display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after { display: block; }
/* Style the indicator (dot/circle) */
.container .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
} 
.indisponible { background-color: red !important; /* Texte en rouge pour les créneaux indisponibles */ }

.ui-datepicker-calendar td { padding: 10px 13px; text-align: center; }
.ui-datepicker-next { float:right; }
.ui-datepicker-title { margin:10px; text-align:center; }
.ui-datepicker-current-day { background-color:#fff; border-radius: 50%; }

.hidden { display: none; }

/* Radio button */
input[type="radio"] {
    display: none;
    &:checked {
      + .box {
        background-color: #74b798; /*vert*/
        span {
          color: white;
          transform: translateY(70px);
          &:before {
            transform: translateY(0px);
            opacity: 1;
          }
        }
      }
    }
  }
  .box {
    width: auto;
    line-height: 40px;
    background-color: #07426d; /*bleu*/
    color: #fff;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-weight: 400;
    border-radius: 15px;
    padding: 0 35px;
    &:active {
      transform: translateY(10px);
    }
    span {
      position: absolute;
      transform: translate(0, 60px);
      left: 0;
      right: 0;
      transition: all 300ms ease;
      font-size: 1.5em;
      user-select: none;
      color: $green;
      &:before {
        font-size: 1.2em;
        font-family: FontAwesome;
        display: block;
        transform: translateY(-80px);
        opacity: 0;
        transition: all 300ms ease-in-out;
        font-weight: normal;
        color: white;
      }
    }
  }