#MODE {
    //display: none;
}
.navbar {
    display:flex;
    justify-content: space-between;
    margin-bottom:20px;
}

#SWITCHBAR{
    display: flex;
    gap:20px;
    justify-content: flex-end;
    margin-bottom: 20px;
}

#FORM {
    margin-top:0px;
    margin-bottom: 10px;
    display:flex;
    flex-wrap: wrap;
    gap:25px;

}
#FORM > div {
    flex:1;
    padding:15px;
    min-width:300px;
    border: 1px solid var(--color-grey700);
    border-radius:2px;
}

#FORM .select_form_flex {
    display:flex;
    gap:5px;
}
#FORM .select_form_flex > div {
    flex:1;
}
#DEVICE {
    position:relative;
}
#DEVICESPEED {
    margin-top:20px;
}
#switcher_device_motorType{
    position:absolute;
    top:20px;
    right:20px;
}
#ZONE {
    position:relative;
}
#SEASONS {
    position:absolute;
    top:15px;
    right:15px;
}
#MAP {
    padding:20px 100px;
    border-radius:6px;
    background-color: var(--color-grey100);
    min-height:200px;
    max-height:400px;
}
#AIRSWITCHER {
    margin-top:10px;
    margin-bottom:-20px;
}
#CUBATURE {
    margin-top:20px;
}
#AIRINFO {
    margin-top:20px;
}
#AIRFRESH, #AIRLOOP {
    margin-top:-30px;
    margin-bottom:10px;
}
.break {
    margin-top:10px;
    margin-bottom:10px;
    border-bottom: 1px solid var(--color-grey400);
}
#ISOLATION {
    flex:1;
    width:100%;
}

#SEARCHBUTTON {
    display: flex;
    justify-content: flex-end;
    margin-bottom:100px;
}
#RESULT {
    margin-bottom: 100px;
}
#RESULTGRID {
    width:100%;
}


#RESULTGRID .device {
    position:relative;
    border: 1px solid var(--color-grey700);
    padding:15px;
    margin-bottom:-1px;
}
#RESULTGRID .device:hover {
background-color: var(--color-grey200);
}
#RESULTGRID .device_preview {
    display:flex;
    flex-wrap:wrap;
    align-items: flex-start;
    gap:40px;
}
#RESULTGRID .device_preview > div {
    flex:4;
}
#RESULTGRID .device .device_checkbox{
    flex:1;
    max-width:20px !important;
    min-width:20px !important;
}
#RESULTGRID .device .device_title{
    flex:8;
    min-width:250px;
    display: inline;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size:20px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius:4px;
    color: var(--color-white);
    background-color: var(--color-accent);
}
#RESULTGRID .device .device_subname {
    display: inline-flex;
    font-size:20px;
    font-weight: 400;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--color-drak);
    background-color: var(--color-white);
    border: 1px solid var(--color-grey1000);
}
#RESULTGRID .device .device_value {

}
#RESULTGRID .device .device_thumb {
    width:100px;
    height:100px;
    object-fit: contain;
    border-radius:4px;
}
#RESULTGRID .device .device_value span {
    display: block;
    font-size:24px;
    font-weight:700;
    color: var(--color-accent);
}
#RESULTGRID .device .device_more_container {
    flex:1;
   text-align: right;
    sursor:pointer;
}
#RESULTGRID .device .device_more {
    display: inline;
    text-align:right;
    font-size:18px;
    font-weight:700;
    padding: 4px 20px;
    border-radius:12px;
    color: var(--color-grey1000);
    background-color: var(--color-grey200);

}
#RESULTGRID .device .device_more_container:hover .device_more {
    color: var(--color-white);
    background-color: var(--color-accent);
}
#RESULTGRID .device h2 {
    font-size:16px;
}
#RESULTGRID .device_data {
    flex:1;
    display:flex;
    flex-wrap: wrap;
    margin-top:40px;
}

#RESULTGRID .device_data_container {
    flex: 1;
    min-width:250px;
    font-size:14px;
    margin-bottom: 30px;
}
#RESULTGRID  .table {
    width:100%;
    display: flex;
    flex-direction: column;
}

#RESULTGRID  .row {
    flex:1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}
#RESULTGRID  .row > div {
    margin: 0 4px;
}

#RESULTGRID  .label {
    flex: 2;
    text-align: left;
}

#RESULTGRID  .value {
    flex: 1;
    text-align: right;
    font-weight: bold;
}

#RESULTGRID  .unit {
    flex: 1;
    text-align: left;
}
#RESULTEXPORT, #RESULTEXPORTTOP {
    display:flex;
    gap:10px;
    justify-content: flex-end;
    margin-top:10px;
}
#RESULTBAR {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap:20px;
    margin-bottom:10px;
}
#RESULTSORT{
    width:200px;
}