@media screen and (max-width: 1910px) {
    section.prices.show > div.content {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        overflow: auto;
    }
}

@media screen and (min-width: 1910) {
    section.prices.show > div.content {
        grid-template-columns: 450px 1fr;
        grid-template-rows: auto;

        .bottom {
            grid-column: 1 / 3;
            grid-row: 2 / 3;
        }
    }
}

.page.project {

    #projectForm {
        display: grid;
        grid-template-columns: repeat(2, 250px);
        gap: 1em;
        grid-template-areas: 
            "number ."
            "project project"
            "city city"
            "contractor contractor"
            "pl1 pl2"
            "fm1 fm2"
            "start .";

        .container.number { grid-area: number; }
        .container.project { grid-area: project; }
        .container.city { grid-area: city; }
        .container.contractor { grid-area: contractor; }
        .container.projectLeader1 { grid-area: pl1; }
        .container.projectLeader2 { grid-area: pl2; }
        .container.foreman1 { grid-area: fm1; }
        .container.foreman2 { grid-area: fm2; }
        .container.start { grid-area: start; }
    }

    section.project {

        .container {
            position: relative;
        }

        .container label {
            display: inline-block;
            margin-bottom: 4px;            
        }

        .container .input.switch {
            display: grid;
            grid-template-columns: 80px 120px;
            grid-template-rows: 1fr;
        }        

        .container .input.switch.disabled > input {
            user-select: none;
            pointer-events: none;
            background: gainsboro;
        }

        .input {
            position: relative;
            display: block;
            width: 100%;
            max-width: 90vw;

            & input {
                width: 100%;
                height: 40px;
                border-radius: 10px;
                border: 1px solid var(--main-bg-color);
                box-sizing: border-box;
                padding-left: 12px;
                font-size: 17px; 
            }

            & input[readonly] {
                cursor: text;
                background: #fff;
            }   
            
            & input[disabled] {
                background: gainsboro;
            }

            & input.success {
                border: 2px solid darkseagreen;
                background: darkseagreen;
                color: white;
            }            

            .icon {
                position: absolute;
                right: 0px;
                width: 40px;
                height: 100%;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                background: lightgray;
                box-sizing: border-box;
                border: 1px solid gray;
                color: darkslategray;
                top: 0px;
                display: grid;
                place-content: center;
                cursor: pointer;
            }   
            .icon.disabled {
                pointer-events: none;
                color: darkgray;
            }
            
            v-icon {
                width: 20px;
            }
        }

        input.invalid {
            border: 2px solid red;
        }

        .footer {
            display: grid;
        }

        .icon-button {
            width: 200px;
            height: 40px;
            justify-self: flex-end;
            align-self: center;

            & button {
                background: lightsteelblue;
                color: black;
            }
        }        
    }

    section.structure {

        .content {
            display: grid;
            padding: 32px;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            grid-template-rows: max-content;
            grid-gap: 24px;
            overflow: auto;
            max-height: calc(100vh - 300px);


            & .statistics {
                display: grid;
                grid-template-rows: min-content;
                row-gap: 32px;
                max-height: 200px;
            }

            .total {
                text-align: right;
                padding-right: 8px;
            }

            & strong.text-left {
                float: left;
                padding-left: 8px;
            }
        }

        .footer {
            display: grid;
            grid-template-columns: 1fr 32px;
            align-items: center;
        }

        .footer .structure-submit {
            text-align: center;
            cursor: pointer;
        }

        .footer .structure-submit v-icon {
            fill: var(--meco-green);
        }

        .footer v-icon {
            cursor: inherit;
        }

        .footer #excelSpinner {
            animation: loading 3s linear infinite;
        }
    }

    section.prices {

        .content {
            display: grid;
            column-gap: 24px;
            row-gap: 12px;

            &>div {
                padding: 16px;
            }

            .bottom {
                overflow: auto;
            }

            #tableTotals {
                width: 400px;
            }

            #tableBrickCount {
                width: 700px;
            }

            .total {
                text-align: right;
                padding-right: 8px;
            }

            & strong.text-left {
                float: left;
                padding-left: 8px;
            }

        }
    }

    section.tasks, section.contracts {
        .content {
            margin-inline: 64px;
            margin-block: 32px;
        }        
        .tables {
            display: grid;
            grid-gap: 24px;
            margin-top: 24px;
        }

        th:first-child, td:first-child {
            width: 300px;
        }
        
        th:last-child, td:last-child {
            width: 40px;
        }                


        .footer {
            display: grid;
            grid-template-columns: 200px 1fr 32px;
            align-items: center;

            .add {
                display: flex;
                align-items: center;
                cursor: pointer;
            }

            .add v-icon {
                margin-right: 10px;
                cursor: inherit;
            }

            .add label {
                cursor: inherit;
            }

            .structure-submit {
                text-align: center;
                cursor: pointer;
            }

            .structure-submit v-icon {
                fill: var(--meco-green);
            }

            & v-icon {
                cursor: inherit;
            }
        }
    }

    section.subagreement .left {
        max-width: 600px;
    }

    .calculations {
        padding-inline: 32px;
        padding-block: 24px;
    }

    .calculations-content {
        max-width: calc(100vw - var(--menu-width) - 100px);
        overflow-x: auto;
        max-height: calc(100vh - 300px);
    }
}

@keyframes loading {
    0% {
        transform: rotate(0);
    } 100% {
        transform: rotate(360deg);
    }
}