/**
 * @preserve
 * (c) Copyright 2015-2016 Versa Networks Inc. <http://www.versa-networks.com/> - All rights reserved.
 * Versa Networks Inc. Proprietary and confidential.
 */
 input.ng-invalid.ng-touched {
    /*background-color: #FA787E;*/
    border-left: 5px solid #ea5057;
  }

input.ng-valid.ng-touched {
    /*background-color: #78FA89;*/
    border-left: 5px solid #42af50;
  }

@font-face {
   font-family: "Gotham-Custom";
   font-style: normal;
   font-weight: normal;
   src: url("../fonts/GothamHTF-Book0.woff2");
}

@font-face {
   font-family: "Gotham-Custom";
   font-style: normal;
   font-weight: bold;
   src: url("../fonts/GothamHTF-Bold0.woff2");
}

@font-face {
   font-family: "Gotham-Custom";
   font-style: italic;
   font-weight: normal;
   src: url("../fonts/GothamHTF-BookItalic0.woff2");
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
 display: none !important;
}

.color.light {
   color: #aaa;
}

.color.blue {
   color: cornflowerblue;
}

.color.red, .color.RED {
   color: red;
}

.color.green, .color.GREEN {
   color: green;
}

.color.amber, .color.AMBER {
   color: #E6772D;
}

.color.yellow, .color.YELLOW {
   color: #E6772D;
}

.color.white {
   color: white;
}

.color.black {
   color: black;
}

html, body {
   font-family: 'Gotham-Custom';
}

html *, body * {
   outline: none !important;
}

.browsehappy {
   margin: 0.2em 0;
   background: #ccc;
   color: #000;
   padding: 0.2em 0;
}

md-backdrop {
   background: transparent !important;
}

md-toolbar.md-default-theme {
   background-color: black;
}

.app-header {
   background-image: /**DO_NOT_REMOVE_THIS waves.png*/url("../../images/waves.png")/**DO_NOT_REMOVE_THIS_END waves.png*/;
   background-repeat: no-repeat;
   background-position: 0px -180px;
   background-size: auto;
   min-height: 60px;
   max-height: 60px;
   background-color: #36536b;
   color: #fff;
   font-size: 14px;
   overflow: visible;
}

.versa-logo {
   height: 45px;
   width: auto;
}

.versa-logo2 {
   height: 45px;
   width: auto;
   content: /**DO_NOT_REMOVE_THIS versalogo2.png*/url("../../images/versalogo2.png")/**DO_NOT_REMOVE_THIS_END versalogo2.png*/
}

.nav-menu-button {
      display: none;
}

.slogan-mobile {
    position: absolute;
    display: none;
    color:white; 
    font-size:16px;
    font-family: sans-serif;
}

.show-only-mobile {
   display: none;
}

.show-except-mobile {
   display: block;
}

.lifecycle-header .lifecycle-title {
   cursor: pointer;
   width: 200px;
   background-color: #36536b !important;
   font-size: 16px;
}

.lifecycle-header .lifecycle-title a {
   text-decoration: none;
}

.lifecycle-header .lifecycle-title.selected {
   padding-top: 5px;
   /*background-color: #2B87C9 !important;*/
   color: white;
   border-bottom: 5px solid #a7d054;
}

.app-header .logo {
   padding: 1px 0 0 1px;
   /*background-image: url("../images/versa-logo2.png");
   width: 100px;
   height: auto;
   background-repeat: no-repeat;
   background-position: 5px 2px;*/
}

.lifecycle-header {
   /*min-height: 30px;
   max-height: 30px;
   margin-top: 30px;
   margin-left: 200px;*/
}



.main_footer {
   font-size: 10px;
   line-height: 12px;
   background-color: #d0dce4;
   position: fixed;
   bottom: 0;
   width: 100%;
}

.copyright-txt {
   text-align: center;
   margin-top: 8px;
   color: #626c82;
}

/*
bootstrap styles
*/

/*.lanner-image{
 background-image: url('/images/lanner.png');
 background-size:contain;
 background-size: 600px 200px;
 background-repeat:no-repeat;
}*/

.lannerImage {
 width: 600px;
 height: 230px;
 /*border: 1px solid black;*/
 /*margin-bottom: 1em;*/
 background-image: url(/images/lanner.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;
 margin: 0 15%;
}

.lannerfwnca1515 {
   width: 600px;
   height: 230px;
   /*border: 1px solid black;*/
   /*margin-bottom: 1em;*/
   background-image: url(/images/lanner-nca-1515a-b.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0 15%;
  }

.advantechfwa1010vc {
 width: 780px;
 height: 330px;
 /*border: 1px solid black;*/
 /*margin-bottom: 1em;*/
 background-image: url(/images/advantech-fwa-1010vc.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;
 margin: 0 15%;
}
.advantechfwa1012vc2c {
   width: 750px;
   height: 350px;
   /*border: 1px solid black;*/
   /*margin-bottom: 1em;*/
   background-image: url(/images/advantech-fwa-1012vc-2c.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0 15%;
}

.advantechfwa1012vc4c {
    width: 750px;
    height: 350px;
    /*border: 1px solid black;*/
    /*margin-bottom: 1em;*/
    background-image: url(/images/advantech-fwa-1012vc-4c.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 15%;
}

.advantechfwa1012vc8c {
    width: 750px;
    height: 350px;
    /*border: 1px solid black;*/
    /*margin-bottom: 1em;*/
    background-image: url(/images/advantech-fwa-1012vc-8c.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 15%;
}

.advantechfwa5070 {
    width: 750px;
    height: 257px;
    background-image: url(/images/advantech-fwa-5070.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 15%;
}

.lannernca5520 {
    width: 750px;
    height: 257px;
    background-image: url(/images/lanner-nca-5520.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 15%;
}

.versacsg730, .versavcg730 {
   width: 750px;
   height: 350px;
   background-image: url(/images/versa-csg730.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.versacsg750, .versavcg750 {
   width: 750px;
   height: 350px;
   background-image: url(/images/versa-csg750.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.versacsg770 {
   width: 750px;
   height: 350px;
   background-image: url(/images/versa-csg770.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.versacsg350 {
   width: 750px;
   height: 350px;
   background-image: url(/images/versa-csg350.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.versacsg355 {
   width: 750px;
   height: 350px;
   background-image: url(/images/versa-csg355.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.versacsg365 {
   width: 750px;
   height: 350px;
   background-image: url(/images/versa-csg365.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.versacsg1300 {
   width: 750px;
   height: 350px;
   background-image: url(/images/versa-csg1300.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.versacsg1500 {
   width: 750px;
   height: 350px;
   background-image: url(/images/versa-csg1500.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.lannerfw7551seb {
    width: 750px;
    height: 350px;
    /*border: 1px solid black;*/
    /*margin-bottom: 1em;*/
    background-image: url(/images/lanner-fw-7551seb.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 15%;
}

.advantechImage {
 width: 730px;
 height: 230px;
 /*border: 1px solid black;*/
 /*margin-bottom: 1em;*/
 background-image: url(/images/advantech.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;
 margin: 0 15%;
}

.adiSilicomImage {
 width: 550px;
 height: 270px;
 /*border: 1px solid black;*/
 /*margin-bottom: 1em;*/
 background-image: url(/images/adi_silicom.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;
 margin: 0 15%;
}

.adiSilicom8005000163 {
   width: 550px;
   height: 270px;
   /*border: 1px solid black;*/
   /*margin-bottom: 1em;*/
   background-image: url(/images/silicom-80500-00163.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0 15%;
  }

.dellvep14xx {
   width: 550px;
   height: 270px;
   /*border: 1px solid black;*/
   /*margin-bottom: 1em;*/
   background-image: url(/images/Dell-VEP14XX.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0 15%;
  }

.nexcomdta1152BC4 {
   width: 550px;
   height: 270px;
   /*border: 1px solid black;*/
   /*margin-bottom: 1em;*/
   background-image: url(/images/DTA1152BC4.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0 15%;
  }


.riverbedCX580 {
   width: 750px;
   height: 336px;
   background-image: url(/images/riverbed-cx-580.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0 15%;
}

.riverbedCX3080 {
   width: 750px;
   height: 336px;
   background-image: url(/images/riverbed-cx-3080.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0 15%;
}

.commscopeUC1218 {
   width: 750px;
   height: 336px;
   background-image: url(/images/comscope-uc1218.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   margin: 0 15%;
}

.bootstrap-content {
   margin: 16px;
   padding: 0px;
   box-sizing: border-box;
   align-content: center;
}

.bootstrap-container {
   border-radius: 4px;
   margin-bottom: 16px;
   -webkit-transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
   transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
   position: relative;
   padding-bottom: 0;
}

.bootstrap-toolbar {
   border-radius: 3px 3px 0 0;
   box-shadow: 0 1px rgba(255, 255, 255, 0.1);
}

.ui-view-container {
   background-color: #eee;
}

.bootstrap-content .panel {
   margin-left: 15px;
   width:100%;
}

.bootstrap-content .row .panel .bootstrap-panel-heading {
   background-color: #36536b !important;
   color: #fff !important;
   font-size: 13px;
   justify-content: center;
}

.bootstrap-content .row .panel .panel-footer {
   background-color: #fff;
}

.bootstrap-content .row .panel .panel-footer > div > button.button {
   border: none;
   line-height: 28px;
   color: #ffffff !important;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   cursor: pointer;
   display: inline-block;
   text-indent: 0;
   font-weight: 550;
   margin: 0;
   padding: 0px 15px;
   text-align: center;
   text-decoration: none;
}

.bootstrap-content .row .panel .bootstrap-panel-heading .panel-title {

}

.bootstrap-content .row .panel .panel-footer > div > button.btn-blue {
   background: #3498db;
   color: #fff;
}

.bootstrap-content .row .panel .panel-footer > div > button.button:hover {
   background: #36536b;
}

.leftSidebarView {
   background-color: #fff;
   border-right: 1px solid #ccc;
   width: 181px;
}

.contentView .bootstrap-config-tab {
   margin-left: 1px;
}

.ui-state-active {
 border: 1px solid #c5c5c5;
 background: #EEE;
 font-weight: normal;
 color: #454545;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
 background-color: #CCC;
}

ul {
 list-style-type: none;
}

.ui-accordion .ui-accordion-content { height: auto !important;}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
 background-color: #CEE0FE;
}

.fa { margin-right: 8px; }
.fa-exclamation-triangle,
.fa.fa-check-square-o {
 font-size: 20px;
}
.fa.fa-check-square-o, .fa.fa-check { color: green; }
.fa.fa-check, .fa.fa-exclamation-circle { font-size: 15px; }
.fa.fa-exclamation-circle,
.fa-exclamation-triangle { color: red; }
.fa-exclamation-triangle.warning { color: #f4b342; }
/*bootstrap styles ends*/


.connecting-line {
   height: 2px;
   background: #e0e0e0;
   position: absolute;
   width: 50%;
   top: 50%;
   z-index: 1;
   margin-left: 20%;
}

.optional-text{
 font-style: italic;
 font-weight: 300;
}

.dropdown-button-styling{
 border: 1px solid #ddd;
 padding:2px;
 border-radius: 2px;
}

span.round-tab {
   width: 70px;
   height: 70px;
   line-height: 70px;
   display: inline-block;
   border-radius: 15px;
   background: #fff;
   border: 2px solid #e0e0e0;
   z-index: 2;
   position: absolute;
   left: 0;
   text-align: center;
   font-size: 25px;
}


span.round-tab i {
   color: #555555;
}



span.round-tab:hover {
   color: #0f2c3e;
   border: 2px solid #a7d054;

}

span.round-tab {
   font-size: 13px;
   width: 180px;
   height: 30px;
   line-height: 26px;
}

.wizard .nav-tabs > li a {
   width: 50px;
   height: 30px;
   line-height: 26px;
}

.wizard li.active:after {
   content: " ";
   position: absolute;
   left: 63%;
}

.leftSidebarView .left-nav {
   margin-top: 18px;
   width: 100%;
}

.leftSidebarView .left-nav > ul {
   list-style-type: none;
   padding: 0;
}

.leftSidebarView .left-nav > ul > li {
   line-height: 2;
}

.leftSidebarView .left-nav > ul > li > a {
   text-decoration: none;
   color: #0f2c3e;
   display: block;
   padding-left: 6px;
}

.leftSidebarView .left-nav > ul > li > a:hover {
   cursor: pointer;
   background-color: #739aba;
}

.leftSidebarView .left-nav > ul > li > a.selected {
 background-color: #a7d054;
}


.bootstrap-device-status .bootstrap-content .row .panel .panel-body > fieldset > div {
   width: 50%;
   margin-left: 25%;
   text-align: center;
}

.bootstrap-wizard-container .wizard .wizard-inner .applied {
   color: #a7d054;
   font-size: 11px;
}

.contentView{
   width:100%;
}
.contentView .interfaceContentView{
   width:100%;
}
.interface-container{
   width:100%;
}
.interface-container .grid {
   width:100% !important;
}

.grid-hover-class{
   color:green;
   cursor:pointer;
   background-color:red;
}

.table-area > table > thead > tr > td:hover {
   background: #F5F5F5;
   cursor: pointer;
}
.table-area > table > tbody > tr:hover {
   background: #3498db;
   color:#fff;
   cursor: pointer;
}

.table-area > table > tbody > tr:hover > td > a{
   background: #3498db;
   color:#fff;
   cursor: pointer;
}

.table-area > table > tbody > tr > td > a > i{
   display: none;
}
.table-area > table > tbody > tr:hover > td > a > i{
   display: inline;
}

.reachability-input {
  width: 400px;
  margin-left: 10px;
}

div .manualFormMode tbody tr td {
   line-height: 2.2;
   text-align: right;
}

div .manualFormMode tbody tr td.selectBoxTd {
   
}

div .manualFormMode tbody tr td input{
   height:29px;
}

.bootstrap-content .btn[disabled]{
 pointer-events: none;
}

.manualFormHeader .panel-title{
 text-align:left;
}

.manualFormHeader uib-accordion-header a{
 font-weight:100;
 font-size:15px;
}

.manualFormHeader .panel-heading{
 background-color: #fdfdfd;
}

.edit-interface-modal{
   font-size: 12px !important;
}

.edit-interface-modal .modal-content .modal-body{
   background-color: #f7f7f9;
}
.edit-interface-modal .modal-content .modal-header{
   padding:8px;
   font-size:14px !important;
}
.edit-interface-modal .modal-content .modal-footer{
   padding:8px;
}

.custom-row > div > label {
   margin-bottom: 2px !important;
   font-weight: 400 !important;
}
.custom-row > div > input[type="text"]{
   height:25px;
}
.custom-row-separator{
   margin-top:4px;
}

.jstree-default .jstree-clicked {
   background: #a7d054;
}

.checkbox-switch{
   margin-top:3px;
}
.checkbox-toggle {
   position: fixed;
   margin-left: -9999px;
   visibility: hidden;
}
.checkbox-toggle + label {
   display: block;
   position: relative;
   cursor: pointer;
   outline: none;
   user-select: none;
}

input.checkbox-toggle-round + label {
   padding: 2px;
   width: 40px;
   height: 18px;
   background-color: #ddd;
   border-radius: 18px;
}
input.checkbox-toggle-round + label:before,
input.checkbox-toggle-round + label:after {
   display: block;
   position: absolute;
   top: 1px;
   left: 1px;
   bottom: 1px;
   content: "";
}
input.checkbox-toggle-round + label:before {
   right: 1px;
   background-color: #ddd;
   border-radius: 18px;
   transition: background 0.4s;
}
input.checkbox-toggle-round + label:after {
   width: 18px;
   background-color: #fff;
   border-radius: 100%;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   transition: margin 0.4s;
}
input.checkbox-toggle-round:checked + label:before {
   background-color: #a7d054;
}
input.checkbox-toggle-round:checked + label:after {
   margin-left: 18px;
}

.interface-section{
   height:100%;
   width:100%;
}
.sub-interfaces-section{
   height:250px;
   width:100%;
}

.div-separator{
   width:100%;
   height:2px;
   background-color: #fff;
   margin-top:6px;
   margin-bottom:4px;
}

.edit-interface-modal .table>tbody>tr>td,  .table>thead>tr>td{
  /* padding:6px; */
}
/*.modal-lg{
   width:1150px !important;
}*/
.sub-interfaces-section .sub-interface-input-width1{
    width:40px;
    text-align: center;
}

.device-merge-config .ui-accordion-content .sub-interfaces-bootstrap-width{
   margin-left:26px;
}
.margin-wan-status{
   margin-left: 23px;
}
.margin-wan-port{
   margin-left:-23px;
}
.margin-ul-subtask{
   margin-left:-35px;
}
.sub-interfaces-section-table{
   height: 220px;
   overflow: auto;
}
.sub-interfaces-section-table > table > tbody >  tr > td> a{
    font-size: 16px !important;
    text-decoration: none;
    margin-top: 3px;
}
.sub-interfaces-section-table > table > tbody >  tr > td> a.glyphicon-plus-sign{
   color: #a7d054 !important;
}
.sub-interfaces-section-table > table > tbody >  tr > td> a.glyphicon-minus-sign{
   color:rgba(255,82,82,0.87);
}

.sub-interfaces-section-table > table > tbody >  tr > td> a:hover{
   cursor:pointer;
}

.sub-interfaces-section-table > table > tbody > thead{
   font-size: 13px !important;
}

.sub-interfaces-section .custom-row .sub-interface-title{
   font-size: 14px !important;
}

.dns-container{
   width:100% !important;
}

.dns-container .dns-title{
   background-color: #d0dce4;
   height: 25px;
   text-align: left;
   padding: 3px;
   margin-left: -1px;
}

.dns-section-table > table > tbody{
   border-bottom: 1px solid #ddd;
}
.dns-container .panel-default{
   margin-right:2px;
   margin-left:-2px;
   margin-bottom: 0px;
}

.dns-container .panel-heading{
   padding: 6px 15px !important;
}

.dns-container .panel-default .panel-body{
   max-height:450px;
   min-height:400px;
   overflow:auto;
}

.dns-container .panel-default .panel-footer{
   text-align: right;
   background-color:#fff;
   padding-top:6px !important;
   padding-bottom:6px !important;
}
.dns-container .panel-default .panel-footer > button{
   margin-left:20px;
}

.dns-container .panel-default .panel-footer > button.btn-blue {
   background: #3498db;
   color: #fff;
}

.dns-container .panel-default .panel-footer > button.button:hover {
   background: #36536b;
}

.dns-container .panel-default .panel-body{
   padding:0px;
}
.dns-container .panel-default .panel-body .table{
   margin-bottom:0px !important;
}

.dns-container .panel-default .panel-body .table > thead{
   font-size: 14px !important;
}

.dns-container .panel-default .panel-body .table > tbody{
   font-size: 12px !important;
}

.dns-container .panel-default .panel-body .table > tbody > tr > td > span{
   margin-right: -8px;
}

.dns-container .panel-default .panel-body .table > tbody > tr > td > span > i{
   right:20px;
   top:2px;
   color:#ddd;
}

.dns-container .panel-default .panel-body .table > tbody > tr > td > span > i:hover{
   color:#555555;
   cursor:pointer;
}

.dns-container .panel-default .panel-body .table > tbody > tr > td > span > input{
   padding-right: 15px;
   text-align: center;
}

.dns-container .panel > div > span > a{
   font-size: 16px !important;
   text-decoration: none;
   margin-top: 3px;
   margin-left:10px;
}

.dns-container .panel > div > span > a:hover{
  cursor:pointer;
}
.dns-container .panel > div > span  > a.glyphicon-plus-sign{
   color: #a7d054 !important;
}

.dns-container .panel > div > span  >  a.glyphicon-minus-sign{
   color:rgba(255,82,82,0.87);
}

.dns-container .dns-action-btn{
   float:right;
   margin-right:57px;
}

.dns-section-table > table > thead > tr > td > input[type="checkbox"]:hover{
   cursor: pointer;
}

.dns-section-table > table > tbody > tr > td > input[type="checkbox"]:hover{
   cursor: pointer;
}

.empty-row{
   width:100%;
   background-color:#fff;
   margin-left: -1px;
}
.dns-server-not-found{
   padding:20px;
}

.info {
 position: absolute;
 left: 232px;
 margin-top: 5px;
 font-size: 18px;
 cursor: pointer;
}

.logout {
   position: absolute;
   right: 45px;
   margin-top: 7px;
}

.logout a {
   color: #fff;
   font-size: 16px;
}

#infoModal .modal-content {
 font-size: 10px;
}

.modal-header{
 background-color: lightgrey;
}

.modal-content .modal-header{
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
}

.modal-content h6 {
 font-size: 14px;
}

.led-box {
 height: 30px;
 margin: 10px 0;
 position: absolute;
 float: right;
 left: 207px;
 margin-top: 7px;
}

.led-box p {
 font-size: 12px;
 text-align: center;
 margin: 1em;
}

.ledgreen {
 margin: 1px auto;
 width: 20px;
 height: 20px;
 background-color: #ABFF00;
 border-radius: 50%;
 box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
}

.ledgrey{
 margin: 1px auto;
 width: 20px;
 height: 20px;
 background-color: #C5C5C5;
 border-radius: 50%;
 box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #8b8b8b 0 -1px 9px, #8b8b8b 0 2px 12px;
}

.ledred {
 margin: 1px auto;
 width: 20px;
 height: 20px;
 background-color: #F00;
 border-radius: 50%;
 box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
 -webkit-animation: blinkRed 0.5s infinite;
 -moz-animation: blinkRed 0.5s infinite;
 -ms-animation: blinkRed 0.5s infinite;
 -o-animation: blinkRed 0.5s infinite;
 animation: blinkRed 0.5s infinite;
}

@-webkit-keyframes blinkRed {
   from { background-color: #F00; }
   50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
   to { background-color: #F00; }
}
@-moz-keyframes blinkRed {
   from { background-color: #F00; }
   50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
   to { background-color: #F00; }
}
@-ms-keyframes blinkRed {
   from { background-color: #F00; }
   50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
   to { background-color: #F00; }
}
@-o-keyframes blinkRed {
   from { background-color: #F00; }
   50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
   to { background-color: #F00; }
}
@keyframes blinkRed {
   from { background-color: #F00; }
   50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
   to { background-color: #F00; }
}

.ledyellow {
 margin: 0 auto;
 width: 20px;
 height: 20px;
 background-color: #FFA500;
 border-radius: 50%;
 box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #eeb714 0 -1px 9px, #FFA500 0 2px 12px;
 -webkit-animation: blinkYellow 1s infinite;
 -moz-animation: blinkYellow 1s infinite;
 -ms-animation: blinkYellow 1s infinite;
 -o-animation: blinkYellow 1s infinite;
 animation: blinkYellow 1s infinite;
}

@-webkit-keyframes blinkYellow {
   from { background-color: #FFA500; }
   50% { background-color: #ffc04d; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #eeb714 0 -1px 9px, #FFA500 0 2px 0; }
   to { background-color: #FFA500; }
}
@-moz-keyframes blinkYellow {
   from { background-color: #FFA500; }
   50% { background-color: #ffc04d; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #eeb714 0 -1px 9px, #FFA500 0 2px 0; }
   to { background-color: #FFA500; }
}
@-ms-keyframes blinkYellow {
   from { background-color: #FFA500; }
   50% { background-color: #ffc04d; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #eeb714 0 -1px 9px, #FFA500 0 2px 0; }
   to { background-color: #FFA500; }
}
@-o-keyframes blinkYellow {
   from { background-color: #FFA500; }
   50% { background-color: #ffc04d; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #eeb714 0 -1px 9px, #FFA500 0 2px 0; }
   to { background-color: #FFA500; }
}
@keyframes blinkYellow {
   from { background-color: #FFA500; }
   50% { background-color: #ffc04d; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #eeb714 0 -1px 9px, #FFA500 0 2px 0; }
   to { background-color: #FFA500; }
}

.popover-custom{
   color:black;
}

.alert-position{
   position:absolute;
   top: 10px;
}

.activation-button{
 font: bold 11px Arial;
 text-decoration: none;
 background-color: #EEEEEE;
 color: #333333;
 padding: 2px 6px 2px 6px;
 border-top: 1px solid #CCCCCC;
 border-right: 1px solid #333333;
 border-bottom: 1px solid #333333;
 border-left: 1px solid #CCCCCC;
}

.container-body {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 margin-bottom:20px;
}

.container-body .item {
 flex-grow: 0; /* default 0 */
 margin: 10px 0 0 15px;
 min-width: 500px;
}

.container-body .item .panel-info,
.container-body .item .panel-title {
 font-size: 12px;
}
.container-body .item .panel-title {
 font-weight: 600;
}

/*bootstrap table*/
.table {
 margin-bottom: 5px;
}
.table>tbody>tr>td {
 border-top: none;
 line-height: .8;
}

/*system panels*/
.container-body .item .panel-title {
 display: inline-block;
}
.panel-refresh {
 float: right;
 cursor: pointer;
}
.table-header-background{
 background-color: #e6e6e6;
}
.panel .danger-text{
 color: red;
}


/* top nav */
.slogan {
 position: absolute;
 margin:5px 0 0 1px;
 color:white; 
 font-size:20px;
 font-family: sans-serif;
}

/*prerequisites*/
.intro-diagram {
 margin-bottom: 20px;
 text-align: center;
}
.intro-diagram > ol > li {
 text-align: left;
 line-height: 1.5;
 font-size: 14px;
}
.intro-diagram a {
 color: #23527c;
 font-weight: 600;
}
.ui-accordion-content .sub-interfaces-section {
   height: auto;
   width: 100%;
}
.ui-accordion-content .sub-interfaces-section-table {
 border: 1px solid #CCC;
 background-color: #eee;
 height: 105px;
}
.ui-accordion-content .sub-interfaces-section-table.compact-height {
 height: 55px;
}
.ui-accordion-content .saveBtn {
 float: right;
 margin-top: 5px;
}

.spinner-container .spinner:before {
   background-color: rgba(49, 37, 37, 0.2);
   border-radius: 6px;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   position: fixed;
   content: " ";
}

.edit-interface-section {
    margin-top: 10px;
    border: 1px solid #CCC;
    padding: 20px;
    border-radius: 5px;
}

.edit-interface-section #branchPort, .edit-interface-section #mtu {
    width: 150px;
}

.edit-interface-section #ipv4AddPrefix,
.edit-interface-section #ipv6AddPrefix, 
.edit-interface-section #ipv4AddGateway,
.edit-interface-section #ipv6AddGateway,
.edit-interface-section #vlanId {
    width: 150px;
}

.edit-interface-section .checkbox-switch-cntr .checkbox-btn {
    margin-top: 10px;
}

.edit-interface-section .row {
    margin-bottom: 2px;
}

.edit-interface-section .saveBtnCntr .saveBtn {
    margin-right: 15px;
}

.director-info {
    height: 30px;
    position: absolute;
    float: right;
    width: 300px;
    margin-top: 7px;
    margin-right: 10px;
    left: -80px;
}