:root {
    --orange: #fb9039;
    --green: rgb(127, 196, 110);
    --primary-color: #1f3044;
    --light-primary-color: #4F7AAE;
    --secondary-color: #36b8c5;
    --dc-light-blue: #36b8c5;
    --light-orange: rgb(240, 162, 18);
    --purple: rgb(114, 51, 197);
    --light-purple: #9932CC;
    --light-warning: #900C3F;
}

/* Overwriting bootstrap classes */
.bg-info{
    background-color: var(--orange) !important;
}
.btn-success{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-start{
    color: white !important;
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
}
.btn-outline-warning{
    /* background-color: transparent !important; */
    color: var(--purple) !important;
    border-color: var(--purple) !important;
}

.btn-outline-primary{
    /* background-color: transparent !important; */
    color: var(--light-primary-color) !important;
    border-color: var(--light-primary-color) !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus,
.btn-outline-primary:hover,
.btn-outline-primary:active, 
.btn-outline-primary:focus, 
.btn-outline-primary:active:focus,
input[type="radio"]:checked + .btn-outline-primary{
    color: white !important;
    border-color: var(--light-primary-color) !important;
    background-color: var(--light-primary-color) !important;
}

.btn-warning,
.btn-outline-warning:hover,
.btn-outline-warning:active, 
.btn-outline-warning:focus, 
.btn-outline-warning:active:focus{
    color: white !important;
    background-color: var(--light-purple) !important;
    border-color: var(--light-purple) !important;
}
.form-floating.invalid-feedback,
.text-danger{
    color: #D21F3C !important;
}
/**************************************/

body {}

.full-width-iframe{
    min-height:1200px; 
    width: 100%
}

.error{
    color: red;
    padding:10px;
}

nav.page-title{
    /* background-color:  rgb(127, 196, 110) !important; */
    background-color: rgb(247, 179, 34) !important;
    /* background-color: #7b49cd !important; */
    background-image: var(--bs-gradient) !important;
}

h1.page-title{
    font-family: "Raleway", sans-serif;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.5em;
    color: white !important
}

/* page title colors */
header.page-title-home, header.page-title-login, header.page-title-{
    background-color: var(--orange);
}
nav.page-title-home, nav.page-title-login, nav.page-title-{
    border-color: var(--orange) !important;
}

header.page-title-create{
    background-color: var(--primary-color);
}
nav.page-title-create{
    border-color: var(--primary-color) !important;
}


header.page-title-results, header.page-title-started{
    background-color: rgb(19, 156, 156);
}
nav.page-title-results, nav.page-title-started{
    border-color: rgb(19, 156, 156) !important;
}

header.page-title-dashboard{
    background-color: var(--purple);
}
nav.page-title-dashboard{
    border-color: var(--purple) !important;
}

header.page-title-data-access {
    background-color: var(--light-warning);
}
nav.page-title-data-access {
    border-color: var(--light-warning) !important;
}

h2.section-title{
    font-family: "Raleway", sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5em;
    margin-top: 8px
}

nav {
    background-color : #f8f8ff  !important;
    font-size: 18px !important;
}
.nav-link {
    font-weight: 500 !important;
    color: rgb(146, 142, 134) !important;
}
.nav-link-staff {
    font-weight: 500 !important;
    color: var(--purple) !important;
}
.nav-link:hover {
    color: var(--light-primary-color) !important;
}
.nav-link-staff:hover {
    color: rgb(39, 8, 81) !important;
}
.nav-link-active {
    color: var(--orange) !important;
}
.nav-link-active:hover {
    color: var(--orange) !important;
}
h1 {
    color: rgb(143, 115, 78)  !important;
}
.active{
    border-color: var(--light-primary-color) !important;
}
.inactive{
    background-color:  #f9f9f9 !important;
    border-color: var(--light-primary-color) !important;
}
.promo-title{
    font-family: "Raleway", sans-serif;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.5em;
    margin-top: 8px;
    color: var(--primary-color) !important;
}
.promo-text{
    font-family: "Raleway", sans-serif;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 1.5em;
    margin-top: 8px;
    color: var(--primary-color) !important;
}
.promo-text-focus{
    color: var(--orange);
    /* -webkit-text-stroke: 1px var(--orange); */
}
h2.in-page-title{
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--primary-color); /* your teal brand color */
  margin: 0;
  position: relative;
  padding-bottom: 8px;
}

/* short gradient accent under title */
h2.in-page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-color), var(--dc-light-blue));
}

footer {
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
    padding: 16px 0 10px;
}

img.example{
    margin-top: 10px;
    border: 1px solid var(--light-primary-color);
    border-radius: 10px;
}
/* Loading spinner */
.loader[hidden] { display: none; }
.loader {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }
  
.loading {
    border: 2px solid #ccc;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-top-color: #1ecd97;
    border-left-color: #1ecd97;
    animation: spin 1s infinite ease-in;
}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.negative-bottom-margin{
    margin-bottom: -10px
}
.negative-bottom-margin-15px{
    margin-bottom: -15px
}
.cursor-pointer{
    cursor: pointer;
}

.custom-progress-bar{
    height: 20px;
}

.pb-section-1{width: 100%;}
.pb-section-2{width: 50%;}
.pb-section-3{width: 34%;}
.pb-section-4{width: 25%;}
.pb-section-5{width: 20%;}
.pb-section-6{width: 17%;}
.pb-section-7{width: 15%;}
.pb-section-8{width: 13%;}
.pb-section-9{width: 12%;}
.pb-section-10{width: 10%;}

.whitespace{
    margin-bottom: 100px;
}

.breadcrumb { margin-bottom: .75rem; }
.breadcrumb a {
    font-weight: 500 !important;
    color:  var(--light-primary-color) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}

.config-row-click { cursor: pointer; transition: background-color .15s ease-in-out; }
.config-row-click a { text-decoration: none; }
.table.table-hover tbody tr.config-row-click:hover > * {
    background-color: #bbd6fb !important;
}

.table.table-hover tbody tr.config-row-click:hover td {
    background: transparent !important
}