.ka-settings { width: 100%; height: 100%; display: flex; margin: 1rem 0; align-items: center; flex-direction: column; justify-content: center; .ka-title { width: 100%; } .ka-desc { color: var(--description-color); } button { margin-top: 1rem; } .setting-box { width: 100%; display: flex; margin: 2rem 0; flex-direction: column; input { background-color: var(--nav-color); } .box-row { width: 100%; display: flex; margin: 1rem 0; flex-direction: row; justify-content: space-between; @media (max-width: 640px) { margin: 0; flex-direction: column; } } .box-col { height: 100%; display: flex; margin: 1rem 0; min-width: 350px; flex-direction: column; @media (max-width: 640px) { min-width: 100%; } } .form { display: flex; min-width: 380px; } .line { margin-bottom: 15px; } .checkbox { display: flex; align-items: center; flex-direction: row; span { margin-left: 5px; } } } } #pw-change { input[type="text"], input[type="password"] { width: 100%; border-radius: 25px 0 0 25px; } .input-pass { height: 40; display: flex; align-items: center; margin-bottom: 10px; flex-direction: row; justify-content: center; } .pw-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0 25px 25px 0; background-color: var(--nav-color); } }