/* Default degli elementi utilizzati nel mobile */
button.mobile-menu-toggle{
    display: inline-block;
    background: url(img/icon-stack.svg) no-repeat center center;
    background-size: contain;
    width: 30px; height: 30px; border: 0; margin: 10px 12px 0;
    outline: 0 !important; 
}
.navbar-header .current-page,
footer.page-footer,
#subnavbar .mobile-menu-header,
.mobile-form-separator{display: none;}
.mobile_lf{display: none !important;}
.mobile-super-wrapper{display: block; margin: 0; padding: 0;}

@media (min-width: 767px) {
    .subnav-container .container li ul{display: none;}
    button.mobile-menu-toggle{display: none;}
    
    #widget_led_status svg{width: 250px;}
}

/* Variazioni per tablet */
@media (max-width: 991px) {
    .subnav-container .container{width: 100%;}
    .subnav-container .navbar-nav>li{
        padding-left: 5px;
        padding-right: 5px;
        font-size: 90%;
    }
}

/* Mobile theme */
@media (max-width: 767px) {
    .mobile_lf{display: block !important; content: " ";}
    br.visible-xs{content: ' '; height: 15px;}
    .home-page .hidden-xs-home {display: none !important;}
    .container-inner {padding-bottom: 5px;}
    .nav_helper{min-height:0;}

    
/* Forms */
    .clear-xs{clear: both;}
    .form-horizontal .button-container,
    #widget_wifi_channel_container .button-container,
    .mobile-super-wrapper .button-container{margin: 0 10px 30px 10px;}
    #widget_line_status .button-container,
    #widget_led_status .button-container {margin: 5px 0;}
    .form-horizontal .control-label{padding-bottom: 7px;}
    .form-group .mobile-form-separator{margin:0;}
    .panel-widget .mobile-form-separator{margin: 0; border: 0; padding: 0;}
    .mobile-form-separator{display:block; margin: 0 -15px; border-bottom: 1px #373c44 solid; background: #e6e7e7;
        text-align: left; min-height: 60px; line-height: 60px; padding: 0 15px; white-space: nowrap;}
    .mobile-form-separator.widget{background: #595c60; color: #7f858b;}
    .mobile-form-separator.widget .icon{background-color: transparent;}
    .mobile-form-separator div{display: inline-block; line-height: 1; min-height: 60px; padding-top: 5px; padding-right: 60px;}
    .mobile-form-separator div span{white-space: normal; line-height: 1.2; display: inline-block; vertical-align: middle;}
    .mobile-form-separator div span span{vertical-align: initial;}
    .mobile-form-separator div.button-container{width: 100%; padding: 0; margin: 0;}
    .text-right-xs{text-align: right;}
    .text-left-xs{text-align: left;}
    .form-horizontal .control-label.text-left-xs{text-align: left;}
    .form-group{border-bottom: 1px #e6e7e7 solid; padding: 10px 0; margin: 0 auto;}
    #change_password_box .progress{margin: 0 auto;}
    .form-group:last-child{border: 0;}
    .form-group .form-group{border: 0;}
    .icon.leaf{ background-image: url(img/icon-leaf.svg); }
    .icon.parental{ background-image: url(img/icon-parental.svg); }
    .icon.clock{ background-image: url(img/icon-clock.svg); }
    
    .form-control[disabled],
    .form-group[disabled],
    fieldset[disabled],
    fieldset[disabled] .form-control {
        display: none;
    }
    .form-control[disabled].force-dimm-xs,
    fieldset[disabled].force-dimm-xs,
    fieldset[disabled].force-dimm-xs .form-control {
        display: block;
    }
    
/* Eccezioni per le pagine dove i campi vanno mostrati in trasparenza */
    .wifi-page #wifi_panel_2 fieldset[disabled]{display: block;}
    
/* Footer & Header */
    /* Mobile tabs */
    .mobile-super-wrapper{display: none;}
    .mobile-super-wrapper.active{display: block;}

    /* Per evitare che il footer si sovrapponga al loader */
    body>.container>.container-inner{min-height: 100vh; margin-bottom: -60px;}
    
    .container-inner.home-page{padding-top: 70px;}
    footer.page-footer{display: block; background-color: #373c44; height: 60px; line-height: 60px; 
                text-align: center; text-transform: uppercase; color: #ffffff; position: relative;}
    footer.page-footer a{display: block; color: #ffffff;}
    footer.page-footer span.icon{background: url(img/icon-double-arrow.svg) no-repeat center center; 
                display: block; height: 32px; width: 32px; position: absolute; right: 20px; top: 15px;}

    .toc-container a>span.visible-xs{display: inline !important; line-height: 1; padding: 0; margin: 0;}

    /* MENUS */
    .navbar-inverse{background-color: #373c44;}
    .subnav-container.menu-open{
        display: block !important; width: 100%; height: 100vh; position: absolute; max-width: none; min-width: 200px;
        padding-right: 20%; background: rgba(0,0,0,.5);
        overflow-y: auto;
    }
    .subnav-container.menu-open .container{background: #ffffff; height: 100%; text-align: left; padding: 0 0 100px;}
    .subnav-container #subnavbar.navbar-nav{margin: 0;}
    .subnav-container #subnavbar{margin-top: 0;}
    .subnav-container #subnavbar.navbar-nav li{width: 100%; text-align: left; padding: 0;}
    .subnav-container #subnavbar.navbar-nav li a{padding: 20px 15px; color: #373c44; display: block; border-bottom: 1px #e6e7e7 solid;}
    .subnav-container #subnavbar.navbar-nav li:last-child a{border: 0;}
    .subnav-container .container li a:hover{color: #373c44;}
    .subnav-container #subnavbar.navbar-nav li.active a, .subnav-container .navbar-nav li.active a:focus, .subnav-container .navbar-nav li.active a:hover{
        color: #393639; font-weight: bold;
    }
    #subnavbar.navbar-nav li.active a{background: #e6e7e7;}    
    .subnav-container #subnavbar.navbar-nav li{}
    
    .toc-container .toc ul{margin: 0;}
    .toc-container .toc li{width: 49%; margin: 0; padding: 10px 0; white-space: nowrap; position: relative;}

    .toc li.active:after {
        display: inline-block;
        background-color: #FFC10E;
        width: 100%;
        height: 1px;
        content: ' ';
        position: absolute;
        bottom: -2px;
        left: 0;
        box-shadow: 0 0px 8px 2px rgba(255, 193, 14, 0.52);
    }
    .toc li.visible-xs{display: inline-block !important;}
    
    .mobile-menu-header{
        border-bottom: 1px #373c44 solid; background: #e6e7e7;
        text-align: right; height: 60px;
    }
    .mobile-menu-header .ico{background-color: #FFC10E; position:absolute; top:0; right: 0; width: 44px; height: 44px; border-radius: 10px; margin: 7px 26px;}
    #subnavbar .mobile-menu-header{display: block;}
    .navbar-header .current-page{display: block; position: absolute; width: 70%; margin: 0 15%;  height: 50px; text-align: center; top:0; left: 0; line-height: 50px;}
    .navbar-header .current-page a{display: none; text-transform: uppercase; color: #ffffff; font-size: 110%;}
    .navbar-header .current-page a.active{display: inline-block;}
    
    
/* Widgets */    
    .panel-widget,
    #parental_control .mobile-form-separator{overflow: hidden;}
    .histogram-bar .icon-alert {right: -35px; display: none;}
    
/* Widget Online Devices */
/* Widget Line Status */
    #widget_online_devices .header-actions{display: none;}
    #widget_line_status .graph,
    #widget_online_devices .graph{margin-bottom: 6em;}
    #widget_line_status .info,
    #widget_online_devices .info{position: absolute; bottom: 8px; left: 0; width: 100%;}
    #widget_line_status .panel-body .row,
    #widget_online_devices .panel-body .row{position: relative;}
    #widget_line_status .summary,
    #widget_online_devices .summary{text-align: left;}
    #widget_line_status .summary .title,
    #widget_online_devices .summary .title{display: none;}
    #widget_line_status .summary .secondary,
    #widget_online_devices .summary .secondary{margin-top: 16px;}
    #widget_line_status .summary var,
    #widget_online_devices .summary var{display: inline; float: right; font-size: 1.2em; position: relative; bottom: 1px;}
    
    #widget_line_status .header-actions .title{display: none;}
    #widget_line_status .header-actions .content{border-bottom: 2px #393639 solid; padding-bottom: 0;}
    #widget_line_status .range-menu .radio-checks{width: 100%;}
    #widget_line_status .range-menu .radio-checks .btn{padding: 4px 0 12px 0px;}
    #widget_line_status .range-menu .radio-checks label{width: 50%; display: inline-block; text-align: center;}
    #widget_line_status .range-menu .radio-checks label span{padding: 0 5px 10px 5px; font-size: 1.2em;}
    #widget_line_status .range-menu .radio-checks label.active span{font-weight: bold;}
    #widget_line_status .range-menu .radio-checks label span:after{display: none;}
    #widget_line_status .range-menu .radio-checks label.active{border-bottom: 2px #393639 solid !important; border-radius: 0;}
    #widget_led_status .update-button .button-container{margin-top: 10px;}
    #widget_line_status .average{display: none;}
    
    #widget_online_devices .summary,
    #widget_line_status .summary{max-width: 370px; margin: auto; font-size: 1.4em;}
    #widget_line_status .summary var{font-size: 1em;}
    #widget_online_devices .summary sub,
    #widget_line_status .summary sub{bottom: auto; margin-left: .3em; font-size: 80%;}
    
    #widget_line_status .header-actions{text-transform: uppercase;}
    
/* Widget LED */
    #widget_led_status .summary{display: none;}
    #widget_led_status .widget-summary-alt{color: #9ea0a2; line-height: 1.8; letter-spacing: .06em; max-width: 402px; margin: 10px auto 0;}
    #widget_led_status .widget-summary-alt .text-right-xs{padding-right: 3.5em;}
    #widget_led_status .widget-summary-alt .text-right-xs:after{
        content: " ";
        width: .5em;
        height: .5em;
        border-radius: 50%;
        background: #ed153d;
        display: block;
        position: absolute;
        top: .65em;
        right: 2.2em;
    }
    #widget_led_status .widget-summary-alt .text-right-xs.presence:after{
        background: #393639;
    }
    #widget_led_status .widget-summary-alt .text-right-xs.active:after,
    #widget_led_status .widget-summary-alt .text-right-xs.blinkafter:after{
        background: #00e736;
    }
    
    #widget_led_status .widget-summary-alt .text-right-xs.active.presence:after{
        background: #f2f2f2;
    }

/* Widget WiFi Channel */
    #widget_wifi_channel .header-actions .title{display: none;}
    #widget_wifi_channel .summary .large_num,
    #widget_wifi_channel .summary .warning{display: none;}
    #widget_wifi_channel .header-actions .content{border-bottom: 2px #393639 solid; padding-bottom: 0;}
    #widget_wifi_channel .range-menu .radio-checks{width: 100%;}
    #widget_wifi_channel .range-menu .radio-checks .btn{padding: 4px 0 12px 0px;}
    #widget_wifi_channel .range-menu .radio-checks label{width: 50%; display: inline-block; text-align: center; border-radius: 0 !important;}
    #widget_wifi_channel .range-menu .radio-checks label span{padding: 0 5px 10px 5px;}
    #widget_wifi_channel .range-menu .radio-checks label.active span{font-weight: bold; white-space: normal;}
    #widget_wifi_channel .range-menu .radio-checks label span:after{display: none;}
    #widget_wifi_channel .range-menu .radio-checks label.active{border-bottom: 2px #393639 solid !important;}
    #widget_wifi_channel .y-axis p span{display: none;}
    #widget_wifi_channel .vhgrm-wrap .y-axis p{width: 25px;}
    #widget_wifi_channel .vhgrm-wrap{padding-left: 26px;}
    #widget_wifi_channel .asc_label{display: none;}
    
/* Widget family devices */
    .devices-page #widget_family_devices,
    #widget_family_devices_mini{display: block; position: relative;}
    .devices-page #widget_family_devices .icon.clock{width: 32px; height: 32px;}
    .devices-page #widget_family_devices.panel-widget>.panel-body,
    #widget_family_devices_mini.panel-widget>.panel-body{min-height: 90px;}
    .devices-page #widget_family_devices .buttons-wrap,
    #widget_family_devices_mini .buttons-wrap{position: absolute; width: 100%; bottom: 23px; left: 0; margin: 0;}
    .devices-page #widget_family_devices .mobile-form-separator,
    #widget_family_devices_mini .mobile-form-separator{padding: 0 10px;}
    .devices-page #widget_family_devices .mobile-form-separator .icon,
    #widget_family_devices_mini .mobile-form-separator .icon{margin-left: 5px; margin-right: 10px; vertical-align: initial; margin-top: 12px; position: absolute; top:10px; left:8px;}
    .devices-page #widget_family_devices .mobile-form-separator div span,
    #widget_family_devices_mini .mobile-form-separator div span{display: inline; vertical-align: initial;}
    .devices-page #widget_family_devices .mobile-form-separator div,
    #widget_family_devices_mini .mobile-form-separator div{padding-right: 0; display: block; margin-left: 45px;}

/* Widget parental control */

    
/* Unavailable on mobile and general widgets */
    .as-sortable-item, .as-sortable-placeholder{min-height: 0;}
    #widget_parental_control,
    #widget_family_devices{display: none;}
    .devices-page #widget_family_devices{display: block;}
    .panel-widget .panel-heading,
    .panel .panel-heading{display: none;}
    .panel .panel-heading-xs{display:block; margin: 0; border-bottom: 1px #373c44 solid; background: #e6e7e7; color: #858588;
        text-align: left; min-height: 60px; line-height: 60px; padding: 0 15px; white-space: nowrap;}
    .panel .panel-heading-xs h3{font-size: 1em; vertical-align: middle; display: inline-block;}
    
    
    .mobile-adv-list{margin: 0 15px; text-transform: uppercase;}
    .mobile-adv-list div{border-bottom: 1px #e6e7e7 solid; padding: 6px 0px;}
    .mobile-adv-list div:last-child{border-bottom: 0;}
    .mobile-adv-list span{display: inline-block; text-align: middle;}
    
    .mobile-adv-list .icon{width: 32px; height: 32px; line-height: 32px; text-align: center; color: #ffffff;}
    .mobile-adv-list .icon-numeric{background: #595c60; font-size: 160%;}
}


/* Very small screens */
@media (max-width: 350px){
    .button-container .btn{font-size: 12px;}
}
@media (max-width: 312px){
    .button-container .btn{width: 100%; margin-bottom: 10px;}
    .devices-page #widget_family_devices{padding-bottom: 120px;}
}
@media (max-width: 410px){
    #widget_led_status .router-wrap-inner{width: 280px;}
    #widget_led_status .router-wrap #router-leds{width:190px;}
    #widget_led_status .router-wrap .legend.visible-xs{left: 263px; top: 44px;}
    #widget_led_status .router-wrap .legend.visible-xs div{height: 23px;}
    .leds-widget .legend{width: 130px;}
    
    #widget_led_status .widget-summary-alt{font-size: .9em; line-height: 1.7; letter-spacing: .04em; margin: 10px auto 0;}
    #widget_led_status .widget-summary-alt .text-right-xs{padding-right: 2em;}
    #widget_led_status .widget-summary-alt .text-right-xs:after{
        right: .7em;
    }
    
    #devices-svg-wrap .dev-info{bottom: 0;}
    #devices-svg-wrap .dev-info var{font-size: 6em;}
}