﻿.washingGroup {
}

.washingGroup_border {
    border-style: outset;
}

.washingGroup_border_buttons {
    border: outset 2px grey;
}

.washingGroup_content {
}

.washingGroup_content_header {
}

.washingGroup_content_body {
    min-height: 45rem;
    display: grid;
}

.washingGroup_content_body_allarm {
}

.washingGroup_content_body_pump {
}

.washingGroup_content_body_pump_group {
    display: inline-block !important;
    margin-left: auto;
    margin-right: auto;
    width: 10rem;
    margin-right: 1rem;
}

.washingGroup_content_body_pump_group_content {
}

.washingGroup_content_body_pump_group_content_img {
    height: 7rem;
}

.washingGroup_content_body_pump_group_content_details {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    border: 0.1rem solid black;
}

.washingGroup_content_body_data {
    border-top: 0.2rem solid black;
    text-align: center;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
    }
}

.washingGroup_content_body_data_station_name {
    font-size: 1.1rem;
    font-weight: bold;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 95% 1fr;
    position:relative;
}

.washingGroup_content_body_data_station_isOn {
    height: 1rem;
    width: 1rem;
    border: 0.1rem solid;
}

.washingGroup_content_body_data_station_body {
    width: 100%;
    float: left;
}

.washingGroup_content_body_data_station_body_content {
    width: 90%;
    float: left;
}

.washingGroup_content_body_data_station_body_content_station {
    height: 6rem;
    width: 100%;
}

.washingGroup_content_body_data_station_body_content_station_empty {
    font-size: 1rem;
    font-style: italic;
    margin-top: 1rem;
}

.washingGroup_content_body_data_station_body_content_line {
    border-bottom: 0.5rem solid gray;
    border-left: 0.2rem solid gray;
    height: 1rem;
    width: 50%;
    margin-left: auto;
    margin-top: 0.5rem;
}

.washingGroup_content_body_data_station_footer {
    width: 100%;
    margin-top: 1.5rem;
    float: left;
    text-align: center;
}

.agitator {
    position: relative;
    border: 0.1rem solid;
}

.agitator_tube {
    position: absolute;
    width: 2rem;
    height: 90%;
    background-color: black;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.agitator_pale {
    position: absolute;
    width: 90%;
    height: 1.6rem;
    background: linear-gradient(to right, black 0%, black 50%, gray 50%, gray 100%);
    left: 50%;
    top: calc(90% - 0.7rem);
    transform: translate(-50%,-50%);
    border-radius: 50% 3%;
}

.agitator_pale_rotation {
    animation: agitator_pale_rotation-animation 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
    -webkit-animation: agitator_pale_rotation-animation 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
}

@keyframes agitator_pale_rotation-animation {
    0% {
        background: linear-gradient(to right, black 0%, black 50%, gray 50%, gray 100%);
        border-radius: 50% 3%;
    }

    100% {
        background: linear-gradient(to right, gray 0%, gray 50%, black 50%, black 100%);
        border-radius: 3% 50%;
    }
}

@-webkit-keyframes agitator_pale_rotation-animation {
    0% {
        background: linear-gradient(to right, black 0%, black 50%, gray 50%, gray 100%);
        border-radius: 50% 3%;
    }

    100% {
        background: linear-gradient(to right, gray 0%, gray 50%, black 50%, black 100%);
        border-radius: 3% 50%;
    }
}

