.settings { background: #f1f1f1; height: 100%; min-height: 100vh; font-family: "LabGrotesque", sans-serif; .infoPersonal__title { color: #000000; font-weight: 700; font-size: 22px; line-height: 32px; } &__page { max-width: 1160px !important; margin-top: 23px; } &__title { color: #5b6871; font-size: 20px; line-height: 24px; } &__label { font-size: 15px; line-height: 18px; color: #000000; margin: 15px 0 10px 0; } &__input { display: flex; flex-direction: column; row-gap: 5px; input { padding: 5px 10px; background: #eff2f7; border-radius: 8px; height: 35px; border: none; font-size: 15px; outline: none; } .error { color: red; font-size: 12px; } .warning { border: 1px solid red; } } .oldPassword { margin-bottom: 25px; } &__agreement { font-size: 12px; line-height: 18px; color: #000000; font-weight: 300; } &__buttons { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; gap: 20px; margin: 30px 0 20px; &-cancel, &-save { min-width: 151px; height: 40px; font-size: 14px; line-height: 32px; } &-cancel { color: #6f6f6f; background: white; border: 0.5px solid #8dc63f; &:hover { background-color: white; } } } @media (max-width: 1200px) { &__input { width: 100%; } &__buttons { &-cancel, &-save { width: 120px; } } } @media (max-width: 800px) { &__input { width: 95%; } &__buttons { margin: 15px 0 14px 0; width: 100%; flex-direction: column-reverse; align-items: center; gap: 0px; &-save { margin-bottom: 15px; } } } } .checkbox { margin: 0px 0 0 20px; } .partner-settings { margin-bottom: 110px; &__body { display: flex; flex-direction: row; justify-content: space-around; margin-top: 27px; } &__report, &__login { width: 500px; background: #ffffff; border-radius: 12px; padding: 30px 60px; } &__logo { display: flex; align-items: center; justify-content: space-between; div { display: flex; align-items: center; label input { display: none; } label span { cursor: pointer; height: 24px; width: 24px; border: none; display: inline-block; position: relative; background: #eff1f3; border-radius: 8px; padding: 3px; } [type="checkbox"]:checked + span:before { content: "\2714"; position: absolute; top: -5px; left: 2px; font-size: 23px; color: #1c1243; font-weight: 300; } } } &__label { display: flex; align-items: center; } @media (max-width: 1200px) { margin-bottom: 15px; &__logo { flex-direction: column; align-items: flex-start; } &__body { margin-bottom: 100px; } &__report, &__login { width: 45%; height: auto; } &__label { flex-direction: row; } } @media (max-width: 950px) { &__body { flex-direction: column; margin-bottom: 20px; align-items: center; } &__report, &__login { width: 60%; } &__report { margin-top: 55px; margin-bottom: 55px; } } @media (max-width: 570px) { &__body { flex-direction: column; margin-bottom: 20px; align-items: center; } &__report, &__login { width: 100%; height: 100%; padding: 20px 30px; } &__report { margin-top: 55px; margin-bottom: 10px; } &__logo { flex-direction: column; align-items: flex-start; } &__label { flex-direction: row; } } }