html {
  font-size: 100%;
}

header {
  background-color: #333333;
}

body {
  background-color: #FFFFFF;
  font-family: Arial, Verdana, Tahoma;
}

footer {
  background-color: #333333;
}

footer a,
footer p,
.style-previous-back {
  font-size: .75rem;
}


/* Phones */
@media screen and (max-width: 575px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1rem;
  }
  
  h4 {
    font-size: .75rem;
  }

  a, 
  .btn,
  .btn-check,
  button,
  div .card,
  input,
  i,
  ul, 
  label,
  li, 
  option,
  p,
  span {
    font-size: .8rem;
  }

  .style-subtext-lg {
    font-size: .8rem;
  }
  
  .style-subtext-sm {
    font-size: .7rem;
  }

}

/* Tablets */
@media screen and (min-width: 576px) {
  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1rem;
  }

  a, 
  .btn,
  .btn-check,
  button,
  div .card,
  input,
  i,
  label,
  li, 
  option,
  p, 
  span { 
    font-size: .9rem;
  }

  .style-subtext-lg {
    font-size: .9rem;
  }

  .style-subtext-sm {
    font-size: .8rem;
  }

}

/* Computers */
@media screen and (min-width: 769px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  a, 
  .btn,
  .btn-check,
  button,
  div .card,
  input,
  i,
  label,
  li, 
  option,
  p, 
  span {
    font-size: .9rem;
  }
  
  .style-subtext-lg {
    font-size: .9rem;
  }

  .style-subtext-sm {
    font-size: .8rem;
  }

}

input[type=text],
textarea[type=textarea],
input[type=search],
input[type=date],
input[type=time],
input[type=url],
input[type=email],
input[type=password] {
  text-decoration: none;
  outline: none;
}

input[type=text]:focus,
textarea[type=textarea]:focus,
input[type=search]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=email]:focus,
input[type=password]:focus {
  box-shadow: 0px 0px 5px #8A8A8A;
  border-width: 2px;
  border-color: #C6C6C6;
  background-color: #FFFFFF;
}

.dropdown-menu li>a:hover,
.dropdown-menu li>form>button:hover {
  background:#FFCD98;
  color: #FFFFFF;
}

.form-select {
  text-decoration: none;
  outline: none;
}

.form-select:focus {
  box-shadow: 0px 0px 5px #8A8A8A;
  border-width: 2px;
  border-color: #C6C6C6;
  background-color: #FFFFFF;
}

a {
  color:#FF9800; 
  text-decoration: none;
}

a:hover {
  color: #FFCD98;
}

.style-text-primary {
    color: #FF9800;
  }

.style-text-dark {
  color: #333333;
}

.style-text-red {
  color: red;
}

.style-text-white {
  color: #FFFFFF;
}

.style-text-link-primary {
  color: #FF9800;
}

.style-text-link-primary:hover {
  color: #FFCD98;
}

.style-text-dark {
  --bs-text-dark-color: #333333;
}

.style-bg-primary {
  background-color: #FF9800;
}

.style-bg-primary-50 {
  background-color: #FFCD98;
}

.style-bg-dark {
  background-color: #333333;
}

.style-bg-dark-50 {
  background-color: #333333;
  opacity: .1;
}

.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: #FF9800;
  --bs-btn-border-color: #FF9800;
  --bs-btn-hover-color: #FF9800;
  --bs-btn-hover-bg: #FFE0B2;
  --bs-btn-hover-border-color: #FFE0B2;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #FF9800;
  --bs-btn-active-border-color: #FF9800;
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: #FF9800;
  --bs-btn-disabled-border-color: #FF9800;
}

.btn-dark {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: #333333;
  --bs-btn-border-color: #333333;
  --bs-btn-hover-color: #333333;
  --bs-btn-hover-bg: #8A8A8A;
  --bs-btn-hover-border-color: #8A8A8A;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #333333;
  --bs-btn-active-border-color: #333333;
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: #8A8A8A;
  --bs-btn-disabled-border-color: #8A8A8A;
}

.btn-secondary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: #9F9F9F;
  --bs-btn-border-color: #9F9F9F;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #333333;
  --bs-btn-hover-border-color: #333333;
  --bs-btn-active-color: #333333;
  --bs-btn-active-bg: #9F9F9F;
  --bs-btn-active-border-color: #9F9F9F;
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: #CFCFCF;
  --bs-btn-disabled-border-color: #CFCFCF;
}

.btn-outline-primary {
  --bs-btn-color: #333333;
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: #C6C6C6;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #FFCD98;
  --bs-btn-hover-border-color: #FFCD98;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #FF9800;
  --bs-btn-active-border-color: #FF9800;
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: #FFCD98;
  --bs-btn-disabled-border-color: #FFCD98;
}


.style-modal-body-Template {
  color: #FF9800;
  background-color: #FFFFFF;
}

.card-header,
.modal-header {
  color: #333333;
  background: #F8F9FA;
}

.card-body,
.modal-body {
  color: #333333;
  background: #FFFFFF;
}

.card-footer,
.modal-footer {
  color: #333333;
  background-color: #F8F9FA;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.style-card-hover:hover div{
  border-left: 5px solid #FF9800;
}

.style-link {
  color: #FF9800;
}

.style-link:hover {
  color: #FFCD98;
}

.white-space {
  white-space: pre-wrap;
}