html, body {
    height: 100%;
}

body {
  background-color: #f9f1d7;
  font-family: "Poppins", "arial", "sans-serif";
}

#main{
  min-height: 100%;
  position:relative;
}

#content{
    padding-bottom: 180px; 
}

.wrap-footer {
  height: auto;
  width:100%;
  position: absolute;
  left: 0;
  bottom: 0; 
}

.txt-theme-color-primary {
  color: #1f586c !important;
}

.txt-theme-color-accent1 {
  color: #c0303b;
}

.txt-theme-color-accent2 {
  color: #ab915d;
}

.bg-theme-color-primary {
  background-color: #f9f1d7;
}

.poppins-font {
  font-family: "Poppins", "arial", "sans-serif";
}

.bg-theme-color-tabs {
  background-color: #ffffff;
  color: #788091;
}

.bg-theme-color-tabs-active {
  background-color: #163353;
}

#custom-tabs > .nav > .nav-item > .active, .bg-theme-color-role {
  background-color: #d1ddf3;
  color: var(--gray-dark);
}

.txt-theme-color-accent3 {
  color: #ffffff;
}

#custom-tabs > .nav > .nav-item > a:hover {
  color: #303030;
}

#custom-tabs > .nav > .nav-item > .active:hover {
  color: #ffffff;
}

input::placeholder {
  color: #aeaeae !important;
}

footer {
  background-color: #e6e6e6 !important;
}

.alert.alert-info {
  background-color: #dde7ff;
  color: #1f586c;
}


.border-top.role {
  border-color: #c99f54!important;
}

.navbar-nav > .nav-item > .nav-link.active {
  color: #c0303b;
}

.navbar-nav > .nav-item > .nav-link {
  color: var(--gray-dark);
}

.navbar-nav > .nav-item > .nav-link:hover {
  color: #c0303b;
}

.required:after {
  content: ' *';
  color: #c0303b;
}

.gj-datepicker > span > button, .gj-timepicker > span > button, .gj-datepicker > span > button:active, .gj-timepicker > span > button:active, .gj-datepicker > span > button:visited, .gj-timepicker > span > button:visited, .gj-datepicker > span > button:hover, .gj-timepicker > span > button:hover {
  background: none !important;
  color: #6c757d;
}

.gj-datepicker > span > button, .gj-timepicker > span > button {
  height: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; 
}

/* Overwrite container height and width */
.select2-container .select2-selection--single {
  height: 40px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 25px !important;
  border-color: #dbdfe6 !important;
}

/* Text inside select box */
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 20px !important;
}

/* Dropdown arrow */
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  top: 0 !important;
}

.btn-save, .btn-save:focus, .btn-save:hover {
  background-color: #ab915d;
  color: white;
  border-radius: 25px;
  padding: 10px 30px;
}

.btn-download, .btn-download:hover, .btn-download:focus {
  background: #474747;
  color: #ffffff;
  border-radius: 25px;
  padding: 10px 30px;
}


.btn-image, .btn-image:hover, .btn-image:focus {
  background: #474747;
  color: #ffffff;
  border-radius: 25px;
  padding: 10px 30px;
}

.btn-preview, .btn-preview:hover, .btn-preview:active {
  background: none;
  color: #163353;
  border: solid 1px #163353;
  border-radius: 25px;
  padding: 10px 30px;
  font-size: 14px;
}

.btn-disabled, .btn-disabled:hover, .btn-disabled:focus {
  background: #d1d1d1;
  color: #7e7e7e;
  border: solid 1px #7e7e7e;
  border-radius: 25px;
  padding: 10px 30px;
  font-size: 14px;
}


.close {
  background-color: #ffffff;
  border: none;
}


#footer-menu {
  font-size: 12px;
}


#footer-menu > a {
  background-color: #f1e3c8;
  border-color: white;
  color: var(--gray-dark);
}

.btn-calendar {
  background: #f5f6f8;
}

.form-check-input:checked {
  background-color: #1d5176;
}

.form-control:disabled {
  background-color: #e7e7e7;
  color: #979797;
}

input[type="text"].form-control, select.form-control {
  padding:10px 20px;
	background: #ededed !important;
	color: #787878;
}

a {
  color: #163353;
}

@media only screen and (max-width: 400px) {
  #custom-tabs > .nav > .nav-item > a > div > .bi {
    width: 20px;
    height: 20px;
  }

  #custom-tabs > .nav-tabs .nav-link {
    font-size: 8px;
  }

  p, .col-form-label, .form-check-label, .alert-info, alert > span {
    font-size: 12px;
  }
  h3 {
    font-size: 18px;
  }

  h5 {
    font-size: 14px;
  }

  #footer-menu > a {
    padding: 3px ;
  }

  .footer-lnk-item {
    font-size: 8px;
  }
}


@media only screen and (max-width: 600px) {
  #custom-tabs > .nav > .nav-item > a > div > .bi {
    width: 25px;
    height: 25px;
  }

  #custom-tabs > .nav-tabs .nav-link {
    font-size: 9px;
  }

  p, .col-form-label, .form-check-label, .alert-info, alert > span {
    font-size: 14px;
  }
  h3 {
    font-size: 20px;
  }

  h5 {
    font-size: 16px ;
  }

  #footer-menu > a {
    padding: 5px ;
    text-align: center;
  }

  .footer-lnk-item {
    font-size: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .btn-save, .btn-download, .btn-preview, .btn-disabled {
    width: 100% !important;
    font-size: 12px !important;
  }
}

@media only screen and (min-width:801px) {
  .navbar-nav > .nav-item > a {
      font-size: 12px !important;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
        max-width: 970px;
  }
  .navbar-nav > .nav-item > a {
      font-size: 13.5px !important;
  }
}