/* FORM */

.form-group {
  margin-bottom: 1rem;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col {
  padding-left: 5px;
  padding-right: 5px;
}

/* SCROLL AREA */
.scroll-area {
  height: 85vh;
  overflow-y:scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scroll-area-content {
  height: 85vh;
  overflow-y:scroll;

}

.scroll-area::-webkit-scrollbar {
  display: none;
  height: 85vh;
  overflow-y:scroll;
}


/* width */
.scroll-area-content::-webkit-scrollbar {
  width: 10px;
}


/* Track */
.scroll-area-content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.scroll-area-content::-webkit-scrollbar-thumb {
  background: rgb(182, 182, 182); 
  border-radius: 10px;
}

/* Handle on hover */
.scroll-area-content::-webkit-scrollbar-thumb:hover {
  background: rgb(211, 211, 211); 
}


/* DATEPICKER FORMAT */
input[type="date"] {
  position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover, select:hover, input[type="checkbox"]:hover, input[type="radio"]:hover {
  cursor: pointer !important;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
  font-family:'Bootstrap-icons';
  font-size: 12px;
  content: "\F1F6"; 
  color: #555;
  padding: 0 0px;
}


/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

.dropdown-menu.datepicker {
  min-width: auto !important;
}

.form-select.datepicker {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-calendar%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.5%200a.5.5%200%200%201%20.5.5V1h8V.5a.5.5%200%200%201%201%200V1h1a2%202%200%200%201%202%202v11a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2V3a2%202%200%200%201%202-2h1V.5a.5.5%200%200%201%20.5-.5M1%204v10a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1V4z%22%2F%3E%3C%2Fsvg%3E");
	background-size: 10px auto;
	cursor: pointer;
}

.btn-orange {
    color: #fff;
    background-color: #ff7f00;
    border-color: #ff7f00;
}

.btn-orange:hover {
	color: #fff;
    background-color: #cc6e00;
    border-color: #cc6e00;
}

.btn-orange:focus,
.btn-orange.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 127, 0, 0.5);
}