/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 26.3.2015, 13:21:04
    Author     : Václav Peredarjuk
*/

/* --------------------- For smaller LCDs than 1400px ----------------------- */

@media screen and (max-width: 1400px) {
    body #master {
        height:620px;
        margin-top:-310px;
    }
    
    #app-body .center-box.col-box {
        width:50%;
        float:left;
    }

    #app-body {
        height:485px;
    }

    #app-body h1 {
        margin-bottom:35px;
        margin-top:35px;
    }

    #app-body .confirmFilt, #app-body .confirmHeat, #app-body .confirmMod {
        bottom:45px;
    }

    #app-body .row .toggle-box.filtrace {
        margin-top:-20px;
    }

    #app-body #datepicker {
        margin-top:0;
    }

    #app-body .temperature {
        top:151px;
    }

    #app-body .set-box {
        top:283px;
    }

    #app-body .heater {
        top:390px;
    }

    #app-body .filtration {
        top:390px;
    }

    #app-body .reminder {
        top:390px;
    }

    #app-body .alarm {
        top:390px;
    }

    #app-body .pump1 {
        top:150px;
    }

    #app-body .pump2 {
        top:150px;
    }

    #app-body .pump3, #app-body .blower  {
        top:329px;
    }

    #app-body .light1 {
        top:329px;
    }

    #app-body .light {
        top:329px;
    }

}

@media screen and (max-width: 1000px) {

    html, body {
        background:none !important;
    }

    .trunc20 {
        display:none;
    }
    #app-body .cover-box {
        top:inherit;
        position:relative;
    }

    html body #app-body *, html body header *, html body section * {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    html {
        height:100vh;
    }

    #table-body-box .table-styled thead tr th {
        padding-top:8px;
        padding-bottom:8px;
    }

    .table-styled#spaInfo tr th {
        width:50% !important;
    }

    .table-styled#emails_table tr td:first-child {
        padding-right:10px;
    }

    .table-styled#emails_table tr td {
        padding-top:4px;
        padding-bottom:4px;
    }

    #app-body:after {
        clear:both;
        content:'';
        display:block;
        visibility:hidden;
    }

    #app-body .input-email {
        width:85%;
    }

    #app-body .table-box .language-box {
        width:100%;
    }

    #app-body .table-box {
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 25px 0 25px;
    }

    .table-styled {
        width:100%;
    }

    #app-body #table-body-box {
        max-height:inherit;
        border:1px solid #bcbcbc;
        border-radius:5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
    }

    .responsiveTable {
        display:block;
    }

    .responsiveTable #table-body-box .table-styled tr td {
        line-height:1.2;
        padding-top:4px;
        padding-bottom:4px;
        padding-right:10px;
    }

    .responsiveTable #table-body-box .table-styled tr th.akce {
        padding-right:10px;
    }

    .responsiveTable #table-body-box .table-styled tr td.akce {
        padding-right:0;
    }

    .noResponsiveTable {
        display:none;
    }

    body #master {
        position:relative;
        width:100%;
        margin:0;
        left:inherit;
        top:inherit;
        border-radius:0;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        min-height:100vh;
        height:auto;
    }

    body {
        margin:0;
    }

    body #master section {
        width:100%;
    }

    #app-body .menu-box {
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 15px 0 15px;
    }

    #app-body .menu-box a {
        width:31.6%;
        margin-right:2%;
        margin-bottom:2%;
        font-size:22px;
    }

    #app-body {
        height:auto;
        padding-bottom:75px;
    }

    .confirmUspornyBtnBox {
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 25px 0 25px;
    }

    #app-body .confirmFilt,#app-body .confirmHeat, #app-body .confirmMod {
        position:relative;
        display:block;
        margin:20px 0 20px 0;
        right:inherit;
        bottom:inherit;
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0;
        line-height:80px;
        height:80px;
    }

    #app-body .confirmMod {
        text-align:center;
    }

    #app-body .temperature {
        left:6vw;

    }

    #app-body .set-box {
        left:6vw;
    }

    #app-body #table-head-box, #app-body #table-body-box {
        width:90%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
    }

    #app-body table.table-styled {
        width:100%;
    }

    #app-body table.table-styled th.datum, #app-body table.table-styled td.datum, #app-body table.table-styled th.cas, #app-body table td.cas {
        width:15%;
    }

    #app-body table.table-styled th.kod, #app-body table td.kod {
        width:10%;
    }

    #app-body table.table-styled th.popis, #app-body table td.popis {
        width: 50%;
    }

    #app-body table.table-styled tr th:last-child {
        width:10%;
    }

    #app-body #successNotif {
        width:100%;
        top:170px;
    }

    .lColumn {
        float:none;
        width:100%;
        height:auto;
        text-align:center;
        min-height:100px;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:35px 15px 0 25px;
    }

    #app-body .lColumn .temperature, #app-body .lColumn .set-box {
        top:inherit;
        left:inherit;
        position:relative;
        display:inline-block;
    }

    #app-body .lColumn .temperature {
        width:100%;
    }

    #app-body .lColumn .set-box {
        display:inline-block;
    }

    #app-body .stateIcons {
        margin-top:20px;
        margin-bottom:10px;
    }

    #app-body .rColumn .pump1, #app-body .rColumn .pump2, #app-body .rColumn .pump3, #app-body .rColumn .light1, #app-body .rColumn .blower {
        position:relative;
        display:inline-block;
        top:inherit;
        left:inherit;
    }

    .rColumn {
        float:none;
        width:100%;
        height:auto;
        min-height:100px;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:35px 25px 0 15px;
        margin-bottom:20px;
        text-align:center;
    }

    .rColumn span {
        margin-right:60px;
        margin-bottom:60px;
    }

    .rColumn span:last-child {
        margin-right:0;
    }

    #app-body .heater, #app-body .filtration, #app-body .reminder, #app-body .alarm {
        display:inline-block;
        position:relative;
        top:inherit;
        left:inherit;
        width:65px;
        height:64px;
        margin-right:14px;
    }

    #app-body .alarm.display_none, #app-body .reminder.display_none {
        display:none;
    }


    #app-body #login-form {
        margin-top:50px;
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 25px 0 25px;
        text-align:center;
    }

    #app-body .form-row {
        width:100%;
        display:inline-block;
        margin:0;
    }

    #app-body .form-row label {
        width:25%;
    }

    #app-body .confirmLogin {
        margin-left:0;
    }

    #app-body .visible-small {
        display:block;
    }

    #app-body .hidden-small {
        display:none !important;
    }

    .time-val {
        position:relative;
        left:-2px;
    }

}

@media screen and (max-width: 850px) {
    header .last-update {
        display:none;
    }

    body #master header .usspa-logo {
        left:25px;
    }

    #master .last-update.resp {
        position:absolute;
        width: 100%;
        left:0;
        bottom:90px;
        text-align:center;
        display:block;
    }

    body #master header .time {
        right:25px;
        height:75px;
        top:3px;
        line-height:75px;
        font-size:20px;
    }

    #app-body {
        padding-bottom:105px;
    }

    #app-body #table-head-box table th {
        font-size:15px !important;
    }

    body #master header .spa-name {
        float:right;
        margin-right:25px;
        line-height:85px;
        text-align:right;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .rColumn span {
        margin-right:30px;
        margin-bottom:30px;
    }

    #app-body .respAppHome {
        display:block;
    }

    #app-body .webAppHome {
        display:none;
    }

    #app-body .respAppHome .rColumn span {
        vertical-align:top;
        margin:0 10px 15px 10px;
        width:105px;
        height:105px;
    }

    #app-body .respAppHome .rColumn span:last-child {
        margin-bottom:0;
    }

    #app-body .respAppHome .rColumn {
        margin-bottom:0;
    }

    #app-body .respAppHome .lColumn {
        padding-top:0;
    }

}

@media screen and (max-width: 780px) {
    #app-body .menu-box a {
        width:48.5%;
        margin-right:2%;
        margin-bottom:2%;
        font-size:20px;
    }
    
    
    #master.es #app-body .menu-box a, #master.en #app-body .menu-box a, #master.de #app-body .menu-box a {
        font-size:17px;
    }

    #app-body h1 {
        font-size:25px;
    }

    #app-body .confirm-box, #app-body .automatic-options {
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 15px 0 15px;
    }

    #app-body .row .toggle-box#blokace-topeni-switch, #app-body .multiple-select-box, #app-body .row .toggle-box.filtrace {
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 25px 0 25px;
    }

    #app-body .multiple-select-box span {
        width:9.85vw;
        height:9.85vw;
        line-height:9.85vw;
        margin-right:1.45vw;
    }

    #app-body .multiple-select-box span[data-count="8"], #app-body .multiple-select-box span[data-count="16"], #app-body .multiple-select-box span[data-count="24"] {
        margin-right:0;
    }

    #app-body .multiple-select-box span[data-count="7"] {
        margin-right:1.45vw;
    }

    /* #app-body .multiple-select-box span:nth-child(7){
         margin-right:1.5vw;
     }
     
     #app-body .multiple-select-box span:nth-child(8){
         margin-right:0;
     }*/

    #app-body .menu-box a:nth-child(2n), #app-body .menu-box a:nth-child(6) {
        margin-right:0 !important;
    }

    #app-body .menu-box a.last-row {
        margin-right:2%;
    }
}

@media screen and (max-width: 750px) {
    .lColumn {
        float:none;
        width:100%;
        padding:15px 25px 0 25px;
        text-align:center;
    }
    
    #app-body .center-box.col-box {
        width:100%;
        float:none;
    }

    #app-body .lColumn .set-box {
        display:inline-block;
        margin-top:0px;
    }

    #master .last-update.resp {
        bottom:10px;
    }

    header .language-box-login .chosen-container .chosen-drop {
        top:-6px !important;
    }
    
    #app-body #langSelection, #app-body .chosen-container {
        display:none;
    }

    #app-body #langSelectionResponsive {
        display:block;
        height:35px;
        width:120px;
        float:right;
        border: 1px solid #bcbcbc;
        border-radius: 5px;
        text-align:center;
        background: transparent;
        color:#444;
    }

    #app-body {
        padding-bottom:0;
        margin-bottom:20px;
    }

    .rColumn {
        float:none;
        margin-top:20px;
        width:100%;
        padding:0 25px 0 25px;
        text-align:center;
    }

    #app-body .table-box .language-box {
        text-align:center;
    }

    #app-body .table-box .language-box .language-select h3 {
        width:20%;
        float:left;
        text-align:left;
        line-height: 40px;
    }

    #app-body .table-box .language-box .chosen-container {
        width:30% !important;
        float:right;
        margin-left:3%;
        height:40px;
    }

    .chosen-container-single .chosen-single {
        height:40px !important;
        line-height:40px !important;
    }

    .chosen-container-single .chosen-drop {
        width:100% !important;
        top:38px !important;
    }

    #app-body .table-box .language-box .language-select {
        float:none;
        display:inline-block;
        width:100%;
    }

    #app-body #successNotif {
        top:230px;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 20px 0 20px;
    }

    #app-body .lColumn .temperature {
        display:block;
    }

    #app-body {
        padding-top:135px;
        padding-bottom:50px;
    }

    body #master section {
        top:80px;
        border-bottom: 1px solid #dcdcdc;
        border-top:none;
        height:55px;
    }

    body #master header {
        border-bottom:none;
    }

    body #master section .home-icon {
        top:11px;
        left:25%;
    }

    body #master section .menu-icon {
        top:12px;
    }

    body #master section .logout {
        top:11px;
        left:75%;
    }

    #app-body .form-row label {
        width:30%;
    }

    #app-body .confirmLogin {
        margin-left:0;
    }

    #app-body.notLogged {
        padding-top:135px;
    }

}


@media screen and (max-width: 620px) {
    #app-body .doba-box.firstCycle {
        float:none;
        display:block;
    }

    #app-body .doba-box.secondCycle {
        float:none;
        display:block;
    }
}

@media screen and (max-width: 570px) {
    #app-body .toggler {
        font-size:20px;
    }

    #app-body #table-head-box, 
    #app-body #table-body-box {
        width:95%;
    }
}

@media screen and (max-width: 540px) {
    .rColumn span {
        margin-right:10%;
        margin-bottom:30px;
    }
    
    #app-body .form-row label {
        width:47%;
    }
    
    #app-body #login-form input {
        width:50%;
    }
    
    body #master.login  header .usspa-logo {
        float:left;
        display:block;
        margin:23px 0 0 20px;
    }

    .rColumn span:nth-child(2n){
        margin-right:0;
    }

    body #master header {
        text-align:center;
    }

    body #master header .usspa-logo {
        position:relative;
        display:inline-block;
        left:inherit;
        top:inherit;
        bottom:inherit;
        margin-top:10px;
    }

    body #master.masterRelative header {
        height:60px;
    }

    body #master.masterRelative section {
        top:60px;
    }

    #app-body.notLogged {
        padding-top:115px;
    }

    body #master.masterRelative header .usspa-logo.vAlign {
        width:95px;
        height:25px;
        float:left;
        margin-left:15px;
        margin-top:15px;
    }

    body #master.masterRelative header .spa-name {
        font-size:14px;
        float:right;
        margin-right:15px;
        margin-top:20px;
    }

    body #master header .usspa-logo.vAlign {
        margin-top:25px;
    }

    body #master header .spa-name {
        float:none;
        display:block;
        text-align:center;
        line-height:inherit;
        font-size:16px;
        margin:5px 0 0 0;
    }

    #app-body h1.errorTitle {
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 15px 0 75px;
        background-position:15px center;
        font-size:30px;
        min-height:51px;
        margin-bottom:0px;
    }

    #app-body p.errorDesc {
        padding:0 15px 0 15px;
        font-size:20px;
    }

    #app-body .confirmLogin {
        margin-left:0 !important;
        margin-top:40px !important;
    }
}

@media screen and (max-width: 520px) {
   #app-body #login-form label {
        font-size:20px;
   } 

   #app-body span.acs-state {
        font-size:25px;
        line-height:35px;
        padding-left:65px;
        min-height:35px;
        background-size:42px 35px !important;
   }
}

@media screen and (max-width: 480px) {
    #app-body .menu-box a:nth-child(2n), #app-body .menu-box a:nth-child(6) {
        margin-right:0 !important;
    }

    #app-body .menu-box a.last-row {
        margin-right:0%;
    }

    #app-body .menu-box a {
        width:100%;
        margin-bottom:15px;
        font-size:20px;
        margin-right:0;
    }

    .trunc42 {
        display:none;
    }

    .trunc20 {
        display:block;
    }

    .ui-datepicker td span, .ui-datepicker td a {
        padding:3px 3px 3px 3px !important;
    }

    #app-body table.table-styled td,
    #app-body table.table-styled th,
    .no_rows {
        font-size:13px;
    }

    #app-body .table-box .language-box .language-select h3, 
    #app-body .table-box h3 {
        font-size:15px;
        margin-left:0;
    }
}

@media screen and (max-width: 460px) {

    #app-body .multiple-select-box span {
        width:14.5vw;
        height:14.5vw;
        line-height:14.5vw;
        margin-right:1.5vw;
    }

    #app-body .toggler {
        float:none !important;
        display:block;
    }

    #app-body .toggle {
        margin-left:0;
    }

    #app-body .multiple-select-box span[data-count="5"], #app-body .multiple-select-box span[data-count="10"], #app-body .multiple-select-box span[data-count="15"], #app-body .multiple-select-box span[data-count="20"] {
        margin-right:0;
    }

    #app-body .multiple-select-box span[data-count="8"], #app-body .multiple-select-box span[data-count="16"] {
        margin-right:1.8vw;
    }

    #app-body span.acs-state {
        font-size:17px;
        line-height:29px;
        min-height:29px;
        padding-left:58px;
        background-size:35px 29px !important;
   } 

   #master .last-update.resp {
    font-size:14px;
   }
}

@media screen and (max-width: 430px) {
    #app-body .temperature {
        font-size:80px;
    }

    #app-body .set-box .temperature-set-box {
        font-size:31px;
    }

    #app-body .heater, #app-body .filtration, #app-body .reminder, #app-body .alarm {
        margin-right:0px;
    }

    #app-body #login-form input {
        width:52%;
    }

    #app-body .form-row label {
        width:45%;
    }

    #app-body .confirmLogin {
        margin-left:35%;
    }

    body #master.masterRelative header {
        height:88px;
    }

    body #master.masterRelative section {
        top:88px;
    }

    #app-body.notLogged {
        padding-top:143px;
    }

    body #master.masterRelative header .usspa-logo.vAlign {
        width:95px;
        height:25px;
        float:none;
        margin-left:0;
        margin-top:0;
        margin-top:20px;
    }

    body #master.masterRelative header .spa-name {
        font-size:14px;
        float:none;
        margin-right:0;
        margin-top:10px;
        margin-bottom:8px;
    }

    .ui-dialog .ui-dialog-title {
        font-size:14px;
    }

    .ui-dialog p.warning-content {
        font-size:13px;
    }

    #app-body #successNotif {
        font-size:15px;
    }

    #app-body .multiple-select-box span {
        width:13.5vw;
        height:13.5vw;
        line-height:13.5vw;
    }

    #app-body .multiple-select-box span[data-count="5"], 
    #app-body .multiple-select-box span[data-count="10"], 
    #app-body .multiple-select-box span[data-count="15"], 
    #app-body .multiple-select-box span[data-count="20"] {
        margin-right:1.5vw;
    }

    #app-body .multiple-select-box span[data-count="6"], 
    #app-body .multiple-select-box span[data-count="12"], 
    #app-body .multiple-select-box span[data-count="18"], 
    #app-body .multiple-select-box span[data-count="24"] {
        margin-right:0;
    }

    #app-body .row .toggle-box#blokace-topeni-switch, 
    #app-body .multiple-select-box, 
    #app-body .row .toggle-box.filtrace {
        padding-left:20px;
        padding-right:20px;
    }

    #app-body .toggle-box .toggler {
        float:left !important;
        font-size:15px;
        line-height:32px;
    }

    #app-body .toggle-box .toggler:nth-child(3) {
        float:right !important;
    }

    #app-body .toggle {
        width:80px;
    }

    #app-body .check:checked ~ .switch {
        left:48px;
    }

    .ui-datepicker td span, .ui-datepicker td a {
        padding-top:8px !important;
        padding-bottom:8px !important;
    }

    .ui-datepicker td {
        padding:3px;
    }

    .ui-datepicker {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        width:100% !important;
    }

    #app-body #datepicker {
        width:100% !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding:0 15px 0 15px;
    }

    #app-body h1, 
    #app-body h1.bottom25 {
        font-size:19px;
        margin-top:25px;
    }

    #app-body .doba-box .doba, 
    #app-body .center-box .parameter {
        font-size:15px;
        margin-bottom:7px;
    }

    #app-body .doba-box .doba-value, 
    #app-body .center-box .parameter-value {
        font-size:34px;
    }

    #app-body .table-box .language-box .language-select h3, 
    #app-body .table-box h3 {
        font-size:15px;
        margin-left:0;
    }

    #app-body .table-box {
        padding-left:16px;
        padding-right:16px;
    }

    #app-body #emails_table td, 
    #app-body table.table-styled th,
    #app-body table.table-styled td {
        font-size:13px;
    }

    #app-body .menu-box a {
        font-size:15px;
        margin-bottom:11px;
        height:60px;
    }

    #app-body table.table-styled td,
    #app-body table.table-styled th {
        font-size:12px;
    }
}

@media screen and (max-width: 400px) {
    .ui-dialog {
        max-width:95%;
    }

    .ui-dialog p.warning-content {
        padding-left:0;
        background:none !important;
        margin-top:0;
        margin-bottom:0;
    }

    #app-body #login-form {
        margin-top:0;
    }

    #app-body #login-form label {
        width:100%;
        line-height:35px;
    }

    #app-body #login-form input {
        width:100%;
    }

    #app-body #login-form .form-row {
        margin-bottom:15px;
    }

    #app-body #login-form .form-row button[type="submit"] {
        margin-top:10px !important;
        width:100%;
    }
}


@media screen and (max-width: 390px) {
    #app-body #datepicker {
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 25px 0 25px;
    }

    #app-body .box-hour {
        width:100%;
        -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
        -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
        box-sizing: border-box; 
        padding:0 15px 0 15px;
    }

    .ui-datepicker {
        width:100% !important;
    }

    #app-body .rColumn .pump1, #app-body .rColumn .pump2, #app-body .rColumn .pump3, #app-body .rColumn .light1, #app-body .rColumn .blower {
        width:108px;
        height:108px;
        background-size:contain;
        background-position:center center;
    }

    #emails_table .input-email {
        font-size:13px;
    }

    #emails_table #email_value_1,
    #emails_table #email_value_2,
    #emails_table #email_value_3 {
        word-break: break-all;
    }

}

@media screen and (max-width: 360px) {
    #app-body .respAppHome .rColumn span {
        vertical-align:top;
        margin:0 8px 15px 8px;
        width:85px;
        height:85px;
    }

    #app-body .temperature {
        font-size:65px;
    }

    #app-body .confirm-box .doba-box .plus-btn {
        margin-left:10px;
    }

    #app-body .confirm-box .doba-box .minus-btn {
        margin-right:10px;
    }

    #app-body .confirm-box .doba-box .doba-value {
        padding:0;
    }

    #app-body .set-box .minus-btn {
        width:45px;
        height:45px;
    }

    #app-body .set-box .plus-btn {
        width:45px;
        height:45px;
    }

    body #master.login header .usspa-logo {
        width:95px;
        height:26.125px;
        margin-top:28px;
    }

    #app-body #successNotif {
        font-size:14px;
    }

    #app-body .table-box .language-box .language-select h3, 
    #app-body .table-box h3 {
        font-size:14px;
    }

    #app-body .multiple-select-box span {
        width: 13vw;
        height: 13vw;
        line-height: 13vw;
        font-size:16px;
    }

    #app-body .confirmFilt, 
    #app-body .confirmHeat, 
    #app-body .confirmMod {
        height:70px;
        width:92%;
        line-height:70px;
        margin:20px auto;
        font-size:17px;
    }

    #app-body .menu-box a {
        font-size:14px;
    }

    #master .last-update.resp,
    #emails_table .input-email {
        font-size:12px;
    }
}

@media screen and (max-width: 340px) {
    #app-body .toggle-box .toggler, 
    #app-body .toggle-box .toggler:nth-child(3) {
        float:none !important;
        margin:0;
    } 

    #app-body .toggle-box .toggler {
        margin-bottom:5px;
    }

    #app-body .toggle-box .toggler:nth-child(3) {
        margin-top:5px;
    }

    #app-body .toggle {
        margin:0;
    }
}

@media screen and (max-width: 320px) {
    #app-body .multiple-select-box span[data-count="5"], 
    #app-body .multiple-select-box span[data-count="10"], 
    #app-body .multiple-select-box span[data-count="15"], 
    #app-body .multiple-select-box span[data-count="20"] {
        margin-right:1.4vw;
    }

    #app-body span.acs-state {
        font-size:15px;
        line-height:24px;
        min-height:24px;
        padding-left:45px;
        background-size:29px 24px !important;
   } 
}