/**
 * Styles for front end appointment form
 *
 * @package Course booking
 * @since 1.0.0
 *
 */

.display-user-message {
   position: fixed;
   bottom: 50px;
   padding: 10px;
   left: 50px;
   box-shadow: 2px 2px 4px;
   transition: all 0.4s;
   min-width: 200px;
   border-radius: 4px;
   z-index: 1;
   animation: 0.4s linear bounce;
   will-change: bottom;
}

.margin-top-offset {
   margin-top: -2em;
}

.display-user-message.failed {
   background: #d89a9a;
}

.display-user-message.succeeded {
   background: #a0c5a2;
}

.display-user-message h4 {
   margin-top: 5px !important;
   border-bottom: #eee 2px solid !important;
}


/* Listing Events */
ul.cb-events {
   display:flex;
   justify-content: left;
   flex-wrap: nowrap;
   overflow: hidden;
   flex-direction: column;
   height: fit-content;
   padding: 10px !important;
   margin: 0 !important;
}

ul.cb-events li {
   display: flex;
   flex: 0 0 20%;
   width: 350px;
   flex-direction: column;
   list-style-type: none;
   padding: 0 !important;
   transition: all ease-in-out .2s;
}

ul.cb-events li:not(.title, .fully-booked):hover {
   background: #fbe6ee;
}

ul.cb-events li.title {
   justify-content: center;
   align-items: center;
   font-weight: bold;
   font-size: 1.7em;
}

ul.cb-events li:not(.title) {
   display: flex;
   /* flex: 1; */
   margin: 10px 10px 0 0;
   padding: 0 10px !important;
   border-radius: 4px;
   box-shadow: 0 4px 8px 0 #aaa;
}

.cb-events .event h3 {
   text-align: center;
   margin: 10px 0 0 0;
   border-bottom: 1px solid lightgray;
} 

ul.cb-events li p {
   margin: 2px 10px;
}

p.male {
   color: #002396;
}

p.female {
   color: #96007d;
}

.cb-events-wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
}

ul.cb-events li.event:not(.fully-booked) {
   cursor: pointer;
}

.fully-booked {
   position: relative;
   color: #777;
   cursor: auto;
}

.fully-booked .message {
   color: red;
    position: absolute;
    backdrop-filter: blur(3px);
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: larger;
    transform: rotate(20deg);
    top: 30%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid;
}




/* Event booking form */
.cb-form-container {
   display:none;
   position: fixed;
   top: 50%;
   left: 50%;
   background: #ddd;
   z-index: 1;
   transform: translate(-50%, -50%);
   max-width: 500px;
   border:1px solid gray;
   padding: 20px;
   max-height: 90%;
}

.cb-form-container form{
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
}

/* width */
.cb-form-container form::-webkit-scrollbar {
   width: 6px;
 }
 
 /* Track */
 .cb-form-container form::-webkit-scrollbar-track {
   background: #dddddd; 
 }
  
 /* Handle */
 .cb-form-container form::-webkit-scrollbar-thumb {
   background: #888; 
 }
 
 /* Handle on hover */
 .cb-form-container form::-webkit-scrollbar-thumb:hover {
   background: #555; 
 }

.cb-show-modal {
   display: none;
   position: fixed;
   background-color: rgba(131, 131, 131, 0.5);
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   align-items: center;
   justify-content: center;
}

.cb-form-category {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.cb-form-group {
   position: relative;
   padding: 15px 10px 10px;
   display: flex;
   flex-grow: 1;
}

.cb-abbort-button {
   display: inline-block;
   font-weight: 400;
   line-height: 1.25;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
   border: 1px solid transparent;
   padding: .5em 1em;
   border-radius: 2px;
   border-width: 2px;
   border-style: solid;
   font-size: 1em;
   cursor: pointer;
   text-decoration: none;
   transition: all .2s ease-in-out;
   margin: 10px 0;
   text-transform: uppercase;
   background: #977;
   color: white;
   font-weight: bold;
}

.cb-abbort-button:hover {
   background: transparent;
   border: 2px solid #977;
   color: #977;
}

#contentArea {
   display: flex;
   flex-direction: column;
}

.cb-close-button {
   position: absolute;
   right: -12px;
   top: -12px;
   height: 24px;
   width: 24px;
   font-size: 1.1em;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   border: 1px solid gray;
   background-color: white;
   cursor: pointer;
   font-size: x-large;
   transform: rotate(45deg);
   transition: all .2s;
}

.cb-close-button:hover {
   box-shadow: 0 0 4px;

}

.cb-close-button span {
   height: auto;
   width: auto;
}

.cb-form-group input:not([type='checkbox']), .cb-form-group select {
   border: 2px solid #777;
   border-radius: 4px;
   outline: none;
   flex-grow: 1;
}

.cb-form-group input:not([type='checkbox']):focus, .cb-form-group select:focus {
   border: 2px solid #e08eae !important;
}

.cb-form-container form div.cb-form-group label {
   pointer-events: none;
   position: absolute;
   left: 15px;
   top: 50%;
   transition: all 0.2s ease;
   transform: translateY(-50%);
   color: gray;
   letter-spacing: 2px;
   font-family: unset;
   padding: 5px;
}

.cb-form-compliance {
   display: flex;
   flex-direction: row;
   gap: 10px;
   flex-wrap: nowrap;
}

.cb-form-container form input:not([type='checkbox']):focus + label,
.cb-form-container form input:not(:placeholder-shown, [type='checkbox']) + label,
.cb-form-container form .cb-place-outside{
   font-size: 0.7em;
   top: 12px;
   box-shadow: 0 0 2px #ea4c89;
   line-height: 1em;
   background: #ea4c89;
   color: #eee;
}

label.cb-place-outside{
   top: 12px !important;
   color: #eee !important;
}

.cb-form-compliance input[type="checkbox"] {
   position: relative;
   left: 30px;
   top: 0px;
   z-index: 0;
   opacity: 0;
 }

 .cb-form-compliance input[type="checkbox"] + label {
   position: relative;
   display: block;
   cursor: pointer;
   font-family: sans-serif;
   margin: 20px 0;
 }

 .cb-form-compliance input[type="checkbox"] + label:before {
   width: 40px;
   height: 20px;
   border-radius: 20px;
   border: 2px solid #ddd;
   background-color: #EEE;
   content: "";
   margin-right: 15px;
   transition: background-color 0.5s linear;
   z-index: 5;
   position: absolute;
   left: 0px;
 }

 .cb-form-compliance input[type="checkbox"] + label:after {
   width: 20px;
   height: 20px;
   border-radius: 20px;
   background-color: #fff;
   content: "";
   transition: margin 0.1s linear;
   box-shadow: 0px 0px 5px #aaa;
   position: absolute;
   z-index: 10;
 }

 .cb-form-compliance input[type="checkbox"]:checked + label:before {
   background-color: #ea4c89;
 }

 .cb-form-compliance input[type="checkbox"]:checked + label:after {
   margin: 0 0 0 20px;
 }


@media screen and (max-width: 782px) {
   .cb-form-container {
      height: 100%;
      width: 100%;
   }

   .cb-close-button {
      display: none;
   }
 }


 @keyframes bounce {
	from, 20%, 53%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transform: translate3d(0,0,0);
	}

	40%, 43% {
		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		transform: translate3d(0, -12px, 0);
	}

	70% {
		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		transform: translate3d(0, -6px, 0);
	}

	90% {
		transform: translate3d(0,-1px,0);
	}
}