:root {
  /* Colors: */
  --petrol: #19353f;
  --white: #ffffff;
  --lightgrey: #f7f7f7;
  --darkgrey: #c9cfcb;
  --grey: #f2f3f5;
  --darkgrey-disabled: #9ca29e;
  --lightgreen: #e6f9cc;
  --darkgreen: #066700;
  --green: #abe65a;
  --checkbox-green: #ABE659;
  --yellow: #ffff01
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: var(--darkgreen);
}

.background {
    background-image: url("../files/layout/relaunch-background.jpg");
    background-size: cover;
}

.white {
  background-color: white;
}


.container-fluid, .container-xxl {
    padding: 0 !important;
}

.main-content {
    min-height: calc(100vh - 248px);
}

.left-column {
    width: 100%;
    @media (min-width: 992px) {
        width: 60%;
    }
}

.header-logo {
    width: 7rem;
}

.left-column-content-container {
    background-color: var(--white);
    border-radius: 5px;
    width: 100%;
    max-width: 550px;
    user-select: none;

    @media screen and (min-width: 576px) {
        width: 80%;
    }
    @media screen and (min-width: 992px) {
        width: 65%;
    }

    h3 {
        margin-bottom: 2rem;
    }
    label {
        border-color: var(--darkgrey-disabled);
        font-weight: 600;
        font-size: 0.9rem;
    }
}

.right-column {
    background-color: white;
    @media screen and (min-width: 992px) {
        width: 40%;
    }
}
.left-column-content-container h3 {
  margin-bottom: 2em; }


.full-column-content-container {
  margin-top: 4em;
  padding: 1.5em;
  background-color: var(--white);
  border-radius: 5px;
  width: 100%;
  max-width: 1000px; }
  @media screen and (min-width: 576px) {
    .full-column-content-container {
      width: 80%; } }
  @media screen and (min-width: 992px) {
    .full-column-content-container {
      width: 60%; } }

.full-column-content-container h3 {
  margin-bottom: 2em; }

.lock-img {
  width: 150%; }

.left-column-content-container label {
  border-color: var(--darkgrey-disabled); }

.frc-icon {
  margin-left: 0 !important; }

.form-select {
  border: 1px solid var(--petrol);
  color: var(--petrol); }

/* petrol input borders */
.form-control {
  box-shadow: none !important;
  border-color: var(--petrol) !important;
}

.back-icon {
  border-color: var(--petrol) !important;
}

/* Login input fields */
/* green focus borders */
.form-control:focus, .form-select:focus {
  border-color: #28a745  !important;
}
/* light green focus outlines */
#email_input_container,
#password_input_container {
 .input-group:focus-within {
   border-radius: 5px;
   outline: 5px solid rgba(171, 230, 89, 0.75) !important;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(171, 230, 89, 0.75);
 }
}

.input-group:focus-within .front-icon,
.input-group:focus-within .back-icon {
  border-color: #28a745 !important;
}

.input-group #plain_password_show {
  border-color: var(--petrol);
}

.input-group:focus-within #plain_password_show {
  border-color: #28a745;
}

.front-icon, .back-icon {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

.input-group-text {
  background-color: transparent;
  border: 1px solid var(--petrol); }

.border-color-red {
  border-color: var(--bs-form-invalid-color) !important; }

#eye_button_password, #eye_button_repeat_password {
  cursor: pointer;
  color: var(--darkgrey-disabled); }

.email-org-postfix {
  border: none; }

#login-username-view a:hover {
  text-decoration: none;
}

#login-username-input {
  border-right: none;
}

.login-error-info {
    color: #E63917;
    font-weight: bold;
    background-color: rgba(255, 0, 0, 0.15);
    padding: 16px 24px;
    border-radius: 8px;
}

#login-password-input {
  border-right: none;
}

.has-color-red {
  color: var(--bs-form-invalid-color); }

.has-color-green {
  color: var(--bs-form-valid-color); }

button#submit_button {
    margin-top: 2rem;
    width: 100%;
}

.relaunch-buttons, .relaunch-buttons:hover, .relaunch-buttons:active {
    margin-top: 2em;
    width: 100%;
    border: none;
    font-family: Panton, serif  !important;
    font-weight: 700  !important;
    font-size: 17px  !important;
    line-height: 23.8px  !important;
    letter-spacing: 0  !important;
    color: var(--petrol) !important;
    background-color: var(--green) !important;
    border: none !important;
}

.info-container {
  margin: 3rem; }

.info-container p.info-text {
  margin-top: 2em; }

.info-container img {
  border-radius: 5px; }

.info-container p.hint-label {
  margin: 2em 0 .5em 0 !important; }

.info-container p.hint {
  margin-bottom: 5rem; }

.custom-checkbox-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem; }
  .custom-checkbox-block input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    background-color: #fff;
    box-shadow: none; }
  .custom-checkbox-block input[type="checkbox"]:checked {
    background-color: var(--checkbox-green);
    border-color: var(--checkbox-green);
    --bs-form-check-bg-image: none ; }
  .custom-checkbox-block input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 7px;
    width: 6px;
    height: 12px;
    border: solid #19353F;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg); }
  .custom-checkbox-block input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 7px;
    width: 6px;
    height: 12px;
    border: solid #19353F;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg); }
  .custom-checkbox-block label {
    margin: 0; }

.data-protection-hint {
  font-family: var(--unnamed-font-family-panton), sans-serif;
  font-style: var(--unnamed-font-style-normal);
  font-weight: var(--unnamed-font-weight-bold);
  font-size: var(--unnamed-font-size-14);
  line-height: var(--unnamed-line-spacing-18-899999618530273);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--petrol);
  margin-bottom: 3em; }

.input-group .front-icon {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: none; }

.input-group .back-icon {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: none; }

.left-column-content-container label {
  font-weight: 600;
  font-size: 0.9rem; }

.was-validated .form-control:invalid, .form-control.is-invalid {
  background-image: none !important; }

/*
	--------------------------------------------------------------------------------
		Ticker
	--------------------------------------------------------------------------------
*/
#ticker {
  width: 100%;
  height: 61px;
  overflow: hidden;
  bottom: -30px;
  background-color: #fdc533;
  z-index: 12;
  /* invisible by default */
  display: none; }

#ticker .js-marquee-wrapper {
  width: 100000px;
  transform: translateX(0px); }

#ticker .js-marquee {
  float: left;
  margin-right: 20px; }

#ticker .ce_text {
  margin: 0;
  background: none; }

#ticker .ce_text p,
#ticker .ce_text h2 {
  width: auto;
  margin: 0;
  padding: 12px 0;
  vertical-align: middle;
  font-size: 18px;
  line-height: 18px; }

#ticker .ce_text * {
  display: inline-block; }

#ticker .ce_text br {
  display: none; }

#ticker .ce_text h2 {
  padding-right: .5em; }

#ticker .button {
  width: auto !important;
  font-weight: normal; }

#ticker .button > p:last-child {
  width: auto;
  bottom: auto;
  position: relative;
  padding-left: 3rem; }

#ticker .ce_text p a {
  color: inherit;
  text-decoration: none;
  padding: 6px 24px;
  border: 1px solid #fff;
  border-radius: 24px; }

#ticker .js-marquee > div {
  height: auto;
  overflow: hidden;
  display: inline-block;
  margin-left: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle; }

/*
	--------------------------------------------------------------------------------
		Login
	--------------------------------------------------------------------------------
*/

#login-form a {
  color: var(--bs-form-valid-color);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#login_email_check {
  background-color: var(--bs-body-bg);
}

#plain_password_first_check {
  background-color: var(--bs-body-bg);
}

#plain_password_show {
  background-color: var(--bs-body-bg);
}

.error-box {
  color: #E63917;
  font-weight: bold;
  background-color: rgba(255, 0, 0, 0.15);
  padding: 16px 24px;
  border-radius: 8px;
}

/*
	--------------------------------------------------------------------------------
		News
	--------------------------------------------------------------------------------
*/

.news-item-link, .news-item-link:hover {
  text-decoration: none;
}

.news-item {
  text-decoration: none;
  &:hover {
    > .news-image-wrapper > .news-image {
      transform: scale(1.1,1.1);
    }
  }
  .news-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 200px;
    border: 1px solid var(--lightgrey);
    border-radius: 6px;

    .news-image {
      position: absolute;
      height: 100.1%;
      width: 100.1%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      transform: scale(1,1);
      transition: all .5s ease;
    }
  }
}

#all-news {
  margin-top: 1rem;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: var(--petrol);
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  white-space: nowrap;
  padding: 14px;
  border-radius: 15px;
  border: 2px solid var(--petrol);
}

#all-news:hover {
  text-decoration: none !important;
  border-color: var(--lightgreen);
  background-color: var(--lightgreen);
}

.btn-primary:hover {
  background-color: #e2f9cc !important;
}