@import url('/css/static.css');

body {
  font-family: Arial, sans-serif;
  background-color: var(--gray-light);
  color: var(--text-black);
}

h1 {
  font-size: var(--headline-font-size);
  text-align: center;
}

h2 {
  font-weight: lighter;
  margin: 0rem 0rem 0rem 0rem;
  font-weight: bold;
  color: var(--text-black);
}

h3 {
  font-weight: lighter;
  margin: 0rem 0rem 0rem 0rem;
  color: var(--text-black);
  font-size: var(--large-font-size);
}

button {
  border: none;
  border-radius: var(--border-radius);
  font-size: var(--default-font-size);
  font-weight: bold;
  cursor: pointer;
}

.container {
  max-width: var(--total-width);
  margin: 2rem auto;
  background: #fff;
  padding: 1.25rem 1.563rem;
  border-radius: var(--border-radius);
  box-shadow: 0rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.emoji {
  font-size: var(--default-font-size);
}

.icon {
  width: var(--icon-square-size);
  height: var(--icon-square-size);
  flex-shrink: 0;
}

.normal-text {
  font-size: var(--default-font-size);
  line-height: 1.5;
  margin: 0rem 0rem 0rem 0rem;
}

.small-note {
  font-size: var(--small-font-size);
  color: var(--gray-dark);
}

.logoSmall {
  min-width: 4.375rem;
  min-height: 4.375rem;
  max-width: 4.375rem;
  max-height: 4.375rem;
}

.logoLarge {
  max-width: 15.625rem;
  max-height: 15.625rem;
  min-width: 15.625rem;
  min-height: 15.625rem;
}

.error-message {
  color: red;
  font-size: var(--small-font-size);
  margin: 0rem 0rem 0rem 0rem;
}

/* Button Styles */
.button-blue {
  background-color: var(--blue);
  color: var(--white);
}

.button-blue:hover {
  background-color: var(--blue-dark);
}

.button-gray {
  background-color: var(--gray);
  color: var(--text-black);
}

.button-gray:hover {
  background-color: var(--gray-dark);
}

.button-red {
  background-color: var(--red);
  color: var(--white);
}

.button-red:hover {
  background-color: var(--red-dark);
}

/* End of Button Styles */

/* For Checkbox */
.checkbox {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  appearance: hidden;
}

.checkbox p {
  font-size: var(--default-font-size);
  margin: 0rem 0rem 0rem 0.5rem;
}

.checkbox input {
  opacity: 0;
  position: absolute;
}

.img-checked {
  display: none;
}

.checkbox input:checked~.img-checked {
  display: inline;
}

.checkbox input:checked~.img-unchecked {
  display: none;
}

/* END OF For Checkbox */

.layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.625rem;
}

.size-layout {
  width: auto;
  display: block;
  size: 100%;
  min-height: 3.125rem;
}

.display-field {
  background-color: var(--gray);
  border: none;
  padding-left: 1.25rem;
  font-size: var(--large-font-size);
  display: flex;
  align-items: center;
  border-radius: var(--border-radius);
  color: var(--text-black);
}

.input-field {
  background-color: var(--gray);
  border: none;
  padding-left: 1.25rem;
  border-radius: var(--border-radius);
  font-size: var(--default-font-size);
  color: var(--text-black);
}

.input-field:hover {
  background-color: var(--gray-dark);
}

.input-field:focus {
  background-color: var(--gray);
}

/* Dropdown */
.dropdown {
  background-color: var(--gray);
  border: none;
  border-radius: var(--border-radius);
  font-size: var(--default-font-size);
  color: var(--text-black);
  padding-left: 1.25rem;
  cursor: pointer;
}

.dropdown:hover {
  background-color: var(--gray-dark);
}

.dropdown:focus {
  background-color: var(--gray);
}

.dropdown:disabled {
  background-color: var(--gray);
  color: var(--placeholder-gray);
  cursor: not-allowed;
}

/* END of Dropdown */

/*--------- ICONS ---------*/
.dropdown-field-icon-arrow-down {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-size: var(--icon-square-size) var(--icon-square-size);
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  padding-right: 2.5rem;
}

.input-field-icon-user {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17.982 18.725A7.49 7.49 0 0 0 12 15.75a7.49 7.49 0 0 0-5.982 2.975m11.964 0a9 9 0 1 0-11.963 0m11.962 0A8.97 8.97 0 0 1 12 21a8.97 8.97 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
  background-size: var(--icon-square-size) var(--icon-square-size);
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  padding-left: 2.5rem;
}

.input-field-icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:svg='http://www.w3.org/2000/svg' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:ns1='http://sozi.baierouge.fr' xmlns:xlink='http://www.w3.org/1999/xlink' id='svg3071' viewBox='0 0 256 256' version='1.1' %3E%3Cg id='layer1' transform='translate(-290.27 -334.66)' %3E%3Cpath id='path3058-6' style='block-progression:tb;text-indent:0;color:%23000000;text-transform:none' d='m393.36 334.66c-26.422 0-52.849 10.027-72.935 30.113-40.172 40.171-40.218 105.74-0.046 145.91 35.217 35.216 89.911 39.558 129.94 13.03l60.918 60.916c8.0386 8.0384 20.97 8.0384 29.008 0 8.0387-8.0384 8.0387-20.969 0-29.008l-60.872-60.916c26.497-40.023 22.127-94.732-13.077-129.94-20.086-20.085-46.514-30.113-72.935-30.113zm-0.046 27.166c19.371 0.009 38.738 7.4275 53.596 22.285 29.716 29.715 29.762 77.521 0.046 107.24-29.716 29.715-77.523 29.715-107.24 0-29.716-29.715-29.716-77.52 0-107.24 14.858-14.858 34.225-22.295 53.596-22.285zm-54.656 99.224a2.9472 2.9471 0 0 0 -2.5325 4.236c10.265 21.49 32.226 36.328 57.602 36.328 5.5064 0 10.842-0.71645 15.932-2.0259a2.9472 2.9471 0 0 0 -0.0921 -5.7094c-25.496-5.6948-48.907-16.882-68.975-32.231a2.9472 2.9471 0 0 0 -1.9339 -0.59857z' /%3E%3C/g %3E%3Cmetadata %3E%3Crdf:RDF %3E%3Ccc:Work %3E%3Cdc:format %3Eimage/svg+xml%3C/dc:format %3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Ccc:license rdf:resource='http://creativecommons.org/licenses/publicdomain/' /%3E%3Cdc:publisher %3E%3Ccc:Agent rdf:about='http://openclipart.org/' %3E%3Cdc:title %3EOpenclipart%3C/dc:title %3E%3C/cc:Agent %3E%3C/dc:publisher %3E%3Cdc:title %3ESearch Ideogram%3C/dc:title %3E%3Cdc:date %3E2013-11-11T18:47:39%3C/dc:date %3E%3Cdc:description %3Esearch icon/pictogram/Ideogram%3C/dc:description %3E%3Cdc:source %3Ehttps://openclipart.org/detail/188650/search-ideogram-by-libberry-188650%3C/dc:source %3E%3Cdc:creator %3E%3Ccc:Agent %3E%3Cdc:title %3Elibberry%3C/dc:title %3E%3C/cc:Agent %3E%3C/dc:creator %3E%3Cdc:subject %3E%3Crdf:Bag %3E%3Crdf:li %3Ehand lens%3C/rdf:li %3E%3Crdf:li %3Elibrary%3C/rdf:li %3E%3Crdf:li %3Emagnifier%3C/rdf:li %3E%3Crdf:li %3Emagnifying glass%3C/rdf:li %3E%3Crdf:li %3Esearch%3C/rdf:li %3E%3C/rdf:Bag %3E%3C/dc:subject %3E%3C/cc:Work %3E%3Ccc:License rdf:about='http://creativecommons.org/licenses/publicdomain/' %3E%3Ccc:permits rdf:resource='http://creativecommons.org/ns%23Reproduction' /%3E%3Ccc:permits rdf:resource='http://creativecommons.org/ns%23Distribution' /%3E%3Ccc:permits rdf:resource='http://creativecommons.org/ns%23DerivativeWorks' /%3E%3C/cc:License %3E%3C/rdf:RDF %3E%3C/metadata %3E%3C/svg%0A%3E%0A");
  background-size: var(--icon-square-size) var(--icon-square-size);
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  padding-left: 2.5rem;
}

.input-field-icon-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z'/%3E%3C/svg%3E");
  background-size: var(--icon-square-size) var(--icon-square-size);
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  padding-left: 2.5rem;
}

.input-field-icon-user-group {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18 18.72a9.1 9.1 0 0 0 3.741-.479q.01-.12.01-.241a3 3 0 0 0-4.692-2.478m.94 3.197l.001.031q0 .337-.037.666A11.94 11.94 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6 6 0 0 1 6 18.719m12 0a5.97 5.97 0 0 0-.941-3.197m0 0A6 6 0 0 0 12 12.75a6 6 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72a9 9 0 0 0 3.74.477m.94-3.197a5.97 5.97 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0a3 3 0 0 1 6 0m6 3a2.25 2.25 0 1 1-4.5 0a2.25 2.25 0 0 1 4.5 0m-13.5 0a2.25 2.25 0 1 1-4.5 0a2.25 2.25 0 0 1 4.5 0'/%3E%3C/svg%3E");
  background-size: var(--icon-square-size) var(--icon-square-size);
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  padding-left: 2.5rem;
}