/* Common style for application */
/* Padding */
[class*="pad-"] {
  padding: 0;
}
.pad-0-5 {
  padding: var(--spacing-0-5);
}
.pad-1 {
  padding: var(--spacing-1);
}
.pad-2 {
  padding: var(--spacing-2);
}
.pad-3 {
  padding: var(--spacing-3);
}
.pad-4 {
  padding: var(--spacing-4);
}
.pad-5 {
  padding: var(--spacing-5);
}
.pad-6 {
  padding: var(--spacing-6);
}
.pad-7 {
  padding: var(--spacing-7);
}
.pad-8 {
  padding: var(--spacing-8);
}
.pad-9 {
  padding: var(--spacing-9);
}
.pad-10 {
  padding: var(--spacing-10);
}

[class*="pad-x-"] {
  padding-left: 0;
  padding-right: 0;
}
.pad-x-0-5 {
  padding-left: var(--spacing-0-5);
  padding-right: var(--spacing-0-5);
}
.pad-x-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}
.pad-x-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}
.pad-x-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}
.pad-x-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}
.pad-x-5 {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}
.pad-x-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
.pad-x-7 {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}
.pad-x-8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}
.pad-x-9 {
  padding-left: var(--spacing-9);
  padding-right: var(--spacing-9);
}
.pad-x-10 {
  padding-left: var(--spacing-10);
  padding-right: var(--spacing-10);
}

[class*="pad-y-"] {
  padding-top: 0;
  padding-bottom: 0;
}
.pad-y-0-5 {
  padding-top: var(--spacing-0-5);
  padding-bottom: var(--spacing-0-5);
}
.pad-y-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}
.pad-y-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}
.pad-y-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}
.pad-y-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}
.pad-y-5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}
.pad-y-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}
.pad-y-7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}
.pad-y-8 {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}
.pad-y-9 {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
}
.pad-y-10 {
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}

[class*="pad-t-"] {
  padding-top: 0;
}
.pad-t-0-5 {
  padding-top: var(--spacing-0-5);
}
.pad-t-1 {
  padding-top: var(--spacing-1);
}
.pad-t-2 {
  padding-top: var(--spacing-2);
}
.pad-t-3 {
  padding-top: var(--spacing-3);
}
.pad-t-4 {
  padding-top: var(--spacing-4);
}
.pad-t-5 {
  padding-top: var(--spacing-5);
}
.pad-t-6 {
  padding-top: var(--spacing-6);
}
.pad-t-7 {
  padding-top: var(--spacing-7);
}
.pad-t-8 {
  padding-top: var(--spacing-8);
}
.pad-t-9 {
  padding-top: var(--spacing-9);
}
.pad-t-10 {
  padding-top: var(--spacing-10);
}

[class*="pad-b-"] {
  padding-bottom: 0;
}
.pad-b-0-5 {
  padding-bottom: var(--spacing-0-5);
}
.pad-b-1 {
  padding-bottom: var(--spacing-1);
}
.pad-b-2 {
  padding-bottom: var(--spacing-2);
}
.pad-b-3 {
  padding-bottom: var(--spacing-3);
}
.pad-b-4 {
  padding-bottom: var(--spacing-4);
}
.pad-b-5 {
  padding-bottom: var(--spacing-5);
}
.pad-b-6 {
  padding-bottom: var(--spacing-6);
}
.pad-b-7 {
  padding-bottom: var(--spacing-7);
}
.pad-b-8 {
  padding-bottom: var(--spacing-8);
}
.pad-b-9 {
  padding-bottom: var(--spacing-9);
}
.pad-b-10 {
  padding-bottom: var(--spacing-10);
}

[class*="pad-l-"] {
  padding-left: 0;
}
.pad-l-0-5 {
  padding-left: var(--spacing-0-5);
}
.pad-l-1 {
  padding-left: var(--spacing-1);
}
.pad-l-2 {
  padding-left: var(--spacing-2);
}
.pad-l-3 {
  padding-left: var(--spacing-3);
}
.pad-l-4 {
  padding-left: var(--spacing-4);
}
.pad-l-5 {
  padding-left: var(--spacing-5);
}
.pad-l-6 {
  padding-left: var(--spacing-6);
}
.pad-l-7 {
  padding-left: var(--spacing-7);
}
.pad-l-8 {
  padding-left: var(--spacing-8);
}
.pad-l-9 {
  padding-left: var(--spacing-9);
}
.pad-l-10 {
  padding-left: var(--spacing-10);
}

[class*="pad-r-"] {
  padding-right: 0;
}
.pad-r-0-5 {
  padding-right: var(--spacing-0-5);
}
.pad-r-1 {
  padding-right: var(--spacing-1);
}
.pad-r-2 {
  padding-right: var(--spacing-2);
}
.pad-r-3 {
  padding-right: var(--spacing-3);
}
.pad-r-4 {
  padding-right: var(--spacing-4);
}
.pad-r-5 {
  padding-right: var(--spacing-5);
}
.pad-r-6 {
  padding-right: var(--spacing-6);
}
.pad-r-7 {
  padding-right: var(--spacing-7);
}
.pad-r-8 {
  padding-right: var(--spacing-8);
}
.pad-r-9 {
  padding-right: var(--spacing-9);
}
.pad-r-10 {
  padding-right: var(--spacing-10);
}

/* Margin */

[class*="mar-"] {
  margin: 0;
}
.mar-auto {
  margin: auto;
}
.mar-0-5 {
  margin: var(--spacing-0-5);
}
.mar-1 {
  margin: var(--spacing-1);
}
.mar-2 {
  margin: var(--spacing-2);
}
.mar-3 {
  margin: var(--spacing-3);
}
.mar-4 {
  margin: var(--spacing-4);
}
.mar-5 {
  margin: var(--spacing-5);
}
.mar-6 {
  margin: var(--spacing-6);
}
.mar-7 {
  margin: var(--spacing-7);
}
.mar-8 {
  margin: var(--spacing-8);
}
.mar-9 {
  margin: var(--spacing-9);
}
.mar-10 {
  margin: var(--spacing-10);
}

[class*="mar-x-"] {
  margin-left: 0;
  margin-right: 0;
}
.mar-x-0-5 {
  margin-left: var(--spacing-0-5);
  margin-right: var(--spacing-0-5);
}
.mar-x-1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}
.mar-x-2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}
.mar-x-3 {
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}
.mar-x-4 {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}
.mar-x-5 {
  margin-left: var(--spacing-5);
  margin-right: var(--spacing-5);
}
.mar-x-6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}
.mar-x-7 {
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}
.mar-x-8 {
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}
.mar-x-9 {
  margin-left: var(--spacing-9);
  margin-right: var(--spacing-9);
}
.mar-x-10 {
  margin-left: var(--spacing-10);
  margin-right: var(--spacing-10);
}

[class*="mar-y-"] {
  margin-top: 0;
  margin-bottom: 0;
}
.mar-y-0-5 {
  margin-top: var(--spacing-0-5);
  margin-bottom: var(--spacing-0-5);
}
.mar-y-1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}
.mar-y-2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}
.mar-y-3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.mar-y-4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}
.mar-y-5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}
.mar-y-6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}
.mar-y-7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
}
.mar-y-8 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}
.mar-y-9 {
  margin-top: var(--spacing-9);
  margin-bottom: var(--spacing-9);
}
.mar-y-10 {
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-10);
}

[class*="mar-t-"] {
  margin-top: 0;
}
.mar-t-0-5 {
  margin-top: var(--spacing-0-5);
}
.mar-t-1 {
  margin-top: var(--spacing-1);
}
.mar-t-2 {
  margin-top: var(--spacing-2);
}
.mar-t-3 {
  margin-top: var(--spacing-3);
}
.mar-t-4 {
  margin-top: var(--spacing-4);
}
.mar-t-5 {
  margin-top: var(--spacing-5);
}
.mar-t-6 {
  margin-top: var(--spacing-6);
}
.mar-t-7 {
  margin-top: var(--spacing-7);
}
.mar-t-8 {
  margin-top: var(--spacing-8);
}
.mar-t-9 {
  margin-top: var(--spacing-9);
}
.mar-t-10 {
  margin-top: var(--spacing-10);
}

[class*="mar-b-"] {
  margin-bottom: 0;
}
.mar-b-0-5 {
  margin-bottom: var(--spacing-0-5);
}
.mar-b-1 {
  margin-bottom: var(--spacing-1);
}
.mar-b-2 {
  margin-bottom: var(--spacing-2);
}
.mar-b-3 {
  margin-bottom: var(--spacing-3);
}
.mar-b-4 {
  margin-bottom: var(--spacing-4);
}
.mar-b-5 {
  margin-bottom: var(--spacing-5);
}
.mar-b-6 {
  margin-bottom: var(--spacing-6);
}
.mar-b-7 {
  margin-bottom: var(--spacing-7);
}
.mar-b-8 {
  margin-bottom: var(--spacing-8);
}
.mar-b-9 {
  margin-bottom: var(--spacing-9);
}
.mar-b-10 {
  margin-bottom: var(--spacing-10);
}

[class*="mar-l-"] {
  margin-left: 0;
}
.mar-l-0-5 {
  margin-left: var(--spacing-0-5);
}
.mar-l-1 {
  margin-left: var(--spacing-1);
}
.mar-l-2 {
  margin-left: var(--spacing-2);
}
.mar-l-3 {
  margin-left: var(--spacing-3);
}
.mar-l-4 {
  margin-left: var(--spacing-4);
}
.mar-l-5 {
  margin-left: var(--spacing-5);
}
.mar-l-6 {
  margin-left: var(--spacing-6);
}
.mar-l-7 {
  margin-left: var(--spacing-7);
}
.mar-l-8 {
  margin-left: var(--spacing-8);
}
.mar-l-9 {
  margin-left: var(--spacing-9);
}
.mar-l-10 {
  margin-left: var(--spacing-10);
}

[class*="mar-r-"] {
  margin-right: 0;
}
.mar-r-0-5 {
  margin-right: var(--spacing-0-5);
}
.mar-r-1 {
  margin-right: var(--spacing-1);
}
.mar-r-2 {
  margin-right: var(--spacing-2);
}
.mar-r-3 {
  margin-right: var(--spacing-3);
}
.mar-r-4 {
  margin-right: var(--spacing-4);
}
.mar-r-5 {
  margin-right: var(--spacing-5);
}
.mar-r-6 {
  margin-right: var(--spacing-6);
}
.mar-r-7 {
  margin-right: var(--spacing-7);
}
.mar-r-8 {
  margin-right: var(--spacing-8);
}
.mar-r-9 {
  margin-right: var(--spacing-9);
}
.mar-r-10 {
  margin-right: var(--spacing-10);
}

/* Font Size */
.font-normal {
  font-size: var(--normal);
}
.font-smallest {
  font-size: var(--smallest);
}
.font-smaller {
  font-size: var(--smaller);
}
.font-small {
  font-size: var(--small);
}
.font-large {
  font-size: var(--large);
}
.font-larger {
  font-size: var(--larger);
}
.font-largest {
  font-size: var(--largest);
}

/* Font Weight */
.font-thin {
  font-weight: var(--font-weight-thin);
}
.font-normal {
  font-weight: var(--font-weight-normal);
}
.font-thick {
  font-weight: var(--font-weight-thick);
}
.font-thicker {
  font-weight: var(--font-weight-thicker);
}
.font-thickest {
  font-weight: var(--font-weight-thickest);
}

/* Font Color */
.font-light {
  color: var(--light);
}
.font-primary {
  color: var(--primary-1);
}
.font-grey {
  color: var(--grey);
}

/* Font Family */
.font-family-primary {
  font-family: "Roboto", sans-serif;
}
.font-family-secondary {
  font-family: "Anton SC", sans-serif;
}

/* Button */

.btn {
  padding: 20px;
  background-color: var(--light);
  border: solid 1px var(--light);
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  transition: 0.3s;
  font-size: var(--small);
  text-decoration: none;
  color: var(--dark);
}

.btn:disabled {
  background-color: var(--grey)!important;
  color: #00000050!important;
  cursor: not-allowed;
}

.btn:hover,
.btn.btn-primary:hover {
  background-color: var(--background1-1);
  /* color: var(--light); */
}

.btn.btn-primary {
  background-color: var(--primary-1);
  border: solid 1px var(--primary-1);
  /* color: var(--light); */
}

.btn.btn-stroke,
.btn.btn-primary.btn-stroke {
  background-color: transparent!important;
}

.field {
  height: 60px;
  width: 100%;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-size: var(--small);
  outline: none;
  border: solid 1px var(--dark);
  border-radius: 5px;
  /* background-color: var(--background1-2); */
  /* color: var(--light); */
}

textarea.field {
  height: 120px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.btn:focus,
.field:focus {
  outline: 5px solid #e9ad4850;
}

.field.secondary {
  /* color: #fff; */
  background-color: var(--background1-2);
}