div.page__background, div.page__content {
    background: transparent !important;
}

body {
    padding-top: costante (safe-area-inset-top);
    padding-top: env (safe-area-inset-top);
}

@font-face {
    font-family: 'Open Sans';
    font-weight:normal;
    src: url('../lib/fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: bold;
    src: url('../lib/fonts/OpenSans-Bold.ttf') format('truetype');
}

label, span, p {
    font-family: 'Open Sans', sans-serif;
}

ons-dialog:not([modifier='material']) p {
    margin-left: 10px;
    margin-right: 10px;
}

.selectInput {
    width: 100%;
    font-size: 14px;
    font-weight:bold;
}

#range, #range2 {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 0px;
    font-size: 10px;
}

/*.sizeThumbCam {
    width: 120px;
    width: 85px;
}*/

.sizeThumbCam {
    width: 85px;
}

.inputText {
    width:100%;
}

.labelUnderInput {
    font-size: 11px;
    color: darkred;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 10px;
    display: block;
}

.labelForInput {
    font-size: 12px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 2px;
    display: block;
}

.ptemp {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    text-align: right;
    padding-right: 20px;
}

.lucent {
    text-align: left;
    opacity: 0.8;
}

.note {
  font-size: 10px;
  font-weight:bold;
}

.titledialog {
    padding-left: 34px;
    margin-bottom: 4px;
    font-size: 14px;
}

.myselect {
    text-align:left;
    height:32px;
    width: 180px;
    font-size: 14px;
    color: #222222;
    background: white;
    border: 1px solid #cccccc;
    margin-top:0px;
    padding-left: 10px;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
}

.myoption {
    font-size:14px; 
    color:#222222;
    background:white;
}

.reset {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


.select-icon {
    margin-top: -10px;
    margin-left: 6px;
}

.select-icon-on {
    color:red;
}

.onoffbutton {
    font-size:10px;
    font-weight:bold;
}

.colplant {
    border-right: 1px solid #efefef;
    border-bottom: 2px solid #cccccc;
    background-color: white;
    height: 82px;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    vertical-align:central;
    padding-top:24px;
}

.headertable {
    color: white;
    background-color: black;
    padding-top:2px;
    height: 20px;
}

.logo{
    fill:black;
}
.my-flag {
    padding-top: 5px;
    padding-right: 0px;
    width: 32px;
}

.my-logo {
    padding-top: 5px;
    padding-right: 10px;
    width: 32px;
}

.my-menu {
    padding-top: 8px;
    padding-right: 10px;
    width: 32px;
    color:#111111;
}


.hometitle {
    height:100%;
    text-align:center; 
    display: flex;               /* establish flex container */
    align-items: center;         /* vertically center flex items */
}

.tittworow {
    width: 100%;
}

#hometitle, #titallarmi, #titeventi, #plantTitle, #titinfo, #titinsdis, #titzone, #titscenari, #titcodes, #titcomandi, #titzonentc, #titcamere, #tithubcamere, #hubcameras, #tithubeventscameras {
    width: 100%;
}

.titlerow1{
    line-height:100%;
    margin-bottom:0;
    margin-top:0;
    font-size:14px;
    font-weight:bold;
}

.titlerow2{
    line-height:100%;
    padding-top:4px;
    margin-bottom:0;
    margin-top:0;
    font-size:12px;
}

.button-home-icon {
    padding-top:2px;
}

.fab-home-icon {
    background-color: #ffffff;
    color: #5198db;
    box-shadow: 0 1px 1px 0 rgba(81,152,219,0.14), 0 1px 10px 0 rgba(81,152,219,0.12), 0 2px 4px -1px rgba(81,152,219,0.1);
}

.logo-select {
    content: url('../images/logo.png');
    padding-top: 4px;
    width: 32px;
}


.qr-icon {
    content: url('../images/qrico.png');
    padding-top: 8px;
    width: 32px;
}


.reboot-update {
    content: url('../images/update.png');
    padding-top: 8px;
    width: 32px;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

.beta-update {
    content: url('../images/beta.png');
    padding-top: 4px;
    width: 32px;
}

.usb-update {
    content: url('../images/usb.svg');
    padding-top: 8px;
    width: 32px;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.new-update {
    content: url('../images/update.png');
    padding-top: 8px;
    width: 32px;
    animation-name: blink;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.loading-update {
    content: url('../images/loading.png');
    width: 48px;
    animation-name: loading;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}

.blink-opacity {
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.icon-home-icon {
    font-size: 32px;
}

.home-list {
    background-color: #ffffff;
}

.my-close-door-icon {
    background: url('../images/close-door.svg') center no-repeat;
    background-size: 32px;
}

.my-open-door-icon {
    background: url('../images/open-door.svg') center no-repeat;
    background-size: 32px;
}

.icon-home-plant-icon {
    font-size: 28px;
    width: 46px;
    height: 38px;
    color: #222222;
    text-align: center;
    padding: 0px;
    margin: 0px;
    padding-top: 9px;
    background-color: #f2f2f2;
    border: solid 2px #e9e9e9;
    border-radius: 10px;
}

.text-home-plant-icon {
    color:#555555;
    margin-top: 8px;
    line-height: 110%;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.text-home-icon {
    color: #333333;
    margin-top: 8px;
    line-height: 110%;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.text-status-home-icon {
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
}

@keyframes blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.2;
    }
}

@keyframes anomalie-back {
    from {
        color: #333333;
    }

    to {
        color: orange;
    }
}

@keyframes alarm-back {
    from {
        color: #333333;
    }

    to {
        color: red;
    }
}

@keyframes anomalie {
    from {
        color: orange;
    }

    to {
        color: darkorange;
    }
}

@keyframes notready {
    from {
        color: black;
    }

    to {
        color: lightgray;
    }
}

@keyframes alarm {
    from {color: red;}
    to {color: #efefef;}
}

@keyframes offline {
    from {
        color: lightgray;
    }

    to {
        color: gray;
    }
}


@keyframes loading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.zona-violata {
    color: red;
}

.zona-riposo {
    color: green;
}

.zona-esclusa {
    color: orange;
}

.zona-tamper {
    color: violet;
}

.zona-unknown {
    color: gray;
}

.uscita-off {
    color: lightgray;
}

.warning-text {
    color: #222222;
    animation-name: notready;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.zona-notstatus {
    color: #efefef;
    animation-name: notready;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.alert-icon {
    color: red;
    animation-name: alarm;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.anomalie-icon {
    color: orange;
    animation-name: anomalie;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.anomalie-back-icon {
    background-color: #333333;
    animation-name: anomalie-back;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}


.anomalie-noback-icon {
    line-height:10px;
    font-weight: bold;
    animation-name: anomalie-back;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.alarm-back-icon {
    background-color: #333333;
    animation-name: alarm-back;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.load-status {
    /*background-color: gray;*/
    color: rgba(0,0,0,0.2);
    animation-name: loading;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}

.load-status-nogray {
    animation-name: loading;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}

.sended-status {
    background-color: lightgray;
    animation-name: offline;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.offline-icon {
    color: #efefef;
    animation-name: offline;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.notregistered-icon {
    color: #cccccc;
}

.armed-icon {
    color: red;
}

.disarmed-icon {
    color: #008000;
}

.orange-icon {
    color: orange;
}

.black-icon {
    color: #222222;
}

.error::-webkit-input-placeholder {
    color: #cc0033;
}

.error {
    background-color: #fce4e4;
    border: 1px solid #cc0033;
    outline: none;
}


.noconnect {
    background-color: red;
}

/*
.noconnect {
  background-color: red !important;
}
*/

.statusfont {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

/*input[type=tel] {
    -webkit-text-security: disc;
}*/

.password {
    -webkit-text-security: disc;
}

.skills {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 14px !important;
    text-align: center !important;
}

ul {
    list-style: none !important;
}

h2 {
    margin: 0 !important;
}

.progressbar-section {
    padding: 100px 0 !important;
}

.container {
    max-width: 1170px !important;
    margin: 0 auto !important;
}

.skill-part {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


.skill-item {
    /*-webkit-box-flex: 0;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
    text-align: center;
    padding-right:8px;*/
    padding-right: 8px;
}


.circle {
    height:75px;
}

    .skill-item h2 {
        font-size: 16px !important;
        transform: translateY(-40px) !important;
    }

.sk-name {
    font-weight: 400 !important;
    display: block !important;
    transform: translateY(-20px) !important;
}

.my-links {
    text-align: center !important;
    margin-top: 100px !important;
}

    .my-links h3 {
        display: inline-block !important;
        margin: 0 25px !important;
    }

    .my-links ul {
        display: inline-block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .my-links ul li {
            display: inline-block !important;
        }

        .my-links ul span {
            width: 45px !important;
            height: 45px !important;
            line-height: 45px !important;
            display: inline-block !important;
            background-color: #000 !important;
            color: #fff !important;
            font-size: 22px !important;
        }

        .my-links ul p {
            margin: 0 !important;
        }

.passcontainer2 ons-icon {
    margin-left: -0px;
    cursor: pointer;
}

.passcontainer ons-icon {
    margin-left: -30px;
    cursor: pointer;
}

.eyeicon{
    color:#4b4b4b;
}

.contnotify {
    position: relative !important;
}

.notify {
    float: left;
    position: absolute;
    left: 4px;
    top: 8px;
    z-index: 1000;
    display: none;
}

.selectChannel {
    margin: 1em;
    padding: 1em;
    width: 93%;
    border-radius: .2em;
    border: 1px solid #acacac;
    color: #181820;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    background: url('../images/dropdown.png');
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: right;
    background-origin: content-box;
    background-color: #efefef;
    font-family: 'Open Sans', sans-serif;
    font-weight:bold;
}