#title, .title {
    text-align: center;
    margin-top: 2rem;
    font-size: 2rem;
}

#shop-list, #company-list {
    display: flex;
    padding: 2rem 0;
    justify-content: space-between;
    flex-wrap: wrap;
}

.max-width-unset {
    max-width: unset !important;
}

.shop-list {
    display: flex;
    padding: 2rem 0;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 0;
}

#successful-create-new-shop, #successful-update-shop, #successful-delete-shop, #successful-update-shop-reference {
    position: relative;
    z-index: 3000;
}

#successful-update-shop-reference {
    position: relative;
    z-index: 3000;
}

.shop-detail-button, .shop-kassa-button {
    display: inline-block;
    width: 50%;
    display: flex;
}

#add-new-shop-template, #update-shop-template, #update-shop-reference-template, #delete-shop-template, #task-list-window, #exceeding-limits-your-plan {
    z-index: 2000;
    position: relative;
}

#close-add-new-shop-window-block, #close-update-shop-window-block, #close-update-shop-reference-window-block {
    display: flex;
    justify-content: end;
    margin-bottom: 1rem;
}

#close-add-new-shop-window-button, #close-update-shop-window-button, #close-update-shop-reference-button {
    cursor: pointer;
}

#reference-editor {
    width: 100%;
    height: 90%;
}

#reference-editor-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

#shop-info-modal-window {
    max-width: 100vw;
    margin: 0 auto;
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding-top: 2rem;
    position: relative;
    border-radius: 1rem;
}

#close-shop-info-modal-window-button {
    cursor: pointer;
    position: absolute;
    right: 2rem;
    width: 2rem;
    height: 2rem;
    top: 1rem;
}

.padding-top-1 {
    padding-top: 1rem;
}

.padding-h-2 {
    padding-right: 2rem;
    padding-left: 2rem;
}

.cursor-pointer {
    cursor: pointer;
}

.margin-h-2 {
    margin-right: 2rem;
    margin-left: 2rem;
}

.row-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.margin-bottom-2_5 {
    margin-bottom: 2.5rem;
}

.bg-F3F4F6 {
    background-color: #F3F4F6;
}

.margin-t-1 {
    margin-top: 1rem;
}

#shop-name {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: .5rem;
}

#shop-address {
    font-size: 1rem;
}

.display-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-space-between {
    justify-content: space-between;
}

.padding-0 {
    padding: 0;
}

.padding-b-1_5 {
    padding-bottom: 1.5rem;
}

.password {
    filter: blur(3px);
}

.password:hover {
    filter: unset;
}

.shop-item {
    width: 30%;
    margin-bottom: 4rem;
    transition: transform 0.3s ease-in-out;
}

.shop-item:hover {
    transform: scale(1.05);
}

.company-item {
    width: 30%;
    border-radius: 0.5rem;
    background-color: white;
    padding: 2rem;
    cursor: pointer;
    margin-bottom: 2rem;
    transition: transform 0.3s ease-in-out;
}

.company-item:hover {
    transform: scale(1.05);
}

.shop-item-plug, .company-item-plug {
    width: 30%;
    height: 0;
}

.shop-option-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: rgb(107, 114, 128)
}

.shop-main-option-icon {
    width: 1.5rem;
    height: 1.5rem;
}

#main-content-header, .main-content-header {
    position: relative;
}

#add-new-shop {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

#update-shop, #delete-shop {
    display: flex;
    align-items: center;
}

#update-shop, #update-shop-reference {
    margin-right: 1rem;
}

#delete-shop {
    background-color: #ba1200;
}

#delete-shop:hover {
    background-color: #ff230a;
}

#add-new-shop-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    fill: white;
}

.choose-shop {
    z-index: 10000;
    position: absolute;
}

#add-shop-step-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 80vh;
    overflow: scroll;
}

#goods-catalog {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.good-card {
    width: 100%;
    margin-bottom: 1rem;
}

#modal-windows-template {
    position: relative;
}

#add-new-shop-template-wrapper {
    width: 40%;
}

#shop-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
}

#shop-detail-header-buttons {
    display: flex;
    align-items: center;
}

.shop-item {
    max-width: 500px;
}

.completed {
    text-decoration: line-through;
}

#task-list-window-content {
    width: 60vw;
}

#task-content {
    border: 1px solid gray;
    border-radius: 1rem;
    width: 80%;
    padding: 0.25rem 0.5rem;
}

#flip-your-phone-over-window {
    display: none;
}



#update-shop-reference-template h1 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

#update-shop-reference-template h2 {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

#update-shop-reference-template h3 {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}

#update-shop-reference-template h4 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-left: 1rem;
}

#update-shop-reference-template h5 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-left: 1rem;
}

#update-shop-reference-template h6 {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 1rem;
}

#update-shop-reference-template ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

#update-shop-reference-template ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

#update-shop-reference-template a {
    color: blue;
    cursor: pointer;
}

.ck-body-wrapper {
    z-index: 10000;
    position: relative;
}


#personal-token {
    margin: 1rem 0.5rem;
}

#notifications {
    z-index: 1000;
    position: relative;
}

#empty-staff-description {
    max-width: 55%;
    margin: 0 auto;
    margin-top: 1.5rem;
}

#personal-token-block {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 700px) {
    body {
        background-color: #F3F4F6;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1rem;
    }

    #task-list-window-content {
        width: 100%;
    }

    #task-content {
        border: 1px solid gray;
        border-radius: 0.5rem;
        width: 80%;
        padding: 0.25rem 0.5rem;
        margin-right: 1rem;
    }

    #add-new-shop {
        display: flex;
        align-items: center;
        position: absolute;
        top: 200%;
        right: 0;
        transform: translate(0, -50%);
    }

    #main-content-header {
        margin-bottom: 3rem;
    }

    #add-new-shop-template-wrapper {
        width: 100%;
    }

    #shop-info-modal-window {
        margin-top: 2rem;
    }

    #shop-detail-header {
        padding-right: 1rem;
        padding-left: 1rem;
        margin-bottom: 2rem;
    }

    #shop-detail-header-buttons {
        flex-direction: column;
        align-items: flex-end;
    }

    #shop-name {
        font-size: 2rem;
    }

    #update-shop, #update-shop-reference {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    #update-shop-reference {
        margin-top: 1rem;
    }

    .shop-item {
        width: 100%;
        margin-bottom: 2rem;
    }

    #current-balance, #today-income, #today-spending, #today-profit, #today-cash, #today-terminal,
    #today-account, #today-card2card, #total-income, #total-spending, #total-profit, #total-cash,
    #total-terminal, #total-account, #total-card2card {
        font-size: 1.25rem;
    }

    .company-item {
        width: 100%;
    }

    #empty-staff-description {
        max-width: 100%;
    }

    #personal-token-block {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    #flip-your-phone-over-window {
        display: block;
        margin-top: 1rem;
    }
}


@media (min-width: 700px) and (max-width: 900px) {
    #shop-list, .shop-list {
        flex-direction: column;
        align-items: center;
    }

    .shop-item {
        width: 70%;
    }

    #add-new-shop-template-wrapper {
        width: 50vw;
        max-width: unset;
    }

    #task-list-window-content {
        width: 90vw;
    }

    #shop-detail-header-buttons {
        flex-direction: column;
        align-items: flex-end;
    }

    #update-shop, #update-shop-reference {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    #update-shop-reference {
        margin-top: 1rem;
    }

    .company-item {
        width: 45%;
    }

    #empty-staff-description {
        max-width: 80%;
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    #shop-list {
        align-items: center;
    }

    .shop-item {
        width: 45%;
    }

    #task-list-window-content {
        width: 85vw;
    }

    .company-item {
        width: 45%;
    }

    #empty-staff-description {
        max-width: 80%;
    }
}