/**
Stili specifici per alcune pagine

Se diventano stili generali si possono sempre spostare
*/

.col-8-fixed-container{margin: -6px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fcfbfb; padding: 15px;}
.col-8-fixed-container .row{margin-bottom: 10px;}
.col-8-fixed-container div.col-xs-3{padding-top: 6px;}
@media (min-width: 768px){.col-8-fixed-container{margin-left: -185px;}}
@media (min-width: 992px){.col-8-fixed-container{margin-left: -155px;}}
@media (min-width: 1200px){.col-8-fixed-container{margin-left: -195px;}}

/* ---------------------------
    HOME PAGE
------------------------------ */
@media (min-width: 767px) {
    .container-inner.home-page {
        padding-bottom: 700px;
    }
}

/* ---------------------------
    INFO PAGE
------------------------------ */
.info-page #panel_1 .panel-body{padding: 20px 15px;}
.info-page #panel_1 .panel-body .row{margin-top:6px; margin-bottom: 6px;}
.info-page #panel_1 .panel-body .page-action{padding: 30px 0 10px;}

.advanced-page table.spc .c1{}
.advanced-page table.spc .c1{}

#port_conf_manual span.form-control {
    font-weight: normal;
}

/* ---------------------------
    WIDGETS
------------------------------ */
.widget-summary{font-size: 110%; color: #FFC10E; margin-top: 10px; margin-bottom: 10px;}
.widget-summary-alt{font-size: 110%; margin-top: 10px; margin-bottom: 10px;}

/* General widget styles */
    /* Widget summary at left*/
    .panel-widget .summary{text-align: center; color: #7f858b; font-size: 16px;}
    .panel-widget .summary var{font-size: 60px; font-style: normal; display: block; line-height: 1;}
    .panel-widget .summary .main{color: #FFC10E; line-height: 1; font-size: 90%;}
    .panel-widget .summary .secondary{color: #FFFFFF; line-height: 1; font-size: 90%; margin-top: 10px;}
    
    .panel-widget .summary .info{padding-left: 10px; color: #7f858b; text-align: center; font-size: 90%;}
    .panel-widget .summary .warning{padding-left: 10px; color: #ffffff; text-align: center; margin-top: 10px;}
    .panel-widget .summary .warning .message{padding: 24px;}
    .panel-widget .summary .large_num{padding: 15px 0; color: #ffffff; font-size: 90%; line-height: 1;}
    .panel-widget .summary .large_num var{font-size: 60px;}
    .panel-widget .summary .large_num span{}

    /* Checkboxes on top of a widget */
    .header-actions{color: #393639; font-size: 110%;}
    .header-actions .title{padding: 6px 0;}
    .header-actions .content{border-bottom: 2px #393639 solid; padding-bottom: 10px; margin-bottom: 10px;}

/* Parental control mini */
    .panel-widget-mini.panel-widget>.panel-body{min-height: 40px; font-size: 1.2em; color: #a1a3a5;}
    .panel-widget-mini .panel-body{padding-bottom: 10px;}
    .panel-widget-mini .mobile-form-separator{background: transparent; border: 0;}
    .panel-widget-mini .icon{background-color: transparent; width: 40px; height: 40px; background-size: cover; margin-right: 20px; margin-top: 10px; vertical-align: top;}
    .panel-widget-mini a{color: #FFC10E;}
    .panel-widget-mini .mobile-form-separator p span{display: inline;}
    
    
/* Histogram */
    .range-menu .radio-checks .btn{padding-right: 55px;}
    .line-widget{padding-bottom: 30px;}

    .histogram-bar{width: auto; position: relative; margin-left: 60px;}
    .histogram-bar .upload{background: #FFFFFF; display: inline-block; height: 10px; position: absolute; top: 0; left: 0; z-index: 3;}
    .histogram-bar .download{background: #FFC10E; display:inline-block; height: 10px; position: absolute; top: 0; left: 0; z-index: 2;}
    .histogram-bar div:after{
        content: "";
        position: absolute;
        top: 0px;
        right: -10px;
        border-width: 0 0 10px 10px;
        border-style: solid;
        border-color: transparent #FFFFFF;
        display: block;
        width: 0;
    }
    .histogram-bar .download:after{border-color: transparent #FFC10E;}
    .histogram-bar div.disab:after{display: none;}
    .histogram-bar .icon-alert{background: transparent url(img/icon-alert.svg) no-repeat center center; width: 20px; height: 20px; position: absolute; right: -42px; top: -5px;}

    .line-widget .hgrm_wrap{padding-top: 40px; position: relative; margin-top: 10px; margin-right: 20px; min-height: 208px;}
    .line-widget .hgrm_wrap:after {display: block;border-bottom: 1px #000 solid;width: 104%;bottom: 0px;height: 1px;position: absolute;left: 0;content: " ";}
    .line-widget .hgrm_wrap .line{position: relative; height: 24px; font-weight: normal; line-height: 1;}
    .line-widget .hgrm_wrap label{position: absolute; left: 0px; color: #393639; top: 0; font-weight: normal;}
    .line-widget .hgrm_wrap .scale{border-left: 1px #393639 solid;  margin-left: 59px; height: 100%; position: relative;}
    .line-widget .hgrm_wrap .scale_wrap{width: 100%; position: relative;  position: absolute; bottom: 0; height: 100%; left: 0; z-index: 4;}
    .line-widget .hgrm_wrap .scale .average{border-right: 1px #393639 dashed; position:absolute; bottom: -15px; left: 0; height: 95%;}
    .line-widget .hgrm_wrap .scale .download{color: #FFC10E;}
    .line-widget .hgrm_wrap .scale span{position: absolute; top: -34px; right: -30px; width: 60px; text-align: center; line-height: 1.2;}
    .line-widget .hgrm_wrap .scale var{position: absolute; bottom: -32px; right: -40px; width: 80px; text-align: center; color: #393639; font-style: normal; font-size: 110%;}
    .line-widget .hgrm_wrap .scale .bottom{top: auto; bottom: -21px; left: -20px; right: auto; text-align: left; color: #393639; font-style: normal; font-size: 100%; width: 80px;}
    .line-widget .hgrm_wrap .scale .top{top: auto; bottom: -21px; left: auto; right: -20px; text-align: right; color: #393639; font-style: normal; font-size: 100%; width: 80px;}

/* WIFI Channels widget */
    .vhgrm-wrap-outer{margin: 30px 0 40px;}
    .vhgrm-wrap{border-bottom: 1px #393639 solid; height: 154px; padding-left: 51px; position: relative;}
    .vhgrm-wrap div{height: 100%;}
    .vhgrm-wrap .y-axis{display: inline-block; border-right: 1px #393639 solid; color: #393639; height: 154px; position: absolute; bottom: 0; left: 0px;}
    .vhgrm-wrap .y-axis p{text-align:left; height: 22px; margin: 0; width: 50px; line-height: 1;}
    .vhgrm-wrap .histo-wrapper{display: block; width: 100%;}
    .vhgrm-wrap .line{position: relative;}
    .vhgrm-wrap .line .label{color: #393639; position: absolute; bottom: -20px; left: 5px; height: 20px; line-height: 30px; width: 12px;}
    .vhgrm-wrap .line .label:after{display:block; content: " "; border-right: 1px #393639 solid; width: 1px; height: 5px; position: absolute; top: 0; left: 10px;}
    .narrow .vhgrm-wrap .line .label{left: 2px;}
    .narrow .vhgrm-wrap .line .label:after{left: 13px;}
    .hgw{display: inline-block; width: 7.2%;}
    .narrow .hgw{width: 5%;}
    .narrow .hgw .label span{transform: rotate(-50deg); -webkit-transform: rotate(-50deg); display: inline-block;}
    
    span.asc_label{
        color: #333;
        position: absolute;
        bottom: -2em;
        left: 0;
        width: 47px;
        text-align: right;
        font-size: .9em;
    }
    
    .histogram-bar-v{width: auto; position: relative; margin-bottom: 40px;}
    .histogram-bar-v .networks{background: #FFC10E; display:inline-block; width: 10px; position: absolute; bottom: 0; left: 10px; z-index: 2; max-height: 154px;}
    .histogram-bar-v div:after{
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        border-width: 0 12px 12px 0;
        border-style: solid;
        border-color: transparent #595c60;
        display: block;
        width: 0;
    }
    .histogram-bar-v.empty div:after{border: 0;}
    .histogram-bar-v div span{
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 12px;
        background: #fff;
    }
    .histogram-bar-v div span:after{
        content: "";
        position: absolute;
        top: -12px;
        left: 0px;
        border-width: 12px 0 0 10px;
        border-style: solid;
        border-color: transparent #FFFFFF;
        display: block;
        width: 0;
    }
    
/* LED INFORMATIONS */
    #router-leds #ledpresenza{fill:#393639;}
    #router-leds #ledline{fill:#ed153d;}
    #router-leds #ledwifi{fill:#ed153d;}
    #router-leds #ledwps{fill:#ed153d;}

    #led_panel .icon-bullet {
        background-color: #00e736;
    }
    #led_panel .icon-bullet.inactive {
        background-color: #ed153d;
    }
    
    #router-leds.presenza-on #ledpresenza{fill:#f2f2f2;}
    #router-leds.line-on #ledline{fill:#00e736;}
    #router-leds.wifi-on #ledwifi{fill:#00e736;}
    #router-leds.wps-on #ledwps{fill:#00e736;}
    #widget_led_status .update-button .button-container{margin-top: -36px;}
    .router-wrap{}
    .leds-widget .legend{color: #7f858b; text-align: right; position: absolute; right: 15px; top: 19%; width: 100%; padding-left: 240px;}
    .leds-widget .legend div{line-height: 1.9; border-top: 1px #393639 solid; margin-left: 14px;}
    .leds-widget .legend div.presence{line-height: 1.3; padding-bottom: 10px; margin-left: 0;}
    #widget_led_status.panel-widget .summary .warning .message {
        padding: 24px 14px;
    }
    @media (max-width: 767px){
        #router-leds{text-align: center;}
        .leds-widget .legend{width: 250px;left: 50%;right: auto;margin-left: -105px; padding: 0; text-align: left;}
        .leds-widget .legend div{margin-left: 0; margin-right: 54px;}
        .leds-widget .legend div.presence{margin-right: 20px;}
        #widget_led_status .update-button{padding: 15px 0;}
        
        #widget_led_status .router-wrap{}
        #widget_led_status .router-wrap-inner{width: 380px; margin: auto; position: relative;}
        #widget_led_status .router-wrap #router-leds{float: none; width:270px;}
        #widget_led_status .router-wrap .legend.visible-xs{float: none; left: 332px; top: 68px;}
        #widget_led_status .router-wrap .legend.visible-xs div{border-top: 0; height: 30px; position: relative; margin-left: 60px;}
        #widget_led_status .router-wrap .legend.visible-xs div:before{border-bottom: 1px #7f858b solid;
            display: block; content: " "; width: 39px; position: absolute; left: -49px; top: 12px;
        }
        #widget_led_status .router-wrap .legend.visible-xs div.presence:before{width: 50px; left: -60px;}
        
    }

    #usb_conf .btn-black{color: #333;}
    
/* ONLINE DEVICES */
    #devices-svg-wrap{width:100%; height: 220px; margin:0 auto 20px; position: relative;}
    #devices-svg-wrap .rocket{position: absolute; background: url(img/rocket.svg) no-repeat center center; background-size: 100%; width:17px; height: 17px; display: block;}
    #devices-svg-wrap .stop{position: absolute; background: url(img/halt.svg) no-repeat center center; background-size: 100%; width:17px; height: 17px; display: block;}
    #devices-svg-wrap .dev-info{position: absolute; width: 180px; bottom: -10px; left: 50%; margin-left: -90px; text-align: center; color: #9ea0a2;}
    #devices-svg-wrap .dev-info var{font-style: normal; font-size: 7em; line-height: 1.2;}
    #devices-svg-wrap .dev-info p{font-size: 90%; line-height: 1.2;}
    
/* Parental control */
    .protected_devices .device{padding: 10px 0; text-align: center; color: #393639;}
    
/* Radio buttons */
    .radio-checks .btn{border: none !important; background: transparent !important; box-shadow: none; padding-left: 0;}
    .radio-checks .btn span{padding-left: 24px; position: relative; color: #393639;}
    .radio-checks .btn span:after{content: " "; position: absolute; left: 0; top:3px; border: 1px #393639 solid; height: 16px; width: 16px; border-radius: 4px;}
    .radio-checks .btn.active span:after{background: #393639;}
    
/* Icons */
    .icon{display: inline-block; width: 25px; height: 25px; border-radius: 5px; content: " "; vertical-align: middle; margin-right: 6px;
          background-color: #e7e7e6;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
    }
    .icon.active{background-color: #fbbc09;}
    .icon.icon- {background-image: url(img/icon-raw-phone.svg);}
    /* Consolle:    0 */
    .icon-joypad, .icon-consolle, .icon-0{background-image: url(img/icon-raw-joypad.svg);}
    /* Printer:     1 */
    .icon-printer, .icon-1{background-image: url(img/icon-raw-printer.svg);}
    /* PC:          2 */
    .icon-desktop, .icon-2{background-image: url(img/icon-raw-desktop.svg);}
    /* Notebook:    3 */
    .icon-notebook, .icon-3{background-image: url(img/icon-raw-notebook.svg);}
    /* Smartphone:  4*/
    .icon-phone, .icon-4{background-image: url(img/icon-raw-phone.svg);}
    /* Tablet:      5*/
    .icon-tablet, .icon-5{background-image: url(img/icon-raw-tablet.svg);}
    /* TV:          6*/
    .icon-tv, .icon-6{background-image: url(img/icon-raw-tv.svg);}
    /* Generic:     7*/
    .icon-generic, .icon-7{background-image: url(img/icon-raw-generic.svg);}
    /* Hard Disk:   8*/
    .icon-hd, .icon-hdd, .icon-harddisk, .icon-8{background-image: url(img/icon-raw-hd.svg);}
    
    .icon-delete{background-image: url(img/delete.svg);}
    a.icon-delete{background-image: url(img/delete-nb.svg); height: 34px; width: 34px;}
    
    .icon-boost-active{background-image: url(img/rocket.svg); background-color: transparent; background-size: 17px 17px;}
    .icon-boost-noactive{background-image: url(img/rocket-off.svg); background-color: transparent; background-size: 17px 17px;}
    .icon-stop-active{background-image: url(img/halt.svg); background-color: transparent; background-size: 17px 17px;}
    .icon-stop-noactive{background-image: url(img/halt-off.svg); background-color: transparent; background-size: 17px 17px;}
    
    .icon-line-status{background-image: url(img/icon-line-status.svg); background-color: transparent;}
    .icon-wifi-status{background-image: url(img/icon-wifi-status.svg); background-color: transparent;}
    .icon-wps-status{background-image: url(img/icon-wps-status.svg); background-color: transparent;}
    
    .heading-boost{background-image: url(img/rocket-black.svg); background-position: left center; background-color: transparent; background-size: 17px 17px; background-repeat: no-repeat; padding-left: 22px;}
    .heading-stop{background-image: url(img/halt-black.svg); background-position: left center; background-color: transparent; background-size: 17px 17px; background-repeat: no-repeat; padding-left: 22px;}
    

/* Large Icons */
    .icon-large{display: inline-block; width: 50px; height: 50px; border-radius: 5px; vertical-align: middle; color: #393639; margin-bottom: 3px; background-size: 100%; background-color:#e7e7e6; background-repeat: no-repeat; background-position: center center;}
    
    /* Consolle:    0 */
    .icon-large.icon-joypad, .icon-large.icon-consolle, .icon-large.icon-0{background-image: url(img/icon-raw-joypad-l.svg);}
    /* Printer:     1 */
    .icon-large.icon-printer, .icon-large.icon-1{background-image: url(img/icon-raw-printer-l.svg);}
    /* PC:          2 */
    .icon-large.icon-desktop, .icon-large.icon-2{background-image: url(img/icon-raw-desktop-l.svg);}
    /* Notebook:    3 */
    .icon-large.icon-notebook, .icon-large.icon-3{background-image: url(img/icon-raw-notebook-l.svg);}
    /* Smartphone:  4*/
    .icon-large.icon-phone, .icon-large.icon-4{background-image: url(img/icon-raw-phone-l.svg);}
    /* Tablet:      5*/
    .icon-large.icon-tablet, .icon-large.icon-5{background-image: url(img/icon-raw-tablet-l.svg);}
    /* TV:          6*/
    .icon-large.icon-tv, .icon-large.icon-6{background-image: url(img/icon-raw-tv-l.svg);}
    /* Generic:     7*/
    .icon-large.icon-generic, .icon-large.icon-7{background-image: url(img/icon-raw-generic-l.svg);}
    /* Hard Disk:   8*/
    .icon-large.icon-hd, .icon-large.icon-hdd, .icon-large.icon-harddisk, .icon-large.icon-8{background-image: url(img/icon-raw-hd-l.svg);}

    .icon-large.active{background-color: #fbbc09;}