/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./app/components/TextInput/style.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.TextInput {
    margin-bottom: 0.5rem
}
.TextInput label {
    margin-bottom: 0.25rem;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
}
.TextInput input {
    display: block;
    height: 2.5rem;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(20 24 66 / var(--tw-text-opacity, 1))
}
.TextInput input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px
}
.TextInput .inputIcon {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    cursor: pointer;
    align-items: center
}
.TextInput .passwordIcon {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    cursor: pointer;
    align-items: center;
    padding-right: 0.75rem;
    --tw-text-opacity: 1;
    color: rgb(20 24 66 / var(--tw-text-opacity, 1))
}
.TextInput .error-message {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1))
}
.TextInput.input-gray input {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./app/components/Button/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Button {
    display: flex;
    justify-content: center;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.Button:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px
}
.Button--sm {
    border-radius: 0.375rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem
}
.Button--md {
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 1rem;
    line-height: 1.5rem
}
.Button--lg {
    border-radius: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.75rem
}
.Button--primary {
    --tw-bg-opacity: 1;
    background-color: rgb(3 135 80 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(3 135 80 / var(--tw-bg-opacity, 1))
}
.Button--primary:focus-visible {
    outline-color: #038750
}
.Button--secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(20 24 66 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(20 24 66 / var(--tw-bg-opacity, 1))
}
.Button--secondary:focus-visible {
    outline-color: #141842
}
.Button--danger {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))
}
.Button--danger:focus-visible {
    outline-color: #ef4444
}
.Button--success {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--success:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
}
.Button--success:focus-visible {
    outline-color: #22c55e
}
.Button--info {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--info:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
}
.Button--info:focus-visible {
    outline-color: #3b82f6
}
.Button--default {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--default:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1))
}
.Button--default:focus-visible {
    outline-color: #6b7280
}
.Button--transparent {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--transparent:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.Button--outline {
    border-width: 2px;
    background-color: transparent
}
.Button--outline--primary {
    --tw-border-opacity: 1;
    border-color: rgb(3 135 80 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(3 135 80 / var(--tw-text-opacity, 1))
}
.Button--outline--primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(3 135 80 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--outline--secondary {
    --tw-border-opacity: 1;
    border-color: rgb(20 24 66 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(20 24 66 / var(--tw-text-opacity, 1))
}
.Button--outline--secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(20 24 66 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--outline--danger {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1))
}
.Button--outline--danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--outline--success {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1))
}
.Button--outline--success:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--outline--info {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1))
}
.Button--outline--info:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.Button--outline--default {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
}
.Button--outline--default:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./app/login/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Login {
    display: flex;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center
}
.Login .container {
    display: flex;
    height: auto;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    border-width: 8px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem
}
@media (min-width: 640px) {
    .Login .container {
        width: 94%
    }
}
@media (min-width: 768px) {
    .Login .container {
        width: 80%
    }
}
@media (min-width: 1024px) {
    .Login .container {
        width: 75%
    }
}
@media (min-width: 1280px) {
    .Login .container {
        width: 50%
    }
}
.Login .container .left__content {
    width: 0px
}
@media (min-width: 1024px) {
    .Login .container .left__content {
        width: 50%
    }
}
.Login .container .left__content img {
    height: 100%;
    width: 100%;
    object-fit: fill
}
.Login .container .right__content {
    width: 100%
}
@media (min-width: 1024px) {
    .Login .container .right__content {
        width: 50%
    }
}
@media (min-width: 1280px) {
    .Login .container .right__content {
        width: 40%
    }
}
.Login .container .right__content .title h1 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
@media (min-width: 640px) {
    .Login .container .right__content .title h1 {
        font-size: 1.875rem;
        line-height: 2.25rem
    }
}
.Login .container .right__content .title .welcome__message {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1))
}
@media (min-width: 640px) {
    .Login .container .right__content .title .welcome__message {
        font-size: 1rem;
        line-height: 1.5rem
    }
}
.Login .container .right__content .login__form {
    width: 100%
}
.Login .container .right__content .login__form > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}
.Login .container .right__content .login__form {
    padding-top: 1.5rem
}
@media (min-width: 640px) {
    .Login .container .right__content .login__form {
        margin-left: auto;
        margin-right: auto;
        width: 100%
    }
}
.Login .container .right__content .login__form .TextInput input {
    height: 3rem
}