.container-all {
    padding: 0;
    padding-right: 10px;
    position: relative;
    display: flex;
    width: 100%;
    max-width:100% !important;
    height: calc(100vh - 41px) !important;
    min-height: 300px !important;
    position: relative;
    margin-top: 20px;
}
.container-left {
    min-width: 320px;
    max-width: 320px;
    padding: 0;
    position: relative;
}
.container-left-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

#horizontalLine {
    border-bottom: 1px solid lightgray;
}

@keyframes rainbow {
        0% {
        background: #199ae1;
    }

    50% {
        background: #82c9f1;
    }

    100% {
        background: #199ae1;
    }
}
@keyframes rainbowHover {
    0% {
        background: #0f82c1;
    }

    50% {
        background: #0f82c1;
    }

    100% {
        background: #0f82c1;
    }
}
.skip-text {
    text-align: center;
    font-size: 18px;
}
.skip-button {
    animation: rainbow 2s linear 0s infinite;
}
.skip-button:hover {
        animation: rainbowHover 2s linear 0s infinite;
    }
.container-left-skip {
    display: inline-flex;
    justify-content: left;
    align-items: center;
    padding: 0;
}
.container-right {
    width: 100%;
    position: relative;
    padding:0;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:2px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-bottom:40px;
}
.paper-green .header.lite-version {
    justify-content: center;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.paper-green .header.lite-version.two-items {
    justify-content: space-between;
}
.container-right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin-bottom: 10px;
}
.container-paper {
    display: flex;
    padding: 10px;
    flex-direction: column;
    margin-top: 10px;
    position: relative;
    max-height: calc(100% - 90px) !important;
}
.container-paper.full-height {
    height: calc(100% - 90px);
}

.components-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.component-center {
    display:flex;
    align-self:center;
}

.width-100 {
    min-width: 100% !important;
    max-width: 100% !important;
}

.container-grow-max {
    height: 100%;
    flex-grow: 100;
}

.container-scroll {
    overflow-y: scroll;
}

.container-paper .paper-pagination {
    flex-wrap: nowrap !important;
    gap: unset !important;
    width: 100%;
    justify-content: space-between;
}

.container-paper .paper-pagination .mud-pagination-item button {
    min-width: 20px !important;
}

.mud-main-content{
    padding-bottom: 0px !important;
}

.show-600 {
    display: none;
}

.hide-600{
    display: unset;
}

.test-result-upper {
    text-transform: uppercase;
}

.crop-name-form
{
    width:50%;
}



.plan-block {
    height: 100%;
    box-shadow: 0px 4px 15px 0px #00000040;
    border: 1px solid #41BB70;
    border-radius: 6px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .plan-block .plan-header {
        font-style: normal;
        font-size: 16px;
        line-height: 20px;
        background-color: #41BB70;
        color: #FFFFFF;
        border-radius: 4px 4px 0px 0px;
        padding: 10px 25px 15px 25px;
    }

        .plan-block .plan-header :first-child {
            font-style: normal;
            font-weight: 800;
            font-size: 32px;
            line-height: 45px;
        }

    .plan-block .plan-body {
        display: flex;
        padding: 15px;
        flex: 1;
    }

        .plan-block .plan-body > :first-child {
            border-right: 1px solid #C4C4C4;
        }

        .plan-block .plan-body > div {
            flex: 1;
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }

            .plan-block .plan-body > div > :first-child div {
                padding: 2px;
                color: #5C5C5C;
            }


            .plan-block .plan-body > div > :first-child > :nth-child(-n + 2) {
                font-weight: 600;
                font-size: 26px;
            }

            .plan-block .plan-body > div > :first-child > :first-child {
                color: black;
            }

            .plan-block .plan-body > div > :first-child > :nth-child(2) {
                color: #41BB70;
                padding-bottom: 10px;
            }

        .plan-block .plan-body div{
            flex-direction: column;
        }

            .plan-block .plan-body div div {
                display: flex;
                align-items: center;
                padding-bottom: 10px;
                text-align: center;
            }

            .plan-block .plan-body div > :last-child button {
                width: 50%;
            }


            .plan-block .plan-body div > :last-child a {
                display: flex;
                padding-top: 10px;
                gap: 5px;
            }

                .plan-block .plan-body div > :last-child a span {
                    color: #5C5C5C;
                }



    .plan-block.plan-blue {
        border-color: #0079FE;
    }

        .plan-block.plan-blue .plan-header {
            background-color: #0E80FD;
        }

        .plan-block.plan-blue .plan-body > div > :first-child > :nth-child(2) {
            color: #0079FE;
        }



    .plan-block .price {
        position: absolute;
        background-color: #0E80FD;
        color: white;
        right: 0px;
        padding: 30px;
        border: 1px solid #0E80FD;
        border-radius: 0px 4px 0px 6px;
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 0px;
        height: unset;
    }

    .plan-block .plan-header-empty
    {
        display: flex;
        justify-content: center;
        padding-top: 10px;
    }

        .plan-block .plan-header-empty div {
            font-style: normal;
            font-weight: 600;
            font-size: 26px;
            line-height: 64px;
        }

    .plan-block .plan-body-empty {
        display: flex;
        flex-direction: column;
        padding: 15px;
        justify-content: space-between;
        flex: 1;
    }

        .plan-block .plan-body-empty div {
            display: flex;
            flex-direction: column;
        }

            .plan-block .plan-body-empty div div {
                display: flex;
                align-items: center;
                text-align: center;
            }

        .plan-block .plan-body-empty > div > :first-child div {
            color: #41BB70;
            max-width: 50%;
            text-align: center;
            padding: 0px 0px 10px 0px;
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
        }

        .plan-block .plan-body-empty > div > :nth-child(2) {
            padding: 10px 0px;
            color: #5C5C5C;
        }

        .plan-block .plan-body-empty div {
            padding: 2px 0px;
        }

        .plan-block .plan-body-empty > :last-child {
            display: flex;
            align-items: center;
        }

            .plan-block .plan-body-empty > :last-child button {
                width: 25%;
            }

            .plan-block .plan-body-empty > :last-child a {
                display: flex;
                padding-top: 10px;
                gap: 10px;
            }

                .plan-block .plan-body-empty > :last-child a span {
                    color: #5C5C5C;
                }

.subscriptions .mud-nav-link.active div{
    color: white;
}



.api-dashboard {
    display: flex;
    justify-content: center;
}

    .api-dashboard .api-key {
        background-color: #2196F3;
        color: #FFFFFF;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        height: 100%;
    }

        .api-dashboard .api-key div {
            padding: 100px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            justify-content: center;

        }

        .api-dashboard .api-key div :nth-child(2) {
            font-weight: bold;
            font-size: 24px;
            line-height: 32px;
        }

        .api-dashboard .api-key div button {
            color: #FFFFFF;
            border-color: #FFFFFF;
            margin-top: 10px;
            width: 90%;
        }

    .api-dashboard .api-license {
        background-color: #FFFFFF;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 15px;
    }

        .api-dashboard .api-license > :last-child 
        {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

    .api-dashboard .chart-wrapper {
        background: #FFFFFF;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        border-radius: 0px 0px 6px 6px;
    }

    .api-dashboard .chart-wrapper .filters {
        background: #FFFFFF;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        border-radius: 0px 0px 6px 6px;
    }

    .api-dashboard .requests-purchased {
        background: #FFFFFF;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        border-radius: 0px 0px 6px 6px;
    }

    .api-dashboard .filters{
        display: flex;
        justify-content: space-between;
    }

.api-calendar-preset .label {
    display: flex;
    gap: 5px;
    justify-content: space-between;
}

.api-calendar-preset.selected {
    background-color: #04e66245;
}


.api-package {
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 90px 30px;
    gap: 5px;
}

    .api-package > :first-child {
        font-weight: 500;
        font-size: 18px;
        line-height: 32px;
        color: #3EBE6D;
    }

    .api-package > :nth-child(2) {
        font-weight: 700;
        font-size: 26px;
        line-height: 30px;
        color: #2196F3;
    }

    .api-package button {
        width: 80%;
        margin-top: 30px;
        font-weight: 700;
        font-size: 16px;
        line-height: 19px;
        padding: 7px;
    }

    .api-package.current {
        background-color: #2196F3;
        color: #FFFFFF;
    }

    .api-package.current > :nth-child(n+1) {
        color: #FFFFFF;
    }

        .api-package.current button {
            border-color: #FFFFFF;
        }

.subscriptions {
    background-color: #2196f3;
    color: white;
}

.subscriptions svg path {
    stroke: white;
}

.upgrade {
    background-color: #3EBE6D;
    color: white;
}

.upgrade .mud-nav-link.active div {
    color: white;
}


        @media screen and (max-width: 1380px) {
            .test-result-upper {
        text-transform: unset;
    }
}

@media screen and (max-width: 1279px) {
    .nutrients-text {
        text-align: center;
    }
}

@media screen and (max-width: 960px) {
    .container-left {
        max-width: 95vw;
    }
    .mud-expand-panel-content
    {
        padding:0px !important;
    }
    .dialog-scroll{
        max-height:100vh;
        height:unset;
        padding-bottom:0px !important;
        padding-top:0px !important;
    }
}

@media screen and (max-width: 1150px) {
    .leaflet-draw-toolbar {
        flex-direction: column !important;
    }
    .leaflet-draw-toolbar a {
        margin: 0px 0px 5px 70px !important;
    }
}

@media screen and (max-width: 600px) {
    .show-600 {
        display: unset;
    }

    .hide-600 {
        display: none;
    }

    .container-left {
        max-width: 95vw;
    }

    .full-height {
        max-width: 95vw;
    }

    .mud-chart-line {
        min-width: 750px;
    }

    .mud-chart {
        overflow-x: scroll;
        padding-bottom: 15px;
    }

    .yaxi {
        font-size: 18px;
    }

    .crop-name-form {
        width: unset;
    }

    .lab-mainInfo {
        flex-direction: row !important;
    }

    .lab-mainInfo-header {
        margin-right: 10px;
    }

    .leaflet-control {
        max-width: 115px;
    }

    .leaflet-draw-toolbar a {
        margin: 0px 0px 5px -10px !important;
    }

    .educationPopUp {
        border: 2.5px solid #3ebe6d;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .educationPopUp .skipButton {
        margin-right: 10px;
        border-color: #3ebe6d;
        color: #3ebe6d;
    }

    .educationPopUp .arrow {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
        margin-top: 10px;
    }



    .plan-block .plan-body > :first-child {
        border-right: none;
        border-bottom: 1px solid #C4C4C4;
    }

    .plan-block .plan-body {
        flex-direction: column;
    }

    .plan-block .plan-body-empty > div > :first-child div{
        max-width: unset;
    }

    .plan-block .plan-body div > :last-child button {
        width: 80%;
    }

    .plan-block .plan-body-empty > :last-child button {
        width: 80%;
    }

}