/* Minification failed. Returning unminified contents.
(38,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,4): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,16): run-time error CSS1039: Token not allowed after unary operator: '-font-color'
(66,22): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(67,22): run-time error CSS1039: Token not allowed after unary operator: '-font-weight'
(80,27): run-time error CSS1039: Token not allowed after unary operator: '-background--light'
(87,22): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(88,22): run-time error CSS1039: Token not allowed after unary operator: '-font-weight'
(89,16): run-time error CSS1039: Token not allowed after unary operator: '-font-color'
(113,27): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(114,16): run-time error CSS1039: Token not allowed after unary operator: '-font-light-color'
(127,22): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary'
(128,22): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-light'
(140,27): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(145,27): run-time error CSS1039: Token not allowed after unary operator: '-background--light'
(150,23): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(185,22): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary'
(189,27): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(190,23): run-time error CSS1039: Token not allowed after unary operator: '-color-error-border'
(194,27): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(195,23): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(202,30): run-time error CSS1039: Token not allowed after unary operator: '-background--light'
(216,23): run-time error CSS1039: Token not allowed after unary operator: '-color-error-border'
(329,16): run-time error CSS1039: Token not allowed after unary operator: '-font-light-color'
(375,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(379,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray'
(481,16): run-time error CSS1039: Token not allowed after unary operator: '-font-light-color'
(489,22): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-light'
(493,22): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(497,22): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary'
 */
html {
   box-sizing: border-box;
   font-size: 16px;
}

*,
*:before,
*:after {
   box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
   margin: 0;
   padding: 0;
   font-weight: normal;
}

a {
   text-decoration: none;
   color: inherit;
}

img {
   max-width: 100%;
   height: auto;
}

:root {
   --font-color: #222220;
   --font-light-color: #fefefe;
   --color-primary: #bcd022;
   --color-accent: #ced8db;
   --color-warning: #faeec8;
   --color-warning-border: #f8d879;
   --color-error: #f8d7da;
   --color-error-border: #f8b2b9;
   --background--light: #ffffff;
   --color-gray: #f2f4f5;
   --font-family: 'Space Grotesk', sans-serif;
   --font-family-secondary: 'Poppins', sans-serif;
   --font-weight: 500;
   --font-weight-light: 300;
   --font-weight-bold: 700;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
   color: var(--font-color);
   font-family: var(--font-family);
   font-weight: var(--font-weight);
}

h1 {
   font-size: 2.3125rem;
   line-height: 1.3;
}

.btn {
   position: relative;
   display: inline-block;
   padding: 0.9rem 2rem;
   min-width: 5rem;
   background-color: var(--background--light);
   transition: all 0.2s;
   border: none;
   border-radius: 0;
   outline: none;
   cursor: pointer;
   font-size: 1.125rem;
   font-family: var(--font-family);
   font-weight: var(--font-weight);
   color: var(--font-color);
}

.btn:hover {
   filter: invert(10%) saturate(120%);
}

.btn:active {
   transform: translateY(1px);
}

.btn[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
}

.btn > span.content {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
}

.btn-primary {
   background-color: var(--color-primary);
   color: var(--font-light-color);
}

.btn-block {
   display: block;
   width: 100%;
   padding: 1.4375rem 2rem;
}

.form-group {
   margin: 1rem 0;
   display: flex;
   flex-direction: column;
   font-family: var(--font-family-secondary);
   font-weight: var(--font-weight-light);
}

.form-group label,
.form-group .label {
   font-size: 1rem;
   margin-bottom: 0.5rem;
}

.form-group input,
.form-group .input {
   padding: 0.75em 1rem;
   border: 1px solid var(--color-accent);
   border-radius: 1px;
   outline: none;
   font-size: 1.125rem;
   width: 100%;
   background-color: var(--background--light);
}

.form-group input:focus:not(:read-only),
.form-group .input:focus:not(.read-only) {
   border-color: var(--color-primary);
}

.form-group input:read-only,
.form-group .input.read-only {
   opacity: 0.9;
   cursor: default;
}

.password-input {
   position: relative;
}

.password-input .toggle-password {
   position: absolute;
   top: 50%;
   right: 1rem;
   transform: translateY(-50%);
   cursor: pointer;
   opacity: 0.4;
   transition: opacity 0.2s;
}

.password-input .toggle-password:hover {
   opacity: 1;
}

.alert {
   display: block;
   width: 100%;
   padding: 0.5rem 1rem;
   margin: 1rem 0;
   border: 1px solid transparent;
   border-radius: 1px;
   font-size: 0.8125rem;
   font-family: var(--font-family-secondary);
}

.alert-error {
   background-color: var(--color-error);
   border-color: var(--color-error-border);
}

.alert-warning {
   background-color: var(--color-warning);
   border-color: var(--color-warning-border);
}

.loading-spinner {
   display: inline-block;
   width: 2rem;
   height: 2rem;
   border: 0.2rem solid var(--background--light);
   border-radius: 50%;
   border-top-color: transparent;
   animation: spin 1s linear infinite;
   margin: -0.4rem 0.5rem;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

input.is-invalid {
   border-color: var(--color-error-border) !important;
}

.validation {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(calc(50% - 1.5rem), 1fr));
   grid-column-gap: 1.5rem;
   grid-row-gap: 0.5rem;
}

.validation > div {
   display: flex;
   align-items: center;
}

.validation .is-invalid .icon {
   filter: saturate(5%) brightness(80%);
}

.icon {
   display: block;
   width: 1rem;
   height: 1rem;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   transition: filter 0.2s ease-in-out, background-image 0.2s ease-in-out;
}

.icon-inline-left {
   display: inline-block;
   margin-right: 0.75rem;
}

.icon-inline-right {
   display: inline-block;
   margin-left: 0.75rem;
}

.icon-mail {
   background-image: url(../Icons/mail.svg);
}

.icon-phone {
   background-image: url(../Icons/phone.svg);
}

.icon-facebook {
   background-image: url(../Icons/facebook.svg);
}

.icon-linkedin {
   background-image: url(../Icons/linkedin.svg);
}

.icon-arrow-right {
   background-image: url(../Icons/arrow-right.svg);
}

.icon-arrow-left {
   background-image: url(../Icons/arrow-right.svg);
   transform: rotate(180deg);
   filter: brightness(0);
}

.icon-arrow-top-right {
   background-image: url(../Icons/arrow-top-right.svg);
}

.icon-eye {
   background-image: url(../Icons/eye.svg);
}

.icon-checkmark {
   background-image: url(../Icons/check.svg);
}

.icon-cross {
    background-image: url(../Icons/cross.svg);
}
.login__main {
   display: grid;
   grid-template-columns: 50fr 55fr;
   gap: 2rem;
   min-height: 100vh;
   padding: 3rem;
}

@media screen and (max-width: 1024px) {
   .login__main {
      grid-template-columns: 1fr;
      padding: 1rem;
   }
}

.login__content {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
   grid-gap: 1rem;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   width: 100%;
   max-width: 30rem;
}

.login__info {
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 24.59%, #000 100%),
      url(../Images/login-bg.jpg),
      lightgray -0.396px -37px / 150.597% 103.987% no-repeat;
   background-position: left center;
   background-size: cover;
   color: var(--font-light-color);
   padding: 3rem;
   height: 100%;
   min-height: 80vmin;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr auto;
   position: relative;
}

@media screen and (max-width: 1440px) {
   .login__info {
      background-position: 15% center;
   }
}

@media screen and (max-width: 1024px) {
   .login__info {
      background-position: left center;
   }
}

@media screen and (max-width: 768px) {
   .login__info {
      display: none;
   }
}

.squares {
   position: absolute;
   top: 3rem;
   left: 0;
   display: grid;
   grid: repeat(2, 1fr) / repeat(2, 1fr);
}

.square {
   width: 3.75rem;
   height: 3.75rem;
}

.square:nth-child(2n + 1) {
   grid-column: 2 / 3;
}

.square-primary {
   background: var(--color-primary);
}

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

.social-links__container {
   display: grid;
   grid-template: repeat(2, 1fr) / repeat(2, 1fr);
   grid-auto-flow: column;
   gap: 1rem;
   max-width: 30rem;
}

.social-links__container a {
   white-space: nowrap;
   display: flex;
   align-items: center;
}

@media screen and (min-width: 1440px) {
   .social-links__container {
      grid-template: repeat(2, 1fr) / repeat(4, 1fr);
   }
}

/** Utility classes for flexbox layout **/
.row {
   display: flex !important;
   flex-wrap: wrap;
   flex-direction: row;
}

.items-start {
   align-items: flex-start;
}

.items-center {
   align-items: center;
}

.justify-center {
   justify-content: center;
}

.justify-end {
   justify-content: flex-end;
}

/** Utility classes for margin and padding **/
.mb-1 {
   margin-bottom: 1rem;
}

.mb-2 {
   margin-bottom: 2rem;
}

.mb-3 {
   margin-bottom: 3rem;
}

.mb-5 {
   margin-bottom: 5rem;
}

.mt-1 {
   margin-top: 1rem;
}

.mt-2 {
   margin-top: 2rem;
}

.my-1 {
   margin: 1rem 0;
}

.my-5 {
   margin: 5rem 0;
}

/** Display classes **/
.d-block {
   display: block;
}

.d-none {
   display: none;
}

/** Text classes **/
.text-center {
    text-align: center;
}

.text-right {
   text-align: right;
}

.text-underline {
    text-decoration: underline;
}

.font-light {
   color: var(--font-light-color);
}

.font-size-sm {
   font-size: 0.8125rem;
}

.font-weight-light {
   font-weight: var(--font-weight-light);
}

.text-bold {
   font-weight: var(--font-weight-bold);
}

.font-secondary {
   font-family: var(--font-family-secondary);
}