/* basic styles */ @font-face {font-family: Roboto-Regular;src: url('../assets/fonts/Roboto-Regular.ttf'); }:root {--width-el: 160px;--width-dropdown-menu: 200px;--width-screen-small: 600px;--height-header: 60px;--height-link: 45px;--height-button: 40px;--height-text-field: 45px;--size-arrow-back-image: 48px;--font-size-regular: 16px;--font-size-caption: 12px;--font-size-title: 42px;--pad-level-1: 12px;--pad-level-2: 10px;--pad-level-3: 8px;--pad-level-4: 5px;--pad-level-5: 2px;--mar-level-1: 8px;--mar-level-2: 5px;--mar-level-3: 3px;--mar-block: 50px;--blue-original: #2665b0;--blue-light-light: #e8f0f7;--blue-mid-light: #bbd2e8;--blue-dark-light: #90b5da;--blue-light-dark: #4b87c3;--blue-mid-dark: #092139;--red-original: #be201e;--red-dark: #691311;--red-light: #dd2f2c;--green-original: #279057;--green-light: #30b06a;--light-white: #d1c7d1;--light-black: #141316;--light-dark-grey: #322f37;--light-mid-grey: #645f6d;--light-light-grey: #9792a0;--dark-black: #141316;--dark-white: #f6f4f6;--dark-dark-grey: #705c70;--dark-mid-grey: #baabba;--dark-light-grey: #d1c7d1; }html {margin: 0;padding: 0;line-height: 1;font-size: 16px;box-sizing: border-box;font-family: Roboto-Regular, Times, 'Times New Roman';width: 100%;height: 100%; }body {min-width: 20rem;width: 90vw;min-height: 100vh;background-color: var(--dark-white);font-size: clamp(1rem, 2vw, 1.125rem); }/* layout elements */ .header {border: 0.125rem solid var(--blue-original);background-color: var(--blue-light-light);height: 5.75rem; }/* need this for media query */ .header__container {display: flex; }.main {/* main container grows, header and footer don't */flex: 1;min-width: 100%;min-height: 25rem;max-width: 1200px;background-color: var(--dark-white); }.footer {min-height: 10rem;background-color: var(--blue-original);border-bottom: 0.25rem solid var(--dark-white); }.card {display: flex;flex-direction: row;min-height: 12.5rem;width: 35rem;background-color: var(--blue-light-light); }.card__single {width: 12.5rem;height: 7.5rem; }/* border style */ .border {border: 1px solid; }.border__b {border-bottom: 1px solid var(--blue-original); }.round {border-radius: 0.25rem; }.border__null {border: none; }.input .border {border-color: #ccc; }/* flex layout containers */.flex {display: flex;flex-wrap: wrap; }.fl__ac {align-items: center; }.fl__jb {justify-content: space-between; }.fl__jc {justify-content: center; }.fl__je {justify-content: flex-end; }.fl__col {flex-direction: column; }.fl__gap16 {gap: 1rem; }/* padding styles */.pad__4 {padding: 0.25rem; }.pad__8 {padding: 0.5rem; }.pad__v8 {padding-top: 0.5rem;padding-bottom: 0.5rem; }.pad__h8 {padding-left: 0.5rem;padding-right: 0.5rem; }/* 1rem */ .pad__16 {padding: 1rem; }.pad__v16 {padding-top: 1rem;padding-bottom: 1rem; }.pad__h16 {padding-left: 1rem;padding-right: 1rem; }.pad__b16 {padding-bottom: 1rem; }/* padding 32px*/ .pad__32 {padding: 2rem; }.mar__center {margin-left: auto;margin-right: auto; }.mar__v0 {margin-top: 0;margin-bottom: 0; }.mar__8 {margin: 0.5rem; }.mar__v8 {margin-top: 0.5rem;margin-bottom: 0.5rem; }.mar__b8 {margin-bottom: 0.5rem; }.mar__b16 {margin-bottom: 1rem; }.mar__v32 {margin-top: 2rem;margin-bottom: 2rem; }.mar__b48 {margin-bottom: 3rem; }/* block elements */ .block {display: block; }.full {width: 100%; }.hidden {display: none; }.message {width: 35rem; }.text__c {text-align: center; }.text__j {text-align: justify; }.text__i {font-style: italic; }.text__nodec {text-decoration: none; }.text__sl {font-size: clamp(10px, 2vw, 14px);line-height: 1.5em;height: 1.5em; }.font__32 {font-size: 2rem; }.font__24 {font-size: 1.5rem; }.font__12 {font-size: 0.75rem; }.red {color: var(--red-original); }.green {color: var(--green-original); }.blue {color: var(--blue-original); }.msg__big {font-size: clamp(1rem, 2vw, 3rem); }.text__long {white-space: normal;overflow: visible;overflow-y: auto;max-height: 4rem;font-size: clamp(16px, 2vw, 18px);line-height: 2rem; }.text__line32 {line-height: 2rem; }.text__large {white-space: normal;font-size: clamp(22px, 2.5vw, 28px); }.text__medium {white-space: normal;font-size: clamp(20px, 2.2vw, 24px); }.bold {font-weight: bold; }/* pointer */ .cursor {cursor: pointer; }/* transition on the background color */ .tran__bg {transition: background-color 0.3s; }.shadow {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }/* style for alert box */ .alert {width: 30rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }.error {background-color: var(--red-original);color: var(--dark-white); }.error:hover {background-color: var(--red-dark); }.success {background-color: var(--green-light);color: var(--dark-white); }.success:hover {background-color: var(--green-original); }.error__input {border: 2px solid var(--red-original) !important; }.help-block {color: red;font-size: 12px;margin-top: 4px; }/* classes for banner image */ .banner__cover {width: 100%;height: auto;max-height: 10rem;object-fit: cover; }/* dropdown menu items */ /* Dropdown */ .dropdown {position: relative;display: inline-block;margin: 0;padding: 0; }/* content of the dropdown menu */ .dropdown-content {z-index: 1;display: none;position: absolute;padding: 0.5rem 1rem;margin: 0 auto;min-width: 12.5rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);background-color: var(--blue-light-light);border: 0.125rem solid var(--blue-mid-dark);border-radius: 0.25rem;right: 0.5rem;/* the right property should be exactly half of the left/right padding */ }.dropdown:hover .dropdown-content {display: block;flex-direction: column; }.dropdown-icon {display: flex;justify-content: center;align-items: center;cursor: pointer;font-size: 3rem;width: 2.5rem;height: 2.5rem;border-radius: 0.25rem;color: var(--blue-original);margin: 0.5rem;padding: 0.5rem 1rem; }/* dropdown container class */ .dropdown-container {display: none;justify-content: flex-end;align-items: center; }/* form styling */ .form {width: 35rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }/* common link class */ .link {margin: 0.5rem;padding: 0.5rem 1rem;text-decoration: none;text-align: center;cursor: pointer;border: none;border-radius: 0.25rem;line-height: 1.5rem;transition: background-color 0.3s ease; }/* New class for red link/button */ .link-red {background-color: var(--red-original);color: var(--dark-light-grey); }/* Hover effect for red link/button */ .link-red:hover {background-color: var(--red-dark); }.header span {background-color: transparent !important;color: var(--dark-black) !important; }.header .link {background-color: var(--blue-original);color: var(--blue-light-light);min-width: 12.5rem;max-width: 12.5rem;min-height: 2.5rem; }.header .link:hover {background-color: var(--blue-mid-dark); }/* header specific links */ .header__container .link {flex: 1 1 auto; }.dropdown .link {display: block; }.dropdown-content .link {min-width: 12.5rem;max-width: 12.5rem;min-height: 2.5rem;max-height: 2.5rem; }/* footer links */ .footer .link {background-color: var(--blue-light-light);color: var(--blue-original);min-width: 12.5rem;max-width: 12.5rem;min-height: 2.5rem; }.footer .link:hover {background-color: var(--blue-dark-light); }.card .link {background-color: var(--blue-original);color: var(--dark-white);display: flex;align-items: center;justify-content: center;height: 100%;width: 100%; }.card .link:hover {background-color: var(--blue-mid-dark); }.tablist .link {background-color: var(--blue-original);color: var(--dark-white);min-width: 12.5rem;width: 12.5;min-height: 2.5rem; }.tablist .link:hover {background-color: var(--blue-mid-dark); }.custom-radio input[type="radio"] {/* Hide the default radio button */display: none; }.custom-radio .radio-mark {display: inline-block;width: 1rem;height: 1rem;border: 2px solid var(--blue-light-light);border-radius: 50%;position: relative;margin-right: 0.5rem;vertical-align: middle;cursor: pointer; }.custom-radio input[type="radio"]:checked+.radio-mark {border-color: var(--blue-mid-dark);/* Change border color when checked */background-color: var(--blue-original);/* Change background color when checked */ }.custom-radio input[type="radio"]:checked+.radio-mark::after {content: '';display: block;width: 0.25rem;height: 0.25rem;background-color: white;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }.form .button {padding: 0.625rem 1.25rem;color: var(--blue-light-light);background-color: var(--blue-original);font-size: 1rem; }.form .button:hover {background-color: var(--blue-mid-dark); }.form .button.button-gray {background-color: #808080;color: white; }.form .button.button-gray:hover {background-color: #696969; }.form .button.button-green-hover:hover {background-color: #28a745;color: white; }.form .button.button-red {background-color: #dc3545;color: white; }.form .button.button-red:hover {background-color: #c82333; }/* input elements */ .form .input {font-size: clamp(12px, 2vw, 16px);line-height: 1rem;min-width: 100%;min-height: 2.5rem; }.form label {font-size: clamp(13px, 2vw, 16px); }.simple-list {list-style-position: inside;padding-left: 1.2rem; }.simple-list-item {padding: 0.25rem;min-height: 2rem; }.pager {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 1rem;list-style: none; }.pager li {margin: 0 0.25rem; }.pager li a.pager-link {padding: 0.25rem 0.5rem;text-decoration: none;cursor: pointer;border-radius: 0.25rem;border: none;border-color: var(--blue-original);color: var(--blue-original);background-color: var(--blue-light-light); }.pager li a.pager-link:hover {background-color: var(--blue-original);color: var(--blue-light-light);border-color: var(--blue-mid-dark); }.pager li.active a.pager-link {background-color: var(--blue-mid-dark);color: var(--blue-light-light); }.pager li.disabled a.pager-link {background-color: var(--dark-mid-grey);color: var(--dark-white); }.slideshow {flex: 0 0 12.5rem;max-width: 100%;width: 35rem;height: auto;margin: auto;padding: 0;box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.4);border-radius: 0.25rem; }.slide {flex: 1 1 25%;position: relative;width: 25%;height: auto;display: block;border-radius: 0.25rem; }.slide img {width: 100%;height: 12.5rem;object-fit: cover;object-position: center; }.caption {text-align: center;font-size: 10px;padding: 0.5rem;font-style: italic; }.modal {display: none;z-index: 1;position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.4); }.modal-content {width: 35rem;background-color: var(--dark-white); }.help-block {color: var(--red-original);font-size: clamp(10px, 2vw, 14px);font-weight: bold;margin-top: 0.5rem; }/* 640px === 40 rem */ /* .form, .message => 35rem */ @media (max-width: 680px) {.header__container {display: none;}.dropdown-container {display: flex;}.footer {flex-direction: column;}.footer .link {width: 100%;max-width: none !important;display: block;margin: 0.5rem auto;}.tablist .link {width: 100%;max-width: none !important;display: block;margin: 0.5rem auto;}.form,.message,.slideshow,.card,.modal-content,.alert {width: 90%;}.card__single {width: 48%;} }