html,body {
	height: 100%;
  background: url('https://auth.thalita.nl/images/default.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body { 
  padding-top: 45px;
}

.n40{
  margin-top: -40pt;
}

.brand {
	overflow: hidden;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

.brand img {
	width: 100%;
}

/*********** Toast messages **************/
.messages { 
  margin-top: 3.8em;
  /***min-height: 45px;****/
  z-index: 1070;
}


.card-wrapper {
	width: 500px;
}

.card.fat {
	padding: 10px;
}

.card{
    border:1px solid var(--bs-emphasis-color);
}

.card .card-title {
  margin-top: 2px;
	margin-bottom: 20px;
}

  .form-signin {
    width: 100%;
    max-width: 420px;
    padding: 15px;
    margin: auto;
  }
  
 /*********** input button **********/
button.input-button{ 
  position: absolute; 
  right: 10px; 
  z-index: 2; 
  border: none; 
  top: 15px; 
  height: 30px; 
  transform: translateX(2px);
background:transparent;
}
input.input-button{ 
background:transparent !important;
}

/*********** Button Circle**********************/
.btn-circle.btn-xl {
  width: 60px;
  height: 60px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 12px;
  border-radius: 35px;
  font-size: 22px;
  line-height: 1.33;
}
.btn-circle.btn-md {
  width: 40px;
  height: 40px;
  padding: 7px 10px;
  border-radius: 35px;
  font-size: 20px;
  line-height: 1.33;
}
.btn-circle.btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}
.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
  z-index: 999;
}

/*********** offcanvas *******************/
.offcanvas.offcanvas-bottom {
  height: unset;
}

/*********** forms ******************/
.form-control {
  border-color: var(--bs-emphasis-color);
}
.form-control:focus {
  border-color: var(--bs-emphasis-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-emphasis-color), 0.25);
}
.form-select {
  border-color: var(--bs-emphasis-color);
}
.form-select:focus {
  border-color: var(--bs-emphasis-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-emphasis-color), 0.25);
}
::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

  input:-webkit-autofill,
  input:-webkit-autofill:focus ~ label{
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    transition: background-color 5000s ease-in-out 0s;
  }

.password { 
    position: absolute; 
    right: 10px; 
    z-index: 2; 
    top: 15px; 
    height: 30px; 
    transform: translateX(2px); 
} 
  
  /* Fallback for Edge
  -------------------------------------------------- */
  @supports (-ms-ime-align: auto) {
    .form-label-group > label {
      display: none;
    }
    .form-label-group input::-ms-input-placeholder {
      color: #777;
    }
  }

  @media screen and (max-width: 425px) {

    .card.fat{
      padding: 5px;
    }
    .card-wrapper {
      margin: 0 auto;
      padding-right: 0px;
      padding-left: 0px;
    }
  }

  /*********** ListGroup *******************/
@media (max-width: 767.98px) {
  .list-group-scroll{
      max-height: 420px;
      margin-bottom: 10px;
      overflow-y:scroll;
      overflow-x:hidden;
  }
}