.bs-icon {
  --bs-icon-size: .75rem;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: var(--bs-icon-size);
  width: calc(var(--bs-icon-size) * 2);
  height: calc(var(--bs-icon-size) * 2);
  color: var(--bs-primary);
}

.bs-icon-xl {
  --bs-icon-size: 2.5rem;
}

.bs-icon.bs-icon-primary {
  color: var(--bs-white);
  background: var(--bs-primary);
}

.bs-icon.bs-icon-circle {
  border-radius: 50%;
}

ul#date-filter-box {
	display: inline-block; 
}
ul#date-filter-box li {
	list-style: none;
	display: inline-block;
	padding: 3px 6px;
	/*background-color: #6C98CE;
	color: white;*/
	color: #315079;
	cursor: pointer;
	margin: 0;
	font-weight: bold;
	font-size: 80%;
	transition: all 0.25s; 
}
ul#date-filter-box li.active {
	background-color: #315079;
	color: white;
}
ul.desktop-calendar-picker {
	display: inline-block;
	/*font-size: 0;*/
	margin: 0 0 1.5em 0; 
  padding: 0;
}
ul.desktop-calendar-picker.error {
	border: 1px solid #e11616 !important;
}
div.desktop-calendar-picker-container.error {
	box-shadow: 0 0 0 1px #e11616;        /* Opera/IE 8+ */
}

ul.desktop-calendar-picker li {
    width: 14.2857%;
    box-sizing: border-box;
    text-align: center;
    list-style: none;
    border-right: 2px solid #EEEEEE;
    border-bottom: 2px solid #EEEEEE;
    display: inline-block;
    padding: 5px 6px;
    margin-bottom: 0;
    /*background-color: #3EBDCE;*/
    background-color: #74b0e2;
    color: white;
    /*color: #315079;*/
    font-size: 14px;
    transition: all 0.25s;
}
ul.desktop-calendar-picker li.normal-day {
    cursor: pointer;
    background-color: #36a98c;
}
ul.desktop-calendar-picker li.grayed-out-day {
	background-color: #74b0e2;
}		
ul.desktop-calendar-picker li.active {
	background-color: #038770;
}
ul.desktop-calendar-picker li:nth-child(-n+7) {
	/*background-color: #217F8C;*/
	background-color: #246dae;
	font-weight: bold;
}		
ul.desktop-calendar-picker li.previous-month {
	/*background-color: #B3DEE4; */
	background-color: #abcfed;
}		
ul.desktop-calendar-picker li span.day-name {
	display: none; 
}
#earlier, #later {
    cursor: pointer;
}
select.mobile-calendar-picker {
	display: none;
	margin: 1em 0; 
}
div#appointment-month-selector {
    width: auto;
    display: block;
	margin: 15px 0;
	float: right; 
}
div#appointment-month-selector div {
	display: inline-block; 
}
div#appointment-month-selector div i {
	font-size: 20px;
	/*color: #217F8C;*/
	color: #246dae;
}
div#appointment-month-selector div h4 {
	display: inline-block;
	margin: 0 0.2em; 
}
ul#date-switcher-box {
	display: inline-block;
	/* background-color: #6C98CE; */ 
}
ul#date-switcher-box li {
	list-style: none;
	display: inline-block;
	padding: 3px 6px;
	background-color: #6C98CE;
	color: white;
	/* color: #315079; */
	cursor: pointer;
	font-weight: bold;
	font-size: 80%;
	transition: all 0.25s;
	margin: 0; 
}
ul#date-switcher-box li.active {
	background-color: #315079;
	color: white; 
}
input {
	font-size: 13px;
	margin-bottom: 10px;
}
select {
	font-size: 13px;
	margin-bottom: 10px;
}
.appointment-pane {
	padding-top: 1.0em;
	min-height: 360px;
	display: flex;
}
.card-body {
	min-height: 360px;
}

.formfixleft {
	width: 48%;
	float: left;
}
.formfixright {
	width: 48%;
	float: right;
}
@media only screen and (max-width: 780px) {
  .formfixleft {
	  width: 100%;
	  float: left;
  }
  .formfixright {
	  width: 100%;
	  float: right;
  }
}
label {
	margin-bottom: 3px;
}

.clearfix {
  display: flex;
  flex-direction: column; 
  flex:1;
}

li.timeslot {
	cursor: pointer;
	padding: 0.7em 2em;
	transition: background-color 0.25s; 
}
li.timeslot span:nth-child(1) {
	width: 48%;
	display: inline-block; 
}
li.timeslot span:nth-child(2) {
	width: 25%;
	display: inline-block; 
}
li.timeslot span:nth-child(3) {
	width: 25%;
	display: inline-block; 
}
li.timeslot.active {
	background-color: #038770 !important; 
}
ul#slots {
	list-style: none; 
  padding-left: 0;
}
ul#slots.error {
	border: 1px solid #e11616 !important;
}
ul#slots > li {
	margin-bottom: 2px; 
}
ul#slots > li:nth-of-type(odd) {
	background-color: #36a98c;
	color: white; 
}
ul#slots > li:nth-of-type(even) {
	background-color: #36a98c;
	color: white; 
}

input.error, select.error {
	border: 1px solid #e11616 !important;
}

#appointment-progress-5 > div > div > div:nth-child(1) {
  background: rgba(105,135,176,0.41);
}

#appointment-progress-5 > div > div > div:nth-child(2) {
  color: rgba(105, 135, 176, 0.5);
}

#appointment-progress-4 > div > div > div:nth-child(1) {
  background: rgba(105,135,176,0.41);
}

#appointment-progress-4 > div > div > div:nth-child(2) {
  color: rgba(105, 135, 176, 0.5);
}

.form-check-input[type=radio] {
	margin-left: 10px;
    margin-right: 5px;
    margin-top: 5px;
}

.active > div > div:nth-child(1) {
  background: #5477a7 !important;
}

.active > div > div:nth-child(2) {
  color: rgb(84, 119, 167) !important;
}

.hidden {
  display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

.modal-content {
	border-radius: 0;
}

.modal-content button {
	border-radius: 0;
	border: 0;
	background-color: #198754;
}

.modal-content button:hover {
	background-color: #157347;
}

.modal-content #close-wijzig-modal {
	background-color: #6987b0
}

.modal-content #close-wijzig-modal:hover {
	background-color: #3b6aa9;
}

.modal-content #close-verwijder-modal {
	background-color: #6987b0
}

.modal-content #close-verwijder-modal:hover {
	background-color: #3b6aa9;
}