@media (min-width: 961px) and (max-width: 1024px) {

}
@media (max-width:960px) {
    .page-main .page-container {
        flex-direction: column;
        justify-content: flex-start;
    }

    .page-main .page-container .main-container {
        order: 1;
    }
    .keys-container {
        margin-left: 0;
    }
    .keys-list-container {
        width: 100%;
    }
    .page-container {
        padding-left: 60px;
        padding-right: 60px;
    }
}
@media (max-width: 768px) {
    .page-main .page-container {
        gap: 40px;
    }
    .page-container {
        padding-left: 50px;
        padding-right: 50px;
    }
    .current-key {
        font-size: 20px;
        line-height: 30px;
    }
    .current-key .material-symbols-outlined {
        font-size: 22px;
        line-height: 19px;
        width: 30px;
        height: 30px;
    }
    .page-main {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .page-main h3 {
        margin-bottom: 24px;
    }
    .sensor-list .material-symbols-outlined {
        margin-bottom: 22px;
    }
}
@media (max-width: 520px) {
    .page-container {
        padding-left: 35px;
        padding-right: 35px;
    }
}
@media (max-width: 480px) {

    input[type=text] {
        font-size: 15px;
    }
    .page-container {
        min-width: 320px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .page-header {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .current-key {
        font-size: 15px;
        justify-content: center;
    }
    .current-key .key-num {
        display: block;
    }
    .page-main h2 {
        margin-bottom: 20px;
        font-size: 30px;
        text-align: center;
    }
    .sensors-list  {
        font-size: 15px;
    }
    .add-key-form {
        margin-bottom: 40px;
        text-align: center;
    }
    .keys-list {
        margin-bottom: 40px;
    }
    .keys-list li {
        font-size: 15px;
        padding: 12px 10px;
    }
    .key-list-btn {
        width: 32px;
        height: 32px;
        font-size: 20px;
        line-height: 32px;
        z-index: 10;
    }
    .page-main h3 {
        margin-bottom: 20px;
        text-align: center;
    }
    .page-footer {
        text-align: center;
        padding-top: 7px;
        padding-bottom: 7px;
    }
}