/* prettier-ignore */
/* @import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"); */
/*
	- CSS: Base Styles for IVT Style Guide Theme
	- Version:  0.4.0
  - Author:   Lim, Sheng Han
  - Changelog:
  - 0.2 - Added Back button for header and Header variant without title
  - 0.3 - Moved all bootstrap overrides and major components into BS4-ivt
  - 0.4 - Moved Navbar hamburger icon to the left
*/
:root {
  --navbar-bg-blue: #153d77;
  --ivt-blue: #052860;
  --primary-blue: #0b5cbb;
  --main-bg-white: #efefef;
  --text-highlight-white: #ffffff;
  --body-font-size: 0.9275rem;
  --font-family-sans-serif: "Varela Round", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: "Varela Round", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-family-sans-serif);
  font-size: 0.9275rem;
  font-size: var(--body-font-size);
  background-color: #efefef;
  background-color: var(--main-bg-white);
}

/* @font-face {
  font-family: "Varela Round";
  src: url("css/fonts/VarelaRound-Regular.ttf");
} */
/*
 * Content
 */
[role="main"] {
  z-index: 1;
  padding: 5.5rem 5.5rem 0 5.5rem;
  min-height: 100vh;
  min-width: 0;
  width: 100%;
  -webkit-transition: margin-left 0.3s ease-in-out, left 0.3s ease-in-out, margin-right 0.3s ease-in-out, right 0.3s ease-in-out;
  transition: margin-left 0.3s ease-in-out, left 0.3s ease-in-out, margin-right 0.3s ease-in-out, right 0.3s ease-in-out;
}

/* extending blue background */
.wrapper:before {
  width: 100%;
  height: 270px;
  position: absolute;
  top: 0;
  left: 0;
  background: #153d77;
  background: var(--navbar-bg-blue);
  content: " ";
}

.wrapper {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: relative;
}

/*
 * Navbar
 */
#navbar-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 250px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar-logo {
  width: 32px;
  margin-right: 0.25rem;
  margin-bottom: 0.1rem;
}

.navbar-badge {
  margin-left: 0.25rem;
}

.sidebar-toggle {
  padding: 0.9rem;
  cursor: pointer;
  font-size: 1.2rem;
}

a.sidebar-toggle {
  color: rgba(255, 255, 255, 0.25);
}

a.sidebar-toggle:hover {
  /* color: rgba(255, 255, 255, 0.5); */
  background-color: rgba(255, 255, 255, 0.1);
}

/*
 * Sidebar - Filter
 */
.ivt-sidebar-filter {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px;
}

.ivt-datepicker-prepend {
  width: 70px;
}

/*
 * Footer
 */
.footer {
  display: block;
  margin-top: 1rem;
  margin-left: -1rem;
  color: #999;
}

/* app list page*/
.card-app-icon {
  text-align: center;
  display: block;
  padding: 1rem;
}

.card-footer {
  background-color: white;
  border: none;
}

/* force flexible table widths */
.table {
  width: 100% !important;
}

:root {
  --color-primary-400: #153D77;
  --color-primary-500: #0964CC;
  --color-primary-600: #9ECDFF;
  --color-primary-700: #DEEEFF;
  --color-secondary-400: #212529;
  --color-secondary-500: #8B99A7;
  --color-secondary-600: #EFEFEF;
  --color-secondary-700: #FFF;
  --color-success: #28a745;
  --color-warning: #f0b400;
  --color-danger: #DC3545;
  --color-info: #008fe1;
  --body-font-size: 0.9275rem;
  --font-family: "Varela Round", sans-serif;
  --border-radius: 0.2rem;
  --navbar-height: 50px;
}

@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("../fonts/varela-round-v18-latin-regular.woff2") format("woff2"), url("../fonts/varela-round-v18-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Custom styles that are not a part of Bootstrap */
html,
body {
  font-family: "Varela Round", sans-serif;
  font-family: var(--font-family);
  font-size: 0.9275rem;
  font-size: var(--body-font-size);
}

html {
  background-color: #153D77;
  background-color: var(--color-primary-400);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: #EFEFEF;
  background-color: var(--color-secondary-600);
}

body > .d-flex > .container {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-top: 50px;
  margin-top: var(--navbar-height);
  width: calc(100% - 250px);
}

/*
 * Navbar
 */
body > .navbar,
.navbar-collapse {
  background-color: #153D77;
  background-color: var(--color-primary-400);
}

.navbar {
  width: 100%;
  z-index: 98;
}

/*
 * Content
 */
a {
  cursor: pointer;
}

.d-flex [role="main"] {
  padding: unset;
  min-height: unset;
  min-width: unset;
  -webkit-transition: unset;
  transition: unset;
}

/* content header */
/* extending blue background */
#header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
  background-color: #153D77;
  background-color: var(--color-primary-400);
}

/* sidebar */
:root {
  --sidebar-height: calc(100vh - var(--navbar-height));
}

/*
 * Sidebar
 */
#sidebar,
#sidebar > * {
  min-width: 250px;
  width: 250px;
}

#sidebar {
  border-right: 0;
  margin-top: 50px;
  margin-top: var(--navbar-height);
  min-height: calc(100vh - 50px);
  min-height: var(--sidebar-height);
  background-color: #FFF;
  background-color: var(--color-secondary-700);
  -webkit-box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: unset;
  transition: unset;
  z-index: 2;
}

#sidebar.toggled {
  margin-left: -250px;
  z-index: 1;
}

#sidebar header {
  position: fixed;
  z-index: 3;
}

.sidebar--content {
  position: fixed;
  margin-top: 50px;
}

.sidebar-open {
  position: fixed;
  /* top: var(--navbar-height); */
  top: 50%;
  left: 0;
  /* height: var(--sidebar-height);
  width: 40px; */
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/*
 * Footer
 */
#footer {
  padding-bottom: 2rem;
  color: #999;
}

.card-footer {
  background-color: white;
  border: none;
}

/* spinner */
#loading-screen {
  position: fixed;
  top: 0px;
  left: 0px;
  display: grid;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  place-content: center;
  width: 100%;
  height: 100vh;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

.loading-screen--bg {
  padding: 1rem;
  border-radius: 0.2rem;
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.7);
}

/* custom toast bootstrap color themes */
.toast-success,
.toast-warning,
.toast-danger,
.toast-info {
  display: grid;
  grid-template-columns: -webkit-min-content;
  grid-template-columns: min-content;
  grid-column-gap: 1rem;
  -moz-column-gap: 1rem;
  -webkit-column-gap: 1rem;
          column-gap: 1rem;
  border-top: none;
  border-bottom: none;
  border-left: 4px solid;
  border-right: none;
  padding: .75rem 1rem;
}

.alert p {
  margin-bottom: 0;
}

.alert-success,
.alert-warning,
.alert-danger,
.alert-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-left: 4px solid;
  padding: .75rem 3.5rem .75rem 1rem;
  color: #000;
}

.alert-success::before,
.alert-success::before,
.alert-warning::before,
.alert-danger::before,
.alert-info::before,
.toast-success::before,
.toast-warning::before,
.toast-danger::before,
.toast-info::before {
  grid-column: 1;
  align-self: center;
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  font-weight: 900;
}

.alert-success::before,
.alert-success::before,
.alert-warning::before,
.alert-danger::before,
.alert-info::before {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-right: .75rem;
}

.alert-success .alert-link,
.alert-warning .alert-link,
.alert-danger .alert-link,
.alert-info .alert-link {
  color: #0964cc;
}

.toast-success.alert,
.toast-warning.alert,
.toast-danger.alert,
.toast-info.alert {
  border-top: unset;
  border-right: unset;
  border-bottom: unset;
}

.toast-success.show,
.toast-warning.show,
.toast-danger.show,
.toast-info.show {
  display: grid;
}

.toast-success > *,
.toast-warning > *,
.toast-danger > *,
.toast-info > * {
  grid-column: 2;
  padding: 0;
}

.toast-success .toast-header,
.toast-warning .toast-header,
.toast-danger .toast-header,
.toast-info .toast-header {
  font-size: 1rem;
  color: unset;
  background-color: unset;
  border-bottom: none;
}

.toast-footer {
  margin-top: 1rem;
}

.alert-success,
.toast-success {
  background-color: #d4edda;
  border-color: #28a745;
  border-color: var(--color-success);
}

.alert-success::before,
.toast-success::before {
  content: "\f058";
  color: #28a745;
  color: var(--color-success);
}

.alert-warning,
.toast-warning {
  background-color: #FFF3CD;
  border-color: #f0b400;
  border-color: var(--color-warning);
}

.alert-warning::before,
.toast-warning::before {
  content: "\f071";
  color: #f0b400;
  color: var(--color-warning);
}

.alert-danger,
.toast-danger {
  background-color: #f8d7da;
  border-color: #DC3545;
  border-color: var(--color-danger);
}

.alert-danger::before,
.toast-danger::before {
  content: "\f06a";
  color: #DC3545;
  color: var(--color-danger);
}

.alert-info,
.toast-info {
  background-color: #d1ecf1;
  border-color: #008fe1;
  border-color: var(--color-info);
}

.alert-info::before,
.toast-info::before {
  content: "\f05a";
  color: #008fe1;
  color: var(--color-info);
}

/* date range picker */
.daterangepicker .ranges li.active {
  background-color: #0964CC !important;
}

/* layout */
@media (min-width: 540px) {
  .container {
    max-width: unset;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: unset;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: unset;
  }
  .container.px-lg-5 {
    padding-left: 5.5rem !important;
    padding-right: 5.5rem !important;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: unset;
  }
}

.fade {
  -webkit-transition-duration: .1s;
          transition-duration: .1s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

/* reset old css declarations */
html,
body {
  height: unset;
}

#sidebar,
#sidebar .sidebar {
  padding-top: unset;
}

#sidebar .sidebar {
  min-width: unset;
  max-width: unset;
  background: unset;
  -webkit-transition: unset;
  transition: unset;
  -webkit-box-shadow: unset;
          box-shadow: unset;
  z-index: unset;
}

#sidebar .ivt-sidebar-filter {
  padding: unset;
}

#header .header {
  margin-top: unset;
  margin-bottom: unset;
  -webkit-transition: unset;
  transition: unset;
}

#header .header-title {
  -webkit-transition: unset;
  transition: unset;
}
/*# sourceMappingURL=base.css.map */