:root {
  --color-primary: #004E7C;
  --color-primary-hover: #004166;
  --color-primary-light: ##004E7C;

  --color-secondary: #00A878;
  --color-secondary-hover: #008F66;
  --color-secondary-light: #EBFFF9;

  --color-white-light: #EBF8FF;

  --color-black: #001B29;
  --color-danger: #BA1A34;

  --color-secondary-text: #5C7583;
}

/*font family*/
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  src: url('./fonts/dm_sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  src: url('./fonts/roboto/Roboto-Black.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-BlackItalic.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-Bold.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-BoldItalic.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-Italic.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-Light.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-LightItalic.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-Medium.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-MediumItalic.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-Regular.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-Thin.ttf') format('ttf');
  src: url('./fonts/roboto/Roboto-ThinItalic.ttf') format('ttf');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: 'Roboto', sans-serif;
}

/*background colors*/
.bg-none{
    background-color: transparent!important;
}
.bg-light-white{
    background-color: var(--color-white-light)!important;
}
.bg-primary{
    background-color: var(--color-primary)!important;
}
.bg-primary-light{
    background-color: var(--color-primary-light)!important;
}
.bg-secondary{
    background-color: var(--color-secondary)!important;
}
.bg-secondary-light{
    background-color: var(--color-secondary-light)!important;
}

.bg-black{
    background-color: var(--color-black)!important;
}

.bg-white-light{
    background-color: var(--color-white-light)!important;
}

/*text colors*/
.text-primary{
    color: var(--color-primary)!important;
}
.text-secondary{
    color: var(--color-secondary)!important;
}
.text-secondary-text{
    color: var(--color-secondary-text)!important;
}
.text-black{
    color: var(--color-black)!important;
}
.text-white-light{
    color: var(--color-white-light)!important;
}
.text-danger{
    color: var(--color-danger)!important;
}



.status-filter>div>.badge:hover{
    box-shadow: 0px 0px 0px 1px var(--color-secondary) inset;
}

.link{
    color: var(--color-secondary)!important;
    text-decoration: none;
}

.link:hover{
    color: var(--color-secondary-hover)!important;
}

body{
    background-color: #fff;
    min-height: 100vh;
}

.row > *{
    margin-bottom: calc((var(--bs-gutter-x) * .5) * 2);
    margin-top: 0;
}
.form-floating > label{
    left: 15px;
}
.form-floating > .form-control{
    padding-left: 1.7rem;
}
.flex-1{
    flex: 1;
}
.pointer{
    cursor: pointer;
}

/* buttons */
.btn-primary{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: transparent
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}
.btn-secondary{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-secondary-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-secondary);
    --bs-btn-active-border-color: transparent
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-secondary-light);
    --bs-btn-disabled-border-color: transparent;
}

.btn-danger{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-danger);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-danger);
    --bs-btn-active-border-color: transparent
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-danger);
    --bs-btn-disabled-border-color: transparent;
}
.btn-outline-primary{
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-gradient: none;
}
.btn-outline-secondary{
    --bs-btn-color: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-border-color: var(--color-secondary);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-secondary-hover);
    --bs-btn-active-border-color: var(--color-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-secondary);
    --bs-gradient: none;
}
.btn-outline-danger{
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-danger);
    --bs-btn-hover-border-color: var(--color-danger);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-danger);
    --bs-btn-active-border-color: var(--color-danger);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-danger);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-danger);
    --bs-gradient: none;
}

@media screen and (max-width: 479px) {
/*deactivate bs hover effect only in mobile*/
    .btn:hover{
        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        border-color: var(--bs-btn-color);
    }
}


.nav-link{
    color: var(--color-primary);
}
.nav-link:hover{
    color: var(--color-primary);
}
/*border*/
.border-top-none{
    border-top: none!important;
}
.border-bottom-none{
    border-bottom: none!important;
}
/*border colors*/
.border-primary{
    border-color: var(--color-primary)!important;
}
.border-secondary{
    border-color: var(--color-secondary)!important;
}
.border-white-light{
    border-color: var(--color-white-light)!important;
}

.form-control:focus{
    border-color: #ced4da;
}
.input-group-text{
    background-color:#fff;
}



.lh-normal{
    line-height: normal;
}
/*font weight*/
.fw-500{
    font-weight: 500;
}
.fw-400{
    font-weight: 400;
}
.fw-600{
    font-weight: 600;
}
/*font size*/
.fs-2{
    font-size: 1.375rem!important;
}
.fs-4{
    font-size: 1.125rem!important;
}
@media (min-width: 1200px) {
  .fs-2{
      font-size: 2rem!important;
  }
  .fs-4{
      font-size: 1.5rem!important;
  }
}


.accordion{
    --bs-accordion-active-bg: #fff;
}

.non-scrollbar{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.non-scrollbar::-webkit-scrollbar{
    display: none;
}

.dropdown-item:hover{
    background-color: var(--color-white-light);
}
.grayscale{
    filter: grayscale(100%);
}

.page-item.active > .page-link{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}
.page-item > .page-link{
    color: var(--color-primary);
}

.form-check-input:checked {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/*logo*/
img.logo{
    height: auto;
    width: 132px;
}
@media screen and (min-width: 480px) {
  img.logo{
      height: auto;
      width: 170px;
  }
}

footer img.logo{
    height: auto;
    width: 99px;
}
@media screen and (min-width: 480px) {
  footer img.logo{
      height: auto;
      width: 154px;
  }
}

main{
    padding-top: 4rem;
}

.opacity-0{
    opacity: 0;
}

.avatar>svg{
    width: calc(1.375rem + 1.5vw) !important;
    height: calc(1.375rem + 1.5vw) !important;
}
@media screen and (min-width: 480px) {
  .avatar>svg{
      width: 2rem !important;
      height: 2rem !important;
  }
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: .875em;
    color: #dc3545;
}

/*pulse effect*/
.pulse-button {
  position: fixed;
  bottom: 5%;
  right: 5%;
  border-radius: 50%;
  background: #00A878;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(0,168,120,0.5);
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
     transform:  scale(.9);
  }
  70% {
    transform:  scale(1);
    box-shadow: 0 0 0 50px rgba(0,168,120,0);
  }
    100% {
    transform:  scale(.9);
    box-shadow: 0 0 0 0 rgba(0,168,120,0);
  }
}