@charset "UTF-8";

/* This file contains a load of the classes and variables defined in @cs-global/familiar-design to help keep the styling of the login/registration/etc interfaces consistent with all the other web apps */

:root {
  --cs-color-accent: #F9C908;
  --cs-color-accent-dark: #F5B01B;
  --cs-color-accent-medium: #F8C115;
  --cs-color-accent-bright: #FEDA00;
  --cs-color-foundation-black: #000000;
  --cs-color-foundation-white: #ffffff;
  --cs-color-gray-0: #F2F2F2;
  --cs-color-gray-1: #E6E6E6;
  --cs-color-gray-2: #CCCCCC;
  --cs-color-gray-3: #B3B3B3;
  --cs-color-gray-4: #808080;
  --cs-color-gray-5: #666666;
  --cs-color-gray-6: #4D4D4D;
  --cs-color-border: #B3B3B3;
  --cs-color-green-flat: #72C362;
  --cs-color-green-bright: #4BC134;
  --cs-color-red-flat: #D97777;
  --cs-color-red-bright: #e75d53;
  --cs-color-error: var(--cs-color-red-bright);
  --cs-color-success: var(--cs-color-green-bright); 
}

:root {
  --cs-font-family: "Montserrat";
  --cs-font-weight-extra-bold: 900;
  --cs-font-weight-semi-bold: 600;
  --cs-font-weight-medium: 500;
  --cs-font-weight-regular: 400;
  --cs-font-size-base: 14px; 
}


:root {
  --cs-spacing-0: 0px;
  --cs-spacing-xs: 5px;
  --cs-spacing-sm: 10px;
  --cs-spacing-md: 15px;
  --cs-spacing-lg: 20px;
  --cs-spacing-xl: 30px;
  --cs-spacing-2xl: 40px;
}

:root {
  --cs-box-shadow-default: 0 3px 6px rgba(0,0,0,0.2);
}


.cs-bg-accent {
  background-color: var(--cs-color-accent); 
}

.cs-bg-accent-dark {
  background-color: var(--cs-color-accent-dark); 
}

.cs-bg-accent-medium {
  background-color: var(--cs-color-accent-medium); 
}

.cs-bg-accent-bright {
  background-color: var(--cs-color-accent-bright); 
}

.cs-bg-foundation-black {
  background-color: var(--cs-color-foundation-black); 
}

.cs-bg-foundation-white {
  background-color: var(--cs-color-foundation-white); 
}

.cs-bg-gray-0 {
  background-color: var(--cs-color-gray-0); 
}

.cs-bg-gray-1 {
  background-color: var(--cs-color-gray-1); 
}

.cs-bg-gray-2 {
  background-color: var(--cs-color-gray-2); 
}

.cs-bg-gray-3 {
  background-color: var(--cs-color-gray-3); 
}

.cs-bg-gray-4 {
  background-color: var(--cs-color-gray-4); 
}

.cs-bg-gray-5 {
  background-color: var(--cs-color-gray-5); 
}

.cs-bg-gray-6 {
  background-color: var(--cs-color-gray-6); 
}

.cs-text-accent {
  color: var(--cs-color-accent); 
}

.cs-text-accent-dark {
  color: var(--cs-color-accent-dark); 
}

.cs-text-accent-medium {
  color: var(--cs-color-accent-medium); 
}

.cs-text-accent-bright {
  color: var(--cs-color-accent-bright); 
}

.cs-text-foundation-black {
  color: var(--cs-color-foundation-black); 
}

.cs-text-foundation-white {
  color: var(--cs-color-foundation-white); 
}

.cs-text-gray-0 {
  color: var(--cs-color-gray-0); 
}

.cs-text-gray-1 {
  color: var(--cs-color-gray-1); 
}

.cs-text-gray-2 {
  color: var(--cs-color-gray-2); 
}

.cs-text-gray-3 {
  color: var(--cs-color-gray-3); 
}

.cs-text-gray-4 {
  color: var(--cs-color-gray-4); 
}

.cs-text-gray-5 {
  color: var(--cs-color-gray-5); 
}

.cs-text-gray-6 {
  color: var(--cs-color-gray-6); 
}


/* Text Size */
.cs-text-xs {
  font-size: 10px;
}

.cs-text-sm {
  font-size: 12px;
}

.cs-text-base {
  font-size: var(--cs-font-size-base);
}

.cs-text-md {
  font-size: var(--cs-font-size-base);
}

.cs-text-lg {
  font-size: 16px;
}

.cs-text-xl {
  font-size: 18px;
}

.cs-text-2xl {
  font-size: 24px;
}

.cs-text-3xl {
  font-size: 40px;
}

/* Font weight  */
.cs-font-regular {
  font-weight: var(--cs-font-weight-regular);
}
.cs-font-medium {
  font-weight: var(--cs-font-weight-medium);
}
.cs-font-semibold {
  font-weight: var(--cs-font-weight-semi-bold);
}
.cs-font-extrabold {
  font-weight: var(--cs-font-weight-extra-bold);
}

/* Text Alignment */
.cs-text-center {
  text-align: center !important;
}

.cs-text-left {
  text-align: left !important;
}

.cs-text-right {
  text-align: right !important;
}

.cs-text-justify {
  text-align: justify !important;
}

/* Line spacing  */
.cs-line-tight {
  line-height: 1.3em;
}
.cs-line-normal {
  line-height: 1.6em;
}
.cs-line-relaxed {
  line-height: 2em;
}

/* Text Style */
.cs-text-italic {
  font-style: italic;
}


/* ### CSS Button Variables */
:root {
  --cs-btn-height: 40px;
  --cs-btn-font-size: 12px; 
}


.cs-btn {
  min-height: var(--cs-btn-height);
  min-width: 150px;
  padding: var(--cs-spacing-sm) var(--cs-spacing-lg);
  border-radius: 25px;
  font-size: var(--cs-btn-font-size);
  font-weight: var(--cs-font-weight-medium);
  background-color: var(--cs-color-accent);
  font-family: "Montserrat";
  border-style: none;
  color: var(--cs-color-gray-6); 
  cursor: pointer;
  text-decoration: none;
}

.cs-btn:hover {
  background-color: var(--cs-color-accent-medium);
  box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
}
  
.cs-btn:disabled {
  background-color: var(--cs-color-gray-1); 
  color: var(--cs-color-gray-3);
  background-color: var(--cs-color-gray-1);
  cursor: not-allowed;
}


.cs-btn--full-width {
  justify-content: center;
  width: 100%;
}

a.cs-btn {
  display: inline-block;
  line-height: 20px; 
}


.cs-btn--cancel {
  color: var(--cs-color-gray-3);
  background-color: transparent;
  border: 1px solid var(--cs-color-gray-3);
}

.cs-btn--cancel:hover {
  background-color: transparent;
  color: var(--cs-color-accent);
  border: 1px solid var(--cs-color-accent);
}

.cs-btn--secondary {
  color: var(--cs-color-gray-4);
  background-color: var(--cs-color-gray-0);
  border: 1px solid var(--cs-color-gray-4);
}

.cs-btn--secondary:hover,
.cs-btn--secondary:focus {
  background-color: var(--cs-color-gray-0);
  box-shadow: var(--cs-box-shadow-default);
}


:root {
  --cs-form-input-height: 40px;
  --cs-form-input-corner-radius: 25px;
  --cs-form-input-padding-right: 20px;
  --cs-form-input-padding-left: 20px;
  --cs-form-group-item-spacing: 20px;
  --cs-form-group-top-bottom-padding: 40px;
  --cs-form-disabled-opacity: 40%;
  --cs-text-area-border-radius: 5px; 
}


input[type=text],
select,
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week], 
input[type=range] {
  font-size: var(--cs-font-size-base);
  height: var(--cs-form-input-height);
  font-family: var(--cs-font-family);
  border-radius: var(--cs-form-input-corner-radius);
  border-color: var(--cs-color-border);
  border-style: solid;
  border-width: 1px;
  background-color: var(--cs-color-foundation-white); 
}

input:disabled {
  opacity: var(--cs-form-disabled-opacity); 
}

input[type=text],
select,
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week] {
  padding-left: var(--cs-form-input-padding-left);
  padding-right: var(--cs-form-input-padding-right);
  font-size: var(--cs-font-size-base);
}

input[type=text]:focus,
select:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus {
  outline: none; 
}

input[type=range] {
  filter: grayscale(100%); 
}

input[type=file] {
  font-family: var(--cs-font-family); 
}

option {
  font-family: var(--cs-font-family); 
}

label {
  font-family: var(--cs-font-family);
  font-size: var(--cs-font-size-base);
  color: var(--cs-color-gray-6); 
}



input[type=checkbox], input[type=radio] {
  filter: grayscale(100%);
  height: 24px;
  width: 24px;
  border-radius: 2px; 
}
  
input[type=checkbox] + label, input[type=radio] + label {
  font-size: var(--cs-font-size-base);
  font-weight: var(--cs-font-weight-regular);
  color: var(--cs-color-gray-6);
  vertical-align: 6px; 
}

input[type=checkbox]:disabled + label, input[type=radio]:disabled + label {
    opacity: var(--cs-form-disabled-opacity); 
}

form {
  padding-top: var(--cs-form-group-top-bottom-padding);
  padding-bottom: var(--cs-form-group-top-bottom-padding);
  padding-right: var(--cs-form-input-padding-right);
  padding-left: var(--cs-form-input-padding-left);
  display: inline-block; 
}


textarea {
  font-size: var(--cs-font-size-base);
  font-family: var(--cs-font-family);
  font-weight: 400;
  border-radius: var(--cs-text-area-border-radius);
  border-color: var(--cs-color-border);
  border-style: solid;
  border-width: 1.25px;
  padding-left: var(--cs-form-input-padding-left);
  padding-right: var(--cs-form-input-padding-right); 
}
  
textarea:focus {
    outline: none; 
}



/* Table  */
:root {
  --cs-table-horizontal-padding: 20px;
  --cs-table-font-size: 18px;
  --cs-table-header-height: 80px;
  --cs-table-border-width: 1px;
  --cs-table-cell-height: 40px; 
}

table {
  border-collapse: collapse; }

th, td {
  padding-left: var(--cs-table-horizontal-padding);
  padding-right: var(--cs-table-horizontal-padding);
  font-size: var(--cs-table-font-size);
  font-family: var(--cs-font-family);
  color: var(--cs-color-gray-6);
  border-color: var(--cs-color-gray-2);
  border: solid;
  border-width: var(--cs-table-border-width);
  border-color: var(--cs-color-gray-2); 
}

th {
  background-color: var(--cs-color-gray-1);
  font-weight: 600;
  height: var(--cs-table-header-height);
  text-align: left; 
}

td {
  font-weight: 400;
  height: var(--cs-table-cell-height); 
}




/* Margin utility classes */
.cs-mb-0 {
  margin-bottom: var(--cs-spacing-0) !important;
}
.cs-mb-xs {
  margin-bottom: var(--cs-spacing-xs) !important;
}
.cs-mb-sm {
  margin-bottom: var(--cs-spacing-sm) !important;
}
.cs-mb-md {
  margin-bottom: var(--cs-spacing-md) !important;
}
.cs-mb-lg {
  margin-bottom: var(--cs-spacing-lg) !important;
}
.cs-mb-xl {
  margin-bottom: var(--cs-spacing-xl) !important;
}
.cs-mb-2xl {
  margin-bottom: var(--cs-spacing-2xl) !important;
}

.cs-mt-0 {
  margin-top: var(--cs-spacing-0) !important;
}
.cs-mt-xs {
  margin-top: var(--cs-spacing-xs) !important;
}
.cs-mt-sm {
  margin-top: var(--cs-spacing-sm) !important;
}
.cs-mt-md {
  margin-top: var(--cs-spacing-md) !important;
}
.cs-mt-lg {
  margin-top: var(--cs-spacing-lg) !important;
}
.cs-mt-xl {
  margin-top: var(--cs-spacing-xl) !important;
}
.cs-mt-2xl {
  margin-top: var(--cs-spacing-2xl) !important;
}

.cs-ml-0 {
  margin-left: var(--cs-spacing-0) !important;
}
.cs-ml-xs {
  margin-left: var(--cs-spacing-xs) !important;
}
.cs-ml-sm {
  margin-left: var(--cs-spacing-sm) !important;
}
.cs-ml-md {
  margin-left: var(--cs-spacing-md) !important;
}
.cs-ml-lg {
  margin-left: var(--cs-spacing-lg) !important;
}
.cs-ml-xl {
  margin-left: var(--cs-spacing-xl) !important;
}
.cs-ml-2xl {
  margin-left: var(--cs-spacing-2xl) !important;
}

.cs-mr-0 {
  margin-right: var(--cs-spacing-0) !important;
}
.cs-mr-xs {
  margin-right: var(--cs-spacing-xs) !important;
}
.cs-mr-sm {
  margin-right: var(--cs-spacing-sm) !important;
}
.cs-mr-md {
  margin-right: var(--cs-spacing-md) !important;
}
.cs-mr-lg {
  margin-right: var(--cs-spacing-lg) !important;
}
.cs-mr-xl {
  margin-right: var(--cs-spacing-xl) !important;
}
.cs-mr-2xl {
  margin-right: var(--cs-spacing-2xl) !important;
}

.cs-mx-0 {
  margin-right: var(--cs-spacing-0) !important;
  margin-left: var(--cs-spacing-0) !important;
}
.cs-mx-xs {
  margin-right: var(--cs-spacing-xs) !important;
  margin-left: var(--cs-spacing-xs) !important;
}
.cs-mx-sm {
  margin-right: var(--cs-spacing-sm) !important;
  margin-left: var(--cs-spacing-sm) !important;
}
.cs-mx-md {
  margin-right: var(--cs-spacing-md) !important;
  margin-left: var(--cs-spacing-md) !important;
}
.cs-mx-lg {
  margin-right: var(--cs-spacing-lg) !important;
  margin-left: var(--cs-spacing-lg) !important;
}
.cs-mx-xl {
  margin-right: var(--cs-spacing-xl) !important;
  margin-left: var(--cs-spacing-xl) !important;
}
.cs-mx-2xl {
  margin-right: var(--cs-spacing-2xl) !important;
  margin-left: var(--cs-spacing-2xl) !important;
}

.cs-my-0 {
  margin-top: var(--cs-spacing-0) !important;
  margin-bottom: var(--cs-spacing-0) !important;
}
.cs-my-xs {
  margin-top: var(--cs-spacing-xs) !important;
  margin-bottom: var(--cs-spacing-xs) !important;
}
.cs-my-sm {
  margin-top: var(--cs-spacing-sm) !important;
  margin-bottom: var(--cs-spacing-sm) !important;
}
.cs-my-md {
  margin-top: var(--cs-spacing-md) !important;
  margin-bottom: var(--cs-spacing-md) !important;
}
.cs-my-lg {
  margin-top: var(--cs-spacing-lg) !important;
  margin-bottom: var(--cs-spacing-lg) !important;
}
.cs-my-xl {
  margin-top: var(--cs-spacing-xl) !important;
  margin-bottom: var(--cs-spacing-xl) !important;
}
.cs-my-2xl {
  margin-top: var(--cs-spacing-2xl) !important;
  margin-bottom: var(--cs-spacing-2xl) !important;
}

.cs-m-0 {
  margin: var(--cs-spacing-0) !important;
}
.cs-m-xs {
  margin: var(--cs-spacing-xs) !important;
}
.cs-m-sm {
  margin: var(--cs-spacing-sm) !important;
}
.cs-m-md {
  margin: var(--cs-spacing-md) !important;
}
.cs-m-lg {
  margin: var(--cs-spacing-lg) !important;
}
.cs-m-xl {
  margin: var(--cs-spacing-xl) !important;
}
.cs-m-2xl {
  margin: var(--cs-spacing-2xl) !important;
}

/* Padding utility classes */
.cs-pb-0 {
  padding-bottom: var(--cs-spacing-0) !important;
}
.cs-pb-xs {
  padding-bottom: var(--cs-spacing-xs) !important;
}
.cs-pb-sm {
  padding-bottom: var(--cs-spacing-sm) !important;
}
.cs-pb-md {
  padding-bottom: var(--cs-spacing-md) !important;
}
.cs-pb-lg {
  padding-bottom: var(--cs-spacing-lg) !important;
}
.cs-pb-xl {
  padding-bottom: var(--cs-spacing-xl) !important;
}
.cs-pb-2xl {
  padding-bottom: var(--cs-spacing-2xl) !important;
}

.cs-pt-0 {
  padding-top: var(--cs-spacing-0) !important;
}
.cs-pt-xs {
  padding-top: var(--cs-spacing-xs) !important;
}
.cs-pt-sm {
  padding-top: var(--cs-spacing-sm) !important;
}
.cs-pt-md {
  padding-top: var(--cs-spacing-md) !important;
}
.cs-pt-lg {
  padding-top: var(--cs-spacing-lg) !important;
}
.cs-pt-xl {
  padding-top: var(--cs-spacing-xl) !important;
}
.cs-pt-2xl {
  padding-top: var(--cs-spacing-2xl) !important;
}

.cs-pl-0 {
  padding-left: var(--cs-spacing-0) !important;
}
.cs-pl-xs {
  padding-left: var(--cs-spacing-xs) !important;
}
.cs-pl-sm {
  padding-left: var(--cs-spacing-sm) !important;
}
.cs-pl-md {
  padding-left: var(--cs-spacing-md) !important;
}
.cs-pl-lg {
  padding-left: var(--cs-spacing-lg) !important;
}
.cs-pl-xl {
  padding-left: var(--cs-spacing-xl) !important;
}
.cs-pl-2xl {
  padding-left: var(--cs-spacing-2xl) !important;
}

.cs-pr-0 {
  padding-right: var(--cs-spacing-0) !important;
}
.cs-pr-xs {
  padding-right: var(--cs-spacing-xs) !important;
}
.cs-pr-sm {
  padding-right: var(--cs-spacing-sm) !important;
}
.cs-pr-md {
  padding-right: var(--cs-spacing-md) !important;
}
.cs-pr-lg {
  padding-right: var(--cs-spacing-lg) !important;
}
.cs-pr-xl {
  padding-right: var(--cs-spacing-xl) !important;
}
.cs-pr-2xl {
  padding-right: var(--cs-spacing-2xl) !important;
}

.cs-px-0 {
  padding-right: var(--cs-spacing-0) !important;
  padding-left: var(--cs-spacing-0) !important;
}
.cs-px-xs {
  padding-right: var(--cs-spacing-xs) !important;
  padding-left: var(--cs-spacing-xs) !important;
}
.cs-px-sm {
  padding-right: var(--cs-spacing-sm) !important;
  padding-left: var(--cs-spacing-sm) !important;
}
.cs-px-md {
  padding-right: var(--cs-spacing-md) !important;
  padding-left: var(--cs-spacing-md) !important;
}
.cs-px-lg {
  padding-right: var(--cs-spacing-lg) !important;
  padding-left: var(--cs-spacing-lg) !important;
}
.cs-px-xl {
  padding-right: var(--cs-spacing-xl) !important;
  padding-left: var(--cs-spacing-xl) !important;
}
.cs-px-2xl {
  padding-right: var(--cs-spacing-2xl) !important;
  padding-left: var(--cs-spacing-2xl) !important;
}

.cs-py-0 {
  padding-top: var(--cs-spacing-0) !important;
  padding-bottom: var(--cs-spacing-0) !important;
}
.cs-py-xs {
  padding-top: var(--cs-spacing-xs) !important;
  padding-bottom: var(--cs-spacing-xs) !important;
}
.cs-py-sm {
  padding-top: var(--cs-spacing-sm) !important;
  padding-bottom: var(--cs-spacing-sm) !important;
}
.cs-py-md {
  padding-top: var(--cs-spacing-md) !important;
  padding-bottom: var(--cs-spacing-md) !important;
}
.cs-py-lg {
  padding-top: var(--cs-spacing-lg) !important;
  padding-bottom: var(--cs-spacing-lg) !important;
}
.cs-py-xl {
  padding-top: var(--cs-spacing-xl) !important;
  padding-bottom: var(--cs-spacing-xl) !important;
}
.cs-py-2xl {
  padding-top: var(--cs-spacing-2xl) !important;
  padding-bottom: var(--cs-spacing-2xl) !important;
}

.cs-p-0 {
  padding: var(--cs-spacing-0) !important;
}
.cs-p-xs {
  padding: var(--cs-spacing-xs) !important;
}
.cs-p-sm {
  padding: var(--cs-spacing-sm) !important;
}
.cs-p-md {
  padding: var(--cs-spacing-md) !important;
}
.cs-p-lg {
  padding: var(--cs-spacing-lg) !important;
}
.cs-p-xl {
  padding: var(--cs-spacing-xl) !important;
}
.cs-p-2xl {
  padding: var(--cs-spacing-2xl) !important;
}