/**** Adding Avenir Fonts ****/
@font-face{
    font-family:"Avenir";
    src:url("../fonts/3511a780-31ca-4ee1-9083-89b1b7185748.eot?#iefix");
    src:url("../fonts/3511a780-31ca-4ee1-9083-89b1b7185748.eot?#iefix") format("eot"),
        url("../fonts/4fb9056b-4ac3-488b-9bac-75741b0ff0bd.woff2") format("woff2"),
        url("../fonts/c4352a95-7a41-48c1-83ce-d8ffd2a3b118.woff") format("woff"),
        url("../fonts/3e419b5b-c789-488d-84cf-a64009cc308e.ttf") format("truetype"),
        url("../fonts/ca038835-1be3-4dc5-ba25-be1df6121499.svg#ca038835-1be3-4dc5-ba25-be1df6121499") format("svg");
}

/**** Icon Fonts ****/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?drw2xf');
  src:  url('../fonts/icomoon.eot?drw2xf#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?drw2xf') format('truetype'),
    url('../fonts/icomoon.woff?drw2xf') format('woff'),
    url('../fonts/icomoon.svg?drw2xf#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; 
    /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.icon-Advanced:before { content: "\e900";}
.icon-Content-Sharing:before { content: "\e901";}
.icon-Internet:before { content: "\e902";}
.icon-Logout:before { content: "\e903";}
.icon-Man-01:before { content: "\e904";}
.icon-Man-02:before { content: "\e905";}
.icon-Man-03:before { content: "\e906";}
.icon-Man-04:before { content: "\e907";}
.icon-Man-05:before { content: "\e908";}
.icon-Man-06:before { content: "\e909";}
.icon-No:before { content: "\e90a";}
.icon-Parental-Control:before { content: "\e90b";}
.icon-Phone:before { content: "\e90c";}
.icon-Router:before { content: "\e90d";}
.icon-Summary:before { content: "\e90e";}
.icon-USB-Drive:before { content: "\e90f";}
.icon-USB:before { content: "\e910";}
.icon-Wired-Devices:before { content: "\e911";}
.icon-Wireless:before { content: "\e912";}
.icon-Woman-01:before { content: "\e913";}
.icon-Woman-02:before { content: "\e914";}
.icon-Woman-03:before { content: "\e915";}
.icon-Woman-04:before { content: "\e916";}
.icon-Woman-05:before { content: "\e917";}
.icon-Woman-06:before { content: "\e918";}
.icon-Yes:before { content: "\e919";}
.icon-Diagnostics:before { content: "\e91a";}
.icon-Local-Network:before { content: "\e91b";}
.icon-Management:before { content: "\e91c";}
.icon-QOS:before { content: "\e91d";}
.icon-Routing:before { content: "\e91e";}
.icon-Security:before { content: "\e91f";}
.icon-System:before { content: "\e920";}
.icon-Yes { background-color: #59ad00; width: 20px; height: 20px; border-radius: 10px;}
.icon-Logout:before { font-size: 30px; line-height: 30px;}
.icon-Logout { background-color: #00c0f3; width: 30px; height: 30px; border-radius: 15px; display: inline-block;}
.icon-Cross:before { content: "\e90a";}
.icon-Cross { background-color: red; width: 20px; height: 20px; border-radius: 10px;}

/**** Global CSS ****/
* { font-family: "Avenir";}
body, header, footer, section, main, nav, div { padding: 0; margin: 0; font-size: 14px; }
body > .row { margin-left: 0px !important; margin-right: 0px !important; margin-top: 30px;}
a, li, span, label { font-size: 14px; color: white;}
p { font-size: 14px;}
a { text-decoration: none;}
a:hover { color: white;}
body { background-color: #f0eeef;}
.link, .link:hover { text-align: center; color: #00c0f3;}
.block { display: block;}

/** Headers **/
h1, h2, h3 { text-transform: uppercase;}
h1 { font-size: 24px;}
h2 { font-size: 20px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h2 > span { text-transform: none; font-size: 20px;}

/** Margin **/
.margin-top { margin-top: 24px;}
.margin-top-half { margin-top: 12px;}
.margin-top-double { margin-top: 48px;}
.margin-bottom { margin-bottom: 24px;}
.margin-bottom-half { margin-bottom: 12px;}
.margin-bottom-double { margin-bottom: 48px;}

/** Border **/
.border-left { border-left: 2px solid #d7d8da;}
.border-right { border-right: 2px solid #d7d8da;}
.border-top { border-top: 2px solid #d7d8da;}
.border-bottom { border-bottom: 2px solid #d7d8da;}

/** Padding **/
.nopadding { padding: 0 !important; margin: 0 !important;}
.nopadding-left { padding-left: 0 !important; margin-left: 0 !important;}
.nopadding-right { padding-right: 0 !important; margin-right: 0 !important;}

/** Equal Col Height **/
.row-eq-height { display: table;}
.row-eq-height > [class*="col-"] { float: none; display: table-cell; vertical-align: top; }
@media screen and (max-width: 668px) {
    .row-eq-height { display: block;}
    .row-eq-height > [class*="col-"] { display: block; vertical-align: top; }
}

form fieldset { margin-bottom: 12px;}
form fieldset span { width: 90px; display: inline-block;}
form .field { margin-bottom: 12px;}
.blue, .blue * { color: #005c9f !important;}
.lightblue, .lightblue * { color: #00c0f3 !important;}

iframe { border: 0; padding: 0; margin: 0;}

/** Radio Button **/
/* HTML5 Boilerplate accessible hidden styles */
[type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}

/* One radio button per line */
label { display: inline-block; cursor: pointer; line-height: 2.5; font-size: 1.125em; margin-right: 0.75em;}
[type="radio"] + span { display: block; font-weight: lighter; }

/* the basic, unchecked style */
[type="radio"] + span:before { content: ''; display: inline-block; width: 1.125em; height: 1.125em; vertical-align: -0.25em;  border-radius: 1em;  border: 0.125em solid #00bff3; margin-right: 0.5em; transition: 0.5s ease all;}

/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before { background-color: white;}
[type="radio"]:checked:disabled + span:before, [type="radio"]:disabled + span:before { background-color: #ebebe4;}
[type="radio"]:disabled + span { text-decoration: line-through;}

/** Checkbox Button **/
/* HTML5 Boilerplate accessible hidden styles */
[type="checkbox"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}

/* One radio button per line */
label { display: inline-block; cursor: pointer; line-height: 2.5; font-size: 1.125em; margin-right: 0.75em;}
[type="checkbox"] + span { display: block; font-weight: lighter; }

/* the basic, unchecked style */
[type="checkbox"] + span:before { content: ''; display: inline-block; width: 1.125em; height: 1.125em; vertical-align: -0.25em; border-radius: .25em;  border: 0.125em solid #00bff3; margin-right: 0.5em; transition: 0.5s ease all;}

/* the checked style using the :checked pseudo class */
[type="checkbox"]:checked + span:before { background-color: white;}

/* disable style */
[type="checkbox"]:checked:disabled + span:before, [type="checkbox"]:disabled + span:before { background-color: #ebebe4;}
[type="checkbox"]:disabled + span { text-decoration: line-through;}

/** Text & Password Field **/
input[type=text], input[type=password], select, textarea { border: 1px solid #00bff3; color: #7a7a7a; font-size: 14px; line-height: 24px; padding-left: 6px; width: 196px;}
input[type=text]:disabled, input[type=password]:disabled, select:disabled { background-color: #ebebe4;}


/** Select Drop Down **/
select { height: 28px;}

/** Buttons **/
.btn { border-radius: 0; text-decoration: none;}
.btn:first-of-type { margin-left: 10px;}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-alternate, .btn-alternate:hover, .btn-alternate:focus { padding: 6px 32px; font-size: 14px; font-weight: bold; border: 1px solid white; color: white;}
.btn-primary, .btn-primary:hover, .btn-primary:focus { background: #00bff3; }
.btn-alternate, .btn-alternate:hover, .btn-alternate:focus { background: #ed1c24;}
.btn em { font-size: 12px;}
@media screen and (max-width: 480px) {
    .btn:first-of-type { margin-left: 0px;}
    .wizard .btn:first-of-type { margin-left: 10px;}    
    .wizard select, .wizard input[type=text], .wizard input[type=password], .wizard fieldset .field span, .wizard fieldset#status div.alert { width: 100% !important;} 
}

/** Logo **/
body.welcome-screen #logo { background-image: url('../images/logo.png'); width: 348px; height: 48px; display: block; text-indent: -9999px; margin: 24px 0 0 48px;}
@media screen and (max-width: 767px) {
    body.welcome-screen #logo { margin: 24px auto;}
}
/** Login box **/
.login-box { /* width: 350px; margin: 100px auto 0; */ margin-top: 100px;}
.login-box .field { display: flex; justify-content: space-between;}

/** Welcome Screen & Wizard CSS **/
body.welcome-screen, body.wizard { background-color: #005c9f; color: white;}
.welcome-message { width: 650px; margin: 100px auto 0;}
.welcome-message p { line-height: 150%; margin: 12px 0;}
.welcome-message p.ques { font-weight: bold;}
.welcome-message a.msg-btn { display: inline-block; background-color: #00bff3; border: 1px solid white; color: white; padding: 2px 12px; width: 140px; text-align: center; font-weight: bold; font-family: "Avenir"; text-decoration: none; margin-top: 24px; border-radius: 0px; letter-spacing: 1px;}
.welcome-message a.msg-btn:first-of-type { margin-left: 12px;}
@media screen and (max-width: 650px) {
    .welcome-message { width: 95%;}
}

/** Progress Bar **/
.stepwizard { display: table; width: 100%; position: relative; margin-top: 48px;}
.stepwizard-row { display: table-row;}
.stepwizard-step p { text-transform: uppercase; letter-spacing: 1px;}
.stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important;}
.stepwizard-step:before, .stepwizard-step:after { position: absolute; content: ""; width: 50%; height: 2px; background-color: #00bff3; z-index: -10; top: 78%; left: 0;}
.stepwizard-step:after { left: 50%;}
.stepwizard-step:first-of-type:before, .stepwizard-step:last-of-type:after { height: 0;}
.stepwizard-step { display: table-cell; text-align: center; position: relative; width: 16.6%;}
.stepwizard-step .btn-circle, .stepwizard-step .btn-circle:hover, .stepwizard-step .btn-circle:focus { width: 20px; height: 20px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; border: 2px solid #00bff3; background-color: #005c9f;}
.stepwizard-step .btn-primary, .stepwizard-step .btn:hover, .stepwizard-step .btn:focus { background-color: white; border: 2px solid #00bff3;}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .stepwizard { margin-top: 72px;}
    .stepwizard-step p { height: 30px;}
    .stepwizard-step:before, .stepwizard-step:after { top: 82%; width: 46%;}
    .stepwizard-step:after { left: 62%;}
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .stepwizard { margin-top: 72px;}
    .stepwizard-step p { height: 30px;}
    .stepwizard-step:before, .stepwizard-step:after { top: 82%; width: 48%;}
    .stepwizard-step:after { left: 59%;}
}
@media screen and ( min-width: 480px) and (max-width: 767px) {
    .stepwizard { margin-top: 24px;}
    .stepwizard-step { display: block; width: 100%; margin-bottom: 25px;}
    .stepwizard-step p { display: block; width: 100%; margin: 0 0 0 40px; height: auto; text-align: left;}
    .stepwizard-step a { display: block; margin-top: -25px; margin-bottom: 35px;}
    .stepwizard-step:before { height: 0; display: block;}
    .stepwizard-step:after { height: 32px; width: 2px; left: 19px; margin-top: 3px;}
}
@media screen and (max-width: 479px) {
    .stepwizard { margin-top: 24px;}
    .stepwizard-step { display: block; width: 100%; margin-bottom: 25px;}
    .stepwizard-step p { display: block; width: 100%; margin: 0 0 0 40px; height: auto; text-align: left;}
    .stepwizard-step a { display: block; margin-top: -25px; margin-bottom: 35px;}
    .stepwizard-step:before { height: 0; display: block;}
    .stepwizard-step:after { height: 32px; width: 2px; left: 10px; margin-top: 3px;}
}

/** Wizard **/
.wizard { margin: 48px auto; width: 85%;}
.wizard fieldset .field span { width: 165px;}
.wizard #credentials .field span { width: 90px;}
.wizard #staticIPSettings .field span { width: 180px;}
.wizard #vlan .field span { width: 140px;}
.wizard .wireless input, .wizard .wireless select, .wizard .router input { width: 300px;}
.wizard .phone fieldset .field span { width: 115px;}
.wizard .phone fieldset .field.server span { width: 165px;}
.wizard .phone input { width: 350px;}
.wizard .phone .server input { width: 300px;}
.wizard #credentials label { display: block;}
.wizard #vlan, .wizard #staticIPSettings { display: none;}
.wizard #serviceType span, .wizard #connectionType span { width: auto; display: inline-block;}
.wizard #vpivci .col { padding-left: 0; padding-right: 0;}
.wizard #vpivci span { margin-right: 2px; width: auto;}
.wizard fieldset#status .field > div { display: block;}
.wizard fieldset#status > div { padding: 2px 0; clear: both; margin-bottom: 12px;}
.wizard fieldset#status div.alert { margin-bottom: 12px; width: 250px; border-radius: 0; color: white; border: 0; font-weight: bold; padding: 2px 0;}
.wizard fieldset#status div.alert-success:before, .wizard fieldset#status div.alert-danger:before { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.wizard fieldset#status div.alert-success { background-color: #3eb549;}
.wizard fieldset#status div.alert-success:before { content: "\e013"; margin-right: 6px; margin-left: 10px;}
.wizard fieldset#status div.alert-danger { background-color: #ff1e00;}
.wizard fieldset#status div.alert-danger:before { content: "\e014"; margin-right: 6px; margin-left: 10px;}
.wizard fieldset#status div.alert-progress { background-color: #FFA500;}
.wizard fieldset#status div.alert-progress:before { content: " "; margin-right: 6px; margin-left: 10px;}
.wizard #timezone { width: 100%;}

@media screen and (min-width: 1024px) {
    .wizard .setup-content > .col-md-6 { min-height: 350px;}
}
@media screen and (max-width: 767px) {
    .wizard { margin-top: 0px;}
    .wizard input, .wizard select, .wizard .phone input, .wizard .phone .server input { width: 100%;}
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
    .wizard #vpivci input { width: 175px;}
}

/**** #page-wrapper ****/
#page-wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -35px; position: relative;}
#push { height: 35px; clear: both;}

/** Navigation **/
.navbar-default { background: none; border: 0; color: #959595;}
.navbar-default .navbar-toggle { border-color: #fff;}
.navbar-default .navbar-toggle .icon-bar { background-color: #fff;}
.navbar-header { background: #00C0F3; width: 100%;}
.navbar-header > a.navbar-brand { text-indent: -9999px; background-image: url("../images/logo.png"); width: 80%; background-size: contain; background-repeat: no-repeat; margin-left: 15px !important; margin-top: 10px; height: 40px; padding: 10px !important;}
.navbar-header > a.navbar-brand:hover { background-image: url("../images/logo.png"); color: #ffffff !important; background-repeat: no-repeat; background-size: contain;}
.navbar-default .nav li { background: #ffffff; border: 1px solid #e1e1e1; width: 100%; margin-bottom: 4px; font-weight: bold;} 
.navbar-default a, .navbar-default a:hover, .navbar-default .navbar-nav > li:hover > a, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { text-decoration: none; background: none;} 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li:hover > a, .navbar-default .navbar-nav > .active > a:hover { color: #00c0f3;}
.navbar-default a span { color: inherit; font-size: 40px; display: inline-block; margin-top: -5px; margin-left: -60px; position: absolute;}
.navbar-default a span:before { margin-top: -5px; display: block;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li > a { color: #959595; font-size: 16px;}
.navbar-default a { line-height: 200%; margin-left: 60px; display: inline-block; padding: 30px 15px !important; text-transform: uppercase;}
.navbar-default li:first-of-type a { padding: 15px;}
.navbar-default .active span, .navbar-default li:hover span, .navbar-default .active a, .navbar-default li:hover a { color: #00c0f3 !important;}
nav li.logout { display: none;}
@media screen and (max-width: 767px) {
    .navbar-header { margin: 0 !important;}
    nav #logo { height: auto; padding: 10px;}
    nav li.logout { display: block;}
    nav li.logout .icon-Logout { background: none;}
    .navbar-header > a.navbar-brand { height: 48px; margin-bottom: 6px;}
    /*nav li.advanced { display: none;}*/
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li > a { font-size: 14px; margin-left: 40px;}
    .navbar-default a span { font-size: 30px; margin-left: -40px; margin-top: 0;}
}

.navbar-default li > span[class^="icon-"]:before, .navbar-default li > span[class*=" icon-"]:before {
    color: #959595;
    font-size: 30px;
    font-weight: normal;
    vertical-align: middle;
    height: 30px;
    width: 30px;
    margin-left: 30px;
    margin-top: auto;
    display: inline-block;
}

/** #content **/
#content {}
#content > * {}
#content > .row { margin-top: 48px; margin-bottom: 48px;}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1500px) {
    #sideBar { width: 250px;}
    #siteContent { width: 1250px;}
}

/* #topBar*/
#top-bar { padding-left: 0 !important;}
#top-bar iframe { padding-left: 0 !important; height: 50px; width: 100%;}
#topBar { background-color: #959595; width: 100%; height: 50px;}
#topBar ul { list-style: none; padding: 0; margin: 0;}
#topBar ul li:first-of-type { font-weight: bold; text-transform: uppercase; }
#topBar ul li { float: left; padding: 12px; margin-top: 4px;}
#topBar ul li:last-of-type { float: right; margin-right: 40px;}
#topBar ul li a { text-transform: uppercase;}
#topBar ul li:last-of-type span { top: 10px; position: absolute; right: 15px;}
#topBar .nav>li>a { display: inline;}
#topBar ul li:hover a { background: none;}
@media screen and (min-width: 768px) and (max-width: 1151px) {
    #topBar ul li a, #topBar ul li { font-size: 90%;}
}
@media screen and (max-width: 767px) {
    #topBar { display: none;}
}

/* .info */
.connection-diagram a, .connection-diagram li, .connection-diagram span, .connection-diagram label { font-size: 16px; }
.connection-diagram li > em { background: #f37021; color: white !important; padding: 2px 4px; border-radius: 2px;  font-size: 10px; font-weight: bold; width: 24px; text-align: center;}
.connection-diagram li > span, .connection-diagram li > em { position: absolute; top: 0; right: 5%;}
.connection-diagram li > span:before { color: white !important; font-size: 20px;}
.connection-diagram .icon-Yes .path1 { color: #59ad00 !important;}
.connection-diagram .nav-pills a { text-decoration: none; padding: 0; color: #333; background: none; font-size: 14px;}
.connection-diagram .nav-pills>li.active>a, .connection-diagram .nav-pills>li.active>a:focus, .connection-diagram .nav-pills>li.active>a:hover { color: #333; background: none;}
.connection-diagram .nav-pills>li+li { margin-left: 0;}
.connection-diagram .nav-pills > li a:hover { background: none; } 
.connection-diagram .nav-pills a > span { display: block; font-size: 50px; margin-bottom: 5px;}
.circle-container { position: relative; width: 32em; height: 32em; margin-top: 4em;}
/*.circle-container li { display: block; overflow: hidden; position: absolute; top: 50%; left: 50%; width: 8em; height: 6em; margin: -4em; } */
.circle-container li { display: block; overflow: hidden; position: absolute; top: 50%; left: 50%; width: 6em; height: 6em; margin: -4em; }
.circle-container li.center { margin-top: -12em; margin-left: -5.5em; padding-top: 6.5em; background-image: url('../images/diagram.png'); background-size: contain; background-position: center center; width: 283px; height: 326px; background-repeat: no-repeat;}
.circle-container a { display: block; width: 100%; text-align: center; }
.deg30 { transform: rotate(30deg) translate(14em) rotate(-30deg); } /* 12em = half the width of the wrapper */
.deg90 { transform: rotate(90deg) translate(14em) rotate(-90deg); }
.deg150 { transform: rotate(150deg) translate(14em) rotate(-150deg); }
.deg210 { transform: rotate(210deg) translate(14em) rotate(-210deg); }
.deg270 { transform: rotate(270deg) translate(14em) rotate(-270deg); }
.deg330 { transform: rotate(330deg) translate(14em) rotate(-330deg); }
@media screen and (min-width: 1152px) and (max-width: 1359px) {
    .circle-container { position: relative; width: 28em; height: 28em; margin: 6em 0 4em 2em;}
    .deg30 { transform: rotate(30deg) translate(13em) rotate(-30deg); } /* 12em = half the width of the wrapper */
    .deg90 { transform: rotate(90deg) translate(13em) rotate(-90deg); }
    .deg150 { transform: rotate(150deg) translate(13em) rotate(-150deg); }
    .deg210 { transform: rotate(210deg) translate(13em) rotate(-210deg); }
    .deg270 { transform: rotate(270deg) translate(13em) rotate(-270deg); }
    .deg330 { transform: rotate(330deg) translate(13em) rotate(-330deg); }
    .circle-container li { width: 4em;}
    .circle-container li.center { margin-left: -7em;}
}
@media screen and (min-width: 1024px) and (max-width: 1151px) {
    .circle-container { position: relative; width: 22em; height: 22em; margin: 8em 0 4em 1em;}
    .deg30 { transform: rotate(30deg) translate(12.5em) rotate(-30deg); } /* 12em = half the width of the wrapper */
    .deg90 { transform: rotate(90deg) translate(12.5em) rotate(-90deg); }
    .deg150 { transform: rotate(150deg) translate(12.5em) rotate(-150deg); }
    .deg210 { transform: rotate(210deg) translate(12.5em) rotate(-210deg); }
    .deg270 { transform: rotate(270deg) translate(12.5em) rotate(-270deg); }
    .deg330 { transform: rotate(330deg) translate(12.5em) rotate(-330deg); }
    .circle-container li { width: 4em;}
    .circle-container li.center { margin-left: -7em;}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
    .circle-container { position: relative; width: 28em; height: 28em; margin: 4em 0 4em 3em;}
    .deg30 { transform: rotate(30deg) translate(14em) rotate(-30deg); } /* 12em = half the width of the wrapper */
    .deg90 { transform: rotate(90deg) translate(14em) rotate(-90deg); }
    .deg150 { transform: rotate(150deg) translate(14em) rotate(-150deg); }
    .deg210 { transform: rotate(210deg) translate(14em) rotate(-210deg); }
    .deg270 { transform: rotate(270deg) translate(14em) rotate(-270deg); }
    .deg330 { transform: rotate(330deg) translate(14em) rotate(-330deg); }
    .circle-container li { width: 6em;}
}
@media screen and (max-width: 480px) {
    .circle-container { position: relative; width: 18em; height: 18em; margin: 4em 0 0 -1em;}
    .deg30 { transform: rotate(30deg) translate(9em) rotate(-30deg); } /* 12em = half the width of the wrapper */
    .deg90 { transform: rotate(90deg) translate(9em) rotate(-90deg); }
    .deg150 { transform: rotate(150deg) translate(9em) rotate(-150deg); }
    .deg210 { transform: rotate(210deg) translate(9em) rotate(-210deg); }
    .deg270 { transform: rotate(270deg) translate(9em) rotate(-270deg); }
    .deg330 { transform: rotate(330deg) translate(9em) rotate(-330deg); }
    .circle-container li.center {background: none;}
    .circle-container li { width: 6em; height: 7em;}
    .circle-container:after { width: 20em !important; height: 20em !important;}
}

/* this is just for showing the angle on hover */
.circle-container li:not(.center):before { position: absolute; width: 4em; color: white; opacity: 0; background: rgba(0,0,0,.5); font: 1.25em/3.45 Courier, monospace; letter-spacing: 2px; text-decoration: none; text-indent: -2em; text-shadow: 0 0 .1em deeppink; transition: .7s; /* only works in Firefox */ content: attr(class)'°';}
.circle-container a:hover:before { opacity: 1; }

/* this is for showing the circle on which the images are placed */
.circle-container:after { position: absolute; top: 1.4em; left: 1.4em; width: 24em; height: 24em; border-radius: 50%; opacity: .3; pointer-events: none; content: '';}
.circle-container:hover:after { opacity: 1; }
.circle-container li:not(.center):after { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; box-shadow: 0 0 .5em .5em white; margin: -2px; /* background: deeppink; opacity: .3; content: ''; */}
.circle-container:hover li:after { opacity: 1; }
.circle-container li:hover:after { opacity: .3; }

.col.info { margin-bottom: 24px;}
.col.info.col-md-6:first-of-type { padding-right: 7.5px;}
.col.info.col-md-6:last-of-type { padding-left: 7.5px;}
.col.info label { font-size: 14px;}
.col.info > div { background-color: white !important; border: 1px solid #7a7f85; padding: 12px;}
.col.info > div:after { clear: both;}
.col.info h2 { color: #00c0f3; border-bottom: 2px solid #7a7f85; text-transform: none; font-size: 150%; font-weight: bold; padding-bottom: 8px; margin-top: 40px; margin-bottom: 36px;}
.col.info h2 span { color: #00c0f3; text-align: right; width: 100%; display: inherit; margin-top: -40px; font-size: 40px; font-weight: normal; line-height: 40px}
.col.info .status { width: 100%; margin-top: 24px; margin-bottom: 24px;}
.col.info .status.col-md-6 { width: 50%; padding: 0;}
.col.info .status .item { margin-bottom: 2px; width: 100%; display: block;}
.col.info .status .item label, .col.info .status .item span { color: #333;}
.col.info .status .item label { width: 100%; line-height: inherit;}
.col.info .status .item span { width: 50%; float: right; font-weight: normal;}
.col.info table { margin-bottom: 24px; border: 0; width: 100%;}
.col.info table th, .col.info table td { padding: 5px; border-bottom: 1px solid #00c0f3;}
.col.info table th { background-color: #00c0f3; color: #ffffff;}
.col.info #internet table td:first-of-type { font-weight: bold;}
.col.info h4 { font-weight: bolder;}
.col.info p { font-size: 14px; line-height: 160%; margin-bottom: 12px;}
.col.info p.note { margin-top: 12px;}
.col.info h3 { color: #00c0f3; text-transform: none; font-weight: bold; margin-top: 0px;}

@media screen and (min-width: 768px) and (max-width: 1359px) {
    .col.info .status .item span { width: 40%;}
}
.info form span { color: #333;}
.info form .col.field { padding: 0;}
.info form .field { margin-bottom: 12px;}
.info form .field > span { font-weight: bold;}
.info form .field > .full-width { width: 100%; display: block;}
.info form [type="radio"]:checked + span:before, .info form [type="checkbox"]:checked + span:before { background-color: #005c9f;}
.info form [type="radio"]:checked:disabled + span:before, .info form [type="checkbox"]:checked:disabled + span:before { background-color: #ebebe4;}
.info form .field label span { width: auto;}

.col.info form.header { position: absolute; top: 50px; left: 40%;}
.col.info form.header fieldset, .col.info form.header label { margin-bottom: 0 !important;}
.col.info form.header span { color: #00c0f3; font-weight: bold;}
.col.info legend { color: #00c0f3; font-weight: bold; border: 0; font-size: 120%;}

.col.wifiSettings form .field > span, .col.phone form .field > span, .col.lineSettings form .field > span { width: 40%;}
.col form .field .fieldInput { width: 59%;}
.col form .field .fieldInput label { margin-top: -8px;}
.col form .field .fieldInput button, .col form .field .fieldInput input[type="text"] { margin-left: 0; margin-top: 6px;}

.col.info.lineSettings .cbField label { margin-right: 8px;}

@media screen and (max-width: 480px) {
    .connection-diagram, .col.info .icon-USB-Drive { margin-bottom: 48px;}
    .col.info h2 { font-size: 80%;}
    .col.info h2 span { font-size: 35px; line-height: 35px; margin-top: -35px;}
    .col.info .status .item span { width: 100%; float: none; display: block;}
    .col.info form.header { position: absolute; top: 45px; left: 32%;}
    .col.wifiSettings form .field > span, .col.phone form .field > span, .col.lineSettings form .field > span { width: 50%;}
    .col form .field .fieldInput { width: 100%;}
    a, li, span, label { font-size: 12px; color: white;}
    input[type=text], input[type=password], select, textarea { border: 1px solid #00bff3; color: #7a7a7a; font-size: 14px; line-height: 24px; padding-left: 6px; width: 150px;}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
    .col.info .icon-USB-Drive { margin-bottom: 48px;}
    .col.wifiSettings form .field > span, .col.phone form .field > span, .col.lineSettings form .field > span { width: 100%;}
    .col form .field .fieldInput { width: 100%;}
}
@media screen and (min-width: 1024px) and (max-width: 1359px) {
    .col.info .status .item span { width: 40%; display: inline-block;}
    .col.info label { margin-right: 0.5em;}
    .editConn .field input { width: 170px !important;}
}

/* Edit Connection form */
.editConn .virtualIdentifiers .field span, .editConn .userCredentials .field span { width: 70px;}
.editConn .virtualIdentifiers .field input, .editConn .userCredentials .field input { width: 180px;}
.editConn .field span { width: 190px;}
.editConn .field input { width: 200px; letter-spacing: 2px;}
.editConn .vlanSettings .field input { width: 100px;}
.editExistLink, .editExistLink:hover, .editExistLink:active { color: inherit; cursor: pointer;}
@media screen and (max-width: 767px) {
    .editConn .field span { width: 100%;}
}

/* New Connection form */
.newConnection .virtualIdentifiers .field span, .newConnection .userCredentials .field span { width: auto;}
.newConnection .virtualIdentifiers .field input, .newConnection .userCredentials .field input { width: 180px;}
.newConnection .field span { width: 190px;}
.newConnection .field input { width: 200px; letter-spacing: 2px;}
.newConnection .vlanSettings .field input { width: 100px;}

.nc-vc .field span, .nc-credentials .field span { width: 70px; }
.nc-vc .field input, .nc-credentials .field input { width: 180px; }
.nc-wan .field span, .nc-vlan .field span { width: 190px; }
.nc-wan .field input { width: 200px; letter-spacing: 2px; }
.nc-vlan .field input { width: 100px; }
@media screen and (max-width: 767px) {
    .newConnection .field span { width: 100%;}
}

/** Media Sharing **/
.drive .status { margin-top: 6px !important;}
.drive .icon-USB-Drive:before { color: #005c9f; font-size: 110px; z-index: -1; text-align: center; display: inline-block; width: 100%;}
.drive .number { font-size: 60px; text-align: center; display: block; text-indent: 0px; z-index: 10; margin-top: -90px; font-weight: bold;}
ul.smbuserlist { list-style: none; padding: 0; display: inline-grid; display: -moz-groupbox;}
ul.smbuserlist li { color: inherit; font-weight: bold;}
ul.smbuserlist li a { text-decoration: none;}
ul.smbuserlist li a span { width: auto !important;}
ul.smbuserlist li a span:before { width: 14px !important; height: 14px; color: white; background: red; border-radius: 50%; padding: 1px;}

/** Parental Control **/
.profile { margin-top: 24px; margin-bottom: 24px;}
.profile .user { margin-bottom: 24px;}
.profile .link { display: block; width: 100%;}
.user, .profiles .add { width: 140px; height: 140px; border-radius: 50%; background-color: #ebebeb; padding: 5px; margin: 0 auto 0;}
.user span, .user[class*="icon"] { color: #666666; display: block; text-align: center; margin-top: 10px;}
.user span { font-weight: bold;}
.user[class*="icon"]:before, .profiles .add:before { font-size: 100px;}
.profiles .add.glyphicon:before { color: white; font-size: 110px; margin: 8px 0 0 8px; display: block;}
.profile .btn { margin: 12px auto 0; width: 120px !important; display: block;}
.block { position: static;}
.block h5 { padding: 8px 10px; background: #00c0f3; color: #ffffff; font-weight: bold; margin-bottom: 0; position: relative;}
.block h5 i { float: right; width: 16px; height: 16px; background: #005c9f; border-radius: 50%; position: absolute; top: 8px; right: 4px;}
.block h5 > i.glyphicon:before { color: #ffffff; font-size: 12px; padding: 0 3px; display: block; line-height: 16px;}
.block h5 > i.glyphicon-plus:before { padding: 0 3px; }
.block h5 > i.glyphicon-minus:before { padding: 0 1.5px; }
.block > * { width: 100%;}
.blockContent { background: #ebebeb;}
.blockContent ul { padding: 0; list-style: none; padding: 12px;}
.blockContent ul li { color: #666666;}
.blockContent .btn { width: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; background: #005c9f; text-align: center; margin: 0;}
.blockContent .btn:hover { color: #fff;}
#chooseProfileImg {}
#chooseProfileImg .icon-Yes { position: absolute; top: 15px; right: 15px; color: white; font-size: 20px;}

.editParentalControlProfile input, .editParentalControlProfile select, .editParentalControlProfile .chooseImg a { width: 100% !important; display: block;}
.editParentalControlProfile .chooseImg a { padding-left: 0; padding-right: 0; margin-left: 0; text-align: center;}
.editParentalControlProfile .chooseImg .add.glyphicon:before { color: white; font-size: 110px; margin: 12px 0 0 12px; display: block;}
.editParentalControlProfile span.icon-No:before { width: 14px !important; height: 14px; color: white; background: red; border-radius: 50%;}

@media screen and (min-width: 768px) and (max-width: 1151px) {
    .editParentalControlProfile .chooseImg .add.glyphicon:before { font-size: 85px; margin: 12px 0 12px 12px;}
    .editParentalControlProfile .chooseImg .user { width: 100%; height: 100%;}
}
@media screen and (min-width: 1152px) and (max-width: 1359px) {
    .editParentalControlProfile .chooseImg .add.glyphicon:before { font-size: 90px; margin: 12px 0 12px 12px;}
    .editParentalControlProfile .chooseImg .user { width: 100%; height: 100%;}
}

.editList .listTitle { border-bottom: 2px solid #7a7f85;}
.editList * { color: #333333; }
.editList .listTitle span { color: #00c0f3 !important; text-align: right;}
.editList .listTitle span:before { font-size: 35px;}
.editList ul { list-style: none; padding: 24px 0;}
.editList li { width: 32%; display: inline-block;}
.editList a { text-decoration: none; margin-right: 10px;}
.editList a span:before { width: 16px; height: 16px; border-radius: 50%; background: #ff0000; color: #ffffff;}
.editList .itemsList { border-bottom: 2px solid #d7d8da;}
.editList .addNewItem button { color: #ffffff; width: 100px; padding: 3px 0;}
.editList .addNewItem button:first-of-type{ margin-left: 0;}
.editList .addNewItem .addBLItem { width: 75px;}
.editList .addNewItem input { width: 100%;}

.col.info table.timeSlots th.hideCell { border: 1px solid white; background: none;}
.col.info table.timeSlots th, .col.info table.timeSlots td { border: 1px solid white; }
.col.info table.timeSlots td { background: #d1d2d4;}
.col.info table.timeSlots td.selected, .col.info table.timeSlots td.selecting { background: #9c9c9c;}
.col.info table.timeSlots td.blackoutCell { background: #000000;}
.col.info table.timeSlots td.timedBlockingCell { background: #d7effd;}
.col.info table.timeSlots th { background: #16c1f3; text-transform: uppercase;}
.col.info table.timeSlots tr { border: 1px solid white;}
.col.info table.timeSlots th, .col.info table.timeSlots td { width: 12%; text-align: center; font-size: 12px;}

.buttons .pull-left a:first-of-type, .buttons .pull-right a:first-of-type { margin-left: 0;} 
.btn.btn-blackout, .btn.btn-blackout:hover { background-color: #000000; color: #ffffff; font-weight: bold; font-size: 14px;} 
.btn.btn-timedBlocking { background-color: #d7effd; color: #16c1f3; font-weight: bold; font-size: 14px;} 

.blockLists form span, .blockLists form select { font-size: 13px; width: 100%;}
.blockLists form label { margin: 0;}

.blockLists select:disabled { color: #e8e9e9; border: 1px solid #e8e9e9;}
.blockLists span.disabled { color: #e8e9e9;}

@media screen and (max-width: 767px) {
    .col.info .table-responsive table { margin-bottom: 0;}
    .buttons .pull-left { margin-left: 0;}
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .buttons .pull-left { margin-left: 0;}
    .edit-rules > div { display: block !important; width: 100%;} 
}

/**** Footer ****/
footer { background-color: #00c0f3; color: #ffffff; height: 35px; width: 100%; bottom: 0; position: fixed;}
footer label, footer a, footer span { color: inherit; font-size: 13px; line-height: 11pt;}
footer span { margin-left: 5px;}
footer label, footer a { margin: 10px 0; padding: 0 15px 0 10px; display: inline-flex;}
footer label:first-of-type, footer a:first-of-type { border-right: 1px solid white;}
#footer iframe { width: 100%; height: 35px;}
@media screen and (max-width: 767px) {
    footer { height: auto; position: relative;}
    footer > div.text-right { text-align: left;}
}

/** Call History **/
.callHistory { display: table; width: 100%;}
.callHistory > div { display: table-row; width: 100%;}
.callHistory > div > div { display: table-cell; padding: 5px;}
.callHistory > div.ch-info > div { color: #333;}
.ch-header { background: #00c0f3; color: #ffffff; font-weight: bold;}
.ch-info .labelTitle { font-weight: bold; width: 100%; display: block; color: inherit;}
@media screen and (min-width: 768px) {
    .callHistory .moreInfo {display: none;}
}
@media screen and (max-width: 767px) {
    .callHistory .duration, .callHistory .datetime, .callHistory .direction { display: none;}
    .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd;}
    .callHistory .moreInfo.glyphicon-chevron-up:before { margin-right: -22.5px;}
}

/**** Rest Column ****/
.col-rest::after { clear: both; content: ""; display: table;}
.col-rest { margin-left: auto; margin-right: auto; overflow: hidden; padding-left: 15px; padding-right: 15px;}

/**** Lightbox ****/
.black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 160%; background-color: black; z-index:1001; -moz-opacity: 0.5; opacity:.50; filter: alpha(opacity=50);}
.white_content { display: none; position: absolute; top: 15%; left: 20%; padding: 24px 12px; border: 1px solid #000000; background-color: white; z-index:1002; overflow: auto; width: 60%; min-height: 250px; height: auto ! important;}
@media screen and (max-width: 767px) {
    .white_content { top: 0%; left: 2.5%; width: 95%;}
}

/**** Dialog Box ****/
.dialogBox { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none;}
.dialogBox:target { opacity:1; pointer-events: auto;}
.dialogBox > div { width: 700px; position: relative; margin: 5% auto; padding: 6px 24px 12px 24px; background: #fff; max-height: 80%; overflow-x: scroll;}
@media only screen and (max-width: 767px) {
    .dialogBox > div { width: 80%;}
}

/**** Advanced Section ****/
.adv a.backBtn span { width: 24px; height: 24px; color: #00c0f3;}
.adv a.backBtn span:before { font-size: 20px; }
.advanced .field span { width: 200px;}
.advanced .btn:first-of-type { margin-left: 0;}.adv { margin-bottom: 48px;}
.adv span[class^="icon-"], .adv span[class*=" icon-"] { color: #00c0f3;}
.adv span[class^="icon-"]:before, .adv span[class*=" icon-"]:before { font-size: 50px;}
.adv ul { padding-left: 12px;}
.advanced ol li, .adv li, .adv li a { color: #333; text-decoration: none;}
.adv li a:hover, .adv li.active a { color: #00c0f3; text-decoration: underline;}
.advanced .field ul { padding: 12px 0 12px 15px; display: block;}
.advanced .field li { color: #333;}
.col.info.advanced .section { margin-bottom: 48px;}
.col.info.advanced .section > h3 { border-bottom: 2px solid #d7d8da; padding-bottom: 6px;}
.col.info.advanced table { max-width: 100%; width: auto !important}
.col.info.advanced table thead th, .col.info.advanced table thead td { text-align: left; padding: 6px; border: 1px solid white;}
.advanced table thead tr.topHeader th, .col.info.advanced table tbody tr.topHeader th { background-color: #005c9f; color: white;}
.col.info.advanced table tbody tr.header th { background-color: #00c0f3; color: white;}
.advanced table thead tr.subHeader th, .col.info.advanced table tbody tr.subHeader th { background-color: #96c5d8; color: white;}
.col.info.advanced table td { border: 1px solid white; background-color: #e7e7e8;}
.col.info.advanced table th { border: 1px solid white; }
.col.info.advanced table tbody th { background-color: #e7e7e8; font-weight: bold; color: #333;}
.col.info.advanced table tbody tr.emptyRow td { background: none; border: none;}
.col.info.advanced td.alert-success { background: #3c763d; color: white;}
.col.info.advanced td.alert-danger { background: #a94442; color: white;}
.col.info.advanced td.alert-warning { background: #8a6d3b; color: white;}
.advanced table tbody .empty td { height: 30px;}

/** Charts **/
.charts > div { height: 250px;}

/** Diagnostics Section **/
.diagTable { width: 100%; max-width: 500px;}
.diagTable th { width: 50%;}
.diagTable td { text-align: center;}
.diagTable a { color: #333333;}
.diagTable span[class^="text-"], .diagTable span[class*=" text-"] { font-weight: bold; text-transform: uppercase;}

/** Advanced Phone Settings **/
.digitmapSetting span { margin-bottom: 165px;}
.digitmapSetting textarea[name="dialPlan0"] { width: 450px; height: 180px; margin-bottom: -165px;}
@media only screen and (max-width: 767px) {
    textarea[name="dialPlan0"] { width: 100%;}
}

/** Advanced Wifi settings **/
.fieldTable table { display: inline;}
.col.info.advanced .fieldTable table td { background: none; padding-left: 0;}

.progressBar {
    width: 80%;
     height: 10px;
     border: 1px solid #96c5d8;
     border-radius: 10px;
     margin: 10px 0px;
     overflow: hidden;
 }
 .progressBar > div {
     width: 0px;     
     height: 100%;
     background-color: #00bff3;
     transition: all .3s ease;
 }
 /** Optimize page display **/
 #createNew, #editExisting, .staticIPSettings, .staticDNSSettings, .vlanSettings, .moreOptions, .morePPPoEOptions, .morePPPOptions, .moreExistingOptions, .moreExistingPPPoEOptions, .moreExistingPPPOptions, .ipv6settings, .Staticipv6settings {
    display: none;
}

.\35GHz, .\32\34GHzSettings, .\35GHzSettings, .\32\34GHzGuestSettingsForm, .\35GHzGuestSettingsForm {
 display: none;
}

.line1Settings, .line2Settings, .line2 {
 display: none;
}

.create-profile, .edit-rules, .blockContent, .profile{
    display: none;
}