.page-container {
    font-family: 'Roboto', sans-serif !important;
    font-style: normal;
    font-weight: 400;
    width: 100vw;
    max-width: 100vw;
    padding: 0 5.21vw;
    position: relative;
}

body {
    width: 100vw;
    overflow-x: hidden;
    background: linear-gradient(#FEFFFB, #F5F5ED, #F4F4EEFA, #E6F1DD);
    position: relative;
    height: 100vh;
    background-attachment: fixed;
    overflow-y: auto;
    top: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    text-decoration: none !important;
    color: black;
    padding: 0;
}

button {
    background: none;
    width: fit-content;
    height: fit-content;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
}

.menu {
    position: relative;
    width: 89.58vw;
    height: 4.17vw;
    z-index: 1000;
    justify-content: space-between;
    top: 1.56vw;
    background: white;
    box-shadow: 0 0.21vw 2.60vw 0 #00000026;
    border-radius: 0.73vw;
    display: flex;
    align-items: center;
    padding: 0 2.60vw;
    flex-wrap: nowrap;

}

.logo-container {
    font-size: 1.17vw;
    color: black;
    display: flex;
    flex-wrap: nowrap;
    pointer-events: none;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    column-gap: 0.83vw;
}

.menu-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    column-gap: 2.08vw;
    font-size: 0.94vw;
}

.menu-item {
    padding: 0.26vw 0;
    cursor: pointer;
}

.active-item {
    border-bottom: #537B30 solid 0.05vw;
    padding: 0.26vw 0;
}

.logout-btn-container {
    width: fit-content;
    font-size: 0.88vw;
    color: #537B30;
    display: flex;
    flex-wrap: nowrap;
    column-gap: 0.5vw;
    position: absolute;
    right: 1vw;
    top: 1vw;
    align-items: center;
    line-height: 1;
    border: 0.1vw solid #537B30;
    border-radius: 1vw;
    padding: 0.5vw;
}

.scroll-area {
    overflow-y: auto;
    overflow-x: hidden;
    row-gap: 2.5vw;
    width: 100%;
    align-content: baseline;
    height: fit-content;
    position: relative;
    max-height: 37.08vw;
    flex-wrap: wrap;
    display: flex;
    padding: 0.1vw 1vw 0.1vw 0.1vw;
}

.main {
    width: 89.58vw;
    max-width: 89.58vw;
    padding: 0 0 2.60vw;
    display: flex;
    justify-content: center;
    margin-top: 3.6vw;
}

.div[class$="-indicatorContainer"] {
    background: #537B30;
}

.back-to-site-btn {
    width: 0.7vw;
    margin-bottom: 0.2vw;
}


::-webkit-scrollbar {
    width: 0.15vw;
    height: 0.3vw;
    border-radius: 0.24vw;
    background: #E2E4EF;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 0.24vw;
    border: 0.1vw white solid;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #9FAF91;
    border-radius: 0.24vw;
}

.primary-btn {
    background: linear-gradient(0deg, #7FB94C 0%, #DEECC1 100%), linear-gradient(0deg, #DBEABD, #DBEABD);
    height: 2.73vw;
    padding: 0 1.4vw;
    cursor: pointer;
    border-radius: 9.27vw;
    font-weight: 500;
    color: rgba(71, 72, 79, 1);
    font-size: 0.88vw;
    display: flex;
    align-items: center;
    transition: 100ms;
}

.primary-btn:hover, .primary-btn:active {
    background: linear-gradient(0deg, #629039 0%, #C3E57B 100%);
    border: #7FB94C 0.05vw solid;
    transition: 200ms;
    padding: 0 1.75vw;
}


.secondary-btn {
    position: absolute;
    background: white;
    height: 2.83vw;
    padding: 0 1vw;
    border-radius: 9.27vw !important;
    color: #537B30;
    font-weight: 500;
    font-size: 0.88vw;
    transition: 100ms;
    width: 13.70vw;
    background-clip: padding-box;
    z-index: 2;
    border: solid 0.1vw transparent;
}

.secondary-btn-container, .primary-btn-container {
    height: 2.83vw;
    position: relative;
}

.primary-btn-container {
    width: 18vw;
    display: flex;
    justify-content: center;
}

.secondary-btn:before {
    z-index: 1;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9.27vw;
    left: 50%;
    transform: translateX(-50%);
    min-width: 13.7833vw;
    padding: 0.1vw;
    background: linear-gradient(180deg, #DBEABD 0%, #81BA4F 100%);
    -webkit-mask: linear-gradient(180deg, #DBEABD 0%, #81BA4F 100%) content-box, linear-gradient(180deg, #DBEABD 0%, #81BA4F 100%);
    -webkit-mask-composite: xor;
    transition: 200ms;
}

.secondary-btn:hover:before, .secondary-btn:active:before {
    min-width: 14.4833vw;
    transition: 200ms;
}

.little-btn {
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 0.88vw;
    font-weight: 500;
    color: #537B30;
    text-decoration: underline !important;
}

.edit-feed-btn {
    width: fit-content;
    height: fit-content;
    border: none;
    box-shadow: none;
}

.edit-feed-btn svg {
    width: 1.16vw;
    height: 1.18vw;
}

.edit-feed-btn rect {
    padding: 0;
    width: 94%;
    height: 94%;
}

.edit-feed-btn:hover rect {
    fill: #F0F8E1;
}

.filter-feed-container {
    position: relative;
    width: 12vw;
    margin-bottom: 1vw;
}

.filter-feed-container svg {
    position: absolute;
    right: 0.5vw;
    width: 0.78vw;
    height: 0.78vw;
    top: 0.45vw;
}

.filter-feed-container input {
    width: 100%;
    box-shadow: none;
    border-radius: 0.63vw;
    padding: 0.3vw 1vw 0.3vw 0.5vw;
    font-size: 0.78vw;
    border: 0.05vw solid #537B30;
    outline: none;
}

.home-btn-container {
    position: relative;
    display: contents;
    right: 1vw;
    top: 1vw;
    width: fit-content;
}


.home-btn-container svg {
    width: 2vw;
    height: 2vw;
}

.login-page-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5vw;
    height: 90vh;
    align-content: center;
    align-items: center;
}

.image-container, .image-container img {
    width: 27.69vw;
    height: 19.63vw;
}

.login-page-container .label {
    font-size: 1.56vw;
    font-weight: 500;
    color: #47484F;
    width: 100%;
    text-align: center;
}

.login-btn {
    padding: 0 4vw;
    justify-content: center;
}

.login-btn:hover, .login-btn:active {
    padding: 0 4.5vw;
}

.manual svg {
    width: 0.8vw;
    height: 0.8vw;
}

.manual {
    position: absolute;
    top: 6.2vw;
    right: 5.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #537B30;
    font-size: 0.88vw;
    column-gap: 0.4vw;
}

.manual:hover {
    text-decoration: underline !important;
}

input:disabled {
    background-color: white !important;
}

.del-button {
    width: 1.2vw;
    height: 1.2vw;
}

.del-button svg {
    width: 1.17vw;
    padding: 0;
    height: 1.17vw;
}

.del-button rect:hover {
    fill: #faeeee;
}

.del-button rect {
    width: 93%;
    height: 93%;
    max-width: 93%;
    padding: 0;
    max-height: 93%;
}

#user-agreement-page .title {
    width: 100%;
    text-align: center;
    font-size: 1.3vw;
    font-weight: 500;
}

.logo-icon{
    width: 1.7vw;
}

#user-agreement-page {
    padding: 4vw 26vw;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 2.5vw;
}

.dev-block{
    margin-top: 12vw;
    row-gap: 1vw;
    width: 100%;
    font-weight: 500;
    font-size: 2vw;
    display: flex;
    flex-wrap: wrap;
}
.dev-block div{
    width: 100%;
    text-align: center;
}

#user-agreement-page .checkbox-container {
    width: 100%;
    text-align: left;
}

#user-agreement-page .text {
    font-size: 0.9vw;
}

#user-agreement-page label {
    font-size: 0.9vw;
    font-weight: 500;
}

#user-agreement-page .text br {
    height: 1vw !important;
}

#user-agreement-page .custom-checkbox.invalid + label::before {
    border: 0.15vw solid #d18080;
}

span.app-name{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9vw;
    font-family: 'Roboto', sans-serif;
}