@import "./global.css";
:root {
    --primary: #039be5;
    --primary-dark: #0093d9;
    --secondary-color: #2d323e;
    --secondary-color-dark:#1e2129;
}

/* #mydiv {
  position: absolute;
  z-index: 9;
}

#mydivheader {
  cursor: move;
  z-index: 10;
} */

body a,
body a:hover,
body a:focus {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.pb-10 {
    padding-bottom: 10px;
}

.pr-10 {
    padding-right: 10px;
}

.pl-10 {
    padding-left: 10px;
}

.p-10 {
    padding: 10px !important;
}

md-input-container:hover input[type=number]~span.input-container-link,
md-input-container.md-input-focused input[type=number]~span.input-container-link {
    margin-right: 15px;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

.md-tooltip {
    margin-top: -10px !important;
}

md-input-container.md-input-focused label.md-placeholder {
    display: none;
}

md-input-container .md-input[disabled] {
    cursor: not-allowed;
    color: rgba(0, 0, 0, 0.45) !important;
    background-position: bottom 0px left 0 !important;
}
.yellow-background {
    background-color: #ffff41;
}
.custom-placeholder .md-select-placeholder {
  color: white !important; 
 
}
.md-button.md-default-theme.md-fab[disabled],
.md-button.md-fab[disabled],
.md-button.md-default-theme.md-raised[disabled],
.md-button.md-raised[disabled],
.md-button.md-default-theme.md-fab[disabled]:hover,
.md-button.md-fab[disabled]:hover,
.md-button.md-default-theme.md-raised[disabled]:hover,
.md-button.md-raised[disabled]:hover {
    background: #c2c2c2 !important;
    cursor: not-allowed !important;
}

.md-button.md-fab.btn-add[disabled]:hover {
    background: #c2c2c2 !important;
}

md-input-container md-datepicker[disabled] .md-datepicker-button {
    cursor: not-allowed;
}

md-input-container md-select[disabled] .md-select-value,
md-input-container md-select[disabled] {
    cursor: not-allowed;
}

.no-underline md-select[disabled] .md-select-value{

    background-image: none !important;
    
}



md-input-container:not(.md-input-focused):not(.md-input-invalid) md-select.md-default-theme .md-select-value span:first-child:after,
md-input-container:not(.md-input-focused):not(.md-input-invalid) md-select .md-select-value span:first-child:after {
    color: #f00 !important;
}

md-input-container>md-select {
    margin-bottom: 10px !important;
}

md-input-container .md-errors-spacer {
    min-height: 10px !important;
}

.disable {
    pointer-events: none;
    opacity: 0.5;
    background: #CCC;
}

.dndDragging {
    opacity: 0.7;
}

.dndDraggingSource {
    display: none;
}

.no-underline{

}

.dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

.dropzone ul[dnd-list] {
    margin: 0px;
    min-height: 30px;
    padding-left: 0px;
}
.heading-flex{
    display: flex;
    justify-content: space-between;
    min-width: 315px !important;
}
.heading-flex .head{
    margin-top: 15px;
}
.download-upload-sales{
    background: #008dd0 !important;
    height: 36px !important;
}

.download-upload-sales .menu-btn{
    color: white !important;
    height: 36px !important;
}

.box {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.box>h3 {
    color: #333;
    border-color: #ddd;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-repeat: repeat-x;
    display: block;
    font-size: 16px;
    padding: 10px 15px;
    margin-top: 0;
    margin-bottom: 0;
}

.box-padding {
    padding: 15px;
}

.box-padding>h3 {
    margin: -15px;
    margin-bottom: 15px;
}

.box-grey {
    border-color: #ddd;
}

.box-grey>h3 {
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);
    background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
}

.box-blue {
    border-color: #bce8f1;
}

.box-blue>h3 {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    background-image: -webkit-linear-gradient(top, #d9edf7 0, #c4e3f3 100%);
    background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}

.box-yellow {
    border-color: #faebcc;
}

.box-yellow>h3 {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    background-image: -webkit-linear-gradient(top, #fcf8e3 0, #faf2cc 100%);
    background-image: linear-gradient(to bottom, #fcf8e3 0, #faf2cc 100%);
}

.container-element {
    margin: 10px;
}

body {
    overflow: hidden;
}

.nestedDemo .dropzone .selected .box>h3 {
    background-color: #dff0d8;
    background-image: linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%);
    border-color: #d6e9c6;
    color: #3c763d;
}

md-toast.md-error-toast-theme .md-toast-content {
    background-color: maroon;
}

.console-content {
    white-space: pre-wrap;
    font-family: monospace;
}

md-toast.md-success-toast-theme .md-toast-content {
    background-color: green;
}

#file-upload {
    display: none;
}

.md-subheader.nirad_subheader.sub-sub-header {
    margin: -8px;
    z-index: 4 !important;
    top: 36px !important;
}

.ads-container {
    padding-left: 15px;
}

.splash-ProfileMessage {
    position: relative;
    top: 5%;
}

.ads-container .title {
    font-size: 15px;
    font-weight: 500;
}

.bg-img-container {
    width: 100%;
    height: 250px;
    background: #eee;
}

.bg-url {
    width: -webkit-fill-available;
}

.disabledFieldset {
    border: none !important;
}

.delete-ad {
    border: 0px;
    position: absolute;
    top: 4px;
    padding: 0px;
    background: #fff;
    right: 3px;
    border-radius: 50%;
}

.delete-ad i {
    font-size: 18px;
    color: #f44336;
    line-height: initial;
}

.bg-white {
    background: #fff;
}

.thumbnail-tabs md-tabs-wrapper md-tabs-canvas,
.thumbnail-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper {
    height: 130px;
}
.custom-chart-alignment {
    padding:4%;
    min-height:36vh;
    max-height:36vh;
}

.empty-chart {
    margin: auto;
    width: 50%;
    padding-top: 7%;
    padding-left: 16%;
    text-anchor: middle;
}

.thumbnail-tabs md-tabs-wrapper {
    margin-left: 55px;
    border-width: 0px !important;
    margin-bottom: -1px;
    z-index: 7;
}

.thumbnail-tabs md-tab-item {
    border: 1px solid #fff;
    border-bottom: 1px solid #ddd;
}

.thumbnail-tabs md-tab-item.md-active {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #fff;
}

.thumbnail-tabs md-tab-item.md-active .vid-thumbnail {}

.thumbnail-tabs md-tab-item {
    padding: 10px;
}

.thumbnail-tabs md-ink-bar {
    background: #fff;
}

.vid-time {
    font-size: 11px;
}

.vid-thumbnail {
    width: 130px;
    height: 90px;
    /* background-image: url(../images/ad-bg.jpg); */
    background-size: cover;
    background-color: #eee;
    background-position: center;
    border-radius: 2px;
    border: 2px solid #ddd;
}

.vid-thumbnail span {
    color: rgba(0, 0, 0, 0.2);
    font-size: 14px;
}

.md-button.add-tab-btn {
    height: 80px;
    background: #eee;
    position: absolute;
    top: 4px;
    z-index: 7;
    cursor: pointer;
}

.ad-time-container {
    margin: 0 -10;
}

.tabs-holder {
    position: relative;
}

md-tabs.thumbnail-tabs md-tabs-content-wrapper {
    top: 0px !important;
}

md-tabs.thumbnail-tabs md-tab-content {
    padding: 15px;
    border: 1px solid #ddd;
}

.ad-content .title {
    margin-top: 0px;
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: 500;
}

.ad-list,
.bg-gallery {
    width: 100%;
    display: flex;
    overflow-x: auto;
}

.aditem {
    width: 90px;
    min-width: 90px;
    height: 90px;
    background-size: cover;
    background-color: #eee;
    background-position: center;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 2px;
    border: 3px solid #ddd;
}

.bg-item {
    width: 70px;
    min-width: 75px;
    height: 70px;
    background-size: cover;
    background-color: #eee;
    background-position: center;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 2px;
    border: 3px solid #ddd;
    position: relative;
    overflow: hidden;
}

.bg-item:focus {
    outline: 0;
}

.bg-item.active {
    border-color: #039be5;
}

.bg-item.active::after {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 15px;
    height: 19px;
    color: #fff;
    font-size: 12px;
}

.bg-item.active::before {
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 0px;
    height: 0px;
    border-bottom: 30px solid #039be5;
    border-left: 35px solid transparent;
}

.video-url {
    margin-bottom: 20px;
}

.video-url input {
    margin: 0px !important;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 2px 0 0 2px;
    padding: 5px 10px;
    font-size: 13px;
}

.video-url .btn.md-button {
    margin: 0px !important;
}

.video-url .btn.md-button:hover {
    background: #039be5 !important;
    border-radius: 0px 2px 2px 0;
}

.ad-save-btn {
    width: 100px;
}

.ad-save-btn.btn.md-button:hover {
    background: #039be5 !important;
}

.bg-upload .btn.md-button {
    width: 120px;
    background: #fff;
    height: 36px;
    font-size: 13px;
}

.bg-upload .btn.md-button md-icon {
    font-size: 19px;
    margin-left: -10px;
}

.background-container {
    width: 100%;
    height: 400px;
    background-color: #eee;
}

.account-details md-card md-card-title {
    min-height: 24px;
    max-height: 24px;
}

.md-button.create-account-btn {
    float: left;
    width: 210px;
    margin-left: 8px !important;
}

.demo-signup {
    font-weight: 500;
    text-transform: uppercase;
}

.forgot-password {
    font-weight: 500;
    text-transform: uppercase;
}

.add-url-footer {
    border-top: 1px solid #ddd;
}

.add-url-footer .md-button.btn {
    font-weight: 600;
    letter-spacing: .5px;
}

.filter-type-label {
    padding-right: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-top: -1px;
}

md-dialog-content .add-url-container input {
    width: calc(100% - 80px);
}

md-dialog-content .add-url-container {
    margin-bottom: 15px;
}

.view-all-urls {
    font-size: 10px;
}

.view-all-urls:hover {
    text-decoration: underline;
}

.url-switch {
    width: 220px;
    margin-top: 0;
}

.url-switch .md-label small {
    color: #999;
}

.url-filtring-card-margin {
    margin: 0 0 10px 0 !important;
}

.url-filtring md-card-header {
    border-bottom: 1px solid #ddd;
}

.url-filtring .search-box {
    right: 0px;
}

.url-filtring-header {
    display: inline-block;
}

.url-filtring-header md-card-header-text {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    display: inherit;
}

.url-filtring-header md-card-header-text span.title {
    float: left;
    margin-right: 20px;
    /*  font-size: 11px;
    text-transform: initial;
    color: #999;
    font-weight: 400; */
}

.url-filter-type md-radio-button .md-label small {
    font-size: 11px;
    text-transform: initial;
    color: #999;
    font-weight: 400;
}

.add-url-wrapper {
    margin-top: 15px;
}

.add-url-wrapper .md-button.btn {
    margin-top: -5px !important;
}

.add-url-wrapper md-input-container .md-errors-spacer {
    min-height: auto;
}

.add-url-container {
    width: 100%;
}

.add-url-container.add-url-container-width {
    width: calc(100% - 400px);
}

.url-filtring-header .add-url-container {
    margin-bottom: -8px;
    float: left;
    margin-top: -7px;
}

.url-filtring-header .search-box {
    float: right;
    margin-top: -2px;
    width: 280px;
}

.add-url-container input {
    width: calc(100% - 80px);
    /*min-width:200px;*/
    height: 35px;
    border-radius: 2px;
    border: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 13px;
    float: left;
}

.add-url-container .md-button.btn {
    margin: 0px 0 0 -5px !important;
    min-height: 30px;
    height: 35px;
    float: left;
    width: 52px;
}

.add-url-container .md-button.btn:hover,
.add-url-container .md-button.btn:focus {
    background: #039be5 !important;
}

.td-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 160px;
}

.no-records {
    text-align: center;
    padding: 20px 0;
}

.md-button:hover {
    cursor: pointer !important;
}

.md-button.md-primary.md-raised:not([disabled]):hover,
.md-button.md-primary.md-raised:not([disabled]):focus {
    background: rgba(3, 169, 244, 1);
    color: #fff;
    /*font-weight: 600;
	color: rgb(3,169,244);*/
}

md-dialog md-dialog-actions .md-button.md-primary.md-ink-ripple:not([disabled]):hover,
md-dialog md-dialog-actions .md-button.md-primary.md-ink-ripple:not([disabled]):focus {
    background: rgba(3, 169, 244, 1);
    color: #fff;
}

.md-button.md-primary.plain-btn:not([disabled]):hover,
.md-button.md-primary.plain-btn:not([disabled]):focus {
    background: rgba(3, 169, 244, 0.08);
}

.plain-btn {}

.md-button.md-default-theme.md-ink-ripple[disabled],
.md-button.md-primary.md-ink-ripple[disabled] {
    color: rgba(0, 0, 0, 0.38);
    font-weight: 400;
}

.md-button.bottomsheet-cancel-btn {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-right: 0px !important;
    margin-left: 5px !important;
}

.subscriber-details .md-button.download-excel-btn {
    margin-top: -1px !important;
    margin-bottom: 0px !important;
    padding: 10px 10px 10px 40px;
    color: #fff;
    font-size: 11px;
    min-height: inherit;
    line-height: inherit;
    text-transform: uppercase;
    font-weight: 600;
    box-sizing: border-box;
}

.md-button.download-excel-icon-btn{
	background: #fff;
    width: 30px;
    height: 30px;
    padding: 0px;
    max-width: 30px;
    max-height: 29px;
    min-width: auto !important;
    min-height: auto;
    border-radius: 50%;
    opacity:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.md-button.download-excel-icon-btn:hover,
.md-button.download-excel-icon-btn:focus{
	background: #fff;
}

.excel{
 
    margin: 0 !important;
    min-height: 30px !important;
    width: 40px;
}

.md-button.download-excel-icon-btn[disabled]{
	opacity:0.7;
}

.md-button.download-excel-icon-btn img {
	width:60%;
}

.clear-all-filters-btn.md-button{
	    border-radius: 30px;
    background: var(--secondary-color);
    font-size: 9px;
    color: #fff;
    padding: 5px 9px 5px 6px;
    margin: 0px !important;
    min-height: auto;
    line-height: normal;
    text-transform: capitalize;
}
.clear-all-filters-btn .material-icons{
	font-size:10px;
	color:#fff;
    margin: 0px;
    min-width: auto;
    height: auto;
    margin-right: 2px;
}
.clear-all-filters-btn.md-button:hover{
	background: var(--secondary-color);
}
.subscriber-details .md-button.download-excel-btn-1 {
    margin-top: -1px !important;
    margin-bottom: 0px !important;
    padding: 10px 10px 10px 40px;
    color: #555;
    font-size: 11px;
    min-height: inherit;
    line-height: inherit;
    text-transform: uppercase;
    font-weight: 600;
    box-sizing: border-box;
}

.subscriber-details .md-button.download-excel-btn i,
.subscriber-details .md-button.download-excel-btn-1 i {
    position: absolute;
    left: 9px;
    top: 4px;
    font-size: 25px;
}

.search-filter.filter {
    width: 204px;
}

.search-filter.dialog-search-filte input {
    border: 1px solid #ddd;
}

.search-filter input {
    border: 0;
    height: 45px;
    padding: 10px;
    background: transparent;
    box-sizing: border-box;
    font-size: 13px;
    width: 164px;
}

.search-filter input:focus {
    outline: 0px;
}

.search-filter .search-btn {
    height: 45px;
    background: #039be5;
    border: 0px;
    color: #FFF;
    width: 40px;
    text-align: center;
    margin-right: 0px;
    /* font-size: 13px; */
    float: right;
    border-radius: 0 2px 2px 0;
}

.search-filter .search-btn i {
    font-size: 22px;
    color: #fff;
}

.custom-file-upload {
    /*border: 1px solid #ccc;*/
    display: inline-block;
    padding: 8px 6px;
    cursor: pointer;
    height: 31px;
    line-height: 31px;
    position: relative;
}

.custom-file-upload i {
    line-height: 31px;
}

.file-title {
    position: absolute;
    left: 36px;
    top: 7px;
    /* width: 124px; */
    font-size: 13px;
    height: 30px;
    overflow: hidden;
    font-weight: normal;
    color: #555;
}

.upload-btn {
    background: #4f9ce5;
    border: none;
    height: 45px;
    color: #fff;
    float: left;
}

.filter.reset-widget {
    width: 40px;
}

.filter.reset-widget .reset-btn {
    margin: 8px 0;
    display: block;
    background: none;
    border: none;
    outline: none;
}

.login-page .login-md-content {
    padding-top: 0px;
}

.login-page .login-md-content ui-view {
    padding: 0px;
}

.filter.date-time-filter {
    width: 210px;
}

.filter.date-time-filter md-input-container {
    margin-top: 14px;
    margin-bottom: 0px;
}

.filter.date-time-filter label {
    left: 35px;
}

.filter.date-time-filter input {
    border-bottom: 0px;
    font-size: 14px;
    margin-left: 33px;
}

.filter.date-time-filter .dtp-btn-calendar.md-button {
    top: -17px;
    left: -3px;
}

.filter.date-time-filter .dtp-clear.md-button {
    top: -8px;
    right: -15px;
}

.right-radio-grout {
    margin-left: 15px;
}

.flex-initial {
    flex: initial;
}

.axis-lable .nv-y text {
    display: none;
}


/* ------------G2 css---------.axis-lable .nv-x.nv-axis.nvd3-svg */

.datarate-axis-lable .nv-x.nv-axis.nvd3-svg {
    -ms-transform: translate(0, 195px)!important;
    -webkit-transform: translate(0, 195px) !important;
    transform: translate(0, 195px) !important;
}

.datarate-axis-lable-heartbeat .nv-x.nv-axis.nvd3-svg {
    -ms-transform: translate(30px, 235px)!important;
    -webkit-transform: translate(30px, 235px) !important;
    transform: translate(30px, 235px) !important;
}


/* ----------G2 css ----------------------*/

.axis-lable .nv-x text {
    fill: #777 !important;
    font-size: 10px;
    font-weight: 400 !important;
}

.datarate-axis-lable .nv-x text {
    fill: #777 !important;
    font-size: 12px;
    font-weight: 400 !important;
}

.datarate-axis-lable .nv-y text {
    fill: #777 !important;
    font-size: 12px;
    font-weight: 400 !important;
}

.datarate-axis-lable-heartbeat .nv-y text {
    fill: #777 !important;
    font-size: 22px;
    font-weight: 500 !important;
}

.datarate-axis-lable-heartbeat .nv-x text {
    fill: #777 !important;
    font-size: 22px;
    font-weight: 500 !important;
}

.headbeat-td-graph {
    height: 50px;
}


.headbeat-td-graph {
    height: 50px;
}


.headbeat-td-graph nvd3-line-chart svg {
    margin-top: -2px;
    margin-left: -5px;
    height: 32px;
}

.headbeat-td-graph .nvd3-svg text {
    fill: #777 !important;
    font-size: 11px;
    font-weight: 400 !important;
}

.upload-container.filter {
    width: 200px;
}

.file-upload-error span {
    color: #f00;
    font-size: 12px;
}

.file-upload-error {
    padding-top: 23px;
    float: left;
}

.upload-container .selected-file-name {
    width: 162px;
    border: 0px;
    background: transparent;
    padding: 5px 10px;
    font-size: 13px;
    color: #555;
}

.upload-container .file-upload {
    padding: 10px 6px;
    background: #039be5;
    border: 1px solid #039be5;
    position: relative;
    color: #fff;
    border-radius: 0 2px 2px 0px;
    text-align: center;
    float: left;
    cursor: pointer;
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    overflow: hidden;
}

.upload-container .file-upload md-icon {
    color: #fff;
    cursor: pointer;
}

.upload-container .hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    padding-left: 37px;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;
}

sub-menu-side-nav,
main-menu-side-nav,
side-nav {
    z-index: 9;
}

.subscriber-info {
    padding-left: 0px;
    margin-bottom: 0px;
    margin-left: 16px;
}

.subscriber-info li {
    float: left;
    color: #555;
    list-style: none;
    margin-right: 30px;
    font-size: 12px;
    text-transform: capitalize;
}

.subscriber-info li span {
    color: #039be5;
    letter-spacing: 0.5px;
    font-weight: 400;
}

.table tr td {
    color: #969696;
    font-size: 12px;
}

.subscriber-details .table tr td .date {
    margin-right: 10px
}

.search-field {
    float: right;
}

.search-field input {
    border: 0px;
    border-left: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 13px;
    height: 36px;
    float: left;
    color: black;
}

.search-field input:focus {
    outline: 0px;
    border: 1px solid #039be5;
}

.search-field button i {
    font-size: 20px;
}

.search-field button {
    border: 0px;
    background: #039be5;
    color: #fff;
    height: 36px;
    float: left;
}

.sorting-table tr th {
    position: relative;
}

.sorting-table tr th i {
    font-size: 15px;
    position: absolute;
    top: 10px;
    padding-left: 5px;
    color: #555;
}

.sorting-table tr th a {
    color: rgba(0, 0, 0, 0.70);
}

.sorting-table tr th a:hover {
    text-decoration: none;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-right-40 {
    margin-right: 40px !important;
}

.margin-left-0 {
    margin-left: 0px !important;
}

.flex-col tr td:nth-child(2) {
    width: 5px;
}

.add-btn-sm {
    position: absolute !important;
    width: 35px !important;
    height: 20px !important;
    line-height: 20px !important;
    top: -25px;
    right: 0px;
    z-index: 2 !important;
}

.add-btn-sm.md-button.md-fab[disabled],
.add-btn-sm.md-button.md-fab[disabled]:hover {
    background-color: #ddd !important;
    color: rgba(0, 0, 0, 0.38);
}

.position-relative {
    position: relative;
}

.overflow-hide {
    overflow: hidden;
}

.network-interface-list {
    padding-left: 4px;
    margin: 10px 0;
}

.network-interface-list li.title {
    font-size: 12px;
    font-weight: 600;
    color: #222;
}

.network-interface-list li {
    float: left;
    list-style: none;
    margin-right: 15px;
    font-size: 14px;
    color: #555;
}

.network-interface-list li input {
    width: 50px;
    border: 1px solid #ddd;
    margin-left: 3px;
    border-radius: 2px;
    margin-right: 2px;
    padding: 0 5px;
}

.logs-refresh.md-button.md-fab {
    position: absolute;
    right: 5px;
    top: -17px;
    width: 36px;
    height: 30px;
    background: #fff;
    line-height: 30px;
    z-index: 1;
}

.delete-btn.md-button {
    min-height: 24px;
    margin: 0px !important;
    color: #e74c3c;
}

.delete-btn.md-button[disabled] {
    color: rgba(0, 0, 0, 0.38);
}

md-card.padding-none md-card-title {
    padding: 5px 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 40px;
    max-height: 40px;
}

md-card md-card-title+md-card-content {
    padding-top: 10px !important;
}


md-card.graph-holder md-card-content.padding-top-0{
	padding-top:0px !important;
}

md-card.graph-holder md-card-title, md-card.graph-holder.padding-none md-card-header.graph-filter-header md-card-title{
	height:35px;
	max-height:35px;
}

.filters-section-title{
	font-size: 12px;
    margin-top: 0px;
    font-weight: 600;
    color: var(--secondary-color);
}

md-card md-card-title md-card-title-text .md-headline {
    font-size: 16px;
    /*text-transform: uppercase;*/
    letter-spacing: 0.5px;
    color: #ffffff;
    font-weight: 500;
}

md-card md-card-title md-card-title-text .md-headline-1 {
    font-size: 16px;
    /*text-transform: uppercase;*/
    letter-spacing: 0.5px;
    color: #555;
    font-weight: 600;
}

md-card-actions.layout-align-end-center .md-button.md-raised {
    margin-left: 10px !important;
    padding: 0 10px;
    min-height: 30px;
    line-height: 32px;
}

.hotspot-config form {
    margin-bottom: 0px;
}

.margin-bottom-0 {
    margin-bottom: 0px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.logs-refresh.md-button md-icon {
    color: #039BE5;
}

.logs-refresh.md-button:hover md-icon {
    color: #fff;
}

.refresh-btn.md-button md-icon {
    color: #039BE5;
}

.refresh-btn.md-button:hover md-icon {
    color: #fff;
}

.refresh-btn:hover {
    background-color: #039BE5 !important;
}

.fileupload-btn .md-button {
    background: #039be5;
    margin: 0px !important;
    height: 45px;
    border-radius: 0 2px 2px 0;
}

.fileupload-btn .md-button:hover,
.fileupload-btn .md-button.btn-add.md-focused,
.fileupload-btn .md-button.md-focused {
    background-color: #039be5;
}

.fileupload-btn .md-button md-icon {
    color: #fff;
}

.fileupload-btn md-input-container label {
    margin-left: 5px;
    font-size: 13px;
    margin-bottom: 5px;
}

.fileupload-btn md-input-container.md-input-has-value label {
    margin-bottom: 1px;
    font-size: 14px;
}

.fileupload-btn md-input-container input {
    border: 0px;
    padding: 7px;
    font-size: 14px;
    margin-top: -4px;
}

.fileupload-btn.filter {
    width: inherit;
}

#block-space {
    padding-left: 4px;
    margin-bottom: 10px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

.pos-rel {
    position: relative;
}

.custome-icon {
    position: absolute;
    font-size: 18px !important;
    background: #089ce6;
    border-radius: 50%;
    text-align: center;
    padding: 7px;
    color: #fff;
    top: -18px;
    right: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    cursor: pointer;
}

.table-title {
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: 600;
}

.cb-col {}

.nirad_table.model-tbl tr th {
    padding: 5px 8px;
}

.clear-filter {
    line-height: 31px;
    font-size: 12px;
    color: #039be5;
    padding-left: 22px;
    position: relative;
}

.clear-filter i {
    position: absolute;
    left: 0;
    font-size: 18px;
    top: 7px;
}

.filtered-values-holder {
    position: relative;
    width: 100%;
    height: 44px;
}

.filtered-values {
    display: flex;
    justify-content: space-between;
    padding: 4px 23px 1px;
    background: #fff;
    width: 103%;
    left: -15px;
    top: 0px;
    position: absolute;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .01), 0 1px 1px 0 rgba(0, 0, 0, .01), 0 2px 1px -1px rgba(0, 0, 0, .08);
}

.filter-container {
    margin-right: 25px;
}

.filter-container label {
    color: #039be5;
    font-size: 10px;
    margin-bottom: 0px;
}

.filter-container .filter-value {
    color: rgba(0, 0, 0, 0.67);
    font-size: 12px;
    margin-top: -2px;
}

md-bottom-sheet.filter-bottom-sheet {
    position: fixed;
    padding: 0px 0px 80px;
}

md-bottom-sheet.filter-bottom-sheet .md-subheader {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

md-bottom-sheet.filter-bottom-sheet md-input-container {
    margin: 5px 0;
}

md-bottom-sheet.filter-bottom-sheet .md-subheader-inner {
    color: #333;
    font-size: 16px;
    padding: 0px 0 0 15px !important;
    height: 35px;
    line-height: 35px;
}

md-bottom-sheet.filter-bottom-sheet .md-subheader-inner i.fa-filter {
    margin-top: 6px;
    font-size: 21px;
    color: #555;
}

md-bottom-sheet.filter-bottom-sheet .md-subheader .md-subheader-inner .md-subheader-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.bottom-sheet-container {
    padding: 10px 15px;
}

.time-filter mdp-time-picker md-input-container {
    margin: 14px 0 0;
    height: 24px;
    padding: 0px 0;
    font-size: 13px;
}

.time-filter mdp-time-picker md-input-container.md-input-has-value,
.time-filter mdp-time-picker md-input-container.md-input-focused {
    margin: 18px 0 0;
}

.time-filter mdp-time-picker md-input-container .md-input {
    border: 0px;
}

.filter.time-filter {
    position: relative;
    width: 130;
}

.time-filter i {
    position: absolute;
    top: 11px;
    left: 7px;
    color: #757575;
    font-size: 24px;
}

.add-filter-holder {
    float: left;
    margin-top: 21px;
    margin-left: 5px;
}

.add-new-filter {
    color: #039be5;
    font-size: 12px;
    position: relative;
    padding-left: 24px;
}

.add-new-filter i {
    margin-right: 5px;
    font-size: 20px;
    position: absolute;
    left: 0px;
    top: -2px;
}

.filter.date-filter {}


/* .filter.date-filter md-input-container.md-input-invalid label {
    color: #999;
} */

.date-filter ._md-datepicker-floating-label md-datepicker .md-datepicker-button {
    top: -2px;
    left: 0px;
    /* position: absolute; */
    margin: 0px !important;
    height: 45px;
}

.date-filter ._md-datepicker-floating-label md-datepicker._md-datepicker-has-triangle-icon {
    /* padding-right: 0px; */
    /* margin-right: 0px; */
    /* margin-left: 27px; */
    width: 100%;
    /* top: -4px; */
    /* position: relative; */
}

.date-filter md-input-container._md-datepicker-has-calendar-icon {
    margin: 0px;
    height: 45px;
}

.date-filter ._md-datepicker-floating-label md-datepicker .md-datepicker-input-container {
    width: 118px;
    margin-left: 0;
    /*height: 100%; */
    margin-top: 14px;
}

.date-filter ._md-datepicker-floating-label._md-datepicker-has-calendar-icon>label:not(.md-no-float):not(.md-container-ignore) {
    right: inherit;
    left: 40px;
    padding-bottom: 0px;
    width: 88px;
    margin-bottom: 0px;
    top: -15px;
    height: 17px;
}

.date-filter ._md-datepicker-floating-label._md-datepicker-has-calendar-icon.md-input-has-value>label:not(.md-no-float):not(.md-container-ignore),
.date-filter ._md-datepicker-floating-label._md-datepicker-has-calendar-icon.md-input-focused>label:not(.md-no-float):not(.md-container-ignore) {
    top: -1px;
}

.date-filter md-input-container .md-input,
.date-filter md-input-container.md-input-focused .md-input {
    border-width: 0px;
    font-size: 13px;
    width: 100%;
    min-width: 50px;
    /*height: 100%;*/
    color: #757575;
}

.date-filter ._md-datepicker-floating-label md-datepicker .md-datepicker-input-container .md-datepicker-expand-triangle {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid;
    border-top-color: rgba(0, 0, 0, 0.54)
}

.clear-date-filter {
    float: left;
    margin: 8px;
    display: flex;
    align-items: center;
    height: 45px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #039BE5;
}

.clear-date-filter i {
    margin-right: 3px;
    font-size: 20px;
}

.clear-date-filter:focus {
    outline: 0px;
}

.filter.filterby md-select .md-select-value {
    color: #039be5;
    font-size: 12px;
}

.filter.filterby md-select .md-select-value .md-select-icon,
.filter.filterby md-select:focus:not([disabled]) .md-select-value .md-select-icon {
    color: #039be5;
}

.filter.filterby md-select:focus:not([disabled]) .md-select-value {
    color: #039be5;
}

.filter.filterby md-select .md-select-placeholder {
    color: #999;
}

.filter.filterby md-select .md-select-placeholder .md-select-icon {
    color: rgba(0, 0, 0, 0.54);
}

.filterby md-select {
    margin: 1px 0 0px;
}

.filterby md-select .md-select-value.md-select-placeholder {
    margin-top: 10px;
}

.filterby .filter-value {
    height: 24px;
    width: 100%;
    border: 0px;
    font-size: 13px;
    padding: 5px;
    margin-left: -3px;
}

.filterby .filter-value:focus {
    outline: 0px;
    background: #f9f9f9;
}

.filterby .filter-value::-webkit-input-placeholder {
    color: #ccc;
}

.filterby .filter-value::-moz-placeholder {
    color: #ccc;
}

.filterby .filter-value:-ms-input-placeholder {
    color: #ccc;
}

.filterby .filter-value:-moz-placeholder {
    color: #ccc;
}

.filterby md-select.ng-pristine+.filter-value {
    display: none;
}

.log-scroll {
    /* max-height: 100px;
    overflow-y: auto;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 25px;
}

.log-padd {
    padding-right: 29px;
}

.log-ellipsis {
    max-width: 240px;
    position: relative;
}

.view-more-log {
    position: absolute;
    top: 10px;
    color: #fff;
    right: 9px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    background: #6c6c6c;
    border-radius: 2px;
    height: 15px;
    width: 15px;
}
.view-more-log .down-arrow{
	display:none;
}
.view-more-log .up-arrow{
	display:block;
}
.view-more-log.less .down-arrow{
	display:block;
}
.view-more-log.less .up-arrow{
	display:none;
}

.view-more-log:hover {
    background: #039be5;
}

.view-more-log.showBtn{
	display:block;
}
.view-more-log.showBtnFource{
	display:block !important;
}

.view-more-log.hideBtn{
	display:none;
}

.logs-table tr td.log-ellipsis .view-more-log i {
    position: relative;
    font-size: 16px;
    top: 0px;
    left: 0px;
}


.logs-table tr td.log-ellipsis div{
	padding-right: 25px;
}

.table tr td.log-ellipsis div{
	padding-right: 25px;
}

.logs-table tr td i.warning {
    color: #f0ad4e;
    font-size: 21px;
}

.logs-table tr td i.error {
    color: #d9534f;
    font-size: 21px;
}

.logs-table tr td i {
    /* position: absolute; */
    top: 8px;
    left: 10px;
}


/*.filter .filter-value {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    border: 0px;
}*/

.error-type {
    position: relative;
}

.hotspot-config {
    padding: 20px;
}

.hotspot-config md-input-container {
    position: relative;
}

.pagination-container {
    width: 100%;
    display: block;
    background: #f9f9f9;
    overflow: hidden;
}

.page-details {
    float: left;
    font-size: 14px;
    padding: 15px 20px;
    color: #555;
}

.page-list {
    float: right;
}

.page-buttons {
    float: left;
    margin-right: 10px;
}

.page-buttons .md-button {
    padding: 10px;
}

.page-search {
    float: right;
    padding-right: 15px;
}

.page-search input {
    width: 75px;
    border: 1px solid #ddd;
    padding: 5px 5px;
    border-radius: 2px;
    margin-top: 1px;
}

.page-search form {
    margin-bottom: 0px;
}

.page-search .md-button {
    background: #039BE5;
    color: #fff;
    font-weight: 600;
}

.page-search .md-button[disabled] {
    background: #ddd;
    color: #999;
}

.icon-btn {
    padding: 0px 5px !important;
}

.icon-btn.lastpage md-icon,
.icon-btn.firstpage md-icon {
    position: relative;
}

.icon-btn.lastpage md-icon::before {
    content: '';
    width: 2px;
    height: 12px;
    background: #888;
    position: absolute;
    right: 4px;
    top: 5.3px;
}

.icon-btn.firstpage md-icon::before {
    content: '';
    width: 2px;
    height: 12px;
    background: #888;
    position: absolute;
    left: 4px;
    top: 5.3px;
}

.number-btn {
    padding: 0px 10px !important;
}

.number-btn.active {
    background: #039BE5;
    color: #fff;
}

.datepicker-container md-datepicker {
    display: flex;
    flex-grow: 1;
}

.datepicker-container .md-datepicker-button {
    position: absolute;
    /* top: -10px !important; */
    z-index: 2;
    right: 0;
    margin: 0px !important;
    padding: 0px 0px 5px 0px !important;
    height: 20px !important;
    width: 20px !important;
    min-height: auto;
}
.datepicker-container .md-datepicker-button md-icon{
	    height: 16px;
    width: 16px;
    min-height: 16px;
    min-width: 16px;
}

.datepicker-container .md-datepicker-input {
    /*padding-left: 25px;*/
}

.datepicker-container .md-datepicker-input-container {
    width: 100%;
    margin-left: 0px !important;
}

.datepicker-container .md-datepicker-input-container .md-datepicker-input {
    max-width: 100% !important;
}

.datepicker-container .md-datepicker-input-container .md-datepicker-triangle-button {
    display: none;
}

.datepicker-container label {
    /*left:38px !important;*/
    left: 0px !important;
}

.steps-crt .step-line {
    height: 168px;
    overflow: hidden;
}

.g2-chart {
    margin-top: 20px;
    position: relative;
}

.g2-chart .y-lable {
    position: absolute;
    float: left;
    top: 0;
    width: 40px;
}

#g2-lblX {
    display: block;
}

.x-lable {
    position: absolute;
    top: -20px;
    left: -3px;
}

.g2-wp .step-line,
.g2-wp .x-lable {
    margin-left: 40px;
}

#G2Chart,
.sample-loop .g2grf {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    border-right: 1px solid #f5f5f1;
}

#G2Chart,
.x-lable {
    margin-left: 35px;
}

.g2-chart .lebels {
    position: absolute;
    /* z-index: 99; */
}

.chart-custome {
    position: relative;
}

.mask-titles ul {
    margin: 0;
    padding: 0;
}

.mask-titles ul li {
    list-style: none;
    font-size: 10px;
    margin: 0px 0 35px 0;
}

.mask-titles {
    position: absolute;
    top: 19px;
    left: 11px;
    z-index: 1;
}

.mask-titles .blue {
    color: #61b3f4;
}

.mask-titles .skyblue {
    color: #65c2dc;
}

.mask-titles .darkgreen {
    color: #56a5a1;
}

.mask-titles .green {
    color: #7db969;
}

.mask-titles .lightgreen {
    color: #a6ca66;
}

.mask-titles .darkred {
    color: #b03059;
}

.mask-titles li,
.mask-titles2 li {
    font-weight: bold;
    background: #fff;
    padding: 0 2px;
}

a {
    text-decoration: none;
    cursor: pointer;
}

.dashboard-scroll {
    max-height: 300px;
}

md-content.md-default-theme,
md-content {
    /* background-color: #f3f6f9; */
    background-color: #edf1f6;
    position: relative;
}

md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar:not(.md-menu-toolbar) {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.77);
}

.md-button {
    min-width: auto !important;
    margin: 6px 0px !important;
}

.md-button.margin-none {
    margin: 0px !important;
}

.md-toolbar-tools .md-button ng-md-icon svg {
    margin-top: 11px;
}

.md-toolbar-tools {
    margin: 0px !important;
    padding: 0px !important;
}

.nirad_header .md-toolbar-tools h3 img {
    height: 40px;
}

.nirad_header .md-toolbar-tools .toolbar-logo {
    padding-left: 16px;
}

.nirad_header .md-toolbar-tools .toolbar-logo img {
    height: 40px;
}

md-card {
    background-color: #fff;
    box-shadow: none !important;
    border-radius: 4px;
}

md-card h2:first-of-type {
    margin-top: 0;
}

md-toolbar .md-button.md-default-theme {
    border-radius: 99%;
}

h2 {
    font-weight: 400;
}

.md-toolbar-tools-bottom {
    font-size: small;
}

.md-toolbar-tools-bottom :last-child {
    opacity: 0.8;
}

md-toolbar:not(.md-hue-1),
.md-fab {
    fill: rgba(0, 0, 0, 0.77);
    ;
}

md-sidenav {
    fill: #737373;
}

md-sidenav ng-md-icon {
    position: relative;
    top: 5px;
}

.user-avatar {
    border-radius: 99%;
}

.content_container {
    margin: auto;
}

.search_box {
    /*margin:15px;*/
}

.search_box md-tabs-content-wrapper md-tab-content md-content {
    background: #fff;
    padding: 0 15px;
}

.search_box md-tabs-content-wrapper {
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.16);
    overflow: hidden !important;
}

.search_box md-tabs,
.search_box .md-header-items-container {
    overflow: visible;
}

.search_box md-tabs.md-default-theme md-tab.active,
.search_box md-tabs .md-tab.md-active {
    color: #555;
    background: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
}

.search_box md-tabs md-tabs-wrapper {
    border: 0px !important;
}

.search_box md-tabs-canvas {
    overflow: visible !important;
    height: 45px;
}

.search_box md-tabs.md-default-theme .md-tab,
.search_box md-tabs .md-tab {
    color: #fff;
    background: #F63;
}

.search_box md-tabs.md-default-theme md-tabs-ink-bar,
.search_box md-tabs md-ink-bar {
    color: #fff;
    background: #fff;
    display: none !important;
}

md-input-container.md-has-icon md-icon {
    color: #717171;
}

md-input-container.md-default-theme.md-input-invalid md-icon,
md-input-container.md-input-invalid md-icon {
    color: rgb(221, 44, 0);
}

md-input-container.md-has-icon.md-input-has-value md-icon,
md-input-container.md-has-icon.md-input-focused md-icon {
    color: #039be5;
}

md-select.md-default-theme:focus:not([disabled]) .md-select-value,
md-select:focus:not([disabled]) .md-select-value {
    border-bottom-color: #039be5 !important;
    color: rgba(0, 0, 0, 0.87);
}

md-input-container.md-default-theme.md-input-focused:not(.md-input-invalid) .md-input,
md-input-container.md-input-focused:not(.md-input-invalid) .md-input {
    border-color: #039be5 !important;
}

md-input-container.md-input-has-value label,
md-input-container.md-input-focused label {
    color: #039be5 !important;
}

.md-toolbar-tools md-input-container .search_input.md-input {
    padding: 21px 2px 1px !important;
    border-width: 0px;
    line-height: 79px;
    height: 79px !important;
}

.recommended md-list-item {
    background: #fff;
    margin-bottom: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.16), 0px 2px 10px rgba(0, 0, 0, 0.12);
}

.recommended md-list-item .recommended-item-icon {
    text-align: center;
    width: 40px;
}

.recommended md-list-item .recommended-item-icon i {
    line-height: 50px;
}


/***************************************************************/

.signin_holder {
    width: 480px;
    margin: 11% auto;
    padding: 0px !important;
    background: url(../images/header-bg5.png) no-repeat center #039be5;
    background-size: cover;
}

.signin_holder_overlay {
    position: relative;
    /*background: rgb(245,245,245);
background: -moz-linear-gradient(top,  rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, rgba(3,155,229,.0) 50%, rgba(3,155,229,.0) 50%, rgba(3,155,229,.0) 100%);
background: -webkit-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(245,245,245,1) 50%,rgba(3,155,229,.0) 50%,rgba(3,155,229,.0) 50%,rgba(3,155,229,.0) 100%);
background: linear-gradient(to bottom,  rgba(245,245,245,1) 0%,rgba(245,245,245,1) 50%,rgba(3,155,229,.0) 50%,rgba(3,155,229,.0) 50%,rgba(3,155,229,.0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#039be5',GradientType=0 );
*/
}

.signin_holder_overlay:before {
    content: ' ';
    position: absolute;
    width: 480px;
    height: 50%;
    background: #edf1f6;
}

.signin-conatiner {
    position: relative;
    padding: 20px;
}

.signin-conatiner:before {
    z-index: -1;
    content: ' ';
    line-height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #009688;
    height: 220px;
}

.signin_form {
    padding: 30px 20px 0 20px;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: #fff;
}

md-card.signin_form md-card-content {
    padding-top: 0px;
    padding-bottom: 0px;
}

.signin_logo {
    text-align: center;
    clear: both;
    display: block;
}

.signin_logo img {
    width: 185px;
    margin-top: -170px;
}

.signin_logo h1 {
    margin-top: 0px;
    margin-bottom: 50px;
}

.signin_logo h1 a {
    font-weight: normal;
    color: #039be5;
    font-size: 29px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.signin_holder .additional-info {
    text-align: center;
    font-size: 12px;
    padding-bottom: 30px;
}

.signin_holder .additional-info a {
    color: #fafafa;
}

.signin_holder .additional-info a:hover {
    text-decoration: underline;
}

.signin_holder .additional-info .divider-h {
    border-right: 1px solid #fafafa;
    margin: 0 15px;
}

.signup-msg h3 {
    margin-top: 0px;
}

.signup-msg p {
    font-size: 13px;
    color: #757575;
}

.signup-msg p a {
    color: #039be5;
    font-weight: 600;
}

.signup-msg p a:hover {
    text-decoration: underline;
}

.signup-msg .email {
    color: #039be5;
    font-size: 18px;
    margin-bottom: 20px;
}
.dc-dr-status{
    background: #2d323e;
    z-index: 15;
    position: relative;
    padding: 0%;
    height: 100%;
    /* width: 110%; */
    padding: 17px 0px 10px 10px;
    display: none; 
    cursor: pointer;
   
}
.nirad_logo:hover .dc-dr-status {
    display: block;
  }

.nirad_logo {}

.nirad_logo img {
    width: 146px;
    position: absolute;
    top: 12px;
    left: 18px;
}

.nirad_logo h3 {
    font-weight: 500 !important;
    text-transform: uppercase;
    padding-left: 63px;
    font-size: 19px !important;
    letter-spacing: 0.010em;
    font-style: italic;
}

md-input-container label {
    color: #999;
    font-size: 11px;
    font-weight: normal;
    pointer-events: none;
    padding-bottom: 10px;
}
.labels {
    color: #999;
    font-size: 11px;
    font-weight: normal;
    pointer-events: none;
    /* padding-bottom: 10px; */
    padding-top: 4%;
}

.labelContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    margin-right: 10%;
}

md-input-container.md-input-has-placeholder label {
    padding-bottom: 0px;
}

md-input-container.md-input-has-value label,
md-input-container.md-input-focused label {
    padding-bottom: 0px !important;
}

/* .blue-header-table-card md-select .md-select-value.md-select-placeholder {
    color: #fff;
}

.blue-header-table-card md-select:focus:not([disabled]) .md-select-value.md-select-placeholder {
    color: #fff;
}

.blue-header-table-card md-select.md-default-theme .md-select-icon,
.blue-header-table-card md-select .md-select-icon {
    color: #fff;
} */

.blue-header-table-card md-select.td-select .md-select-value.md-select-placeholder {
    color: #999;
}

.blue-header-table-card md-select.td-select:focus:not([disabled]) .md-select-value.md-select-placeholder {
    color: #757575;
}

.blue-header-table-card md-select.td-select.md-default-theme .md-select-icon,
.blue-header-table-card md-select.td-select .md-select-icon {
    color: #555;
}

.blue-header-table-card md-select.td-select .md-select-value.md-select-placeholder {
    color: #999;
}

.blue-header-table-card md-select.td-select:focus:not([disabled]) .md-select-value.md-select-placeholder {
    color: #757575;
}

.blue-header-table-card md-select.td-select.md-default-theme .md-select-icon,
.blue-header-table-card md-select.td-select .md-select-icon {
    color: #555;
}

.blue-header-table-card .tbl-border-outline,
.blue-header-table-card.tbl-border-outline {
    border-top: 0px;
}

md-select .md-select-value.md-select-placeholder {
    color: #999;
    font-size: 14px;
    font-weight: normal;
    pointer-events: none;
    padding-bottom: 10px !important;
    margin-top: -9px;
}

md-select:focus:not([disabled]) .md-select-value.md-select-placeholder {
    color: #999;
}

.md-button.nirad_plain_btn {
    color: #039be5;
    font-weight: 600;
    text-transform: uppercase;
}

.md-button.nirad_plain_btn:hover {
    background: transparent !important;
    text-decoration: underline;
}

.nirad_plain_btn.md-button[disabled] {
    background-color: transparent;
    color: #ccc !important;
    font-weight: 400;
}

.header-banner {
    padding: 0px 16px 0;
    background: url(../images/header-bg6.png) no-repeat top rgb(3, 155, 229);
    background-size: 100%;
    min-height: 45px !important;
    height: 45px;
    width: 100%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sidebar-toolbar {
    background-color: rgb(45, 50, 62) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.nirad_header md-toolbar {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.md-subheader.nirad_subheader {
    /* box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12); */
    /*border-top: 1px solid #eee;*/
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05), 0 1px 1px 0 rgba(0, 0, 0, .05), 0 2px 1px -1px rgba(0, 0, 0, .03);
    background: #fff;
    height: 36px;
    z-index: 3 !important;
}

.z-index-3 {
    z-index: 3 !important;
}

.md-subheader.nirad_subheader .title {
    color: #555;
    margin: 0px;
    line-height: 36px;
    float: left;
    font-size: 14px;
}

.md-subheader.nirad_subheader .title.back-btn {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.md-subheader.nirad_subheader .title.back-btn:hover {
    color: #039be5;
}

.md-subheader.nirad_subheader .title.back-btn:focus {
    outline: 0px;
}

.md-subheader.nirad_subheader .title i {
    float: left;
    line-height: 36px;
    margin-right: 8px;
    font-size: 21px;
}

md-sidenav.md-default-theme,
md-sidenav {
    background-color: rgb(45, 50, 62) !important;
}

md-sidenav md-list md-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

md-sidenav {
    fill: #fff !important;
}

md-sidenav .md-subheader.md-default-theme,
md-sidenav .md-subheader {
    color: rgba(255, 255, 255, 0.54);
    background-color: rgb(45, 50, 62);
}

.md-subheader .md-subheader-inner {
    padding: 3px 24px !important;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

.menu_list md-list-item .inset {
    font-size: 13px;
    padding: 0 10px 0 0 !important;
    color: rgba(255, 255, 255, 0.7);
}

.menu_list md-list-item:hover,
.menu_list md-list-item:focus {
    background-color: rgba(0, 155, 229, 1) !important
}

.menu_list md-list-item .md-button:hover,
.menu_list md-list-item .md-button:focus {
    background-color: rgba(0, 155, 229, 0) !important
}

.menu_list md-list-item .md-button:hover .md-list-item-inner .inset,
.menu_list md-list-item .md-button:focus .md-list-item-inner .inset {
    color: #fff !important;
}

.menu_list md-list-item {
    margin: 0px;
}

.menu_list md-list-item .md-button {
    margin: 0px !important;
}

.menu_list md-list-item button {
    padding: 0 21px !important;
    margin: 0px !important;
}

.menu_list md-list-item button:hover {
    background: #242832 !important;
}

.menu_list md-list-item .md-list-item-inner {
    line-height: 44px !important;
}

.menu_list md-list-item .inset .material-icons {
    line-height: 51px !important;
    font-size: 18px;
    width: auto;
    height: auto;
}

.header-banner .device-title {
    margin-top: 0px;
    font-weight: 500;
    cursor: pointer;
    float: left;
    margin-bottom: 0px;
    color: #fff;
    line-height: 45px;
}

.header-banner .device-title .back-arrow {
    float: left;
    margin-right: 10px;
    line-height: 45px;
    font-weight: 900;
}

.header-banner .device-title h1 {
    float: left;
}

.header-banner .device-title h1,
.header-banner h1 {
    max-width: 420px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*float: left;*/
    font-size: 19px;
    margin: 0px;
    line-height: 45px;
    color: #fff;
}

.header-banner .device-title span {}

.header-banner .device-title span i.material-icons {
    font-size: 10px;
    margin-left: 10px;
    line-height: 47px;
}

.header-banner .device-title span.device_sync i.material-icons {
    color: rgb(252, 233, 79);
}

.header-banner .device-title span.device_online i.material-icons {
    color: rgb(69, 255, 0);
}

.header-banner .device-title span.device_offline i.material-icons {
    color: rgb(111, 111, 111);
}

.header-banner .device-title span.device_errorflag i.material-icons {
    color: rgb(253, 50, 50);
}

.user-icon {
    width: 40px;
    height: 40px;
    background: url(../images/avathar.png) #ebecf0 no-repeat bottom;
    background-size: 80%;
    border-radius: 50%;
    float: left;
    margin-top: 12px;
    margin-right: 10px;
}

.nirad_header .md-button {
    border-radius: 0px;
    margin: 0px !important;
    height: 64px;
    width: auto !important;
    color: #666 !important;
    border-left: 1px solid #eee;
    text-transform: capitalize !important;
    padding: 0px 15px;
}

.nirad_header .user_dropdown p {
    line-height: 64px;
    padding-right: 20px;
    padding-top: 0px;
    margin-top: 0px;
    padding-left: 0px;
    margin-left: 0px;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nirad_header .md-button.user_dropdown i {
    width: auto;
    height: auto;
    font-size: 13px;
    line-height: 64px;
    position: absolute;
    right: 15px;
    top: 0;
}

.nirad_header .md-button.md-icon-button {
    height: 64px;
    line-height: 24px;
    border-radius: 0px !important;
    padding: 8px 15px !important;
}

.nirad_header md-menu-bar {
    padding: 0px;
}

/* Timezone Badge in Header */
.timezone-badge-header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #5c85d6 0%, #4a73c4 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    margin-right: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.timezone-badge-header:hover {
    background: linear-gradient(135deg, #4a73c4 0%, #3b5da8 100%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.timezone-badge-header md-icon.material-icons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: white;
}

.timezone-badge-header .timezone-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.timezone-badge-header .timezone-label {
    font-family: 'Roboto', sans-serif;
    font-size: 6px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.5;
}

.timezone-badge-header .timezone-text {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.user-dropdown-menu {
    /*position: absolute;*/
    right: 0;
    top: 0;
}


/*.nirad_info md-card {
	background-color:#ec407a;
}
.dashboard_device_list md-card{
	background-color:#26a69a;
}
.dashboard_alerts  md-card{
	background-color:#5c6bc0;
}*/

.nirad_info md-card md-card-content {
    padding-top: 6px !important;
}

.dashboard_top_row md-card md-card-content {
    /*background-color:rgba(0,0,0,0.06);*/
}

.nirad_info md-card md-card-content md-list-item .md-list-item-text p {
    /*color:#fff;*/
    font-size: 12px;
}

.nirad_info md-card md-card-content md-list-item .md-list-item-text h3 {
    /*color:rgba(255,255,255,0.80);*/
    color: rgba(0, 0, 0, 0.70);
    padding-left: 0px;
    font-size: 15px;
    margin-top: 3px;
}

.nirad-card-header-txt-white {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    /* text-transform:uppercase; */
    position: relative;
}

.nirad-card-header-with-search {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 60px;
}

.nirad-card-header-with-search .card-header-rignt-content {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 16px;
}

.nirad-card-header-with-search .card-header-rignt-content .search-box {
    position: relative;
    right: unset;
    top: unset;
}

.nirad-card-header-with-search .card-header-rignt-content .on-offline-list {
    float: unset;
    position: relative;
    right: unset;
    top: unset;
}

.card-header-rignt-content{
	display: flex;
    align-items: center;
}
.card-header-rignt-content .search-box{
	position: relative;
    right: unset;
    top: unset !important;
}

.nirad_info md-card md-card-content md-list-item.md-2-line {
    min-height: 62px;
    height: 62px;
}

.nirad_info md-list-item .md-no-style,
.nirad_info md-list-item.md-no-proxy {
    position: relative;
    padding: 0 0px;
}

.nirad_info md-progress-linear.md-default-theme .md-container,
.nirad_info md-progress-linear .md-container {
    background-color: rgba(0, 0, 0, 0.09);
}

.nirad_info md-progress-linear.md-default-theme .md-bar,
.nirad_info md-progress-linear .md-bar {
    /*background-color: rgba(255,255,255,0.8);*/
}

.nirad_info md-progress-linear {
    margin-top: 9px;
}

.nirad_info md-list {
    padding: 0px 0;
}

table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
}

.dashboard_device_list md-card md-card-content,
.dashboard_alerts md-card md-card-content {
    /*height: 300px;*/
    /* overflow-y: scroll;*/
}

.dashboard_device_list .table thead tr th {
    /*color:#fff;*/
    font-size: 12px;
    text-align: left;
    font-weight: 400;
    padding: 5px;
}

.dashboard_device_list .table tbody tr td {
    /*color:rgba(255,255,255,0.8);*/
    font-size: 12px;
    text-align: left;
    font-weight: 400;
    padding: 10px 5px;
}

.dashboard_device_list .table tbody tr td.sync i,
.hotspot_device_list .table tbody tr td.sync i {
    font-size: 8px;
    color: #ffff00 !important;
    line-height: 2;
}

.dashboard_device_list .table tbody tr td.online i,
.hotspot_device_list .table tbody tr td.online i,
.active-sites-card .online {
    font-size: 8px;
    color: #00ff0a;
}

.dashboard_device_list .table tbody tr td.offline i,
.hotspot_device_list .table tbody tr td.offline i,
.active-sites-card .offline {
    font-size: 8px;
    color: #b9b9b9;
}

.dashboard_device_list .table tbody tr td.errorflag i,
.hotspot_device_list .table tbody tr td.errorflag i,
.active-sites-card .errorflag {
    font-size: 8px;
    color: #ff0000;
}

.active-sites-card .sync,
.chart-footer-legends .sync i {
    font-size: 8px;
    color: #ffff00 !important;
    line-height: 2;
}

.active-sites-card .sync,
.chart-footer-legends .site i {
    font-size: 8px;
    color: #FFFF00 !important;
    line-height: 2;
}

.alert_note {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.alert-header {
    width: 100%;
}

.alert_indication {
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: #fff;
    border-radius: 3px;
    text-align: center;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: 600;
    margin-right: 10px;
}

.bg_clr_red {
    background-color: #d60d0d;
}

.bg_clr_yellow {
    background-color: #f2b540;
}

.alert_header_text {
    /*color:#fff;*/
    font-size: 14px;
    font-weight: 400;
    float: left;
}

.alert_time {
    font-size: 10px;
    float: right;
    color: rgb(3, 155, 229);
}

.clearfix {
    width: 100%;
    clear: both;
}

.alert_content {
    padding: 5px 0 5px 28px;
}

.alert_item {
    color: rgba(0, 0, 0, 0.70);
    font-size: 12px;
    padding-left: 15px;
}

.alert_item li {
    margin-bottom: 5px;
}

.dashboard_device_list md-card .md-actions,
.dashboard_device_list md-card md-card-actions {
    margin: 0px;
}

.dashboard_device_list md-card .md-actions .md-button,
.dashboard_device_list md-card md-card-actions .md-button,
.subscribers-list md-card-title md-card-actions .md-button.viewall-btn {
    margin-top: -10px !important;
    margin-bottom: -10px !important;
    padding: 10px;
    color: #039BE5;
    font-size: 11px;
    min-height: inherit;
    line-height: inherit;
    text-transform: uppercase;
    font-weight: 600;
}

.md-subheader.nirad_subheader .md-subheader-inner {
    padding: 0px 8px !important;
}

.nirad_tabs .md-tab {
    font-size: 13px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    white-space: nowrap;
    text-transform: capitalize;
    font-weight: 500;
    padding: 5px 24px;
}

.nirad_tabs md-tabs-canvas {
    height: 36px;
}

.nirad_tabs md-pagination-wrapper {
    height: 36px;
}

md-tabs.md-default-theme .md-tab.md-active,
md-tabs .md-tab.md-active,
md-tabs.md-default-theme .md-tab.md-active md-icon,
md-tabs .md-tab.md-active md-icon,
md-tabs.md-default-theme .md-tab.md-focused,
md-tabs .md-tab.md-focused,
md-tabs.md-default-theme .md-tab.md-focused md-icon,
md-tabs .md-tab.md-focused md-icon {
    color: rgb(45, 50, 62);
}

md-tabs.md-default-theme md-ink-bar,
md-tabs md-ink-bar {
    color: #039be5;
    background: #039be5;
}

.nirad_table tr th {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.70);
    padding: 16px 8px;
    text-align: left;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    margin: 0px;
    background: #eee;
}

.nirad_table tr td {
    font-size: 12px;
    color: #969696;
    padding: 10px 8px !important;
    text-align: left;
    margin: 0px;
    border-bottom: 1px solid #eceff5;
    ;
    border-top: 0px !important;
    vertical-align: top;
    word-break: break-all;
}

.nirad_table tr td.online,
.nirad_table tr td.offline,
.nirad_table tr td.sync,
.nirad_table tr td.device_sync,
.nirad_table tr td.errorflag {
    text-align: center;
    vertical-align: middle;
}

.ip-details-cell { padding: 4px 0 !important; vertical-align: middle !important; }
.ip-details-row { display: flex; align-items: baseline; padding: 2px 0; font-size: 12px; line-height: 1.5; }
.ip-details-row + .ip-details-row { border-top: 1px solid #eee; }
.ip-details-row .ip-label { color: #888; font-weight: 600; min-width: 65px; flex-shrink: 0; }
.ip-details-row .ip-value { white-space: nowrap; }
.ip-details-row .ip-value.ip-value-wrap { white-space: normal; word-break: break-all; max-width: 150px; }

.tabel-overflow .nirad_table tr td.online i {
    color: #00ff0a;
    font-size: 8px;
    line-height: 2;
}

.tabel-overflow .nirad_table tr td.device_sync i {
    color: rgb(252,233, 99);
    font-size: 8px;
    line-height: 2;
}

.nirad_table tr td.status i {
    font-size: 9px;
    line-height: 2;
    text-align: center;
    width: 100%;
}

.nirad_table tr td.online i {
    color: #4caf50;
}


.nirad_table tr td.offline i {
    color: #CFCFCF;
}

.nirad_table tr td.errorflag i {
    color: #FF0011;
}

/* nirad-table directive: multi-row group separator */
.nirad-table-group-separator + .nirad-table-group-separator > tr:first-child > td {
    border-top: 1px solid #cfd8dc !important;
}

/* ===== nirad-table directive ===== */

/* Card overflow */
.nirad-table-card {
    overflow: hidden;
}
nirad-table md-card-content {
    position: relative;
}

/* Fake scrollbar — absolutely positioned below thead */
.nirad-table-fake-scrollbar {
    position: absolute;
    z-index: 5;
    height: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #e8e8e8;
}
.nirad-table-fake-scrollbar::-webkit-scrollbar {
    height: 6px;
}
.nirad-table-fake-scrollbar::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 3px;
}
.nirad-table-fake-scrollbar::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 3px;
}
.nirad-table-fake-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #777;
}
.nirad-table-fake-scrollbar-inner {
    height: 1px;
}

/* Single scroll container: hidden native scrollbar, no vertical scroll */
nirad-table .nirad-table-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
nirad-table .nirad-table-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Table sizing */
nirad-table table.nirad_table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Override word-break and whitespace */
nirad-table .nirad_table tr td,
nirad-table .nirad_table tr th {
    word-break: normal;
    white-space: nowrap;
    border-left: none !important;
    border-right: none !important;
}

/* Sticky thead stays at top of scroll container */
nirad-table .nirad_table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Sticky columns: left-pinned */
nirad-table .nirad_table .sticky-left {
    position: sticky;
    z-index: 2;
    background: #fff;
}
nirad-table .nirad_table thead .sticky-left {
    z-index: 5;
    background: var(--primary-dark);
}

/* Sticky columns: right-pinned */
nirad-table .nirad_table .sticky-right {
    position: sticky;
    z-index: 2;
    background: #fff;
}
nirad-table .nirad_table thead .sticky-right {
    z-index: 5;
    background: var(--primary-dark);
}

/* Border + shadow on boundary sticky columns using pseudo-elements */
nirad-table .nirad_table .sticky-edge-left {
    border-right: 1px solid #ccc !important;
}
nirad-table .nirad_table .sticky-edge-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
}
nirad-table .nirad_table .sticky-edge-right {
    border-left: 1px solid #ccc !important;
}
nirad-table .nirad_table .sticky-edge-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
}

/* Hover state for sticky cells */
nirad-table .nirad_table tbody tr:hover .sticky-left,
nirad-table .nirad_table tbody tr:hover .sticky-right {
    background: #f5f5f5;
}

/* nirad-table directive: status dot in span wrapper */
.nirad_table td span.online i.material-icons { color: #4caf50; font-size: 10px; }
.nirad_table td span.offline i.material-icons { color: #CFCFCF; font-size: 10px; }
.nirad_table td span.device_sync i.material-icons { color: #ff9800; font-size: 10px; }
.nirad_table td span.errorflag i.material-icons { color: #FF0011; font-size: 10px; }

/* nirad-table directive: checkbox */
.nirad-table-checkbox { min-width: 18px; width: 18px; }

.nirad_table tr td.active i {
    color: #4caf50;
    font-size: 13px;
    line-height: 2;
    display: none;
}

.nirad_table tr td.active i.check {
    display: block;
}

.nirad_table tr td.inactive i.lens {
    display: block;
}

.nirad_table tr td.inactive i {
    color: #CFCFCF;
    font-size: 13px;
    line-height: 2;
    display: none;
}

.nirad_table tr td.padding-none,
.padding-none {
    padding: 0px !important;
}

.pading-right-10 {
    padding-right: 10px;
}

.padding-right-15 {
    padding-right: 15px;
}

.pading-bottom-20 {
    padding-bottom: 20px;
}

.padding-10 {
    padding: 10px;
}

.margin-none {
    margin: 0px !important;
}

.margin-top-none {
    margin-top: 0px !important;
}

.margin-8 {
    margin: 8px;
}

.margin_top_20 {
    margin-top: 20px !important;
}

.margin_top_30 {
    margin-top: 30px !important;
}

.margin_top_40 {
    margin-top: 40px !important;
}

.btn-edit .material-icons,
.btn-close .material-icons {
    font-size: 17px !important;
}

.btn-edit,
.btn-close {
    margin: -10px !important;
}

.padding-right-15 {
    padding-right: 15px;
}

.pading-bottom-20 {
    padding-bottom: 20px;
}

.padding-10 {
    padding: 10px;
}

.margin-none {
    margin: 0px !important;
}

.margin-top-none {
    margin-top: 0px !important;
}

.margin-8 {
    margin: 8px;
}

.margin_top_20 {
    margin-top: 20px !important;
}

.margin_top_30 {
    margin-top: 30px !important;
}

.margin_top_40 {
    margin-top: 40px !important;
}

.btn-edit .material-icons,
.btn-close .material-icons {
    font-size: 17px !important;
}

.btn-edit,
.btn-close {
    margin: -10px !important;
}

.padding-container {
    padding: 8px;
    position: relative;
}

.header_banner_buttons {
    /*float: right;*/
    margin-right: 75px;
}

.device_info_banner .header_banner_buttons {
    /*margin-top:26px;*/
}

.header_banner_buttons .bredcrumbs,
.header_banner_buttons .refresh-btn {
    background: rgba(0, 0, 0, 0.12);
    color: #FFFFFF;
    padding: 12.5px 10px 12.5px 10px;
    line-height: 20px;
    font-size: 14px;
    float: left;
    margin: 0px;
    height: 45px;
    box-sizing: border-box;
}

.header_banner_buttons .bredcrumbs li {
    list-style: none;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header_banner_buttons .bredcrumbs li .material-icons,
.header_banner_buttons .refresh-btn .material-icons {
    margin: auto;
    background-repeat: no-repeat no-repeat;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    color: #fff;
}

.header_banner_buttons .bredcrumbs li .material-icons {
    font-size: 18px;
    line-height: 1.1;
    margin-right: 3px;
    min-width: auto;
    width: auto;
}

.header_banner_buttons .bredcrumbs li.arrow i {
    padding: 4px 5px;
}

.header_banner_buttons .bredcrumbs li {
    margin-right: 5px;
}

.header_banner_buttons .bredcrumbs li:last-child {}

.header_banner_buttons .bredcrumbs li.arrow .material-icons {
    font-size: 21px;
    opacity: 0.75;
}

.header_banner_buttons .refresh-btn .material-icons {
    font-size: 22px;
}

.header_banner_buttons .refresh-btn {
    margin-left: 2px;
    cursor: pointer;
}

.header_banner_buttons .help-btn {
    background: rgba(0, 0, 0, 0.12);
    color: #FFFFFF;
    padding: 12.5px 10px 12.5px 10px;
    line-height: 20px;
    font-size: 13px;
    float: left;
    margin: 0px 3px;
    height: 45px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 600;
}

.header_banner_buttons .help-btn .material-icons {
    margin: auto;
    background-repeat: no-repeat no-repeat;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    color: #fff;
    font-size: 18px;
    margin-right: 5px;
}

.help-link {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    text-transform: uppercase;
    cursor: pointer;
    margin-right: 10px;
    line-height: 25px;
}

.filter-bottom-sheet .help-link {
    float: right;
    margin-top: 7px;
    margin-right: 20px;
    color: var(--primary);
}

.help-link:hover {
    text-decoration: none;
}

.help-link i.material-icons {
    margin-right: 3px;
    font-size: 19px;
    line-height: 24px;
}

.main_search md-input-container.md-input-theme .md-input {
    color: rgba(0, 0, 0, 0.87);
    border-color: rgba(0, 0, 0, 0.12);
    height: 64px;
    margin-top: 25px;
}

.md-button.btn-add {
    color: rgb(255, 255, 255);
    top: 4px !important;
    bottom: auto !important;
    right: 8px !important;
    position: absolute !important;
    background: #0579b2;
    z-index: 3;
}

.md-button.btn-add-traffic {
    color: rgb(255, 255, 255);
    top: 64px !important;
    bottom: auto !important;
    right: 39px !important;
    position: absolute !important;
    background: #0579b2;
    z-index: 3;
}

.md-button.btn-add img {
    width: 23px;
    margin-top: 3px;
}

.md-button.md-fab:hover,
.md-button.md-fab.btn-add.md-focused,
.md-button.md-fab.md-focused {
    background-color: #039be5 !important;
    color: rgb(255, 255, 255);
}

.md-button.md-fab.btn-add:hover {
    background-color: #048fd3 !important;
}

.md-button.btn-add-firewall {
    float: right;
    margin-top: -29px !important;
    margin-bottom: -30px !important;
    margin-right: 10px !important;
    background: #039be5;
}

.md-button.md-fab.btn-add md-icon {
    line-height: 0.9;
}

.enterprise_details md-card-header {
    border-bottom: 1px solid #ddd;
}

.enterprise_details md-card-header md-card-header-text {
    font-weight: 600;
}

.enterprise_details ul {
    padding-left: 0px;
}

.enterprise_details ul li {
    list-style: none;
}

.enterprise_details ul li span {
    font-size: 12px;
    color: #757575;
}

.enterprise_details ul li h3 {
    font-size: 15px;
    color: #039be5;
    font-weight: 400;
    margin-top: 8px;
    word-break: break-all;
}

md-card-content .flex {
    /*margin: 0 10px;*/
}

.hotspot-config md-input-container {
    /*margin: 0 10px;*/
}

.nirad-card-header md-card-actions {
    margin: 0px;
    padding: 0px;
}

.nirad-card-header md-card-actions .md-button {
    margin: -3px 0px !important;
    padding: 5px 10px;
    line-height: inherit !important;
    min-height: inherit !important;
    color: #039be5;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.nirad-table-2 tr th,
.nirad-table-2 tr td {
    text-align: left;
    font-size: 14px;
}

.nirad-table-2.table>thead>tr>th,
.nirad-table-2.table>tbody>tr>th {
    color: #333333;
    font-weight: 400;
    padding: 9px;
    /* min-width: 100px; */
    vertical-align: top;
    border-top: 0px;
    width:100px
}

.nirad-table-2.table>thead>tr>td,
.nirad-table-2.table>tbody>tr>td {
    color: #969696;
    font-size: 12px;
    font-weight: 400;
    padding: 9px;
    vertical-align: top;
    /*word-break: break-all;*/
    word-wrap: break-word;
    border-top: 0px;
}

.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
    border-bottom-width: 2px;
}

.table-bordered>thead>tr>th {
    border: 1px solid #ddd;
    vertical-align: top;
}

.table-bordered>tbody>tr>th {
    border: 1px solid #ddd;
    vertical-align: top;
}

.table-bordered>tbody>tr>td {
    border: 1px solid #ddd;
    vertical-align: top;
}

.tbl-border-outline {
    border: 1px solid #ddd;
}

md-progress-linear.yellow_bar .md-bar {
    background-color: #ff9800;
}

md-progress-linear.blue_bar .md-bar {
    background-color: #039be5;
}

md-progress-linear.red_bar .md-bar {
    background-color: #f44336;
}

md-progress-linear.red_bar .md-container,
md-progress-linear.yellow_bar .md-container,
md-progress-linear.blue_bar .md-container {
    background-color: #ebeaea;
}

.bar_value {
    color: #039be5;
    font-size: 12px;
    font-weight: 600;
}

.db-bar-value {
    position: absolute;
    right: 5px;
    top: 5px;
    text-align: right;
}

.nirad_header_plane {
    font-size: 18px;
    font-weight: 600;
    padding-left: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
}

.nirad_header_plane_right {
    font-size: 16px;
    font-weight: 400;
    padding-right: 10px;
    margin-top: 33px;
    margin-bottom: 7px;
}

.table-hover.no-pointer tbody tr:hover td {
    cursor: default;
}

.table-hover tbody tr:hover td {
    background-color: rgba(3, 155, 229, 0.15);
    cursor: pointer;
}

.table-hover tbody tr:hover td.hover-none {
    background-color: #fff;
    cursor: auto;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.firmware-update-info {
    float: left;
}

.firmware-update-info h3 {
    font-size: 14px;
    margin-bottom: 0px;
    color: #333;
    margin: 0;
}

.firmware-update-info span.noupdate-available {
    font-size: 13px;
    color: #999;
}

.firmware-update-info span.update-available {
    font-size: 13px;
    color: #43a047;
}

.firmware-update-info h3 span {
    color: #039be5;
}

.firmware-check-update {
    float: left;
    margin-left: 40px;
}

.devider {
    width: 100%;
    height: 1px;
    background: #ddd;
    margin: 30px 0;
}

.file_input_div {
    width: 100%;
}

.file_input {
    float: left;
    padding: 10px 15px;
    background: #039be5;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

#file_input_text_div {
    /* width: 200px;
  height:40px;
  margin-top: -8px;
  margin-left: 5px;*/
    float: left;
}

#file_input_text_div .file_input_text {
    padding: 10px;
    font-size: 14px;
    background: #ebe9e9;
    border: 0px;
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.upload_btn {
    float: left;
    /*margin-left:30px;*/
}

.none {
    display: none;
}

.firmware-manual-update h3 {
    font-size: 14px;
    font-weight: 400;
}

.btn-green {
    color: #4caf50 !important;
    text-transform: none !important;
}

.btn-green md-icon {
    color: #4caf50 !important;
}

.btn-green:hover,
.btn-green:focus {
    background-color: rgba(76, 175, 80, 0.10) !important;
}

.btn-red {
    color: #f44336 !important;
    text-transform: none !important;
}

.btn-red md-icon {
    color: #f44336 !important;
}

.btn-red:hover,
.btn-red:focus {
    background-color: rgba(244, 67, 54, 0.06) !important;
}


/*button.md-primary:hover, button.md-primary:focus { background-color:rgba(3,169,244,0.06) !important; }*/

.import-export-config .btn-red,
.import-export-config .btn-green {
    margin-bottom: 30px !important;
}

.reboot-system h3 {
    font-size: 16px;
    color: #444;
    font-weight: 400;
}

.reboot-link {
    color: #039be5;
    font-size: 14px;
}

.low,
.medium,
.high {
    padding: 2px 5px;
    border-radius: 3px;
}

.low {
    background: #629bee;
    color: #fff;
}

.medium {
    background: #f2b540;
    color: #fff;
}

.high {
    background: #f24535;
    color: #fff;
}

.device-log-btns md-checkbox {
    background: #fff;
    padding: 7px 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    margin-right: 15px !important;
}

.device-log-btns md-checkbox .md-container {
    left: 10px;
}

.interfaces_titel {
    background: #f7f7f7;
    color: #333;
    float: left;
    height: 48px;
    line-height: 48px;
    padding: 0 23px;
    margin-left: -22px;
    margin-right: 10px;
    font-size: 12px;
    display: none;
}

.extra-row th {
    padding: 0px 10px !important;
}

.breakdown {
    padding-bottom: 8px !important;
    text-align: center !important;
    border-bottom: 0px !important;
}

.client {
    text-align: center !important;
    color: #f2b540 !important;
    font-weight: 500;
}

.server {
    text-align: center !important;
    color: #26a69a !important;
    font-weight: 500;
}

.table-real-time thead tr th.client,
.table-real-time thead tr th.server {
    border-bottom-width: 2px !important;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

.table-real-time thead tr th {
    padding: 16px 8px 10px;
    border-bottom-width: 2px;
}

.realtime-tab-content {}

.interface_header_plane {
    font-size: 18px;
    font-weight: 600;
    padding-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.interface_header_plane span {
    color: #039be5;
}

.clr-blue {
    color: #039be5 !important;
}

md-tabs {
    border-radius: 0px !important
}

md-sidenav {
    height: 100%;
    overflow: hidden;
}

.side-menu,
.side-menu ul {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.backtodevices .md-button {
    color: #fff !important;
    background: rgba(3, 155, 229, 0.1);
}

.backtodevices .md-button:hover {
    color: #fff !important;
    background: rgba(3, 155, 229, 1) !important;
}

.backtodevices .md-button .inset.backicon {
    color: #039be5;
    font-size: 19px;
}

.backtodevices .md-button:hover .inset.backicon {
    color: #fff;
}

.side-menu .md-button.active,
.side-menu .md-button:hover,
.side-menu a.md-button.active,
.side-menu a.md-button:hover {
    color: #fff;
    background: #039be5;
}


.side-menu .md-button:disabled:hover,
.side-menu a.md-button:disabled:hover {
    color: pink;
    background: navy;
}

i.section-pseudo-element--blocked{
    margin: 0 10px;
    color: red;
}

i.section-pseudo-element--blocked:before {
    content: '';
    position: absolute;
    top: 35%;
    left: 10%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: white;
    z-index: -1;
}

.side-menu .menu-toggle-list a.md-button {
    display: block;
    padding: 0 16px 0 32px;
    text-transform: none;
    text-rendering: optimizeLegibility;
    font-weight: 500;
}

.side-menu .menu-toggle-list .md-button {
    display: block;
    padding: 0 16px 0 32px;
    text-transform: none;
}

.side-menu>li {
    border-top: 1px solid rgba(0, 0, 0, 0);
}

.md-button-toggle .md-toggle-icon.toggled {
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
}

.side-menu .md-button-toggle .md-toggle-icon {
    background-size: 100% auto;
    display: inline-block;
    margin: auto 0 auto auto;
    width: 15px;
    line-height: 16px;
    font-size: 15px;
    transition: transform .3s ease-in-out;
    -webkit-transition: -webkit-transform .3s ease-in-out;
}

.menu-toggle-list.ng-hide {
    max-height: 0;
}

.side-menu a.md-button {
    padding: 0 23px;
    position: relative;
}

.side-menu .parent-list-item menu-link {
    display: block;
}

.side-menu .subheader {
    padding: 10px 24px 5px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
}

.side-menu .md-button {
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
    max-height: 48px;
    overflow: hidden;
    /*padding: 0 21px;*/
    padding: 0 10px 0 21px;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    width: 100%;
    margin: 0px !important;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.7);
}

.menu-toggle-list {
    background: #282c37;
    /*max-height: 300px;*/
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    -webkit-transition-property: max-height;
    -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    -moz-transition-property: max-height;
    transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    transition-property: max-height;
}

.side-menu .md-button span.menu-text {
    font-size: 13px;
    padding: 0 10px 0 0 !important;
    line-height: 48px;
    margin-left: 25px;
}

.toggle-icon {
    position: absolute;
    right: 30px;
    top: 18px;
}

.side-menu .md-button span.inset {
    padding: 0px;
}

.side-menu .md-button span.inset .material-icons {
    line-height: 45px !important;
    font-size: 18px;
    width: auto;
    height: auto;
    position: absolute;
    top: 0px;
}

.menu-toggle-list .md-button span.menu-text {
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
}

md-content.popup-window {
    background-color: rgb(255, 255, 255) !important;
}

md-dialog.md-default-theme,
md-dialog {
    border-radius: 2px;
}

.modal-header {
    width: 100%;
    padding: 15px;
    border-bottom: 2px solid #ddd;
}

.modal-header h3 {
    margin: 0px;
    font-weight: 400;
    font-size: 18px;
}

md-dialog md-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

md-dialog md-tab-content md-content.overflow-hidden {
    overflow: inherit !important;
}

md-dialog {
    overflow: hidden !important;
    width: 40%;
}

md-dialog md-input-container .md-errors-spacer {
    min-height: 20px;
}

.create-admin-form {
    background: #f6f6f6;
    padding: 10px;
}

.creat-admin-header {
    font-size: 16px;
    font-weight: 500;
}

.radio-button-inline {
    margin-top: 18px;
    margin-bottom: 18px;
}

.radio-button-inline md-radio-button {
    float: left;
    margin-right: 45px;
}

md-radio-group.radio-button-inline md-radio-button:not(:first-child) {
    margin-top: 0px;
}

.table.device-log tr td {
    white-space: pre-wrap;
}

.md-toolbar-tools .md-button:focus {
    background-color: #fff !important;
}

.nirad_header md-toolbar {
    overflow: hidden;
}

.user-details {
    background: #039be5;
    text-align: center;
    padding: 10px;
    margin-top: -10px;
    color: #fff;
}

.user-icon-iner i {
    font-size: 45px;
    margin-top: 10px;
}

.user-details .user-name {
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
    display: block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-details .user-email {
    font-size: 12px;
    padding-top: 5px;
    display: block;
}

.user-menu {
    padding: 0px !important;
}

.user-menu md-menu-item {
    height: auto !important;
}

.user-menu md-menu-item .md-button {
    margin: 0px !important;
    font-size: 13px;
    padding: 10px 20px !important;
    height: 45px !important;
    line-height: 26px !important;
}

.user-menu md-menu-item .md-button span {
    margin-left: 30px;
}

.user-menu md-menu-item .md-button i {
    font-size: 21px;
    color: #555;
    margin-right: 10px;
    position: absolute;
    top: 12px;
    left: 21px;
}

.user-menu md-menu-item .md-button i.logout-icon {
    font-size: 17px;
    padding-left: 3px;
    padding-top: 3px;
}

.interface-form md-input-container {
    margin: 0px;
}

.interface-form md-input-container .md-errors-spacer {
    min-height: 0px;
}

.wifi-field {
    /*background:#f9f9f9;
	margin-top: 30px;*/
}

.wifi-field-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: -20px;
    width: 100%;
    margin-left: 15px;
    margin-top: 30px;
}

.create-group-btn {
    margin-left: 10px;
    color: #039be5;
    margin-bottom: 10px;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
}

.md-button.btn-add-interface {
    color: rgb(255, 255, 255);
    top: 25px !important;
    bottom: auto !important;
    right: 39px !important;
    position: absolute !important;
    background: #039be5;
}

.interface-scroll {
    max-height: 90px;
}

.interface-list {
    padding-left: 21px;
    margin: -5px 0;
}

.interface-list li {
    padding: 3px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.interface-scroll .ngsb-wrap .ngsb-scrollbar .ngsb-thumb-pos .ngsb-thumb {
    background: rgba(3, 155, 229, 0.5);
}

.interface-scroll .ngsb-wrap .ngsb-scrollbar .ngsb-track {
    background: none !important;
}

.interface-scroll .ngsb-wrap .ngsb-scrollbar .ngsb-thumb-pos:hover .ngsb-thumb {
    background: rgba(3, 155, 229, 0.8);
    filter: "alpha(opacity=50)";
    -ms-filter: "alpha(opacity=50)";
    /* old ie */
}

.interface-scroll .ngsb-wrap .ngsb-scrollbar .ngsb-thumb-pos:active {
    background: rgba(3, 155, 229, 1);
    filter: "alpha(opacity=60)";
    -ms-filter: "alpha(opacity=60)";
    /* old ie */
}

.interface-contaier {
    border: 1px solid #ddd;
}

.interface-container-header {
    border-bottom: 1px solid #ddd;
    padding: 10px;
    font-size: 13px;
    text-transform: uppercase;
}

.interface-contaier-body {
    padding: 10px;
    height: 150px;
    overflow-y: scroll;
}

.interface-contaier-body md-checkbox .md-label {
    font-size: 12px;
    margin-left: 23px;
    color: #757575;
}

.interface-contaier-body md-checkbox {
    margin-bottom: 10px;
}

.interface-contaier-body md-checkbox .md-container {
    width: 15px;
    height: 15px;
}

.interface-contaier-body md-checkbox .md-icon {
    width: 15px;
    height: 15px;
    border-width: 1px;
    top: -3px;
}

.interface-contaier-body md-checkbox.md-checked .md-icon::after {
    left: 4.67px;
    top: 2.22px;
    width: 4.67px;
    height: 9.33px;
}

.interface-contaier-body md-checkbox.md-checked .md-icon {
    background-color: rgba(255, 64, 129, 0.87);
}

.swap-icon {
    text-align: center;
}

.swap-icon i {
    color: #efefef;
    margin-top: 80px;
    font-size: 61px;
}


/****hideshow -checkbox*****/

.interfaces-group md-checkbox {
    display: none;
}

.interfaces-group md-checkbox.md-checked {
    display: block;
}

.available-interfaces md-checkbox {
    display: block;
}

.available-interfaces md-checkbox.md-checked {
    display: none;
}


/*****Small Checkbox****/

.sm-checkbox-group md-checkbox .md-label {
    font-size: 13px;
    margin-left: 23px;
    color: #757575;
}

.sm-checkbox-group md-checkbox {
    margin-bottom: 10px;
}

.sm-checkbox-group md-checkbox .md-container {
    width: 15px;
    height: 15px;
}

.sm-checkbox-group md-checkbox .md-icon {
    width: 15px;
    height: 15px;
    border-width: 1px;
    top: -3px;
}

.sm-checkbox-group md-checkbox.md-checked .md-icon::after {
    left: 4.67px;
    top: 1px;
    width: 4.67px;
    height: 9.33px;
}

.padding-left-10 {
    padding-left: 10px;
}

.gray-bg {
    background: #f3f3f3;
    padding: 10px;
}

.input-container-link {
    position: absolute;
    font-size: 12px;
    right: 8px;
    top: 11px;
}

a.input-container-link {
    color: rgb(255, 64, 129);
}

span.input-container-link {
    color: #999;
}

.model-sub-title {
    margin-bottom: 10px;
    line-height: 1.5;
}

.model-sub-title small {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    padding-top: 5px;
}

.input-container-hint {
    color: #c2c2c2;
    font-size: 10px;
}

.table-features {
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.table-features tr td {
    border-bottom: 1px solid #ddd;
    padding: 0px 10px;
}

.table-features tr td md-input-container {
    width: 100%;
}

.table-features tr th {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.70);
    padding: 16px 8px;
    text-align: left;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    margin: 0px;
}

.dialog-lg {
    width: 80%;
}

.dialog-xl {
    width: 90%;
    max-width: 90% !important;
}

.dialog-mid,
.dialog-md {
    width: 60%;
}

.dialog-sm {
    width: 50%;
}

.dialog-sm-40 {
    width: 40%;
}

.dialog-sm-30 {
    width: 30%;
}

.dialog-xs {
    width: 25%;
}

.dialog-tab-holder {
    background: #f7f7f7;
    margin: 0 10px 0 10px;
}

.sub-table-container {
    -webkit-box-shadow: inset 0px 5px 8px -6px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: inset 0px 5px 8px -6px rgba(0, 0, 0, 0.29);
    box-shadow: inset 0px 5px 8px -6px rgba(0, 0, 0, 0.29);
}

.sub-table {
    padding: 20px !important;
    position: relative;
}

.bg-gray {
    background: #f6f6f6;
}

.sub-table .table {
    border: 1px solid #ddd;
    margin-top: 15px;
}

.rotate-90 {
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.btn-collapse {
    background: #efefef;
    border: none;
    padding: 14px 10px;
}

.td-padding-none {
    padding: 0px !important;
}

.btn-collapse:hover,
.btn-collapse.open {
    background: rgb(255, 64, 129);
    color: #fff;
}

.btn-collapse:hover .material-icons,
.btn-collapse.open .material-icons {
    color: #fff;
}

.sub-table .md-fab.btn-add-logical-interface {
    color: #fff;
    top: 9px;
    bottom: auto;
    right: 39px;
    position: absolute;
    width: 40px;
    height: 40px;
}

.btn-add-tab {
    padding: 5px;
    position: absolute;
    right: 16px;
    top: 28px;
    border: 0px;
    background: rgb(255, 64, 129);
}

.btn-add-tab .material-icons {
    color: #fff;
}

.btn-blue-sm {
    padding: 5px 10px;
    background: #039be5;
    font-size: 11px;
    border-radius: 2px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
}

.logial_interfacesHeader {
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    font-weight: 600;
}

.logial_interfacesHeader a {
    margin-right: 10px;
    color: #039be5;
    cursor: pointer;
}

.logial_interfacesHeader span {
    color: #039be5;
    margin-left: 5px;
}

td.td-menu .md-button.md-icon-button {
    min-height: 25px;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 25px;
    margin: 0px !important;
    padding: 0px;
}

.nirad_table tr td.td-menu {
    padding: 0px 8px;
    vertical-align: middle;
}

.small-menu md-menu-item .md-button {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 15px;
    min-height: auto;
    height: 30px;
    line-height: 20px;
    margin: 0px !important;
    display: block;
}

.small-menu md-menu-item {
    height: 30px;
    line-height: 30px;
    min-height: 30px;
}

.text-center {
    text-align: center !important;
}

.btn-link {
    color: #039be5;
    cursor: pointer;
}

.host-name,
.profile-name {
    /* vertical-align: middle !important;*/
    /*text-align: center !important;*/
    /* border-right: 1px solid #ddd;*/
}

.child-table tr td {
    padding: 0px 5px 2px 0 !important;
    border: 0px;
}

.child-table tr th {
    padding: 0px 5px 2px 0;
    background: transparent;
    border: 0;
    font-size: 11px;
}

.child-table.has-table-head tr th,
.child-table.has-table-head tr td {
    padding: 0px 10px 2px 0 !important;
}

.profile-switch-list {
    width: 100%;
    display: block;
    overflow: hidden;
}

.profile-switch-list .list-name {
    float: left;
    padding: 15px 0;
    font-size: 14px;
}

.profile-switch {
    float: right;
    margin: 10px;
}

.profile-switch-container {
    /*border-bottom:1px solid #ddd;*/
    width: 100%;
    display: block;
    overflow: hidden;
    margin-bottom: 15px;
}

.text-right {
    text-align: right !important;
}

.profile-expand-box {
    background: #eff2f6;
    border-radius: 6px;
    padding: 5px 10px;
    position: relative;
}

.profile-expand-box:before {
    content: '';
    position: absolute;
    top: -13px;
    left: 7px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #eff2f6;
}

.profile-expand-box .box-row {
    border-top: 1px solid #ddd;
}

.profile-expand-box .box-row:first-child {
    border-top: 0px;
}

.profile-expand-box .title {
    width: 70px;
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.profile-content md-select .md-select-value.md-select-placeholder {
    color: #999;
    font-size: 13px;
    font-weight: normal;
    pointer-events: none;
    padding-bottom: 7px !important;
    margin-top: -9px;
}

.profile-content md-select {
    font-size: 13px;
}

.profile-content md-select .md-select-value {
    min-height: 23px;
}

.profile-content .table tr td {
    font-size: 14px;
}

.profile-content .table td md-input-container {
    margin: 13px 0 5px 0;
}

md-input-container label:not(.md-no-float):not(.md-container-ignore) {
    text-align: left;
}

.layout-column>md-input-container.flex {
    min-height: auto;
}

.table-border-box {
    border: 1px solid #ddd;
}

.wlan-table tr th {
    /*width:30%;*/
}

.wlan-table.nirad-table-2 tr td {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;
    white-space: nowrap;
}

.table-noborde {
    margin-bottom: 30px;
}

.table-noborder tr th,
.table-noborder tr td {
    font-size: 14px;
    text-align: left
}

md-input-container label:not(.md-container-ignore).md-required:after {
    display: none;
}

.inner-table tr th,
.inner-table tr td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.top-right-dialog-btn {
    /*position: absolute !important;
    top: 2px;
    right: 9px;*/
}

.edit-interface-container .nirad-table-2 tr td:last-child {
    width: 55%;
}

.capitalize {
    text-transform: capitalize;
}

.add-logical-interfaces .nirad-table-2 tr th {
    width: 30% !important;
}

.overflow-ellipses {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dialog-lg1 {
    overflow: hidden !important;
    width: 40%;
}

.dialog-lg2 {
    overflow: hidden !important;
    width: 50%;
}
.min-ht-60 {
    min-height: 60px;
}
.bulk-delete-msg {
    color: cornflowerblue;
    font-size: 13px;
    margin-top: 2px;
}

.nirad_header h3 {
    padding-left: 16px;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

md-sidenav {
    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px;
}

md-sidenav.md-sidenav-right.filters-panel{
	 position: fixed;
	 width: 252px !important;
    max-width: 260px !important;
}

.header-banner-holder {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 64px;
    padding-left: 250px;
    z-index: 8;
    box-sizing: border-box;
}

.super-user-page .header-banner-holder {
    padding-left: 0px !important;
}

md-dialog md-toolbar.dialog-md-toolbar {
    padding: 0 10px;
    /*border-bottom: 2px solid #ddd;*/
    height: 40px;
    min-height: auto;
    background: var(--primary);
    color: #fff !important;
}

md-dialog md-toolbar.dialog-md-toolbar .md-toolbar-tools {
    height: 40px;
    min-height: auto;
}

md-dialog md-toolbar.dialog-md-toolbar h2 {
    font-size: 16px;
}

md-dialog>form {
    margin-bottom: 0px;
}

md-dialog md-dialog-actions .md-button {
    margin-left: 10px !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    background: #fff;
    height: 30px;
    min-height: auto;
    line-height: 30px;
    padding: 0 15px;
}

md-dialog md-dialog-actions .md-button.md-primary {
    background: var(--primary);
    color: #fff !important;
}

.md-button.md-raised.md-primary:not([disabled]).md-focused,
.md-button.md-raised.md-primary:not([disabled]):hover {
    background: var(--primary);
    color: #fff;
}

.top-right-dialog-btn,
md-dialog md-toolbar .md-button.md-primary {
    background: var(--primary);
    color: #fff;
}

.md-toolbar-tools .md-button:focus {
    background: rgba(0, 0, 0, 0.0) !important;
}

md-dialog md-dialog-content {
    padding-bottom: 0 !important;
}

md-dialog md-dialog-content form {
    margin-bottom: 0px;
}

md-dialog md-dialog-actions .md-button.md-button[disabled],
md-dialog md-dialog-actions .md-button.md-button[disabled]:hover,
md-dialog md-dialog-actions .md-button.md-button.md-primary[disabled],
md-dialog md-dialog-actions .md-button.md-button.md-primary[disabled]:hover {
    background: #c2c2c2 !important;
    cursor: not-allowed !important;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.38);
}

/* Same pill sizing as md-dialog-actions buttons, for action buttons placed inline in dialog content (e.g. Add/Edit Profile Entry rows) */
.dialog-inline-btn {
    height: 30px !important;
    line-height: 30px !important;
    min-height: auto !important;
    padding: 0 15px !important;
    margin: 0 !important;
}

.dialog-inline-btn-secondary {
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}


/***********************************************************New Changes 12-07-2017*/

.firmware-table md-checkbox {
    margin-bottom: 0px;
}

.firmware-btns .md-button {
    float: right;
    margin-left: 20px !important;
}

.date-picker label {
    right: auto !important;
}

.date-picker .md-button {
    top: -13px !important;
}

.date-picker .md-datepicker-input-container {
    margin-left: 0px !important;
}

.nirad-date-picker .md-datepicker-input-container {
    width: 100%;
    padding-left: 25px;
    box-sizing: border-box;
    margin-left: 0px !important;
}

.nirad-date-picker .md-datepicker-button {
    position: absolute;
    top: -13px !important;
    left: -2px;
    width: auto !important;
    padding-left: 0px !important;
    z-index: 4;
}

.nirad-date-picker .md-datepicker-input-container .md-datepicker-triangle-button {
    right: 10px;
}

.nirad-date-picker .md-datepicker-button md-icon {
    margin: 0px
}

.nirad-date-picker label {
    left: 25px !important;
}

.time-picker {
    position: relative;
}

.time-picker mdp-time-picker md-input-container {
    width: 100%;
}

.time-picker mdp-time-picker md-input-container input {
    padding-right: 32px;
}

.time-picker mdp-time-picker .md-icon-button.md-button {
    position: absolute;
    right: 0;
    cursor: pointer;
    z-index: 1;
}

.time-picker i {
    position: absolute;
    top: 13px;
    right: 5px;
    color: #737373;
    font-size: 24px;
    cursor: pointer;
}

.time-picker.filter-time i{
	top: 20px;
    right: 1px;
    font-size: 17px;
}

md-toolbar.md-hue-1:not(.md-menu-toolbar) {
    background-color: #039be5 !important;
    color: #fff !important;
}

.version-list {
    margin-top: 30px;
}

.card-footer .btn {
    margin-left: 5px !important;
    min-height: auto !important;
    height: auto !important;
    line-height: normal !important;
    font-size: 13px;
    padding: 5px 15px !important;
    border-radius: 2px;
    font-weight: 600;
}

.btn-schedule {
    /*position:absolute !important;
	left:0;
	bottom: 15px;*/
}

.card-footer {
    /*background: #f9f9f9;*/
    margin: 0px;
    padding: 5px 10px;
    /*border: 1px solid #ddd;*/
    width: 100%;
    position: relative;
}

.card-footer md-input-container {
    margin-bottom: 0px;
}

.card-footer-container {
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0;
    right: 0;
    padding-left: 242px;
    padding-right: 36px;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
    background: #f9f9f9;
}

.footer-space {
    width: 100%;
    height: 60px;
}

.time-pick md-hours-minutes md-input-container {
    width: 38% !important;
    margin: 0px;
}

.time-pick .time-colon {
    width: 10px;
    position: inherit;
}

.label {
    font-size: 12px;
    color: rgb(3, 169, 244);
}

.totalDeviceInfo small {
    color: rgb(3, 169, 244);
    cursor: pointer;
}

.tr-checkbox md-checkbox .md-container {
    width: 18px;
    height: 18px;
}

.tr-checkbox md-checkbox .md-icon {
    width: 18px;
    height: 18px;
    border-width: 1px;
}

.tr-checkbox md-checkbox:not(.md-checked) .md-icon {
    border-color: rgba(0, 0, 0, 0.34);
}

.tr-checkbox md-checkbox {
    margin-bottom: 0px;
}

.tr-checkbox tr td:first-child,
.tr-checkbox tr th:first-child {
    max-width: 30px;
}

.cust-table tr td:first-child{
    padding-left: 0 !important;
}

.cust-tr td:first-child{
    padding-left: 0 !important;
}

.tr-checkbox md-checkbox.md-default-theme.md-checked .md-icon,
.tr-checkbox md-checkbox.md-checked .md-icon {
    background-color: rgb(3, 169, 244);
}

.checkbox-label md-checkbox {
    margin-bottom: 0px;
}

.checkbox-label md-checkbox .md-container {
    display: none;
}

.checkbox-label md-checkbox .md-label {
    margin-left: 0px;
}

.checkbox-label md-checkbox .label_fill {
    display: none;
    color: #039be5;
}

.checkbox-label md-checkbox .label_outline {
    display: block;
    color: #c0c0c0;
}

.checkbox-label md-checkbox.md-checked .label_fill {
    display: block;
}


/* .checkbox-label md-checkbox .label{
	display:none;
}
.checkbox-label md-checkbox .label_outline {
	display:block;
	color:#c0c0c0;
}
.checkbox-label md-checkbox.md-checked .label{
	display:block;
} */

.checkbox-label md-checkbox.md-checked .label_outline {
    display: none;
}

.label-text,
.label-default {
    font-size: 11px;
    padding: 1px 5px;
    color: #fff;
    position: relative;
    top: 2px;
    border-radius: 2px;
}

.label-text {
    background: #039be5;
}

.label-default {
    background: #999;
}

.label-list {
    /*position: absolute;
    top: -1px;
    left: 25%;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 37px;
    line-height: 19px;*/
    background: #fff;
    width: auto;
    margin-right: 15px;
    height: 45px;
    border-radius: 2px;
    margin: 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
    box-sizing: border-box;
    float: left;
}

.label-list .md-button {
    margin: 0px !important;
    width: 85px !important;
    height: 45px !important;
}

.label-list .md-button i {
    font-size: 20px;
    float: left;
    margin-right: 5px;
    color: #6C6C6C;
}

.label-list .md-button span {
    float: left;
    line-height: 18px;
    color: #555;
    font-size: 10px;
}

.label-list-items md-menu-item .md-button {
    min-height: 20px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    margin: 0px !important;
}

.label-list-items md-menu-item {
    height: 30px;
    min-height: 30px;
}

.label-list-items {
    padding-top: 0px;
}

.menu-content-title {
    font-size: 9px;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
    letter-spacing: 0.5px;
    padding-top: 4px;
}

.filter-group {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
    background: #fff;
    margin: 8px;
    border-radius: 2px
}

.filter-group .filter {
    margin: 0;
    box-shadow: none;
    border-right: 1px solid #ededed;
    border-radius: 0px;
}

.filter.date-filter md-input-container {
    margin: 0px !important;
}

.filter {
    background: #fff;
    width: 165px;
    margin-right: 15px;
    height: 45px;
    border-radius: 4px;
    margin: 8px;
    /* box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12); */
    box-sizing: border-box;
    float: left;
}

.filter md-select .md-select-value {
    min-height: 16px;
    font-size: 13px;
    border-bottom: 0px;
}

.filter md-select:focus:not([disabled]) .md-select-value {
    border-bottom: 0px;
}

.filter img {
    width: 17px;
    opacity: 0.5;
    margin-top: 14px;
    margin-left: 6px;
}

.new-tag-holder {
    padding: 3px 0 3px 10px;
}

.creat-new-tag input {
    border: 1px solid #ddd;
    font-size: 12px;
    padding: 5px;
    width: 100%;
}

.creat-new-tag .btn-small {
    width: 100%;
    color: #039be5 !important;
    width: auto;
    padding: 0px 9px;
}

.searchbox {
    background: #fff;
    width: 200px;
    margin-right: 15px;
    height: 45px;
    border-radius: 2px;
    margin: 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
    box-sizing: border-box;
    float: left;
    position: relative;
}

.searchbox input {
    border: 0px;
    width: 100%;
    padding: 12px;
    padding-left: 32px;
    font-size: 14px;
    color: #555;
}

.searchicon {
    position: absolute;
    background: none;
    border: 0px;
    top: 11px;
    padding-left: 3px;
    color: #999;
}

.thin-checkbox md-checkbox .md-container {
    width: 16px;
    height: 16px;
}

.thin-checkbox md-checkbox .md-icon {
    width: 16px;
    height: 16px;
    border-width: 1px;
}

.thin-checkbox md-checkbox:not(.md-checked) .md-icon {
    border-color: rgba(0, 0, 0, 0.34);
}

.thin-checkbox md-checkbox {
    margin-bottom: 0px;
}

.thin-checkbox md-checkbox.md-default-theme.md-checked .md-icon,
.tr-checkbox md-checkbox.md-checked .md-icon {
    background-color: rgb(3, 169, 244);
}

.thin-checkbox md-checkbox .md-label {
    color: #565656;
    font-size: 14px;
    margin-left: 25px;
}

.thin-checkbox md-checkbox.md-checked .md-icon::after {
    width: 5.66667px;
    height: 12.33333px;
}

.cb-main {
    padding-bottom: 10px;
}

.cb-sub {
    padding-bottom: 10px;
    padding-left: 27px;
}

.cb-sub.thin-checkbox md-checkbox {
    margin-bottom: 10px !important;
}

.radio-btn-title-horizontal {
    font-size: 13px;
    margin: 0px 15px 15px 0;
    font-weight: 600;
    color: #555;
}

.radio-btn-title {
    font-size: 13px;
    margin-top: 10px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.radio-btn-group md-radio-button {
    width: auto;
    float: left;
    margin-right: 20px;
    margin-bottom:10px;
}

.radio-btn-group md-radio-button .md-label {
    color: #565656;
    font-size: 14px;
    margin-left: 25px;
}

.radio-btn-group md-radio-button .md-container {
    width: 18px;
    height: 18px;
}

.radio-btn-group md-radio-button .md-off,
.radio-btn-group md-radio-button .md-on {
    width: 17px;
    height: 17px;
}

.radio-btn-group md-radio-button .md-off {
    border-width: 1px;
}

md-dialog md-input-container small,
.hint-text {
    font-size: 10px;
    color: #787878;
}

.hint-text {
    position: relative;
    top: -20px;
}

.network-select {
    margin: 0px;
}

md-select.network-select .md-select-value.md-select-placeholder {
    padding-bottom: 0px !important;
    margin-top: 0px;
}

md-select.network-select .md-select-value {
    padding: 0px;
    min-height: auto;
}

.md-button.md-fab.btn-add-small {
    width: 35px;
    height: 35px;
    float: right;
    margin-top: -10px !important;
    margin-bottom: -17px !important;
    margin-right: 10px !important;
    background: #039be5;
}

md-icon>svg {
    height: inherit;
    width: inherit;
}

md-icon {
    min-height: initial !important;
}

.device-dashboard md-card md-card-title {
    /*  padding: 10px 15px 10px !important; */
    /* height: 40px; */
    /*overflow: hidden;*/
    /* max-height: 40px; */
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.device-dashboard-graph-holder{
	position: relative;
    display: flex;
    align-items: stretch;
    gap:10px;
    flex-grow:1;
    padding: 5px 10px;
}

.profile-members{
   border: 1px solid #d6dcd3;
   border-radius: 5px;
   margin-bottom:10px;
   
   

}

.profile-members .member-id{
    background: rgba(3, 155, 229, 1);
    height: 45px;
    padding: 8px;
    border-bottom: 2px solid #ddd;
    border-radius: 5px 5px 0px 0px;
    color: white;
}

.profile-members .cats{
    display: flex;
    justify-content: space-between;
    padding: 5px;
}
.profile-members .head{
    /* font-weight: 700; */
    width: 150px;
}
.profile-members .content{
    /* margin-left: 10%; */
    word-wrap: break-word;
    width: 100%;
    font-size: 12px;
    color: #969696;
}
.profile-members .sub{
    display: flex;
}

.graph-card{
	margin:0px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}
.graph-card .graph-card-header{
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px 10px !important;
    max-height: 65px;
}
.graph-card .graph-card-header md-card-title-text{
	margin-bottom:5px;
}

.graph-card .graph-card-header .graph-chart-filter{
	width:100%;
}

.graph-card md-card-content {
	height:100%;
	padding:5px;
}
.graph-card md-card-content .card-graph-container {
	height:100%;
	border: 1px solid #d8eeff;
	position: relative;
	margin: auto;
	display:flex;
	align-items:flex-end;
	padding-top:15px;
	background: #f9fcff;
}
.graph-card md-card-content .card-graph-container .graph-height-1 {
	margin:0px;
	padding:0px;
	height:100%;
	width:100%;
}
.aggregateDataRateChartHolder{
	height:300px;
	max-height:300px;
	border: 1px solid #d8eeff;
	position: relative;
	display:flex;
	align-items:flex-end;
	padding-top:15px;
	background: #f9fcff;
}

.multiWanGrampsHolder{
	gap:10px;
	padding-bottom:10px;
	padding-top:5px;
}

/* Give the Multi-Wan tab the same left/right breathing room as the Dashboard tab
   (whose .device-dashboard-graph-holder adds 10px sides). Without this the graph
   slider — #multiwan-slider is overflow:hidden — clips its cards flush to the edges. */
.mwan-page-pad {
	padding-left: 10px;
	padding-right: 10px;
}

md-card.graph-holder md-card-title,
md-card.graph-holder.padding-none md-card-title {
    height: 50px;
    max-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 10px !important;
}


/* .device-dashboard md-card md-card-title .md-headline {
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
} */

.on-offline-list {
    float: right;
    position: absolute;
    right: 10px;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.8);
    top: 3px;
}

.on-offline-list span {
    color: #fff;
    font-weight: 900;
}


/*28-07-2017*/

.db-sm-box p {
    margin-top: 0px;
    margin-bottom: 3px;
    font-size: 12px;
    text-transform: capitalize;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 70%
}

.db-sm-box h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 400;
    color: #039be5;
}

.db-sm-box h3 small {
    font-size: 12px;
}

.db-sm-box {
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
}

.db-sm-box md-progress-linear {
    margin-top: 10px;
    margin-bottom: 5px !important;
}

.dashboard_alerts md-card-content {
    /*height: 169px !important;*/
}

md-card md-card-content.bg-blue {
    background-color: rgb(3, 155, 229);
    color: rgba(255, 255, 255, 0.9);
}

.bg-blue h3 {
    color: #fff;
}

.bg-blue md-progress-linear .md-bar {
    background-color: #fff;
}

.bg-blue md-progress-linear .md-container {
    background-color: rgba(0, 0, 0, 0.1);
}

.horizontal-rb md-radio-button {
    float: left;
}

.radio-btn-sm md-radio-button .md-off,
.radio-btn-sm md-radio-button .md-on {
    width: 13px;
    height: 13px;
}

.radio-btn-sm md-radio-button .md-off {
    border-width: 1px;
}

.radio-btn-sm md-radio-button .md-container {
    width: 13px;
    height: 13px;
}

md-radio-group.radio-btn-sm md-radio-button {
    margin: 0 10px 0 0;
}

.radio-btn-sm md-radio-button .md-label {
    margin-left: 17px;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
}

.green-rb {
    color: #42aa42;
}

md-radio-button.green-rb .md-on {
    background-color: rgb(67, 169, 67);
}

md-radio-button.green-rb.md-checked .md-off,
md-radio-button.green-rb .md-off {
    border-color: rgb(65, 167, 65);
}

.blue-rb {
    color: #3685bd;
}

md-radio-button.blue-rb .md-on {
    background-color: rgb(54, 133, 189);
}

md-radio-button.blue-rb.md-checked .md-off,
md-radio-button.blue-rb .md-off {
    border-color: rgb(54, 133, 189);
}

.host-count {
    padding-left: 10px;
    margin-bottom: 5px;
    margin-top: 0px;
    text-transform: uppercase;
}

.host-count span {
    color: rgb(3, 155, 229);
}

.alert-count {
    background-color: #e74c3c;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    position: absolute;
    right: 7px;
    top: 18px;
}

.alert-menu {
    width: 300px;
    height: auto;
}

.alert-container .alert_note {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
}

.alert-container .alert_note:focus {
    outline: 0px;
}

.alert_note.read {
    background: #f2f2f2;
}

.search-box {
    width: 300px;
    position: relative;
    right: auto;
    top: auto;
}

.search-box input:focus {
    outline: 0px;
}

.url-search-box {
    width: 300px;
    position: absolute;
    right: 0px;
    top: -6px;
}

.url-search-box input {
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 5px 15px 5px 40px;
    font-size: 13px;
    width: 100%;
}

.search-box input {
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 5px 15px 5px 40px;
    font-size: 13px;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 4px;
    color: #c1c1c1;
    font-size: 21px !important;
    border-right: 1px solid #ddd;
    padding-right: 5px;
}

.time-sort {
    margin-top: 15px;
}

.host-time-sort {
    position: absolute;
    left: 80px;
    top: 5px;
}

.graph-holder {
    overflow: hidden;
}

.morris-hover {
    position: absolute;
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0% 0%;
    border: 2px solid rgb(221, 221, 221);
    border-radius: 8px;
    padding: 5px;
    font-size: 12px;
    max-width: 50%;
}

.morris-hover .morris-hover-point {
    word-break: break-all;
}

.table-device-graph {
    height: 50px;
    overflow: hidden;
}

.table-device-graph svg {
    margin-left: -37px;
}

.table-device-graph .morris-hover-point {
    display: none;
}

.table-device-graph .morris-hover {
    position: absolute;
    background: rgba(255, 255, 255, 1) none repeat scroll 0% 0%;
    border: 2px solid rgb(221, 221, 221);
    border-radius: 2px;
    padding: 1px 5px;
    font-size: 10px;
}

.table-device-graph text tspan {
    font-size: 9px;
}

.table-device-graph path {
    stroke-width: 1px;
}

.devices-up-down-chart path {
    /*stroke-width: 2px;
    stroke: #f00;*/
}

.usage-list {
    overflow: hidden;
    height: 60px;
    max-height: 63px;
    display:flex;
    gap:10px;
    padding-bottom:10px;
}
.device-on-off-graph {
    height: 180px;
}

.graph-height {
    height: 100%;
    max-height: 250px;
}

.graph-height-1 {
    /* height: 270px; */
    position: relative;
  margin: auto;
  display:flex;
  align-items:flex-end;
  padding-top:15px;
  /* bottom:18px;
  right:9px; */
}

.td-brake-all {
    word-break: break-all !important;
}

.password-field .psw-show-hide {
    display: none;
}

.password-field.md-input-has-value .psw-show-hide {
    display: block;
}

.psw-show-hide .md-container {
    display: none;
}

.psw-show-hide {
    position: absolute;
    right: 5px;
    top: 2px;
}

.psw-show-hide span i {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.6);
}

.change-psw-title h1 a,
.forgot-psw-title h1 a {
    font-size: 21px;
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
    text-align: left;
}

.change-psw-title h1 a i,
.forgot-psw-title h1 a i {
    color: #039be5;
    position: relative;
    bottom: -4px;
    font-weight: 600;
}

.change-psw-title h1,
.forgot-psw-title h1 {
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: left;
    /*color: #039be5;*/
    font-size: 21px;
    font-weight: 500;
    text-transform: uppercase;
}


/*.change-psw-title h1 i, .forgot-psw-title h1 i {
    font-weight: 900;
    font-size: 37px;
    position: relative;
    bottom: -8px;
}*/

.forgot-psw-title form p {
    font-size: 15px;
    color: #757575;
    margin-bottom: 30px;
    text-align: left;
}

.forgot-psw-title {
    position: relative;
}

.forgot-psw-title h1 {
    padding-left: 30px;
}

.forgot-psw-title h1 a i {
    position: absolute;
    left: 0px;
    bottom: inherit;
    top: 0;
}

.signin_holder .additional-info {
    text-align: center;
    font-size: 14px;
    color: #fff;
    padding: 0px 20px 25px;
    letter-spacing: 0.5px;
}

.nv-legendWrap,
.nv-controlsWrap {
    display: none;
}

.table-scroll {
    /*height:300px !important;*/
    overflow-x: auto !important;
    overflow-y: hidden;
}

.table-devider {
    width: 100%;
    height: 40px;
    clear: both;
}

md-card md-card-title {
    padding: 5px 15px 5px !important;
    /* border-bottom: 1px solid #e2e2e2 !important; */
}

.md-headline {
    font-size: 16px !important;
    font-weight: 400;
    line-height: 16px !important;
}

.table-devider {
    width: 100%;
    height: 40px;
    clear: both;
}


/* md-card md-card-title {
    padding: 15px 15px 10px !important;
    border-bottom: 1px solid #e2e2e2 !important;
} */

.file-download,
.firmware-dld {
    position: relative;
    cursor: pointer;
}

.file-download:focus,
.firmware-dld:focus {
    outline: 0px;
}

.file-download i.download {
    position: absolute;
    left: 14px;
    color: #fff;
    font-size: 10px;
    top: -1px;
    background: #757575;
    border-radius: 50%;
    padding: 1px;
    border: 1px solid #fff;
    box-sizing: content-box;
}

.file-download:hover i.download {
    background: #21ae5e;
    font-size: 14px;
    top: -3px;
    left: 12px;
    padding: 2px;
}

.firmware-dld .download {
    position: absolute;
    font-size: 10px;
    left: 9px;
    top: -10px;
    background: #757575;
    color: #fff;
    padding: 2px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #fff;
    box-sizing: content-box;
}

.firmware-dld:hover i.download {
    background: #21ae5e;
    font-size: 14px;
    top: -12px;
    left: 7px;
    padding: 2px;
}

.choose-file {
    position: relative;
    width: 250px;
    float: left;
    background: #fff;
    margin-right: 15px;
    height: 45px;
    border-radius: 2px;
    margin: 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
    box-sizing: border-box;
    float: left;
}

.choose-file label {
    position: absolute;
    top: 5px;
    font-size: 10px;
    color: #039be5;
    left: 10px;
    font-weight: 500;
}

.choose-file md-input-container {
    margin: 0px;
}

.choose-file input {
    margin-top: 21px;
    font-size: 12px;
    margin-left: 9px;
}

.settings-table {
    min-width: 45%;
}

.settings-table tr td {
    padding: 15px 5px;
}

.hotspot-title {
    display: flex;
    flex-direction: row;
}

.hotspot-title md-switch {
    margin: -5px 0 0 40px !important;
}

.cmd-holder {
    overflow: hidden;
    position: relative;
    width: calc(100% - 120px);
    background: #000;
    padding: 0;
    height: 40px;
}

.cmd-btns .md-button {
    margin: 0px !important;
    height: 40px;
}

.cmd-prompt-divename {
    /*position: absolute;
    z-index: 9;
    color: #fff;
        top: 23px;
    left: 19px;*/
    color: #039be5;
    font-size: 13px;
    width: auto;
    white-space: nowrap;
    word-break: keep-all;
    height: 40px;
    background: #000;
    line-height: 40px;
    padding-left: 10px;
}

.cmd-prompt {
    padding: 5px 10px 5px 5px;
    height: 40px;
    width: auto;
    color: #fff;
    resize: none;
    vertical-align: middle;
    font-size: 13px !important;
    width: 100%;
    background: transparent;
    border: 0;
}

.cmd-prompt:focus {
    outline: 0px;
}

md-card-actions.cmd-actions {
    margin-top: 0px;
    margin-bottom: 5px;
}

md-card-actions.cmd-actions .md-button {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 10px !important;
}

.logs_nots {
    height: calc(100vh - 229px);
    box-sizing: border-box;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 5px;
    color: #fff;
    font-size: 15px !important;
    background: #000 !important;
}

.logs_format {
    margin-top: -40px;
    margin-left: 8px;
}

.logs-holder {
    padding: 10px !important;
    min-height: 100px;
}

.config-container {}

.config-item {
    /*border:1px solid #eee;*/
    box-sizing: border-box;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.config-item .item-header {
    display: flex;
    flex-direction: row;
}

.config-item .item-content {
    border-top: 2px solid #eee;
}

.config-item .item-header .md-button {
    margin: 0px !important;
    width: 35px;
    box-sizing: border-box;
    border-radius: 0;
    border-left: 1px solid #ddd;
    min-height: 35px;
    height: 35px;
}

.config-item md-switch {
    padding: 3px 15px;
    margin: 0px;
    width: 100%;
    box-sizing: border-box;
    height: 35px;
}

.config-item .item-header md-switch.md-inverted .md-container {
    margin-right: 8px;
    margin-left: 0px;
}

.config-item .has-item-content md-switch {
    width: calc(100% - 35px);
}

.config-item md-switch .md-label,
.item-header.select-box-item label.select-box-title {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
}

.config-container .config-item md-switch.md-checked {
    /*border-bottom: 2px solid #eee;*/
}

.config-item md-switch {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.splash-page-card {
    background: transparent;
    box-shadow: none;
}

.item-content {
    padding: 10px;
}

.choose-file-btn {
    height: 38px;
    display: block;
}

.choose-file-btn .md-button {
    margin: 0px !important;
}

.upload-btn-holder .md-button {
    float: left;
}

.upload-btn-holder p {
    float: left;
    padding: 7px;
    margin: 0;
    font-size: 14px;
}

.item-header.select-box-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 15px;
}

.item-header.select-box-item md-select {
    margin: 0px;
}

.item-header.select-box-item label.select-box-title {
    line-height: 30px;
}


/************************************
**************Splash Page Preview****/

.splas-page-preview .video-container {
    width: 100%;
    height: 210px;
    overflow: hidden;
}

.splas-page-preview .video-container video {
    width: 100%;
}

.splas-page-preview .video-container img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

.splas-page-preview {
    position: relative;
    width: 100%;
    height: auto;
    background: #eee;
    display: block;
    overflow: hidden;
    padding: 20px 0;
    z-index: 1;
}

.splas-page-preview .hotspotpage-wrapper {
    /*min-width: 300px;*/
    width: 90%;
    max-width: 340px;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /*position: absolute;
		top: 40px;
		bottom: 40px;
		left: 0;
		right: 0;*/
    border-radius: 2px;
    overflow: hidden;
    height: auto;
    position: relative;
    ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.splas-page-preview .logo-wrapper {
    width: 100%;
    position: absolute;
    z-index: 1;
}

.splas-page-preview .text-wrapper {
    width: auto;
    position: absolute;
    z-index: 1;
}

.splas-page-preview .preview-text-wrapper {
    width: 100%;
    position: absolute;
    z-index: 1;
}

.splas-page-preview .drag-page-title {
    /* 	text-align: center; */
    font-size: 22px;
    font-weight: 500;
    /* margin-top: 55px; */
    text-align: center;
    color: #555;
}

.splas-page-preview .drag-page-title p {
    word-break: break-all;
}

.splas-page-preview .logo-conainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 80px;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: #fff;
    text-align: center;
    font-weight: 900;
    font-size: 60px;
}

.splas-page-preview .logo-conainer img {
    max-width: 100%;
    max-height: 100%;
    /*margin-top: 8px;*/
}

.splas-page-preview .page-title {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    margin-top: 55px;
    text-align: center;
    color: #555;
}

.splas-page-preview .drag-page-title {
    /* 	text-align: center; */
    font-size: 22px;
    font-weight: 500;
    /* margin-top: 55px; */
    text-align: center;
    color: #555;
}

.splas-page-preview .drag-page-title p {
    word-break: break-all;
}

.splas-page-preview .page-title span {
    color: #039be5;
}

.splas-page-preview .login-form {
    /*min-width: 270px;*/
    width: 90%;
    max-width: 300px;
    margin: 31px auto;
}

.splas-page-preview input:-webkit-autofill,
.splas-page-preview input:-webkit-autofill:hover,
.splas-page-preview input:-webkit-autofill:focus,
.splas-page-preview textarea:-webkit-autofill,
.splas-page-preview textarea:-webkit-autofill:hover .splas-page-preview textarea:-webkit-autofill:focus,
.splas-page-preview select:-webkit-autofill,
.splas-page-preview select:-webkit-autofill:hover,
.splas-page-preview select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
    border-color: #039be5 !important;
    border-width: 0 0 1.5px !important;
}

.splas-page-preview .input-container {
    position: relative;
    margin-bottom: 15px;
}

.splas-page-preview .input-container i {
    position: absolute;
    bottom: 11px;
    font-size: 19px;
    color: #555;
}

.splas-page-preview .input-container input {
    width: 100%;
    padding: 5px 5px 10px 30px;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.12);
}

.splas-page-preview .input-container input:focus {
    border-color: #039be5;
    outline: 0px;
    border-width: 0 0 1.5px;
}

.splas-page-preview .login-btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #039be5;
    color: #fff;
    border: 0px;
    border-radius: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    margin-top: 15px;
}

.splash-config-error .fill-data-error {
    display: block;
    font-size: 12px;
    text-transform: none;
    font-weight: 500;
    color: #f00;
}

.fill-data-error {
    display: none;
}

.config-item md-switch .md-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding-right: 15px;
}

.login-btn-disable {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #ddd;
    color: #999;
    border: 0px;
    border-radius: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1), 2px 2px 2px 0 rgba(0, 0, 0, 0.18);
    cursor: not-allowed;
    margin-top: 15px;
}

.signup-link {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: #555;
}

.signup-link div {
    text-decoration: none;
    color: #555;
}

.signup-link span.link,
.signup-link a {
    /*  text-transform: uppercase; */
    font-weight: 600;
    color: #039be5;
}

.signup-link a:hover {
    text-decoration: none;
    font-weight: 600;
    color: #039be5;
}

.country-code {
    position: absolute;
    top: 5px;
    left: 29px;
    font-size: 14px;
}

#adVideo {
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-video-preview {
    width: 80%;
    background: #fff;
    min-height: 200px;
}

.md-button.show-ad-btn {
    margin: 0px !important;
    min-height: 20px;
    height: 23px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 600;
}

.splash-config-title {
    margin: 0px 0px 10px 0;
    font-size: 16px;
}

.cmd-prompt-form {
    margin-bottom: 0px;
}

.sp-logo {
    width: 150px;
}

.sp-logo img,
.selected-background img {
    width: 100%;
}

.selected-background {
    width: 200px;
}

.unStyleList {
    list-style: none;
    margin: 0px;
    padding-left: 0;
}

.splash-text h1 {
    margin: 0px !important;
}

.video-item {
    float: left;
    text-align: center;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
}

.video-item .video-thumb {
    width: 100px;
    height: 72px;
    border-radius: 2px;
    border: 1px solid #ddd;
    background-color: #eee;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.video-item span {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.interface-parameters {
    /*border:1px solid #ddd;*/
    margin: 8px 8px 18px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.interface-parameters-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /*padding: 5px 10px;*/
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    padding: 0 43px !important;
    background: var(--primary);
    color: #fff;
    position: relative;
    border-radius: 20px 2px 2px 20px;
}

.interface-parameters-title:focus {
    outline: 0px;
}

.interface-parameters-title h2 {
    margin: 0px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.parameters {
    border: 1px solid #e2e2e2;
    padding: 10px;
    position: relative;
}

.profile-splash-logo img {
    width: 70px;
}

.profile-video-thumb img,
.profile-video-thumb video {
    width: 50px;
}

.profile-video-thumb .youtube-video-thumb {
    width: 50px;
    height: 26px;
}

.profile-video-thumb {
    position: relative;
    cursor: pointer;
}

.profile-video-thumb:hover::after {
    content: '';
    top: 5px;
    left: 44%;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 11px solid #fff;
    border-bottom: 7px solid transparent;
}

.profile-video-thumb:hover::before {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
}

.splas-background img {
    width: 70px;
}

.splash-profile-text h1 {
    font-size: 13px;
    margin: 0px;
}

.nirad_subheader.md-subheader.hotspot-subheader {
    /*height: 72px;*/
}

.nirad_subheader.md-subheader.hotspot-subheader .md-subheader-content {
    display: flex;
    flex-direction: column;
}

.hotspot-switch md-switch {
    float: left;
    margin: 3px 0px;
}

.hotspot-switch md-switch .md-label {
    font-size: 12px;
    color: #999;
    text-transform: capitalize;
}

.hotspot-switch {
    float: left;
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #ddd;
    height: 36px;
}

.hotspot-switch span.label {
    color: #555;
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
}

.hotspot-switch span.value {
    color: #757575;
    font-size: 12px;
    line-height: 36px;
    text-transform: capitalize;
}

.md-subheader.nirad_subheader.hotspot-subheader .md-subheader-inner {
    padding: 0 !important;
}

.md-subheader.nirad_subheader.hotspot-subheader md-tabs {
    padding: 0 16px;
}

.filter-menu {}

.filter-menu .menu-btn {
    width: 100%;
    height: 45px;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 11px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
}

.filter-menu .menu-btn:focus {
    outline: 0px;
}

.upload-xls-file input {
    line-height: 30px;
    margin-left: -90px;
    width: 340px;
    padding-top: 24px;
    padding-left: 42px;
    font-size: 12px;
    color: #999;
    z-index: 2;
    cursor: pointer;
    position: relative;
}

.upload-xls-file:hover,
.upload-xls-file:hover input::before {
    background: #ececec;
}

.upload-xls-file input::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 20px;
    background: #fff;
    bottom: 4px;
    left: 88px;
    transition-timing-function: linear;
    -webkit-transition-delay: 260ms;
    transition-delay: 260ms;
}

.upload-xls-file input::after {
    content: "\f0c6";
    position: absolute;
    width: 0;
    height: 0;
    top: 5px;
    left: 110px;
    font-size: 27px;
    font-family: 'FontAwesome';
    -ms-transform: rotate(44deg);
    -webkit-transform: rotate(44deg);
    transform: rotate(44deg);
    color: #757575;
}

.upload-xls-file .xls-file-label {
    position: absolute;
    top: 12px;
    font-size: 13px;
    left: 19px;
    color: #555;
}

.download-file-xls-btn {
    margin: 0 !important;
    text-align: left !important;
    width: 100%;
    font-size: 14px !important;
    text-transform: capitalize !important;
    color: #555;
    height: 48px;
}

.download-file-xls-btn .download-icon {
    color: #757575;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    line-height: 18px;
    font-size: 27px;
}

.download-logs-btn {
    margin: 0 !important;
    min-height: 20px !important;
    height: 20px;
}

.download-logs-btn .download-icon {
    color: #757575;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    line-height: 22px;
    font-size: 22px;
}

.download-logs-btn:hover .download-icon {
    color: #039BE5;
}

.download-menu-item md-menu {
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.firmware-download-container {
    position: relative;
}

.download-tools-btn.md-button.md-fab.md-mini {
    position: absolute;
    right: 10px;
    top: -25px;
    border-radius: 20px;
    transition: width 1s ease-in-out;
}

.download-tools-btn.md-button.md-fab.md-mini .md-ripple-container {
    border-radius: 20px;
}

.download-tools-btn.md-button.md-fab.md-mini:hover {
    width: 160px;
    transition: width 1s ease-in-out;
}

.download-tools-btn span {
    /*visibility: hidden;*/
    opacity: 0;
    text-transform: capitalize;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.download-tools-btn:hover span {
    /*visibility: visible;*/
    opacity: 1;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.download-tools-btn i {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    line-height: 18px;
    font-size: 27px;
}

.file-menu-content {
    /*padding:0px;*/
}

.file-menu-content md-menu-divider {
    margin: 0px !important;
}

.download-file-xls-btn .arrow-right {
    text-align: right;
    float: right;
    line-height: 34px;
    color: #999;
}

.download-btns-content {
    overflow: hidden;
}

.download-btns-content .download-icon {
    color: #757575;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    line-height: 15px;
    font-size: 21px;
}

.download-btns-content .md-button {
    margin: 0px !important;
    padding-left: 7px;
    font-size: 14px;
    color: #555;
}

.choose-file-xls .custom-file-upload {
    margin: 0px;
    display: inline-table;
    width: 100%;
    height: 48px;
    line-height: 34px;
}

.min-width-600 {
    min-width: 600px !important;
}

.min-width-700 {
    min-width: 700px !important;
}

.min-width-800 {
    min-width: 800px !important;
}

.min-width-900 {
    min-width: 900px !important;
}

.min-width-950 {
    min-width: 950px !important;
}

.min-width-1000 {
    min-width: 1000px !important;
}

.min-width-1150 {
    min-width: 1150px !important;
}

.min-width-full-screen {
    min-width: 100% !important;
}

.device-firmware-height {
    min-height: calc(100vh - 141px);
}

.device-list-height {
    min-height: calc(100vh - 202px);
}

.splash-page-preview-card md-card-header md-card-header-text i {
    display: none;
}

.tbl-perametars-container {
    display: flex;
    flex-direction: row;
}

.interface-perametars-view .tbl-perametars {
    width: 50%;
    /*float: left;
    border-right: 1px solid #eee;*/
    margin-bottom: 0;
}

.interface-perametars-view .tbl-perametars:first-child {
    border-right: 1px solid #eee;
}

.interface-perametars-view .tbl-perametars:nth-child(2) {
    border-right: 1px solid #eee;
}

.interface-perametars-view .tbl-perametars2 {
    border-right: 1px solid #eee;
}

.interface-perametars-view {
    border: 1px solid #ddd;
    overflow: hidden;
    margin-bottom: 10px;
}

.interface-perametars-view h2 {
    font-size: 16px;
    border-bottom: 1px solid #eee;
    margin: 0px;
    padding: 10px;
}

.network-list-table tr td .md-menu .md-icon-button.md-button {
    margin: 0px !important;
    height: 20px;
    min-height: 20px;
    padding: 0;
}

.md-table-th-150 tr th {
    width: 154px;
}

.td-colon {
    width: 5px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.full-width {
    width: 100%;
}

.splashpage-thumbs-container {
    display: inline-block;
    padding: 10px 15px;
    width: 100%;
    border-top: 1px solid #ddd;
}

.splashpage-thumb {
    width: 100px;
    float: left;
    overflow: hidden;
    height: 90px;
    border: 2px solid #ddd;
    margin-right: 10px;
    box-sizing: border-box;
    position: relative;
}

.splashpage-thumb img {
    width: 100%;
}

.splashpage-thumb.active {
    border-color: #039be5;
}

.splashpage-thumb.active::after {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 15px;
    height: 19px;
    color: #fff;
    font-size: 12px;
}

.splashpage-thumb.active::before {
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 0px;
    height: 0px;
    border-bottom: 30px solid #039be5;
    border-left: 35px solid transparent;
}

svg.nvd3-svg {
    overflow: hidden !important;
    display: flex;
    align-items: flex-end;
}

svg.nvd3-svg .nvd3.nv-wrap {
    height: 100%;
}

.error-msg {
    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.55, 0, .55, .2);
    opacity: 1;
    margin-top: 0;
    padding-top: 5px;
    color: rgb(221, 44, 0);
}

.locate-me-btn {
    position: absolute;
    right: 0px;
    top: 2px;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    /* background: #eee; */
    padding: 5px 10px;
    border-radius: 20px;
}

.locate-me-btn i {
    font-size: 16px;
    margin-right: 5px;
}

.locate-me-btn:before {
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: '';
    background-color: #eee;
    z-index: -2;
}

.locate-me-btn:hover:before {
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
}

.locate-me-btn:focus:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
}

.no-of-devices {
    min-width: 160px;
}

.no-of-devices span {
    font-size: 12px;
    margin-left: 8px;
}

.no-of-devices span.online b {
    color: #0f9d58;
}

.no-of-devices span.offline b {
    color: #dc1d38;
}

td.sites-list span {
    display: block;
}

.download-tools-options {
    text-align: center;
}

.download-tools-options .option-item {
    margin-bottom: 15px;
}

.download-tools-options .option-item span {
    display: block;
}

.download-tools-options .option-item i {
    font-size: 31px;
}

.download-tools-options .option-item a {
    font-size: 13px;
}

.td-url-list small {
    display: block;
    margin-bottom: 5px;
}

.profile-form-container {
    padding: 10px;
}

.upper-container{
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

.add-profile-switch-container {
    /*border: 1px solid #ddd;*/
    margin-bottom: 18px;
}

.add-profile-header md-switch {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
    margin: 5px 0;
    height: 35px;
}

.add-profile-header.quick-profile-has-switch md-switch {
    justify-content: flex-end;
}

.add-profile-header md-switch.md-checked.md-primary .md-thumb {
    background-color: #fff;
}

.add-profile-header md-switch.md-primary .md-bar {
    background-color: rgba(0, 0, 0, 0.12);
}

.add-profile-header md-switch.md-checked.md-primary .md-bar {
    background-color: rgba(255, 255, 255, 0.5);
}

.add-profile-header.quick-profile-has-switch md-switch {
    margin: 0px;
    padding-left: 0px;
    width: 100%;
}

.add-profile-header {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
    white-space: nowrap;
}

.add-profile-header:focus {
    outline: 0px;
}

.add-profile-content {
    border: 1px solid #e2e2e2;
    padding: 10px 10px;
    overflow: hidden;
    margin-left: 0px;
    margin-right: 0px;
    border-radius:4px;
}

.add-profile-content .title {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 0px;
    margin-top: 5px;
}

md-checkbox.profile-cb .md-label {
    margin-top: 9px;
    /*font-weight: 600;*/
}

.ssid-profile-value {
    display: block;
}

.ssid-cb {
    padding-top: 15px;
}

md-checkbox.profile-cb {
    margin-left: 15px;
}

md-checkbox.profile-cb .md-container {
    top: 18px;
}

md-radio-button.md-default-theme.md-checked .md-off, md-radio-button.md-checked .md-off{
    border-color: rgba(3, 169, 244, 0.87);
}
md-radio-button.md-default-theme .md-on, md-radio-button .md-on{
    background-color: rgba(3,169,244,0.87);
}

.vertical-stepper .title {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-bottom: 0px;
}

.vertical-stepper .list-title {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-top: 15px;
    padding-top: 5px;
}

ol.custom-list .list-title.list-title-has-radibutton .radio-btn-group {
    padding-top: 6px;
}

ol.custom-list .list-header {
    display: flex;
    flex-direction: row;
    align-items: center;
}

ol.custom-list .wifiSwitchDisable {
    margin-top: 0px;
    margin-left: 20px;
    margin-bottom: 0;
}

ol.custom-list {
    counter-reset: myCounter;
    margin-left: 0;
    padding-left: 5px;
    color: rgb(100, 100, 100);
}

ol.custom-list ol.custom-list {
    margin-top: 20px;
}

ol.custom-list li {
    position: relative;
    padding-left: 3em;
    margin: 0.45em 0;
    list-style: none;
    line-height: 1.8em;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

ol.custom-list li:hover {
    color: rgb(0, 0, 0);
}

ol.custom-list li:before {
    /*content:counter(myCounter);
        counter-increment:myCounter;*/
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    padding: 0px;
    color: #fff;
    /*background: rgb(203, 203, 203);*/
    background: var(--primary);
    font-weight: bold;
    text-align: center;
    border-radius: .9em;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

ol.custom-list li:hover:before {
    background-color: var(--primary);
}

ol.custom-list li li:before {
    background-color: rgb(203, 203, 203);
}

ol.custom-list li:after {
    position: absolute;
    top: 2.1em;
    left: 0.9em;
    width: 2px;
    height: calc(100% - 2em);
    content: '';
    background-color: rgb(203, 203, 203);
    z-index: 0;
}

ol.custom-list li:hover:after {
    background-color: #039be5;
}

ol.custom-list li ol {
    padding-left: 0px;
}

ol.custom-list li li {
    font-size: 0.8em;
}

.custom-list .list-title h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-top: 5px;
}

.custom-list .list-title {
    position: relative;
    margin-top: 0px;
    margin-bottom: 0;
}

.custom-list .list-title:focus {
    outline: 0px;
}

.custom-list .list-title .open-close-icon {
    position: absolute;
    left: -2.8em;
    z-index: 1;
    top: 2px;
}

.custom-list .list-title .open-close-icon i {
    color: #fff;
    font-size: 20px;
}

.custom-list .list-sub-title {
    font-size: 14px;
    font-weight: 500;
}

.multi-wan-options {
    margin-top: 15px;
}

.custom-list .has-form {
    margin-bottom: 15px;
}

.padding-top-30 {
    padding-top: 30px;
}

.wesites-allowed-box {
    border: 1px solid #ddd;
    padding: 30px 10px 10px 10px;
}

.wesites-allowed-box .table {
    border: 1px solid #eee;
}

.add-website-input {
    position: relative;
}

.add-website-input .add-wesite-btn {
    position: absolute;
    right: 3px;
    top: 9px;
    height: 30px;
    min-height: 30px;
    line-height: 30px;
}

.select-splash-page {
    border: 1px solid #eee;
    width: 100%;
}

.select-splash-page h2 {
    font-size: 14px;
    font-weight: 400;
    margin: 10px !important;
}

.hotspot-sub-header {
    display: flex;
    flex-direction: row;
    padding: 0px 15px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
}

.hotspot-sub-header md-switch {
    margin: 3px 0px;
}

.hotspot-sub-header .delete-btn.md-button {
    display: flex;
    flex-direction: row;
}

md-input-container.md-input-has-value label,
md-input-container.md-input-focused label {
    margin-bottom: -5px;
}

md-input-container {
    margin: 10px 0 0 0 !important;
}

md-input-container label {
    margin-bottom: -5px;
}

md-input-container .md-select-placeholder span {
    margin-bottom: -15px;
    font-size: 11px;
}

.remove-extra-space {
    margin-top: -30px;
}

md-card.collapse-card {
    /*box-shadow:none;*/
    margin-bottom: 18px;
}
md-card.collapse-card .add-parem-btn-holder .add-btn-sm{
	right:30px;
}


md-card md-card-title.collapse-header,
.add-profile-header {
    height: 32px;
    line-height: 32px;
    padding: 0px 5px 0px 10px !important;
    background: var(--primary);
    color: #fff;
    position: relative;
    border-radius: 4px;
    display: flex;
    align-items: center;
    /* flex-direction: row-reverse; */
}
md-card md-card-title.collapse-header md-card-title-text{
	padding-left:5px;
}


md-card md-card-title.collapse-header .collapse-icon,
.interface-parameters-title .collapse-icon,
.add-profile-header .collapse-icon {
    /* position: absolute;
    background: var(--primary); */
    background: rgba(0,0,0,0.2);
    /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    width: 38px;
    height: 38px; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* left: 0px;
    top: -3px; */
    z-index: 1;
    width: 22px;
    height: 22px;
}

.collapse-header:focus {
    outline: 0px;
}

.collapse-icon i {
    /*line-height:40px;*/
}

.page-bottom-btns-section {
    width: 100%;
    display: flex;
    padding-right: 10px;
}

.page-bottom-btns-section .md-button {
    margin-left: 10px !important;
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.page-bottom-btns-section .md-button i {
    margin-right: 5px;
    font-size: 20px;
}

.margintop-ve30 {
    margin-top: -30px;
}

.select-auth-type .md-select-value.md-select-placeholder {
    margin-top: 0;
    margin-bottom: -10px;
}

.auth-type-predefine md-select {
    margin: 0px;
}

.auth-type-predefine {
    display: flex;
    flex-direction: row;
}

.auth-type-predefine .label {
    color: #757575;
    font-size: 14px;
    font-weight: 600;
    padding-top: 7px;
    padding-left: 0;
}

.add-profile-content md-input-container .md-errors-spacer {
    /*min-height:0px;*/
}

.advanced-profile-btn.md-button {
    width: 175px;
    display: flex;
    flex-direction: row;
    float: left;
    /*margin-left: 20% !important;*/
    color: #fff;
    border-radius: 20px;
    border: 2px solid #fff;
    height: 25px;
    min-height: 33px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.advanced-profile-btn.md-button i {
    margin-left: -3px;
    margin-right: 4px;
}

.add-new-license {
    margin-top: 15px !important;
    margin-bottom: 0px !important;
    float: right;
}

.license-container {
    border: 1px solid #ddd;
    padding: 10px 10px 0;
    margin-bottom: 5px;
}

.terms-container {
    width: 60%;
    margin: auto;
}

.terms-content {
    height: calc(100vh - 225px);
    overflow-x: auto;
    padding: 15px;
}

.terms-content h2 {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.terms-content ul li {
    font-size: 13px;
}

.md-button.md-raised.accept-terms {
    padding: 0 15px;
}


/*****Extra Small Checkbox****/

.xs-checkbox-group md-checkbox .md-label {
    font-size: 12px;
    margin-left: 23px;
    color: #757575;
}

.xs-checkbox-group md-checkbox {
    margin-bottom: 0px;
}

.xs-checkbox-group md-checkbox .md-container {
    width: 12px;
    height: 12px;
}

.xs-checkbox-group md-checkbox .md-icon {
    width: 12px;
    height: 12px;
    border-width: 1px;
    top: -3px;
}

.xs-checkbox-group md-checkbox.md-checked .md-icon::after {
    left: 2.67px;
    top: -0.78px;
    width: 4.67px;
    height: 9.33px;
}

.custom-signup-form {
    border: 1px solid #ddd;
    margin-right: 10px;
}

.custom-signup-body {
    max-height: 450px;
    overflow: auto;
    padding: 10px;
}

.custom-signup {
    padding: 10px;
}

.custom-field-values {
    margin-left: 18px;
    margin-bottom: 10px;
}

.custom-field-values tr th,
.custom-field-values tr td {
    font-size: 11px;
    padding: 3px 5px;
    vertical-align: text-bottom;
}

.custom-field-values tr th {
    color: #555;
    font-weight: 500;
}

.custom-field-values tr td {
    color: #757575;
}

.custom-signup md-switch {
    justify-content: left;
    padding: 0;
}

.custom-signup md-switch .md-label {
    text-transform: capitalize;
}

.feild-val-input {
    width: 80px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #ddd;
}

.feild-val-input:focus {
    outline: 0px;
    border-bottom: 1px solid #039be5;
}

.custom-field-values tr th .no-cb {
    font-size: 12px;
    margin-left: 23px;
    color: #757575;
    display: block;
    margin-bottom: 5px;
}

.field-item {
    width: 100%;
    float: left;
    position: relative;
}

.feild-item-btn-group {
    display: flex;
    flex-direction: row;
}

.custom-signup {
    border: 1px solid #ddd;
    max-height: 450px;
    padding: 0px;
}

md-select.input-type-select {
    margin: 0;
}

md-select.input-type-select .md-select-value.md-select-placeholder {
    margin: 0;
    font-size: 12px;
    padding: 0 !important;
}

.feild-name-input {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #ddd;
    margin-top: 10px;
    margin-left: 23px;
    margin-bottom: 10px;
    font-size: 13px;
    padding: 5px;
    width: 85%;
}

.feild-name-input:focus {
    outline: 0px;
    border-bottom: 1px solid #039be5;
}

.delete-field {
    position: absolute;
    right: 10px;
    padding: 0;
    background: #fff;
    border: 0;
    top: 7px;
}

.delete-field i {
    color: #f00;
    font-size: 20px;
}

.custom-signup-header {
    border-bottom: 2px solid #ddd;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 30px;
    padding: 0 5px;
}

.custom-signup-header h2 {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
    line-height: 30px;
}

.signup-form-title {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
}

.add-new-field-btn {
    color: #039be5;
    background: transparent;
    border: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.add-new-field-btn i {
    margin-right: 5px;
}

.custom-signup-body .cb-item {
    width: 33.33%;
    float: left;
}

.fit-content {
    max-height: fit-content !important;
}

.md-button.add-field {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    align-items: center;
    font-weight: 600;
    margin-left: 15px !important;
}

.md-button.add-field i {
    font-size: 14px;
    margin-right: 5px;
}

.md-button.edit-field {
    /* position:absolute;
    right: -25px;
    top: 0px; */
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0 !important;
}

.md-button.edit-field i {
    font-size: 100%;
    text-align: center;
    line-height: 15px;
    margin-left: -4px;
}

.splash-preview-tabs {
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.splash-preview-tabs md-tab-item span {
    font-size: 13px;
    font-weight: 600;
}

.signup-preview-form {
    padding: 0 10px;
}

.hideit {
    display: none !important;
}

md-switch.hotspot-enable-switch {
    margin: 0 10px !important;
}

.md-button.md-warn.md-raised[disabled] {
    color: rgba(0, 0, 0, 0.38);
}

#inputLocation {
    padding-right: 100px;
}


/*md-input-container>md-select {
	    margin-bottom: 20px !important;

}*/

.dialog-content-min-height {
    min-height: 60%;
}

.if-has-config-btn {
    display: flex;
    flex-direction: row-reverse;
}

.if-has-config-btn md-select {
    width: 100%;
}

.if-has-config-btn .btn.md-button {
    margin: 0px 0px 0px 5px !important;
    min-height: 25px;
    height: 31px;
    line-height: 19px;
    font-size: 12px;
    font-weight: 600;
    width: 200px;
}

.dialog-content-min-height {
    min-height: 60%;
}

.option-select {
    position: absolute;
    right: 5px;
    margin: 0px;
    bottom: 20px;
}

.option-select md-select-value {
    color: #999;
    font-size: 11px;
    text-align: right;
}

.option-select .md-select-value .md-select-icon {
    width: 10px;
}

.td-download-btn.md-button {
    margin: 0px !important;
    min-height: 20px !important;
    height: 20px;
    line-height: 20px !important;
    font-size: 12px;
    font-weight: 600;
}

.fill-height {
    min-height: calc(100vh - 180px);
}

.fill-height-has-one-subheader {
    min-height: calc(100vh - 177px);
}

.fill-height-has-two-subheaders {
    min-height: calc(100vh - 212px);
}

.fill-height-has-one-subheader-filters {
    min-height: calc(100vh - 238px);
}

.fill-height-has-filters {
    min-height: calc(100vh - 202px);
}

.fill-height-has-one-subheader-card-actions {
    min-height: calc(100vh - 241px);
}

.fill-height-has-one-subheader-card-title {
    min-height: calc(100vh - 217px);
}

.fill-height-has-two-subheaders-card-title {
    min-height: calc(100vh - 277px);
}

.fill-height-has-card-title {
    min-height: calc(100vh - 181px);
}

.fill-height-has-card-title-filters {
    min-height: calc(100vh - 242px);
}

.fill-height-has-one-subheader-card-title-filters {
    min-height: calc(100vh - 278px);
}

.geofencing-fill-height {
    min-height: calc(100vh - 201px);
}

md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child {
    -webkit-transform: translateY(-12px) translateX(-2px) scale(.75) !important;
    transform: translateY(-12px) translateX(-2px) scale(.75) !important;
}

.card-footer md-input-container>md-select {
    margin-bottom: 0px !important;
}

.edit-interface-fields {
    overflow: hidden;
}

.edit-interface-fields md-input-container {
    width: 24.5%;
    /*float: left;*/
    padding-bottom: 15px;
    display: inline-block;
    box-sizing: border-box;
}

.edit-interface-fields md-input-container .input-container-hint {
    position: absolute;
    left: 0;
    bottom: 0px;
}

.edit-interface-fields md-input-container>md-select {
    margin-bottom: 0px !important;
}


/*added on 02-july-2019*/

.pg-refresh button.md-button {
    border: 0px;
    border-left: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 13px;
    height: 36px;
    float: left;
}

.mt-0 {
    margin-top: 0px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mt-2 {
    margin-top: 2rem;
}

.mb-2 {
    margin-bottom: 2rem;
}
.mb-5 {
    margin-bottom: 5rem;
}
.mb-15 {
    margin-bottom: 15px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mr-2 {
    margin-right: 2rem !important;
}

.mr-1 {
    margin-right: 1rem !important;
}

.ml-1 {
    margin-left: 1rem !important;
}

.float-right {
    float: right;
}


/* Added on 08-07-2019 */

.btn-wrapper {
    width: 40px !important;
    background: none !important;
    box-shadow: none !important;
}

.clear-btn {
    height: 45px;
    /*  background: #039be5; */
    background: #fff;
    border: 0px;
    color: #555;
    width: 25px;
    text-align: center;
    margin-right: 0px;
    float: right;
    border-radius: 4px;
    padding: 0px;
}

.clear-btn i,
.clear-btn-disabled i {
    font-size: 16px;
}

.dialog-clear-btn {
    box-shadow: 1px 1px 8px 0px rgb(0 0 0 / 10%);
}l̥

.clear-btn-disabled {
    height: 45px;
    background: #a9a9a9;
    border: 0px;
    color: #555;
    width: 25px;
    text-align: center;
    margin-right: 0px;
    float: right;
    border-radius: 4px;
    padding: 0px;
}

.draggable-container {
    cursor: move;
    z-index: 10;
}


/*.md-tooltip {
	margin-top:-10px !important;
}*/

.align-center {
    text-align: center;
}


/*md-input-container.md-input-focused label.md-placeholder{
	display:none;
}
md-input-container .md-input[disabled] {
	cursor: not-allowed;
	color: rgba(0,0,0,0.45) !important;
	background-position: bottom 0px left 0 !important;
}
.md-button.md-default-theme.md-fab[disabled], .md-button.md-fab[disabled], .md-button.md-default-theme.md-raised[disabled], .md-button.md-raised[disabled], .md-button.md-default-theme.md-fab[disabled]:hover, .md-button.md-fab[disabled]:hover, .md-button.md-default-theme.md-raised[disabled]:hover, .md-button.md-raised[disabled]:hover {
    background: #c2c2c2 !important;
    cursor: not-allowed !important;
}
.md-button.md-fab.btn-add[disabled]:hover {
	background: #c2c2c2 !important;
}
md-input-container md-datepicker[disabled] .md-datepicker-button{
	cursor: not-allowed;
}
md-input-container md-select[disabled] .md-select-value, md-input-container md-select[disabled] {
	cursor: not-allowed;
}
md-input-container:not(.md-input-focused):not(.md-input-invalid) md-select.md-default-theme .md-select-value span:first-child:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) md-select .md-select-value span:first-child:after{
	    color: #f00 !important;
}
md-input-container>md-select {
	    margin-bottom: 20px !important;
}
.disable {
	 pointer-events: none;
  opacity: 0.5;
  background: #CCC;
}
.dndDragging {
    opacity: 0.7;
}
.dndDraggingSource {
    display: none;
}
.dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}
.dropzone ul[dnd-list] {
    margin: 0px;
    min-height: 30px;
    padding-left: 0px;
}
.box {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.box > h3 {
    color: #333;
    border-color: #ddd;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-repeat: repeat-x;
    display: block;
    font-size: 16px;
    padding: 10px 15px;
    margin-top: 0;
    margin-bottom: 0;
}

.box-padding {
    padding: 15px;
}

.box-padding > h3 {
    margin: -15px;
    margin-bottom: 15px;
}

.box-grey {
    border-color: #ddd;
}

.box-grey > h3 {
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
    background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
}

.box-blue {
    border-color: #bce8f1;
}

.box-blue > h3 {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    background-image: -webkit-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);
    background-image: linear-gradient(to bottom,#d9edf7 0,#c4e3f3 100%);
}

.box-yellow {
    border-color: #faebcc;
}

.box-yellow > h3 {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    background-image: -webkit-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);
    background-image: linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);
}

.container-element {
    margin: 10px;
}

body{
	overflow:hidden;
}


.nestedDemo .dropzone .selected .box > h3 {
    background-color: #dff0d8;
    background-image: linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);
    border-color: #d6e9c6;
    color: #3c763d;
}
md-toast.md-error-toast-theme .md-toast-content {
    background-color: maroon;
}
.console-content {
    white-space: pre-wrap;
    font-family: monospace;
}
md-toast.md-success-toast-theme .md-toast-content {
    background-color: green;
}
#file-upload {
    display: none;
}
.md-subheader.nirad_subheader.sub-sub-header{
    margin:-8px;
    z-index: 1 !important;
    top: 36px !important;
}
.ads-container {
padding-left: 15px;
}
.splash-ProfileMessage {
position: relative;
    top: 5%;
}
.ads-container .title{
    font-size: 15px;
    font-weight: 500;
}
.bg-img-container {
width:100%;
height:250px;
background:#eee;
}
.bg-url{
	width: -webkit-fill-available;
}
.disabledFieldset{
	border:none !important;
}
.delete-ad{
border: 0px;
    position: absolute;
    top: 4px;
    padding: 0px;
    background: #fff;
    right: 3px;
        border-radius: 50%;
}
.delete-ad i {
    font-size: 18px;
    color:#f44336;
        line-height: initial;
}
.bg-white {
background:#fff;
}
.thumbnail-tabs md-tabs-wrapper md-tabs-canvas, .thumbnail-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper  {
height:130px;
}
.thumbnail-tabs md-tabs-wrapper{
    margin-left: 55px;
    border-width: 0px !important;
    margin-bottom: -1px;
    z-index:7;
}
.thumbnail-tabs md-tab-item {
border:1px solid #fff;
    border-bottom: 1px solid #ddd;
}
.thumbnail-tabs md-tab-item.md-active {
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
border-bottom:1px solid #fff;
}
.thumbnail-tabs md-tab-item.md-active .vid-thumbnail {
	
}
.thumbnail-tabs md-tab-item {
padding:10px;
}
.thumbnail-tabs md-ink-bar {
background: #fff;
}
.vid-time {
font-size: 11px;
}
.vid-thumbnail {
width: 130px;
    height: 90px;
    /* background-image: url(../images/ad-bg.jpg); *
    background-size: cover;
    background-color: #eee;
    background-position: center;
    border-radius: 2px;
    border: 2px solid #ddd;
}
.vid-thumbnail span {
color:rgba(0,0,0,0.2);
font-size:14px;
}

.md-button.add-tab-btn {
    height: 80px;
    background: #eee;
    position: absolute;
    top: 4px;
    z-index: 7;
    cursor: pointer;
}
.ad-time-container {
    margin: 0 -10;
}

.tabs-holder {
position:relative;
}

md-tabs.thumbnail-tabs md-tabs-content-wrapper {
top:0px !important;
}

md-tabs.thumbnail-tabs md-tab-content{
    padding: 15px;
    border: 1px solid #ddd;
}
.ad-content .title {
margin-top:0px;
margin-bottom:15px;
    font-size: 15px;
    font-weight: 500;
}
.ad-list, .bg-gallery {
    width: 100%;
    display: flex;
    overflow-x: auto;
}
.aditem {
	width:90px;
	min-width:90px;
	height:90px;
	background-size: cover;
    background-color:#eee;
    background-position: center;
	float:left;
	margin-right:10px;
    margin-bottom: 10px;
    border-radius: 2px;
    border: 3px solid #ddd;
}

.bg-item {
	width: 70px;
    min-width: 75px;
    height: 70px;
	background-size: cover;
    background-color:#eee;
    background-position: center;
	float:left;
	margin-right:10px;
    margin-bottom: 10px;
    border-radius: 2px;
    border: 3px solid #ddd;
    position:relative;
    overflow: hidden;
}
.bg-item:focus {
	    outline: 0;
}
.bg-item.active{
	    border-color: #039be5;
}
.bg-item.active::after {
	    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 15px;
    height: 19px;
    color: #fff;
    font-size: 12px;
}
.bg-item.active::before{
	    content: '';
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 0px;
    height: 0px;
    border-bottom: 30px solid #039be5;
    border-left: 35px solid transparent;
 }
.video-url {
margin-bottom:20px;
}
.video-url input {
    margin: 0px !important;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 2px 0 0 2px;
    padding: 5px 10px;
    font-size: 13px;
}
.video-url .btn.md-button {
margin:0px !important;
}
.video-url .btn.md-button:hover {
background:#039be5 !important;
border-radius: 0px 2px 2px 0;
}

.ad-save-btn {
width:100px;
}
.ad-save-btn.btn.md-button:hover {
background:#039be5 !important;
}

.bg-upload .btn.md-button{
    width: 120px;
    background: #fff;
    height: 36px;
    font-size: 13px;
}

.bg-upload .btn.md-button md-icon {
    font-size: 19px;
    margin-left: -10px;
}

.background-container {
width:100%;
height:400px;
background-color:#eee;
}

.account-details md-card md-card-title{
	min-height:24px;
	max-height:24px;
}
.md-button.create-account-btn{
    float: left;
    width: 210px;
    margin-left: 8px !important;
}
.demo-signup {
	font-weight: 500;
    text-transform: uppercase;
}
.forgot-password {
	font-weight: 500;
    text-transform: uppercase;
}
.add-url-footer{
	border-top:1px solid #ddd;
}
.add-url-footer .md-button.btn{
    font-weight: 600;
    letter-spacing: .5px;
}
.filter-type-label{
    padding-right: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-top: -1px;
 }
md-dialog-content .add-url-container input {
width: calc(100% - 80px);
}
md-dialog-content .add-url-container {
margin-bottom:15px;
}


.view-all-urls {
	font-size:10px;
}
.view-all-urls:hover{
	text-decoration: underline;
}
.url-switch {
	width:220px;
	margin-top: 0;
}
.url-switch .md-label small {
	color:#999;
}
.url-filtring md-card-header{
	border-bottom:1px solid #ddd;
}
.url-filtring .search-box {
	right:0px;
}
.url-filtring-header {
	display: inline-block;
}
.url-filtring-header md-card-header-text{
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    display: inherit;
}
.url-filtring-header md-card-header-text span.title{
	float:left;
	margin-right:20px;
   /*  font-size: 11px;
    text-transform: initial;
    color: #999;
    font-weight: 400; *
}
.url-filter-type md-radio-button .md-label small {
	font-size: 11px;
    text-transform: initial;
    color: #999;
    font-weight: 400;
}
.add-url-wrapper {
	margin-top:15px;
}
.add-url-wrapper .md-button.btn {
	    margin-top: -5px !important;
}
.add-url-wrapper md-input-container .md-errors-spacer{
	    min-height: auto;
}
.add-url-container{
    width: 100%;
}
.add-url-container.add-url-container-width{
	 width: calc(100% - 400px);
}
.url-filtring-header .add-url-container {
    margin-bottom: -8px;
	float: left;
	margin-top: -7px;
}
.add-url-container input{
	width: calc(100% - 80px);
	/*min-width:200px;*
    height: 35px;
    border-radius: 2px;
    border: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 13px;
    float: left;
}
.add-url-container .md-button.btn{
	    margin: 0px 0 0 -5px !important;
    min-height: 30px;
    height: 35px;
    float: left;
    width:52px;
}
.add-url-container .md-button.btn:hover, .add-url-container .md-button.btn:focus {
	background:#039be5 !important;
}
.td-ellipsis {
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 160px;
}

.no-records {
    text-align: center;
    padding: 20px 0;
}
.md-button:hover {
	cursor: pointer !important;
}

.md-button.bottomsheet-cancel-btn {
	    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-right: 0px !important;
    margin-left: 5px !important;
}

.subscriber-details .md-button.download-excel-btn {
	margin-top: -1px !important;
	margin-bottom: 0px !important;
	padding: 10px 10px 10px 40px;
	color: #039BE5;
	font-size: 11px;
	min-height: inherit;
	line-height: inherit;
	text-transform: uppercase;
	font-weight: 600;
	box-sizing: border-box;
}

.subscriber-details .md-button.download-excel-btn i {
	position: absolute;
	left: 9px;
	top: 4px;
	font-size: 25px;
}
.search-filter.filter {
	width:204px;
}
.search-filter input {
	    border: 0;
    height: 45px;
    padding: 10px;
    background: transparent;
    box-sizing: border-box;
    font-size: 13px;
    width: 164px;
}

.search-filter input:focus {
	    outline: 0px;
}

.search-filter .search-btn {
    height: 45px;
    background: #039be5;
    border: 0px;
    color: #FFF;
    width: 40px;
    text-align: center;
    margin-right: 0px;
    /* font-size: 13px; *
    float: right;
    border-radius: 0 2px 2px 0;
}
.search-filter .search-btn i {
    font-size: 22px;
    color: #fff;
}
.custom-file-upload {
    /*border: 1px solid #ccc;*
	display: inline-block;
	padding: 8px 6px;
	cursor: pointer;
	height: 31px;
	line-height: 31px;
	position: relative;
}

.custom-file-upload i {line-height: 31px; }
.file-title {
    position: absolute;
    left: 36px;
    top: 7px;
    width: 124px;
    font-size: 14px;
    height: 30px;
    overflow: hidden;
    font-weight: normal;
    color: #222;
}
.upload-btn {
    background: #4f9ce5;
    border: none;
    height: 45px;
    color: #fff;
    float: left;
}

.filter.reset-widget {
	width:40px;
}
.filter.reset-widget .reset-btn{
		margin: 8px 0;
	    display: block;
	    background: none;
	    border: none;
	    outline: none;
 }
.login-page .login-md-content {
   padding-top: 0px;
}
 
.login-page .login-md-content ui-view{
        padding: 0px;
}

.filter.date-time-filter {
	    width: 210px;
}
.filter.date-time-filter md-input-container{
	    margin-top: 14px;
    margin-bottom: 0px;
}
.filter.date-time-filter label {
	    left: 35px;
}
.filter.date-time-filter input {
	    border-bottom: 0px;
    font-size: 14px;
    margin-left: 33px;
}

.filter.date-time-filter .dtp-btn-calendar.md-button {
	top: -17px;
    left: -3px;
}
.filter.date-time-filter .dtp-clear.md-button {
	    top: -8px;
    right: -15px;
}
.right-radio-grout {
	margin-left:15px;	
}
.flex-initial {
	flex: initial;
}

.axis-lable .nv-y text{display: none;}

/* ------------G2 css---------.axis-lable .nv-x.nv-axis.nvd3-svg *
.datarate-axis-lable .nv-x.nv-axis.nvd3-svg {
	  -ms-transform: translate(0, 195px)!important;
    -webkit-transform: translate(0, 195px) !important; 
    transform: translate(0, 195px) !important;
	
}

/* ----------G2 css ----------------------*
.axis-lable .nv-x text{ fill: #777 !important;
    font-size: 12px;
    font-weight: 400 !important;}
    
.datarate-axis-lable .nv-x text{ fill: #777 !important;
    font-size: 12px;
    font-weight: 400 !important;}
    
.datarate-axis-lable .nv-y text{ fill: #777 !important;
    font-size: 12px;
    font-weight: 400 !important;}
    
.headbeat-td-graph {
	height: 50px;
}
.headbeat-td-graph nvd3-line-chart svg {
	    margin-top: -2px;
	    margin-left: -5px;
	        height: 32px;
}
.headbeat-td-graph .nvd3-svg text {
    fill: #777 !important;
    font-size: 11px;
    font-weight: 400 !important;
}
.upload-container.filter {
    width: 200px;
}
.file-upload-error span {
color:#f00;
font-size:12px;
}
.file-upload-error  {
    padding-top: 23px;
    float: left;
}
.upload-container .selected-file-name {
    width: 162px;
    border: 0px;
    background: transparent;
    padding: 5px 10px;
    font-size: 13px;
    color: #555;
}
.upload-container .file-upload{
     padding: 10px 6px;
    background: #039be5;
    border: 1px solid #039be5;
    position: relative;
    color: #fff;
    border-radius: 0 2px 2px 0px;
    text-align: center;
    float: left;
    cursor: pointer;
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
        overflow: hidden;
}
.upload-container .file-upload md-icon {
color:#fff;
cursor: pointer;
}
.upload-container .hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
        padding-left: 37px;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;
    
}
 
sub-menu-side-nav, main-menu-side-nav, side-nav {
    z-index: 9;
}
.subscriber-info {
	padding-left: 0px;
    margin-bottom: 0px;
    margin-left: 16px;
}
.subscriber-info li {
	float:left;
	color:#555;
	list-style: none;
    margin-right: 30px;
    font-size: 12px;
    text-transform: capitalize;
}
.subscriber-info li span {
	color:#039be5;
	letter-spacing: 0.5px;
    font-weight: 400;
}


.subscriber-details .table tr td .date {
	margin-right:10px
}
.search-field {
    float: right;
}
.search-field input {
    border: 0px;
    border-left: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 13px;
    height: 36px;
    float: left;
    color: black;
}
.search-field input:focus {
    outline: 0px;
    border: 1px solid #039be5;
}
.search-field button i {
    font-size: 20px;
}
.search-field button {
    border: 0px;
    background: #039be5;
    color: #fff;
    height: 36px;
    float: left;
}
.sorting-table tr th {
	position: relative;
}
.sorting-table tr th i {
	    font-size: 15px;
    position: absolute;
    top: 10px;
    padding-left: 5px;
    color: #555;
}
.sorting-table tr th a {
	color: rgba(0,0,0,0.70);
}
.sorting-table tr th a:hover{
	text-decoration: none;
}
.margin-top-20 {
	margin-top:20px;
}
.margin-top-15 {
	margin-top:15px;
}
.flex-col tr td:nth-child(2) {
	width:5px;
}
	
.add-btn-sm {
    position: absolute !important;
    width: 35px !important;
    height: 20px !important;
    line-height: 20px !important;
    top: -25px;
    right: 0px;
    z-index: 99 !important;
}

.add-btn-sm.md-button.md-fab[disabled], .add-btn-sm.md-button.md-fab[disabled]:hover {
	 background-color: #ddd !important;
	     color: rgba(0,0,0,0.38);
}

.position-relative {
    position: relative;
}

.network-interface-list {
	padding-left:4px;
	    margin: 10px 0;
}
.network-interface-list li.title{
	font-size: 12px;
    font-weight: 600;
        color: #222;
}
.network-interface-list li {
	    float: left;
    list-style: none;
    margin-right: 15px;
    font-size: 14px;
    color: #555;
} 
.network-interface-list li input{
    width: 50px;
    border: 1px solid #ddd;
    margin-left: 3px;
    border-radius: 2px;
    margin-right: 2px;
    padding: 0 5px;
}
.logs-refresh.md-button.md-fab {
    position: absolute;
    right: 5px;
    top: -17px;
    width: 36px;
    height: 30px;
    background: #fff;
    line-height: 30px;
    z-index: 1;
}
.delete-btn.md-button {
    min-height: 24px;
    margin: 0px !important;
    color: #e74c3c;
}
.delete-btn.md-button[disabled] {
    color: rgba(0,0,0,0.38);
}
md-card.padding-none md-card-title {
    padding: 5px 15px;
    border-bottom: 1px solid #ddd;
    box-sizing: content-box;
}
md-card md-card-title+md-card-content {
    padding-top: 10px !important;
}
md-card md-card-title md-card-title-text .md-headline {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}
md-card-actions.layout-align-end-center .md-button.md-raised {
	margin-left: 10px !important;
    padding: 0 10px;
    min-height: 30px;
    line-height: 32px;
}
.hotspot-config form {
	margin-bottom: 0px;
}
.margin-bottom-20 {
	margin-bottom: 20px;
}
.margin-bottom-30 {
	margin-bottom: 30px;
}
.margin-bottom-40 {
	margin-bottom: 40px;
}
.logs-refresh.md-button md-icon {
color:#039BE5;
}

.logs-refresh.md-button:hover md-icon {
color:#fff;
}

.fileupload-btn .md-button
{
background: #039be5;
    margin: 0px !important;
    height: 45px;
    border-radius: 0 2px 2px 0;
}
.fileupload-btn .md-button:hover, .fileupload-btn .md-button.btn-add.md-focused, .fileupload-btn .md-button.md-focused {
background-color: #039be5;

}
.fileupload-btn .md-button md-icon {
color:#fff;
}
.fileupload-btn md-input-container label {
    margin-left: 5px;
    font-size: 13px;
    margin-bottom: 5px;
}
.fileupload-btn md-input-container.md-input-has-value label {
    margin-bottom: 1px;
    font-size: 14px;
}
.fileupload-btn md-input-container input {
    border: 0px;
    padding: 7px;
    font-size: 14px;
    margin-top: -4px;
}
.fileupload-btn.filter {
    width: inherit;
}

#block-space {
	padding-left: 4px;
	    margin-bottom: 10px;
}

input:-webkit-autofill,
	input:-webkit-autofill:hover, 
	input:-webkit-autofill:focus
	textarea:-webkit-autofill,
	textarea:-webkit-autofill:hover
	textarea:-webkit-autofill:focus,
	select:-webkit-autofill,
	select:-webkit-autofill:hover,
	select:-webkit-autofill:focus {
	  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
	  transition: background-color 5000s ease-in-out 0s;
	}
.pos-rel{
	position:relative;
}
	.custome-icon {
		    position: absolute;
	    font-size: 18px !important;
	    background: #089ce6;
	    border-radius: 50%;
	    text-align: center;
	    padding: 7px;
	    color: #fff;
	    top: -18px;
	    right: 5px;
	    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
	    cursor: pointer;
	}


	.table-title {
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: 600;
}

.cb-col {
}
.nirad_table.model-tbl tr th {
    padding: 5px 8px;
}
.clear-filter {
    line-height: 31px;
    font-size: 12px;
    color: #039be5;
    padding-left: 22px;
    position: relative;
}

.clear-filter i {
	position: absolute;
    left: 0;
    font-size: 18px;
    top: 7px;
}

.filtered-values-holder {
	position: relative;
    width: 100%;
    height: 44px;
}

.filtered-values {
    padding: 4px 23px 1px;
    background: #fff;
    width: 103%;
    left: -15px;
    top: 0px;
    position: absolute;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.01), 0 1px 1px 0 rgba(0,0,0,.01), 0 2px 1px -1px rgba(0,0,0,.08);
}
.filter-container {
	margin-right:25px;
}
.filter-container label{
	color: #039be5;
	font-size: 10px;
	margin-bottom: 0px;
}

.filter-container .filter-value {
	    color: rgba(0,0,0,0.67);
	    font-size:12px;
	    margin-top:-2px;
}

md-bottom-sheet.filter-bottom-sheet  {
    position: fixed;
        padding: 0px 0px 80px;
        
}
md-bottom-sheet.filter-bottom-sheet .md-subheader{
	border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}
md-bottom-sheet.filter-bottom-sheet  md-input-container {
    margin: 5px 0;
}

md-bottom-sheet.filter-bottom-sheet .md-subheader-inner {
	    color: #333;
    font-size: 16px;
        padding: 0px 0 0 15px !important;
        height: 35px;
    line-height: 35px;
}
md-bottom-sheet.filter-bottom-sheet .md-subheader-inner i.fa-filter{
    margin-top: 6px;
    font-size: 21px;
    color: #555;
}
md-bottom-sheet.filter-bottom-sheet .md-subheader .md-subheader-inner .md-subheader-content {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.bottom-sheet-container {
	    padding: 10px 15px;
}
.time-filter mdp-time-picker md-input-container{
	margin: 14px 0 0;
    height: 24px;
    padding: 0px 0;
    font-size: 13px;
}

.time-filter mdp-time-picker md-input-container.md-input-has-value, .time-filter mdp-time-picker md-input-container.md-input-focused{
	margin: 18px 0 0;
}
.time-filter mdp-time-picker md-input-container .md-input {
	border: 0px;
}
.filter.time-filter {
	position:relative;
	width: 130;
}
.time-filter i {
    position: absolute;
    top: 11px;
    left: 7px;
    color: #757575;
    font-size: 24px;
}
.add-filter-holder {
    float: left;
    margin-top: 21px;
    margin-left: 5px;
}
.add-new-filter {
	color: #039be5;
    font-size: 12px;
    position: relative;
    padding-left: 24px;
}
.add-new-filter i {
	margin-right: 5px;
    font-size: 20px;
    position: absolute;
    left: 0px;
    top: -2px;
}
.filter.date-filter{
	
}
/* .filter.date-filter md-input-container.md-input-invalid label {
    color: #999;
} *
.date-filter ._md-datepicker-floating-label md-datepicker .md-datepicker-button {
    top: -2px;
    left: 0px;
    /* position: absolute; *
    margin: 0px !important;
    height: 45px;
}

.date-filter ._md-datepicker-floating-label md-datepicker._md-datepicker-has-triangle-icon {
      /* padding-right: 0px; 
     margin-right: 0px; 
     margin-left: 27px; *
    width: 100%;
    /* top: -4px; 
     position: relative; *
}
.date-filter md-input-container._md-datepicker-has-calendar-icon {
	margin: 0px;
    height: 45px;
}
.date-filter ._md-datepicker-floating-label md-datepicker .md-datepicker-input-container {
    width: 118px;
     margin-left: 0;
    /*height: 100%; *
    margin-top: 14px;
}
.date-filter  ._md-datepicker-floating-label._md-datepicker-has-calendar-icon>label:not(.md-no-float):not(.md-container-ignore) {
    right: inherit;
    left: 40px;
    padding-bottom: 0px;
    width: 88px;
    margin-bottom: 0px;
    top: -15px;
    height: 17px;
}
.date-filter ._md-datepicker-floating-label._md-datepicker-has-calendar-icon.md-input-has-value>label:not(.md-no-float):not(.md-container-ignore),
.date-filter ._md-datepicker-floating-label._md-datepicker-has-calendar-icon.md-input-focused>label:not(.md-no-float):not(.md-container-ignore) {
	    top: -1px;
}
.date-filter md-input-container .md-input, .date-filter md-input-container.md-input-focused .md-input {
		    border-width: 0px;
     font-size: 13px; 
     width: 100%; 
     min-width: 50px; 
    /*height: 100%;*
       color: #757575;
}

.date-filter ._md-datepicker-floating-label md-datepicker .md-datepicker-input-container .md-datepicker-expand-triangle {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid;
        border-top-color: rgba(0,0,0,0.54)
}
.clear-date-filter {
	float: left;
    margin: 8px;
    display: flex;
    align-items: center;
    height: 45px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #039BE5;
}
.clear-date-filter i{
    margin-right: 3px;
    font-size: 20px;
}
.clear-date-filter:focus {
    outline: 0px;
}
.filter.filterby md-select .md-select-value {
    color: #039be5;
    font-size: 12px;
}
.filter.filterby md-select .md-select-value .md-select-icon, .filter.filterby md-select:focus:not([disabled]) .md-select-value .md-select-icon {
	color: #039be5;
}
.filter.filterby md-select:focus:not([disabled]) .md-select-value{
	color: #039be5;
} 
.filter.filterby md-select .md-select-placeholder {
	color:#999;
}
.filter.filterby md-select .md-select-placeholder .md-select-icon{
    color: rgba(0,0,0,0.54);
}
.filterby md-select {
    margin: 1px 0 0px;
}

.filterby md-select .md-select-value.md-select-placeholder {
    margin-top: 10px;
}
.filterby .filter-value {
	height: 24px;
    width: 100%;
    border: 0px;
    font-size: 13px;
    padding: 5px;
    margin-left: -3px;
}
.filterby .filter-value:focus {
	outline:0px;
	background:#f9f9f9;
}

.filterby .filter-value::-webkit-input-placeholder { 
  color: #ccc;
}
.filterby .filter-value::-moz-placeholder { 
  color: #ccc;
}
.filterby .filter-value:-ms-input-placeholder { 
  color: #ccc;
}
.filterby .filter-value:-moz-placeholder { 
  color: #ccc;
}

.filterby md-select.ng-pristine + .filter-value {
	display:none;
}
.log-scroll {
	   /* max-height: 100px;
    overflow-y: auto;*
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 25px;
}
.log-padd {
	padding-right:29px;
}
.log-ellipsis {
	    max-width: 240px;
     position: relative;
}
.view-more-log{
    position: absolute;
    top: 10px;
    color: #fff;
    right: 9px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    background: #6c6c6c;
    border-radius: 2px;
    height:15px;
    width:15px;
    }
 .view-more-log:hover {
 	background:#039be5;
 }
 .logs-table tr td.log-ellipsis .view-more-log i {
    position: relative;
    font-size: 16px;
    top: 0px;
    left: 0px;
 }
.logs-table tr td i.warning {
    color: #f0ad4e;
    font-size:21px;
}
.logs-table tr td i.error {
    color: #d9534f;
    font-size:21px;
}
.logs-table tr td i {
	position:absolute;
	top: 8px;
    left: 10px;
}

/*.filter .filter-value {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    border: 0px;
}*
.error-type {
	position:relative;
}
.hotspot-config {
	padding: 20px 20px 0;
}
.hotspot-config md-input-container {
	position: relative;
}
.pagination-container {
	width: 100%;
    display: block;
    background: #f9f9f9;
    overflow: hidden;
}
.page-details  {
	    float: left;
    font-size: 14px;
    padding: 15px 20px;
    color: #555;
}

.page-list {
	float:right;
}
.page-buttons {
	float:left;
	margin-right: 10px;
}

.page-buttons .md-button {
	padding:10px;
}
.page-search {
	float:right;
	padding-right: 15px;
}

.page-search input {
	width: 70px;
    border: 1px solid #ddd;
    padding: 8px 10px;
    border-radius: 2px;
    margin-top:1px;
}
.page-search  form {
    margin-bottom: 0px;
}

.page-search .md-button {
    background: #039BE5;
    color: #fff;
    font-weight: 600;
}
.page-search .md-button[disabled]{
	     background: #ddd;
    color: #999;
}
.icon-btn {
	    padding: 0px 5px !important;	
}
.icon-btn.lastpage md-icon, .icon-btn.firstpage md-icon {
	position:relative;
}
.icon-btn.lastpage md-icon::before {
	content:'';
	width: 2px;
    height: 12px;
    background: #888;
    position: absolute;
    right: 4px;
    top: 5.3px;
}
.icon-btn.firstpage md-icon::before {
	content:'';
	width: 2px;
    height: 12px;
    background: #888;
    position: absolute;
    left: 4px;
    top: 5.3px;
}
.number-btn {
	padding: 0px 10px !important;
}

.number-btn.active {
	background:#039BE5;
	color:#fff;
}

.datepicker-container md-datepicker {
    display: flex;
	flex-grow: 1;
}
.datepicker-container .md-datepicker-button {
	position: absolute;
    top: -10px !important;
    z-index: 2;
    right: 0;
    margin: 0px !important;
    padding-bottom: 0px !important;
}
.datepicker-container  .md-datepicker-input {
    /*padding-left: 25px;*
}
.datepicker-container  .md-datepicker-input-container {
	width:100%;
	margin-left: 0px !important;
}
.datepicker-container  .md-datepicker-input-container .md-datepicker-input {
    max-width:100% !important;
}
.datepicker-container .md-datepicker-input-container .md-datepicker-triangle-button {
	display:none;
}
.datepicker-container label {
	/*left:38px !important;*
	left:0px !important;
}
 .steps-crt .step-line {
 
     height: 168px;
    overflow: hidden;
 }
.g2-chart {
	margin-top: 20px;
	position:relative;
	
}
.g2-chart .y-lable {
	 position: absolute;
    float: left;
    top: 0;
    width: 40px;
}
 #g2-lblX {  
	display: block;
	}
.x-lable {
    position: absolute;
    top: -20px;
	left:-3px;
}
.g2-wp .step-line,
.g2-wp .x-lable {
	margin-left:40px;
}

#G2Chart, .sample-loop .g2grf {
	-webkit-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg); 
	transform: rotateY(180deg); 
	border-right: 1px solid #f5f5f1;
}

#G2Chart, .x-lable {
	margin-left: 35px;

	
}
.g2-chart 
.lebels {
		position:absolute;
		/* z-index: 99; *
		
}
.chart-custome {
	position:relative;
}
.mask-titles ul {
	margin: 0;
    padding: 0;
}
.mask-titles ul li {
    list-style: none;
    font-size: 10px;
    margin: 0px 0 35px 0;
}

.mask-titles {
	position: absolute;
	top: 19px;
	left: 11px;
	z-index: 1;
}

.mask-titles .blue {
    color: #61b3f4;
}
.mask-titles .skyblue {
    color: #65c2dc;
}
.mask-titles .darkgreen {
    color: #56a5a1;
}
.mask-titles .green {
    color: #7db969;
}
.mask-titles .lightgreen {
    color: #a6ca66;
}
.mask-titles .darkred {
    color: #b03059;
}


.mask-titles li, .mask-titles2 li {
	font-weight:bold;
	background: #fff;
    padding: 0 2px;
}


a{
	text-decoration:none;
	cursor:pointer;
}

.dashboard-scroll {
    max-height: 300px;
}

md-content.md-default-theme, md-content {
  background-color: #f5f5f5;
}

md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
    background-color: #fff;
    color: rgba(0,0,0,0.77);
}

.md-button {
	min-width:auto !important;
	margin: 6px 0px !important;
}
.md-button.margin-none {
	margin: 0px !important;
}
.md-toolbar-tools .md-button ng-md-icon svg
{
	margin-top:11px;
}

.md-toolbar-tools {
	margin:0px !important;
	padding:0px !important;
}

.nirad_header .md-toolbar-tools h3 img{
    height: 40px;
}
.nirad_header .md-toolbar-tools .toolbar-logo {
	    padding-left: 16px;
}
.nirad_header .md-toolbar-tools .toolbar-logo img {
	height: 40px;
}
md-card {
  background-color: #fff;
}
md-card h2:first-of-type {
  margin-top: 0;
}

md-toolbar .md-button.md-default-theme {
  border-radius: 99%;
}

h2 {
  font-weight: 400;
}

.md-toolbar-tools-bottom {
  font-size: small;
}
.md-toolbar-tools-bottom :last-child {
  opacity: 0.8;
}

md-toolbar:not(.md-hue-1),
.md-fab {
  fill: rgba(0,0,0,0.77);;
}

md-sidenav {
  fill: #737373;
}
md-sidenav ng-md-icon {
  position: relative;
  top: 5px;
}

.user-avatar {
  border-radius: 99%;
}

.content_container {
	margin:auto;
}

.search_box {
	/*margin:15px;*
}

.search_box md-tabs-content-wrapper md-tab-content md-content{
	background:#fff;
	padding:0 15px;
}

.search_box md-tabs-content-wrapper {
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.16);
	overflow:hidden !important;
}
.search_box md-tabs, .search_box .md-header-items-container {
	overflow:visible;
}

 

.search_box md-tabs.md-default-theme md-tab.active , .search_box md-tabs .md-tab.md-active {
    color: #555;
    background: #fff;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
}
 .search_box md-tabs md-tabs-wrapper {
	 border:0px !important;
 }

.search_box md-tabs-canvas {
    overflow: visible !important;
    height: 45px;
}

.search_box md-tabs.md-default-theme .md-tab, .search_box md-tabs .md-tab {
	color: #fff;
    background: #F63;
}

.search_box md-tabs.md-default-theme md-tabs-ink-bar, .search_box md-tabs md-ink-bar {
    color: #fff;
    background: #fff;
	display:none !important;
}

md-input-container.md-has-icon md-icon {
	color: #717171;
}

md-input-container.md-default-theme.md-input-invalid  md-icon, md-input-container.md-input-invalid  md-icon {
    color: rgb(221,44,0);
}

md-input-container.md-has-icon.md-input-has-value md-icon,  md-input-container.md-has-icon.md-input-focused md-icon{
	color: #039be5;
}
md-select.md-default-theme:focus:not([disabled]) .md-select-value, md-select:focus:not([disabled]) .md-select-value {
    border-bottom-color: #039be5 !important;
    color: rgba(0, 0, 0, 0.87);
}
md-input-container.md-default-theme.md-input-focused:not(.md-input-invalid) .md-input, md-input-container.md-input-focused:not(.md-input-invalid) .md-input {
    border-color: #039be5 !important;
}

md-input-container.md-input-has-value label, md-input-container.md-input-focused label{
	color:#039be5 !important;
}

.md-toolbar-tools md-input-container .search_input.md-input {
	padding: 21px 2px 1px !important;
	border-width: 0px;
	line-height: 79px;
	height: 79px !important;
}

.recommended md-list-item{
	background:#fff;
	margin-bottom:10px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.16), 0px 2px 10px rgba(0, 0, 0, 0.12);
}

.recommended md-list-item .recommended-item-icon {
	text-align:center;
	width:40px;
}

.recommended md-list-item .recommended-item-icon i{
	line-height:50px;
}

/***************************************************************
.signin_holder
{
	width: 480px;
	margin: 11% auto;
	padding:0px !important;
	background:url(../images/header-bg5.png) no-repeat center #039be5;
	background-size:cover;
}
.signin_holder_overlay
{
	position:relative;
	/*background: rgb(245,245,245);
background: -moz-linear-gradient(top,  rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, rgba(3,155,229,.0) 50%, rgba(3,155,229,.0) 50%, rgba(3,155,229,.0) 100%);
background: -webkit-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(245,245,245,1) 50%,rgba(3,155,229,.0) 50%,rgba(3,155,229,.0) 50%,rgba(3,155,229,.0) 100%);
background: linear-gradient(to bottom,  rgba(245,245,245,1) 0%,rgba(245,245,245,1) 50%,rgba(3,155,229,.0) 50%,rgba(3,155,229,.0) 50%,rgba(3,155,229,.0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#039be5',GradientType=0 );
*
}
.signin_holder_overlay:before {
	content: ' ';
    position: absolute;
    width: 480px;
    height: 50%;
    background: #f5f5f5;
	
}

.signin-conatiner {
	position: relative;
	padding: 20px;
}
.signin-conatiner:before {
    z-index: -1;
    content: ' ';
    line-height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #009688;
    height: 220px;
}
.signin_form {
	padding: 30px 20px 0 20px;
	box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	background: #fff;
}

md-card.signin_form md-card-content {
	padding-top:0px;
	padding-bottom:0px;
}

.signin_logo {
	text-align:center;
	clear:both;
	display:block;
}
.signin_logo img {
	width: 185px;
	margin-top: -170px;
}
.signin_logo h1 {
	margin-top:0px;
	margin-bottom: 50px;
}

.signin_logo h1 a{
	    font-weight: normal;
    color: #039be5;
    font-size: 29px;
    font-weight:600;
	text-transform: uppercase;
	text-align:center;
}

.signin_holder .additional-info {
    text-align: center;
    font-size: 12px;
	padding-bottom: 30px;
}
.signin_holder .additional-info a{
    color: #fafafa;
}
.signin_holder .additional-info a:hover{
	text-decoration:underline;
}
.signin_holder .additional-info .divider-h{
    border-right: 1px solid #fafafa;
    margin: 0 15px;
}
.signup-msg h3 {
	margin-top:0px;
}

.signup-msg p {
	font-size: 13px;
    color: #757575;
}
.signup-msg p a {
	color: #039be5;
    font-weight: 600;
}
.signup-msg p a:hover {
	    text-decoration: underline;
}
.signup-msg .email {
	color:#039be5;
	font-size:18px;
	margin-bottom:20px;
}
.nirad_logo {
}

.nirad_logo img {
	width: 146px;
	position: absolute;
	top: 12px;
	left: 18px;
}

.nirad_logo h3 {
	font-weight: 500 !important;
	text-transform: uppercase;
	padding-left: 63px;
	font-size:19px !important;
	letter-spacing: 0.010em;
    font-style: italic;
}


md-input-container label {
    color: #999;
    font-size: 14px;
    font-weight: normal;
    pointer-events: none;
	padding-bottom:10px;
}

md-input-container.md-input-has-placeholder label {
	padding-bottom:0px;
}

md-input-container.md-input-has-value label, md-input-container.md-input-focused label {
	padding-bottom:0px !important;
}

md-select .md-select-value.md-select-placeholder {
    color: #999;
    font-size: 14px;
    font-weight: normal;
    pointer-events: none;
	padding-bottom:10px !important;
	margin-top: -9px;
}

md-select:focus:not([disabled]) .md-select-value.md-select-placeholder {
    color: #999;
}

.md-button.nirad_plain_btn {
	color: #039be5;
	font-weight:600;
	text-transform:uppercase;
}
.md-button.nirad_plain_btn:hover {
	background:transparent !important;
	text-decoration:underline;
}

.nirad_plain_btn.md-button[disabled] {
	background-color: transparent;
    color: #ccc !important;
    font-weight: 400;
}

.header-banner {
	padding: 0px 16px 0;
	background:url(../images/header-bg6.png) no-repeat top rgb(3,155,229);
	background-size:100%;
	min-height:45px !important;
	height:45px;
	width:100%;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
	display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.sidebar-toolbar{
	background-color: rgb(45,50,62) !important;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
}
.nirad_header md-toolbar{
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
}
.md-subheader.nirad_subheader {
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
	/*border-top: 1px solid #eee;*
	background: #fff;
	height: 36px;
}
.md-subheader.nirad_subheader .title {
	color: #555;
    margin: 0px;
    line-height: 36px;
    float:left;
}
.md-subheader.nirad_subheader .title.back-btn {
	cursor:pointer;
	font-size: 14px;
    font-weight: 500;
}
.md-subheader.nirad_subheader .title.back-btn:hover {
	color:#039be5;
}
.md-subheader.nirad_subheader .title.back-btn:focus {
	outline: 0px;
}
.md-subheader.nirad_subheader .title i {
    float: left;
    line-height: 36px;
    margin-right: 8px;
    font-size: 21px;
}
md-sidenav.md-default-theme, md-sidenav {
    background-color: rgb(45,50,62) !important;
}
md-sidenav md-list md-item{
	color:rgba(255,255,255,0.8) !important;
}
md-sidenav {
    fill: #fff !important;
}

md-sidenav .md-subheader.md-default-theme, md-sidenav .md-subheader {
    color: rgba(255,255,255,0.54);
    background-color: rgb(45,50,62);
}
/* .md-subheader .md-subheader-inner {
    padding: 3px 24px !important;
	font-size:11px;
	font-weight:500;
	color: rgba(255, 255, 255, 0.3);
	text-transform:uppercase;
} *
.menu_list md-list-item .inset{
	font-size:13px;
	padding:0 10px 0 0 !important;
    color: rgba(255, 255, 255, 0.7);
}

.menu_list md-list-item:hover, .menu_list md-list-item:focus {
    background-color: rgba(0, 155, 229, 1) !important
}
.menu_list md-list-item .md-button:hover, .menu_list md-list-item .md-button:focus {
    background-color: rgba(0, 155, 229, 0) !important
}
.menu_list md-list-item .md-button:hover .md-list-item-inner .inset, .menu_list md-list-item .md-button:focus .md-list-item-inner .inset{
    color: #fff !important;
}

.menu_list md-list-item {
	margin:0px;
}
.menu_list md-list-item .md-button {
    margin: 0px !important;
}
.menu_list md-list-item button {
	padding: 0 21px !important;
	margin:0px !important;
}
.menu_list md-list-item button:hover {
	background:#242832 !important;
}
.menu_list md-list-item .md-list-item-inner {
	line-height:44px !important;
}
.menu_list md-list-item .inset .material-icons {
	line-height: 51px !important;
	font-size: 18px;
	width: auto;
	height: auto;
}


.header-banner .device-title {
	margin-top: 0px;
	font-weight: 500;
	cursor: pointer;
	float: left;
	margin-bottom: 0px;
	color: #fff;
    line-height:45px;
}
.header-banner .device-title .back-arrow {
	float:left;
	margin-right:10px;
	line-height: 45px;
	font-weight: 900;
}
.header-banner .device-title h1{
	float: left;
}
.header-banner .device-title h1, .header-banner h1 {
	max-width: 450px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*float: left;*
font-size: 19px;
margin: 0px;
line-height: 45px;
color:#fff;
}
.header-banner .device-title  span{
}
.header-banner .device-title  span i.material-icons{
	font-size: 13px;
	margin-left: 5px;
	line-height: 45px;
}
.header-banner .device-title  span.device_sync i.material-icons{
    
    color: rgb(252, 233, 79);
}
.header-banner .device-title  span.device_online i.material-icons{
    
    color: rgb(69, 255, 0);
}

.header-banner .device-title  span.device_offline i.material-icons{
    color: rgb(111, 111, 111);
}

.header-banner .device-title  span.device_errorflag i.material-icons{
    color: rgb(253, 50, 50);
}

.user-icon {
	width:40px;
	height:40px;
	background:url(../images/avathar.png) #ebecf0 no-repeat bottom;
	background-size:80%;
	border-radius:50%;
	float:left;
	margin-top: 12px;
	margin-right: 10px;
}
.nirad_header .md-button{
	border-radius: 0px;
	margin: 0px !important;
	height: 64px;
	width:auto !important;
	color: #666 !important;
	border-left: 1px solid #eee;
	text-transform:capitalize !important;
	padding:0px 15px;
}
.nirad_header .user_dropdown p {
	line-height: 64px;
	padding-right: 20px;
	padding-top: 0px;
    margin-top: 0px;
    padding-left: 0px;
    margin-left: 0px;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.nirad_header .md-button.user_dropdown i {
	width: auto;
	height: auto;
	font-size: 13px;
	line-height: 64px;
	position: absolute;
	right: 15px;
	top:0;
}
.nirad_header .md-button.md-icon-button {
    height: 64px;
    line-height: 24px;
	border-radius:0px !important;
	padding:8px 15px !important;
}
.nirad_header md-menu-bar {
    padding: 0px;
}
.user-dropdown-menu{
/*position: absolute;*
right: 0;
top: 0;
}
/*.nirad_info md-card {
	background-color:#ec407a;
}
.dashboard_device_list md-card{
	background-color:#26a69a;
}
.dashboard_alerts  md-card{
	background-color:#5c6bc0;
}*

.nirad_info md-card md-card-content {
	padding-top:6px !important;
}
.dashboard_top_row md-card md-card-content {
	/*background-color:rgba(0,0,0,0.06);*
}

.nirad_info md-card md-card-content md-list-item .md-list-item-text p {
	/*color:#fff;*
	font-size: 12px;
}
.nirad_info md-card md-card-content md-list-item .md-list-item-text h3 {
	/*color:rgba(255,255,255,0.80);*
	color: rgba(0,0,0,0.70);
	padding-left:0px;
	font-size: 15px;
	margin-top: 3px;
}
.nirad-card-header-txt-white {
	font-size:15px;
	/*color:#fff;*
	font-weight: 500;
	text-transform:uppercase;
	position: relative;
}
.nirad_info md-card md-card-content md-list-item.md-2-line {
	min-height: 62px;
	height: 62px;
}
.nirad_info md-list-item .md-no-style, .nirad_info  md-list-item.md-no-proxy {
    position: relative;
    padding: 0 0px;
}

.nirad_info md-progress-linear.md-default-theme .md-container, .nirad_info md-progress-linear .md-container {
    background-color: rgba(0,0,0,0.09);
}
.nirad_info md-progress-linear.md-default-theme .md-bar, .nirad_info md-progress-linear .md-bar {
    /*background-color: rgba(255,255,255,0.8);*
}
.nirad_info  md-progress-linear {
	margin-top:9px;
}
.nirad_info md-list {
    padding: 0px 0;
}

table.table {
	width:100%;
	border-collapse: separate; 
  	border-spacing: 0px;
}

.dashboard_device_list md-card md-card-content, .dashboard_alerts md-card md-card-content
{
	/*height: 300px;*/


/* overflow-y: scroll;*
}

.dashboard_device_list .table thead tr th {
	/*color:#fff;*
	font-size:15px;
	text-align:left;
	font-weight:400;
	padding: 5px;
}

.dashboard_device_list .table tbody tr td {
	/*color:rgba(255,255,255,0.8);*
	font-size:13px;
	text-align:left;
	font-weight:400;
	padding: 10px 5px;
}
.dashboard_device_list .table tbody tr td.sync i, .hotspot_device_list .table tbody tr td.sync i{
    font-size:8px;
    color:#ffff00;
    line-height: 2;
}
.dashboard_device_list .table tbody tr td.online i, .hotspot_device_list .table tbody tr td.online i{
    font-size:8px;
    color:#00ff0a;
}
.dashboard_device_list .table tbody tr td.offline i, .hotspot_device_list .table tbody tr td.offline i{
    font-size:8px;
    color:#b9b9b9;
}
.dashboard_device_list .table tbody tr td.errorflag i, .hotspot_device_list .table tbody tr td.errorflag i{
    font-size:8px;
    color:#ff0000;
}
.alert_note {
	width: 100%;
	border-bottom: 1px solid rgba(0,0,0,0.07);
}
.alert-header {
	width:100%;
}
.alert_indication {
	width: 18px;
	height: 18px;
	line-height: 18px;
	color: #fff;
	border-radius: 3px;
	text-align: center;
	display: block;
	float: left;
	font-size: 12px;
	font-weight: 600;
	margin-right:10px;
}
.bg_clr_red {
	background-color:#d60d0d;
}
.bg_clr_yellow {
	background-color:#f2b540;
}
.alert_header_text {
	/*color:#fff;*
	font-size:14px;
	font-weight:400;
	float:left;
}
.alert_time {
	font-size:10px;
	float:right;
	color: rgb(3, 155, 229);
}
.clearfix {
	width:100%;
	clear:both;
}
.alert_content {
	padding:5px 0 5px 28px;
}
.alert_item {
	    color: rgba(0,0,0,0.70);
	font-size:12px;
	padding-left:15px;
}
.alert_item li {
	margin-bottom:5px;
}

.dashboard_device_list md-card .md-actions, .dashboard_device_list md-card md-card-actions {
    margin: 0px;
}
.dashboard_device_list md-card .md-actions .md-button, .dashboard_device_list md-card md-card-actions .md-button, .subscribers-list md-card-title md-card-actions .md-button.viewall-btn{
    margin-top: -10px !important;
	margin-bottom: -10px !important;
	padding: 10px;
	color: #039BE5;
	font-size: 11px;
	min-height: inherit;
	line-height: inherit;
	text-transform: uppercase;
	font-weight: 600;
}
.md-subheader.nirad_subheader .md-subheader-inner {
    padding: 0px 16px !important;
}

.nirad_tabs .md-tab {
    font-size: 13px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    white-space: nowrap;
    text-transform: capitalize;
    font-weight: 500;
	padding: 5px 24px;
}
.nirad_tabs md-tabs-canvas {
    height: 36px;
}
.nirad_tabs md-pagination-wrapper {
    height: 36px;
}
md-tabs.md-default-theme .md-tab.md-active, md-tabs .md-tab.md-active, md-tabs.md-default-theme .md-tab.md-active md-icon, md-tabs .md-tab.md-active md-icon, md-tabs.md-default-theme .md-tab.md-focused, md-tabs .md-tab.md-focused, md-tabs.md-default-theme .md-tab.md-focused md-icon, md-tabs .md-tab.md-focused md-icon {
        color: rgb(45,50,62);
}
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
    color: #039be5;
    background: #039be5;
}

.nirad_table tr th {
	font-size:13px;
	color: rgba(0,0,0,0.70);
	padding: 16px 8px;
	text-align:left;
	border-bottom: 2px solid rgba(0, 0, 0, 0.12);
	margin:0px;
}
.nirad_table tr td {
	font-size:13px;
	color: #757575;
	padding: 10px 8px;
	text-align:left;
	margin:0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	border-top: 0px !important;
	vertical-align: top;
	word-break: break-all;
}
.nirad_table tr td.online, .nirad_table tr td.offline, .nirad_table tr td.sync {
	text-align:center;
}
.nirad_table tr td.online i {
	color:#4caf50;
	font-size:9px;
	line-height: 2;
}
.nirad_table tr td.offline i {
	color:#CFCFCF;
	font-size:9px;
	line-height: 2;
}

.nirad_table tr td.active i {
	color:#4caf50;
	font-size:13px;
	line-height: 2;
	display:none;
}

.nirad_table tr td.active i.check {
	display:block;
	}
.nirad_table tr td.inactive i.lens {
	display:block;
	}

.nirad_table tr td.inactive i {
	color:#CFCFCF;
	font-size:13px;
	line-height: 2;
	display:none;
}

.padding-none {
	padding:0px !important;

}
.pading-right-10 { padding-right:10px; }
.pading-bottom-20 { padding-bottom:20px; }
.padding-10 { padding:10px;}
.margin-none{
	margin:0px !important;
}

.margin-top-none { margin-top:0px !important; }
.margin-8 { margin:8px;}
.margin_top_20 {
	margin-top:20px !important;
}
.margin_top_30 {
	margin-top:30px !important;
}
.margin_top_40 {
	margin-top:40px !important;
}

.btn-edit .material-icons, .btn-close .material-icons {
	font-size:17px !important;
}

.btn-edit, .btn-close {
	margin:-10px !important;
}
.padding-container {
	padding:8px;
}
.header_banner_buttons {
	/*float: right;*
	margin-right: 75px;
}

.device_info_banner .header_banner_buttons {
	/*margin-top:26px;*
} 
.header_banner_buttons .bredcrumbs, .header_banner_buttons .refresh-btn{
	background: rgba(0, 0, 0, 0.12);
    color: #FFFFFF;
    padding: 12.5px 10px 12.5px 10px;
    line-height: 20px;
    font-size: 14px;
	float:left;
	margin:0px;
	height: 45px;
	box-sizing: border-box;
}

.header_banner_buttons .bredcrumbs li {
	list-style:none;
	float:left;
}

.header_banner_buttons .bredcrumbs li .material-icons, .header_banner_buttons .refresh-btn .material-icons {
	margin: auto;
    background-repeat: no-repeat no-repeat;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
	color:#fff;
}
.header_banner_buttons .bredcrumbs li .material-icons {
	font-size: 18px;
	line-height: 1.1;
	margin-right: 3px;
}
.header_banner_buttons .bredcrumbs li {
	margin-right:5px;
}

.header_banner_buttons .bredcrumbs li:last-child {

}

.header_banner_buttons .bredcrumbs li.arrow .material-icons{
	font-size: 21px;
	opacity: 0.75;
}
.header_banner_buttons .refresh-btn .material-icons {
	font-size: 22px;
}
.header_banner_buttons .refresh-btn {
	margin-left:2px;
	cursor: pointer;
}

.header_banner_buttons .help-btn{
	background: rgba(0, 0, 0, 0.12);
    color: #FFFFFF;
    padding: 12.5px 10px 12.5px 10px;
    line-height: 20px;
    font-size: 13px;
	float:left;
	    margin: 0px 3px;
	height: 45px;
	box-sizing: border-box;
	cursor: pointer;
    font-weight: 600;
}

 .header_banner_buttons .help-btn .material-icons {
	margin: auto;
    background-repeat: no-repeat no-repeat;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
	color:#fff;
	    font-size: 18px;
    margin-right: 5px;
}

.help-link {
    font-size: 12px;
    font-weight: 600;
    color: #039be5 !important;
    display: inline-flex;
    text-transform: uppercase;
    cursor: pointer;
    margin-right: 10px;
    line-height: 25px;
}
.filter-bottom-sheet .help-link{
	float: right;
    margin-top: 7px;
    margin-right: 20px;
  }
.help-link:hover {
	text-decoration: none;
}
.help-link i.material-icons {
    margin-right: 3px;
    font-size: 19px;
    line-height: 24px;
}

.main_search md-input-container.md-input-theme .md-input {
    color: rgba(0,0,0,0.87);
    border-color: rgba(0,0,0,0.12);
    text-shadow: ;
    height: 64px;
    margin-top: 25px;
}

.md-button.btn-add {
   color: rgb(255,255,255);
	top: 8px !important;
	bottom: auto !important;
	right: 39px !important;
	position: absolute !important;
	background: #0579b2;
	z-index: 3;
}

.md-button.btn-add img {
    width: 23px;
    margin-top: 3px;
}

.md-button.md-fab:hover, .md-button.md-fab.btn-add.md-focused, .md-button.md-fab.md-focused{
	background-color: #039be5 !important;
	color: rgb(255,255,255);
}

.md-button.md-fab.btn-add:hover {
	background-color: #048fd3 !important;
}

.md-button.btn-add-firewall {
    float: right;
    margin-top: -29px !important;
    margin-bottom: -30px !important;
    margin-right: 10px !important;
	background: #039be5;
}

.md-button.md-fab.btn-add md-icon {
	line-height: 0.9;
}

.enterprise_details md-card-header {
	border-bottom:1px solid #ddd;
}

.enterprise_details md-card-header md-card-header-text {
	font-weight:600;
}

.enterprise_details ul {
	padding-left:0px;
}

.enterprise_details ul li{
	list-style:none;
}
.enterprise_details ul li span{
	font-size:12px;
	color:#757575;
}
.enterprise_details ul li h3{
	font-size:15px;
	color:#039be5;
	font-weight: 400;
	margin-top: 8px;
	word-break: break-all;
}

md-card-content .flex {
	/*margin: 0 10px;*
}
.hotspot-config md-input-container {
	/*margin: 0 10px;*
}

.nirad-card-header md-card-actions {
	margin:0px;
	padding:0px;
}
.nirad-card-header md-card-actions .md-button {
	margin: -3px 0px !important;
	padding: 5px 10px;
	line-height: inherit !important;
	min-height: inherit !important;
	color:#039be5;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.5px;
}



.nirad-table-2 tr th, .nirad-table-2 tr td{
	text-align:left;
	font-size:14px;
}
.nirad-table-2.table>thead>tr>th, .nirad-table-2.table>tbody>tr>th {
	color:#333333;
	font-weight:400;
	padding:9px;
	min-width: 100px;
	vertical-align: top;
	border-top:0px;
}
.nirad-table-2.table>thead>tr>td, .nirad-table-2.table>tbody>tr>td{ 
	color:#757575;
	font-weight:400;
	padding:9px;
	vertical-align: top;
	/*word-break: break-all;*
	word-wrap: break-word;
	border-top:0px;
}
.table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border-bottom-width: 2px;
}
.table-bordered>thead>tr>th {
    border: 1px solid #ddd;
	vertical-align: top;
}

.table-bordered>tbody>tr>th {
	border: 1px solid #ddd;
	vertical-align: top;
}

.table-bordered>tbody>tr>td {
    border: 1px solid #ddd;
	vertical-align: top;
}
.tbl-border-outline {
	border: 1px solid #ddd;
}
md-progress-linear.yellow_bar .md-bar {
    background-color: #ff9800;
}
md-progress-linear.blue_bar .md-bar
{
	background-color:#039be5;
}

md-progress-linear.red_bar .md-bar {
    background-color: #f44336;
}

md-progress-linear.red_bar .md-container, md-progress-linear.yellow_bar .md-container, md-progress-linear.blue_bar .md-container {
    background-color: #ebeaea;
}

.bar_value {
	color:#039be5;
	font-size:13px;
	font-weight:600;
}
.nirad_header_plane {
	font-size: 18px;
	font-weight: 600;
	padding-left: 10px;
	margin-top: 0px;
	margin-bottom: 10px;
}
.nirad_header_plane_right {
	font-size: 16px;
	font-weight: 400;
	padding-right: 10px;
	margin-top: 33px;
	margin-bottom: 7px;
}
.table-hover.no-pointer tbody tr:hover td { cursor:default; }

.table-hover tbody tr:hover td { background-color:rgba(3,155,229,0.15); cursor:pointer; }

.table-hover tbody tr:hover td.hover-none { background-color:#fff; cursor:auto; }
.pull-left { float:left; }
.pull-right { float:right; }

.firmware-update-info {
	float:left;
}
.firmware-update-info h3 {
	font-size:14px;
	margin-bottom:0px;
	color:#333;
}
.firmware-update-info span.noupdate-available{
	font-size: 13px;
	color: #999;
}
.firmware-update-info span.update-available{
	font-size: 13px;
	color: #43a047;
}
.firmware-update-info h3 span{
	color:#039be5;
}
.firmware-check-update {
	float:left;
	margin-left:40px;
}

.devider { width:100%; height:1px; background:#ddd; margin:30px 0; }

.file_input_div {
	width:100%;
}

.file_input {
  float: left;
  padding: 10px 15px;
  background: #039be5;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

#file_input_text_div {
 /* width: 200px;
  height:40px;
  margin-top: -8px;
  margin-left: 5px;*
  float:left;
}

#file_input_text_div .file_input_text {
	padding: 10px;
	font-size: 14px;
	background: #ebe9e9;
	border: 0px;
	width:200px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

.upload_btn {
	float:left;
	margin-left:30px;
}

.none {
  display: none;
}

.firmware-manual-update h3 {
	font-size:14px;
	font-weight:400;
}

.btn-green {
	color:#4caf50 !important;
	text-transform:none !important;
}
.btn-green md-icon { color:#4caf50 !important; }
.btn-green:hover, .btn-green:focus { background-color:rgba(76,175,80,0.10) !important; }

.btn-red {
	color:#f44336 !important;
	text-transform:none !important;
}
.btn-red md-icon { color:#f44336 !important; }
.btn-red:hover, .btn-red:focus { background-color:rgba(244,67,54,0.06) !important; }


/*button.md-primary:hover, button.md-primary:focus { background-color:rgba(3,169,244,0.06) !important; }*

.import-export-config .btn-red, .import-export-config .btn-green { margin-bottom:30px !important; }
.reboot-system h3{ font-size:16px; color:#444; font-weight:400; }

.reboot-link { color:#039be5; font-size:14px; }

.low, .medium, .high {  padding:2px 5px; border-radius:3px;}
.low { background:#629bee; color:#fff; }
.medium { background:#f2b540; color:#fff; }
.high { background:#f24535; color:#fff; }

.device-log-btns md-checkbox {
	background:#fff;
	padding:7px 10px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
	margin-right:15px !important;
}

.device-log-btns md-checkbox .md-container {
	left:10px;
}

.interfaces_titel {
	 background: #f7f7f7;
	color: #333;
	float: left;
	height: 48px;
	line-height: 48px;
	padding: 0 23px;
	margin-left: -22px;
	margin-right: 10px;
	font-size: 12px;
    display: none;
}

.extra-row th { padding:0px 10px !important;  }
.breakdown {
    padding-bottom: 8px !important;
	text-align: center !important;
	border-bottom: 0px !important;
}
.client { text-align:center !important; color:#f2b540 !important; font-weight:500; }
.server { text-align:center !important; color:#26a69a !important; font-weight:500;}


.table-real-time thead tr th.client, .table-real-time thead tr th.server {
	 border-bottom-width: 2px !important;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
}
.table-real-time thead tr th
{
	padding: 16px 8px 10px;
	border-bottom-width:2px;
}
.realtime-tab-content {  }

.interface_header_plane {
    font-size: 18px;
    font-weight: 600;
    padding-left: 10px;
    margin-bottom: 10px;
	margin-top:10px;
}
.interface_header_plane span{ color:#039be5; }

.clr-blue { color:#039be5 !important; }

md-tabs {
    border-radius: 0px !important
}


md-sidenav {
   height: 100%;
    overflow: hidden;
}
.side-menu, .side-menu ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
}

.backtodevices .md-button {
    color: #fff !important;
    background: rgba(3,155,229,0.1);
}

.backtodevices .md-button:hover{
    color: #fff !important;
    background: rgba(3,155,229,1) !important;
}

.backtodevices .md-button .inset.backicon {
    color: #039be5;
    font-size:19px;
}

.backtodevices .md-button:hover .inset.backicon {
    color: #fff;
}

.side-menu .md-button.active, .side-menu .md-button:hover, .side-menu a.md-button.active, .side-menu a.md-button:hover {
  color: #fff;
  background: #039be5;
}

.side-menu .menu-toggle-list a.md-button {
  display: block;
  padding: 0 16px 0 32px;
  text-transform: none;
  text-rendering: optimizeLegibility;
  font-weight: 500;
}

.side-menu .menu-toggle-list .md-button {
  display: block;
  padding: 0 16px 0 32px;
  text-transform: none;
}

.side-menu > li {
  border-top: 1px solid rgba(0, 0, 0, 0);
}

.md-button-toggle .md-toggle-icon.toggled {
  transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
}

.side-menu .md-button-toggle .md-toggle-icon {
  background-size: 100% auto;
  display: inline-block;
  margin: auto 0 auto auto;
  width: 15px;
  line-height: 16px;
  font-size: 15px;
  transition: transform .3s ease-in-out;
  -webkit-transition: -webkit-transform .3s ease-in-out;
}

.menu-toggle-list.ng-hide {
  max-height: 0;
}
.side-menu a.md-button {
    padding: 0 23px;
    position:relative;
}
.side-menu .parent-list-item menu-link {
    display: block;
}
.side-menu .subheader {
    padding: 10px 24px 5px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
}
.side-menu .md-button {
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font-weight: 400;
  margin: 0;
  max-height: 48px;
  overflow: hidden;
  /*padding: 0 21px;*
	padding: 0 10px 0 21px;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  width: 100%;
  margin: 0px !important;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.7);
}

.menu-toggle-list {
  background: #282c37;
  /*max-height: 300px;*
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
  -webkit-transition-property: max-height;
  -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
  -moz-transition-property: max-height;
  transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
  transition-property: max-height;
}


.side-menu .md-button span.menu-text{
    font-size: 13px;
    padding: 0 10px 0 0 !important;
    line-height: 48px;
    margin-left:35px;
}
.toggle-icon {
	position: absolute;
	right: 30px;
	top: 18px;
}
.side-menu .md-button span.inset {
    padding: 0px;
}

.side-menu .md-button span.inset .material-icons {
    line-height: 45px !important;
    font-size: 18px;
    width: auto;
    height: auto;
    position: absolute;
	top: 0px;
}

.menu-toggle-list .md-button span.menu-text {
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
}

md-content.popup-window {
    background-color: rgb(255,255,255) !important;
}

md-dialog.md-default-theme, md-dialog {
    border-radius: 2px;
}

.modal-header {
    width: 100%;
    padding: 15px;
    border-bottom: 2px solid #ddd;
}

.modal-header h3 {
    margin: 0px;
    font-weight: 400;
    font-size: 18px;
}

md-dialog md-content {
    overflow-y: auto !important;;
    overflow-x: hidden !important;
}

md-dialog md-tab-content md-content.overflow-hidden {
         overflow: inherit !important;
}

md-dialog {
    overflow: hidden !important;
    width: 40%;
}

md-dialog md-input-container .md-errors-spacer {
    min-height: 20px;
}

.create-admin-form {
    background: #f6f6f6;
    padding: 10px;
}

.creat-admin-header {
    font-size: 16px;
    font-weight: 500;
}
.radio-button-inline {
    margin-top: 18px;
    margin-bottom: 18px;
}
.radio-button-inline md-radio-button {
    float: left;
    margin-right: 45px;
}

md-radio-group.radio-button-inline md-radio-button:not(:first-child) {
    margin-top: 0px;
}

.table.device-log tr td {
    white-space: pre-wrap;
}

.md-toolbar-tools .md-button:focus {
    background-color: #fff !important;
}

.nirad_header md-toolbar {
    overflow: hidden;
}

.user-details {
    background: #039be5;
    text-align: center;
    padding: 10px;
    margin-top: -10px;
    color: #fff;
}
.user-icon-iner i{
    font-size: 45px;
    margin-top: 10px;
}

.user-details .user-name {
    font-size: 14px;
    font-weight: 500;
    padding-top:10px;
    display: block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.user-details .user-email {
    font-size: 12px;
    padding-top: 5px;
    display: block;

}
.user-menu {
	padding:0px !important;
}
.user-menu md-menu-item {
	height:auto !important;
}

.user-menu md-menu-item .md-button {
    margin: 0px !important;
    font-size: 13px;
    padding: 10px 20px !important;
    height: 45px !important;
    line-height: 26px !important;
}
.user-menu md-menu-item .md-button span{
    margin-left: 30px;
}
.user-menu md-menu-item .md-button i {
    font-size: 21px;
    color: #555;
    margin-right: 10px;
    position: absolute;
    top: 12px;
    left: 21px;
}
.user-menu md-menu-item .md-button i.logout-icon{
	font-size: 17px;
	padding-left: 3px;
	padding-top: 3px;
}

.interface-form md-input-container {
    margin: 0px;
}
.interface-form md-input-container .md-errors-spacer {
    min-height: 0px;
}
.wifi-field {
	/*background:#f9f9f9;
	margin-top: 30px;*
}

.wifi-field-header {
	font-size: 16px;
    font-weight: 600;
    margin-bottom: -20px;
    width: 100%;
	margin-left:15px;
	margin-top:30px;
}

.create-group-btn {
	margin-left: 10px;
    color: #039be5;
    margin-bottom: 10px;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
}
.md-button.btn-add-interface {
    color: rgb(255,255,255);
	top: 25px !important;
	bottom: auto !important;
	right: 39px !important;
	position: absolute !important;
	background: #039be5;
}
.interface-scroll {
    max-height: 90px;
}

.interface-list  {
	padding-left: 21px;
	margin: -5px 0;
	
}
.interface-list li {
	padding: 3px 5px;
border-bottom: 1px solid rgba(0,0,0,0.08);
}

.interface-scroll .ngsb-wrap .ngsb-scrollbar .ngsb-thumb-pos .ngsb-thumb {
	background: rgba(3, 155, 229, 0.5);
}
.interface-scroll .ngsb-wrap .ngsb-scrollbar .ngsb-track {
	background:none !important;
}
.interface-scroll .ngsb-wrap .ngsb-scrollbar .ngsb-thumb-pos:hover .ngsb-thumb {
  background: rgba(3, 155, 229, 0.8);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
  /* old ie *
}
.interface-scroll .ngsb-wrap .ngsb-scrollbar .ngsb-thumb-pos:active {
	background: rgba(3, 155, 229, 1);
  filter: "alpha(opacity=60)";
  -ms-filter: "alpha(opacity=60)";
  /* old ie *
}


.interface-contaier {
	border:1px solid #ddd;
}
.interface-container-header {
	border-bottom:1px solid #ddd;
	padding:10px;
	font-size: 13px;
	text-transform: uppercase;
}
.interface-contaier-body {
	padding:10px;
	height:150px;
	overflow-y:scroll;
}
.interface-contaier-body md-checkbox .md-label {
    font-size: 12px;
	margin-left: 23px;
	color:#757575;
}
.interface-contaier-body md-checkbox {
    margin-bottom: 10px;
}

.interface-contaier-body  md-checkbox .md-container {
    width: 15px;
    height: 15px;
}

.interface-contaier-body md-checkbox .md-icon {
    width: 15px;
    height: 15px;
    border-width: 1px;
	top: -3px;
}

.interface-contaier-body  md-checkbox.md-checked .md-icon::after {
    left: 4.67px;
    top: 2.22px;
    width: 4.67px;
    height: 9.33px;
}

.interface-contaier-body  md-checkbox.md-checked .md-icon {
    background-color: rgba(255,64,129,0.87);
}

.swap-icon {
	text-align:center;
}

.swap-icon i {
	color: #efefef;
	margin-top: 80px;
	font-size: 61px;
}

/****hideshow -checkbox*****
.interfaces-group md-checkbox {
	display:none;
}

.interfaces-group md-checkbox.md-checked {
	display:block;
}

.available-interfaces md-checkbox {
	display:block;
}

.available-interfaces md-checkbox.md-checked {
	display:none;
}

/*****Small Checkbox****
.sm-checkbox-group md-checkbox .md-label {
    font-size: 13px;
	margin-left: 23px;
	color:#757575;
}
.sm-checkbox-group md-checkbox {
    margin-bottom: 10px;
}

.sm-checkbox-group  md-checkbox .md-container {
    width: 15px;
    height: 15px;
}

.sm-checkbox-group md-checkbox .md-icon {
    width: 15px;
    height: 15px;
    border-width: 1px;
	top: -3px;
}

.sm-checkbox-group  md-checkbox.md-checked .md-icon::after {
    left: 4.67px;
    top: 1px;
    width: 4.67px;
    height: 9.33px;
}

.padding-left-10 {
	padding-left:10px;
}
.gray-bg {
	background:#f3f3f3;
	padding:10px;
}
.input-container-link {
	position:absolute;
	font-size:12px;
	right: 8px;
top: 11px;
}
a.input-container-link {
	color:rgb(255,64,129);
}
span.input-container-link {
	color:#999;
}
.model-sub-title {
	margin-bottom:10px;
	line-height: 1.5;
}
.model-sub-title small {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    padding-top: 5px;
}
.input-container-hint {
	color:#c2c2c2;
	font-size:10px;
}

.table-features {
	border:1px solid #ddd;
	margin-bottom:20px;
}

.table-features tr td {
	border-bottom:1px solid #ddd;
	padding:0px 10px;
}
.table-features tr td md-input-container {
	width:100%;
}

.table-features tr th {
    font-size: 13px;
    color: rgba(0,0,0,0.70);
    padding: 16px 8px;
    text-align: left;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    margin: 0px;
}

.dialog-lg {
	width:80%;
}
.dialog-xl {
	width:90%;
	max-width:90% !important;
}
.dialog-mid {
	width:60%;
}
.dialog-sm {
	width:50%;
}
.dialog-sm-40 {
	width:40%;
}
.dialog-sm-30 {
	width:30%;
}
.dialog-xs {
	width:25%;
}
.dialog-tab-holder {
	background:#f7f7f7;
	margin:0 10px 0 10px;
}




.sub-table-container {
	-webkit-box-shadow: inset 0px 5px 8px -6px rgba(0,0,0,0.29);
-moz-box-shadow: inset 0px 5px 8px -6px rgba(0,0,0,0.29);
box-shadow: inset 0px 5px 8px -6px rgba(0,0,0,0.29);
}
.sub-table {
	padding: 20px !important;
	position:relative;
}
.bg-gray {
	background: #f6f6f6;
}
.sub-table .table {
	border:1px solid #ddd;
	margin-top: 15px;
}

.rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.btn-collapse {
	background: #efefef;
border: none;
padding: 14px 10px;
}
.td-padding-none {
	padding:0px !important;
}

.btn-collapse:hover, .btn-collapse.open {
	background: rgb(255,64,129);
	color:#fff;
}
.btn-collapse:hover .material-icons, .btn-collapse.open .material-icons {
	color:#fff;
}
.sub-table .md-fab.btn-add-logical-interface {
    color: #fff;
    top: 9px;
    bottom: auto;
    right: 39px;
    position: absolute;
	
    width: 40px;
    height: 40px;   
}
.btn-add-tab {
    padding: 5px;
    position: absolute;
    right: 16px;
    top: 28px;
    border: 0px;
	background: rgb(255,64,129);
}
.btn-add-tab .material-icons {
	color:#fff;
}
.btn-blue-sm {
    padding: 5px 10px;
    background: #039be5;
    font-size: 11px;
    border-radius: 2px;
    color: #fff;
    font-weight: 500;
	cursor:pointer;
}
.logial_interfacesHeader {
	border-bottom:1px solid #ddd;
	text-transform:uppercase;
	font-weight:600;
}
.logial_interfacesHeader a {
	margin-right:10px;
	color: #039be5;
	cursor:pointer;
}
.logial_interfacesHeader span {
	color: #039be5;
	margin-left: 5px;
}

td.td-menu .md-button.md-icon-button{
    min-height: 25px;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 25px;
    margin: 0px !important;
    padding: 0px;
}
.nirad_table tr td.td-menu {
    padding: 0px 8px;
    vertical-align: middle;
}
.small-menu md-menu-item .md-button {
    font-size: 12px;
	font-weight:500;
    padding: 6px 15px;
    min-height: auto;
    height: 30px;
    line-height: 20px;
    margin: 0px !important;
    display: block;
}
.small-menu md-menu-item {
    height: 30px;
    line-height: 30px;
    min-height: 30px;
}
.text-center {
	text-align:center !important;
}
.btn-link {
	color:#039be5;
	cursor:pointer;
}
.host-name, .profile-name {
    vertical-align: middle !important;
    text-align: center !important;
    border-right: 1px solid #ddd;
}

.child-table tr td {
	padding: 0px 5px 2px 0 !important;
	border: 0px;
}

.profile-switch-list {
	width:100%;
	display:block;
	overflow:hidden;
}
.profile-switch-list .list-name {
	float:left;
	padding:15px 0;
	font-size:14px;
}
.profile-switch {
	float:right;
	margin: 10px;
}
.profile-switch-container {
	/*border-bottom:1px solid #ddd;*
	width:100%;
	display:block;
	overflow:hidden;
	margin-bottom:15px;
}
.text-right {
	text-align:right !important;
}

.profile-content md-select .md-select-value.md-select-placeholder {
    color: #999;
    font-size: 13px;
    font-weight: normal;
    pointer-events: none;
    padding-bottom: 7px !important;
    margin-top: -9px;
}
.profile-content md-select {
    font-size: 13px;
}
.profile-content md-select .md-select-value {
    min-height: 23px;
}
.profile-content .table tr td {
	font-size:14px;
}
.profile-content .table td md-input-container {
    margin: 13px 0 5px 0;
}

md-input-container label:not(.md-no-float):not(.md-container-ignore) {
    text-align: left;}
    
.layout-column>md-input-container.flex {
     min-height: auto;
}
.table-border-box {
	border:1px solid #ddd;
}
.wlan-table tr th {
	/*width:30%;*
}

.wlan-table.nirad-table-2 tr td {
	    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;
    white-space: nowrap;
}


.table-noborde {
	margin-bottom:30px;
}
.table-noborder tr th, .table-noborder tr td {
	font-size:14px;
	text-align:left
}    
md-input-container label:not(.md-container-ignore).md-required:after {
    display:none;
}
.inner-table tr th, .inner-table tr td {
	padding-top:4px !important;
	padding-bottom:4px !important;
}
.top-right-dialog-btn {
    /*position: absolute !important;
    top: 2px;
    right: 9px;*
}
.edit-interface-container .nirad-table-2 tr td:last-child{
	width:55%;
}
.capitalize {
    text-transform: capitalize;
}
.add-logical-interfaces .nirad-table-2 tr th {
	width:30% !important;
}

.overflow-ellipses {
	max-width:100px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dialog-lg1 {
	overflow: hidden !important;
    width: 40%;
}
.nirad_header h3{
	padding-left:16px;
	max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
md-sidenav {
   width: 230px !important;
   max-width: 230px !important; 
   min-width: 230px;
}

.header-banner-holder {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 64px;
    padding-left: 230px;
    z-index: 8;
    box-sizing: border-box;
}
.super-user-page .header-banner-holder {
	padding-left: 0px !important;
}
.dialog-md-toolbar {
	padding: 0 10px;
	border-bottom: 2px solid #ddd;
}

md-dialog > form {
	margin-bottom:0px;
}
.nirad-dialog md-dialog-actions .md-button {
	margin-left:10px !important;
}

/***********************************************************New Changes 12-07-2017*


.firmware-table md-checkbox {
	margin-bottom:0px;
}

.firmware-btns .md-button {
	float:right;
	margin-left:20px !important;
}
.date-picker label{
	right:auto !important;
}
.date-picker .md-button {
	top: -13px !important;
}
.date-picker .md-datepicker-input-container {
	margin-left:0px !important;
}
.nirad-date-picker .md-datepicker-input-container {
    width: 100%;
    padding-left: 25px;
    box-sizing: border-box;
    margin-left: 0px !important;
        
}
.nirad-date-picker .md-datepicker-button {
    position: absolute;
    top: -13px !important;
        left: -2px;
        width: auto !important;
        padding-left: 0px !important;
        z-index:4;
}
.nirad-date-picker .md-datepicker-input-container .md-datepicker-triangle-button {
    right: 10px;
}
.nirad-date-picker .md-datepicker-button md-icon {
	    margin: 0px
}
.nirad-date-picker label {
	left: 25px !important;
}
.time-picker {
	 position: relative;
}
.time-picker mdp-time-picker md-input-container {
	width:100%;
}
.time-picker mdp-time-picker md-input-container input {
	padding-right: 32px;
}
.time-picker mdp-time-picker .md-icon-button.md-button{
	position: absolute;
    right: 0;
    cursor: pointer;
    z-index: 1;
}
.time-picker i {
    position: absolute;
    top: 13px;
    right: 5px;
    color: #737373;
    font-size: 24px;
    cursor: pointer;
}
 md-toolbar.md-hue-1:not(.md-menu-toolbar) {
    background-color: #039be5 !important;
    color: #fff !important;
}
.version-list {
	margin-top:30px;
}
.card-footer .btn{
	margin-left: 5px !important;
    min-height: auto !important;
    height: auto !important;
    line-height: normal !important;
    font-size: 13px;
    padding: 5px 15px !important;
    border-radius: 2px;
    font-weight: 600;
}
.btn-schedule {
	/*position:absolute !important;
	left:0;
	bottom: 15px;*
}
.card-footer {
    background: #f9f9f9;
    margin: 0px;
    padding: 5px 10px;
    border: 1px solid #ddd;
	width:100%;
	position:relative;
}
.card-footer  md-input-container {
	margin-bottom:0px;
}
.card-footer-container {
	position: fixed;
	bottom: 0px;
	width: 100%;
	left: 0;
	right: 0;
	padding-left: 242px;
    padding-right: 36px;
	box-sizing: border-box;
}
.footer-space {
	width:100%;
	height: 60px;
}

.time-pick md-hours-minutes md-input-container {
	width: 38% !important;
	margin:0px;
}
.time-pick .time-colon {
	width:10px;
	position:inherit;
}
.label {
    font-size: 12px;
    color: rgb(3,169,244);
}
.totalDeviceInfo small {
	color: rgb(3,169,244);
	cursor:pointer;
}


.tr-checkbox md-checkbox .md-container {
	width: 18px;
	height: 18px;
}
.tr-checkbox md-checkbox .md-icon {
	width: 18px;
	height: 18px;
	border-width: 1px;
}
.tr-checkbox md-checkbox:not(.md-checked) .md-icon {
    border-color: rgba(0,0,0,0.34);
}
.tr-checkbox md-checkbox {
    margin-bottom: 0px;
}
.tr-checkbox tr td:first-child , .tr-checkbox tr th:first-child  {
	max-width: 15px;
}

.tr-checkbox md-checkbox.md-default-theme.md-checked .md-icon, .tr-checkbox md-checkbox.md-checked .md-icon {
    background-color: rgb(3, 169, 244);
}



.checkbox-label md-checkbox {
    margin-bottom: 0px;
}
.checkbox-label md-checkbox .md-container{
	display:none;
}
.checkbox-label md-checkbox .md-label {
	margin-left:0px;
}


.checkbox-label md-checkbox .label_fill{
	display:none;
	color:#039be5;
}
.checkbox-label md-checkbox .label_outline {
	display:block;
	color:#c0c0c0;
}
.checkbox-label md-checkbox.md-checked .label_fill{
	display:block;
}


/* .checkbox-label md-checkbox .label{
	display:none;
}
.checkbox-label md-checkbox .label_outline {
	display:block;
	color:#c0c0c0;
}
.checkbox-label md-checkbox.md-checked .label{
	display:block;
} *
.checkbox-label md-checkbox.md-checked .label_outline {
	display:none;
}
.label-text, .label-default {
	font-size: 11px;
	padding: 1px 5px;
	color: #fff;
	position: relative;
	top: 2px;
	border-radius: 2px;
}
.label-text {
	background: #039be5;
}
.label-default {
	background: #999;
}

.label-list {
    /*position: absolute;
    top: -1px;
    left: 25%;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 37px;
    line-height: 19px;*
	 background: #fff;
    width: auto;
    margin-right: 15px;
    height: 45px;
	border-radius: 2px;
	margin: 8px;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
	box-sizing: border-box;
	float:left;
}
.label-list .md-button {
	margin:0px !important;
	width: 85px !important;
	height: 45px !important;
}
.label-list .md-button i {
    font-size: 20px;
	float: left;
	margin-right: 5px;
	color: #6C6C6C;
}
.label-list .md-button span {
    float: left;
    line-height: 18px;
	color:#555;
	font-size: 10px;
}

.label-list-items md-menu-item .md-button {
    min-height: 20px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
	margin: 0px !important;
}
.label-list-items md-menu-item {
    height: 30px;
    min-height: 30px;
}
.label-list-items {
	padding-top:0px;
}
.menu-content-title {
    font-size: 9px;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
    letter-spacing: 0.5px;
	padding-top: 4px;
}

.filter-group {
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
	background: #fff;
	margin: 8px;	
    border-radius: 2px
}
.filter-group .filter{
	margin: 0;
    box-shadow: none;
        border-right: 1px solid #ededed;
    border-radius: 0px;
}

.filter.date-filter md-input-container {
	margin:0px !important;
}

.filter {
    background: #fff;
    width: 170px;
    margin-right: 15px;
    height: 45px;
	border-radius: 2px;
	margin: 8px;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
	box-sizing: border-box;
	float:left;
}

.filter md-select .md-select-value {
	min-height: 16px;
	font-size: 13px;
	border-bottom:0px;
}
.filter md-select:focus:not([disabled]) .md-select-value {
	border-bottom:0px;
}
.filter img {
    width: 17px;
	opacity: 0.5;
	margin-top: 14px;
	margin-left: 6px;
}
.new-tag-holder{
	padding:3px 0 3px 10px;
}
.creat-new-tag input{
	border: 1px solid #ddd;
	font-size: 12px;
	padding: 5px;
	width: 100%;
}
.creat-new-tag .btn-small {
	width:100%;
	color: #039be5 !important;
	width: auto;
	padding: 0px 9px;
}
.searchbox {
	background: #fff;
    width: 200px;
    margin-right: 15px;
    height: 45px;
	border-radius: 2px;
	margin: 8px;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
	box-sizing: border-box;
	float:left;
	position:relative;
}
.searchbox input {
	border: 0px;
	width: 100%;
	padding: 12px;
	padding-left: 32px;
	font-size: 14px;
	color: #555;
}
.searchicon {
    position: absolute;
    background: none;
    border: 0px;
    top: 11px;
    padding-left: 3px;
    color: #999;
}

.thin-checkbox md-checkbox .md-container {
	width: 16px;
	height: 16px;
}
.thin-checkbox md-checkbox .md-icon {
	width: 16px;
	height: 16px;
	border-width: 1px;
}
.thin-checkbox md-checkbox:not(.md-checked) .md-icon {
    border-color: rgba(0,0,0,0.34);
}
.thin-checkbox md-checkbox {
    margin-bottom: 0px;
}

.thin-checkbox md-checkbox.md-default-theme.md-checked .md-icon, .tr-checkbox md-checkbox.md-checked .md-icon {
    background-color: rgb(3, 169, 244);
}
.thin-checkbox md-checkbox .md-label {
    color: #565656;
    font-size: 14px;
	margin-left: 25px;
}
.thin-checkbox md-checkbox.md-checked .md-icon::after {
    width: 5.66667px;
    height: 12.33333px;
}

.cb-main {
	padding-top: 15px;
	padding-bottom: 10px;
}
.cb-sub {
	padding-bottom: 10px;
	padding-left: 27px;
}
.cb-sub.thin-checkbox md-checkbox {
	margin-bottom: 10px !important;
}
.radio-btn-group md-radio-button {
    width: auto;
    float: left;
    margin-right: 20px;
}
.radio-btn-group md-radio-button .md-label {
	color: #565656;
	font-size: 14px;
	margin-left: 25px;
}
.radio-btn-group md-radio-button .md-container {
    width: 18px;
    height: 18px;
}
.radio-btn-group md-radio-button .md-off, .radio-btn-group md-radio-button .md-on {
    width: 17px;
    height: 17px;
}
.radio-btn-group md-radio-button .md-off {
    border-width: 1px;
}
md-dialog md-input-container small, .hint-text {
    font-size: 10px;
    color: #787878;
}

.hint-text{
	position: relative;
	top: -20px;
}
.network-select {
	margin: 0px;
}
md-select.network-select .md-select-value.md-select-placeholder {
    padding-bottom: 0px !important;
    margin-top: 0px;
}

md-select.network-select .md-select-value {
	padding: 0px;
	min-height: auto;
}
.md-button.md-fab.btn-add-small {
	width: 35px;
	height: 35px;
	float: right;
	margin-top: -10px !important;
	margin-bottom: -17px !important;
	margin-right: 10px !important;
	background: #039be5;
}

md-icon > svg {
  height: inherit;
  width: inherit;
}
md-icon { min-height: initial !important }


.device-dashboard md-card md-card-title {
    padding: 10px 16px 10px;
    height: 30px;
    overflow: hidden;
    max-height: 30px;
    display: inline-table;
}


.device-dashboard md-card md-card-title .md-headline {
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
}
.on-offline-list {
    float: right;
    position: absolute;
    right: 10px;
    text-transform: capitalize;
    color: #757575;
    top: 3px;
}
.on-offline-list span {
	color: #222;
	font-weight: 900;
}
/*28-07-2017*
.db-sm-box p {
	margin-top: 0px;
	margin-bottom: 3px;
	font-size: 12px;
	text-transform: uppercase;
}
.db-sm-box h3 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 16px;
	font-weight: 400;
	color: #039be5;
}
.db-sm-box h3 small {
	font-size: 12px;
}
.db-sm-box {
	padding-top: 5px;
	padding-bottom: 5px;
}
.db-sm-box md-progress-linear {
    margin-top: 10px;
    margin-bottom: 5px !important;
}
.dashboard_alerts md-card-content {
    /*height: 169px !important;*
}
md-card md-card-content.bg-blue {
    background-color: rgb(3, 155, 229);
	color: rgba(255,255,255,0.9);
}
.bg-blue h3 {
	color:#fff;
}
.bg-blue md-progress-linear .md-bar {
    background-color: #fff;
}
.bg-blue md-progress-linear .md-container {
    background-color: rgba(0,0,0,0.1);
}

.horizontal-rb md-radio-button {
	float:left;
}

.radio-btn-sm md-radio-button .md-off, .radio-btn-sm md-radio-button .md-on {
    width: 13px;
    height: 13px;
}
.radio-btn-sm md-radio-button .md-off {
    border-width: 1px;
}

.radio-btn-sm md-radio-button .md-container {
    width: 13px;
    height: 13px;
}

md-radio-group.radio-btn-sm md-radio-button {
	margin: 0 10px 0 0;
}
.radio-btn-sm md-radio-button .md-label {
    margin-left: 17px;
    font-size: 13px;
	line-height: 1;
	font-weight: 400;
}


.green-rb {
	color: #42aa42;
}
md-radio-button.green-rb .md-on {
    background-color: rgb(67, 169, 67);
}

md-radio-button.green-rb.md-checked .md-off, md-radio-button.green-rb .md-off {
    border-color: rgb(65, 167, 65);
}

.blue-rb {
	color: #3685bd;
}
md-radio-button.blue-rb .md-on {
    background-color: rgb(54, 133, 189);
}

md-radio-button.blue-rb.md-checked .md-off, md-radio-button.blue-rb .md-off {
    border-color: rgb(54, 133, 189);
}

.host-count {
    padding-left: 10px;
    margin-bottom: 5px;
    margin-top: 0px;
	text-transform: uppercase;
}
.host-count span {
	color: rgb(3, 155, 229);
}

.alert-count {
	background-color: #e74c3c;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	position: absolute;
	right: 7px;
	top: 18px;
}
.alert-menu {
	width: 300px;
	height: 300px;
}
.alert-container .alert_note{
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	box-sizing: border-box;
	cursor: pointer;
}
.alert-container .alert_note:focus {
	outline:0px;
	}
	
.alert_note.read {
    background: #f2f2f2;
}
.search-box {
	width: 300px;
    position: relative;
    right: auto;
	top: auto;
}
.url-search-box {
	width: 300px;
    position: absolute;
    right: 0px;
	top: -6px;
}
.url-search-box input {
    border: 1px solid #ddd;
	border-radius: 15px;
	padding: 5px 15px 5px 40px;
	font-size: 13px;
	width: 100%;
}
.search-box input {
    border: 1px solid #ddd;
	border-radius: 15px;
	padding: 5px 15px 5px 40px;
	font-size: 13px;
	width: 100%;
}
.search-icon {
    position: absolute;
    left: 10px;
    top: 4px;
    color: #c1c1c1;
    font-size: 21px !important;
    border-right: 1px solid #ddd;
    padding-right: 5px;
}

.time-sort {
    margin-top: 15px;
}

.host-time-sort
{
	position: absolute;
left: 80px;
top: 5px;

}
.graph-holder {
	overflow: hidden;
}
.morris-hover {
    position: absolute;
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0% 0%;
    border: 2px solid rgb(221, 221, 221);
    border-radius: 8px;
    padding: 5px;
    font-size: 12px;
}
.table-device-graph {
	height: 50px;
	overflow: hidden;
}
.table-device-graph svg {
    margin-left: -37px;
}
.table-device-graph .morris-hover-point{
	display: none;
}
.table-device-graph .morris-hover {
    position: absolute;
    background: rgba(255, 255, 255, 1) none repeat scroll 0% 0%;
    border: 2px solid rgb(221, 221, 221);
    border-radius: 2px;
    padding: 1px 5px;
    font-size: 10px;
}
.table-device-graph text tspan {
	font-size: 9px;
}


.table-device-graph path {
    stroke-width: 1px;
}
.devices-up-down-chart path{
    /*stroke-width: 2px;
    stroke: #f00;*
}

.usage-list {
    overflow: hidden;
    height: 60px;
    max-height: 63px;
}
.device-on-off-graph {
	height: 180px;
}

.graph-height {
	height: 250px;
}


.td-brake-all {
    word-break: break-all !important; 
}
.password-field .psw-show-hide {
	display:none;
}
.password-field.md-input-has-value .psw-show-hide {
	display:block;
}
.psw-show-hide .md-container {
	display:none;
}
.psw-show-hide 
{
position: absolute;
right: 5px;
top: 2px;
}
.psw-show-hide span i {
    font-size: 20px;
    color: rgba(0,0,0,0.6);

}
.change-psw-title h1 a, .forgot-psw-title h1 a{
     font-size: 21px;
    font-weight: 500;
    color: #555;
	 text-transform: uppercase;
	 text-align:left;
}
.change-psw-title h1 a i, .forgot-psw-title h1 a i{
	color: #039be5;
    position: relative;
    bottom: -4px;
    font-weight: 600;
}
.change-psw-title h1, .forgot-psw-title h1 {
 margin-top:0px;
 margin-bottom: 10px;
     text-align: left;
 /*color: #039be5;*
    font-size: 21px;
    font-weight: 500;
    text-transform: uppercase;
}

/*.change-psw-title h1 i, .forgot-psw-title h1 i {
    font-weight: 900;
    font-size: 37px;
    position: relative;
    bottom: -8px;
}*
 .forgot-psw-title form p{
    font-size: 15px;
    color: #757575;
    margin-bottom: 30px;
    text-align: left;
}
.forgot-psw-title {
	position: relative;
}
.forgot-psw-title h1{
padding-left: 30px;
}
.forgot-psw-title h1 a i {
	position: absolute;
    left: 0px;
    bottom: inherit;
    top: 0;
}
.signin_holder .additional-info {
    text-align: center;
    font-size: 14px;
    color: #fff;
	padding: 0px 20px 25px;
	letter-spacing: 0.5px;
}
.nv-legendWrap, .nv-controlsWrap {
	display: none;
}
.table-scroll{
	/*height:300px !important;*
	overflow-x:auto !important;
}
.table-devider {
	width:100%;
	height:40px;
	clear:both;
}
md-card md-card-title {
    padding: 15px 15px 10px !important;
    border-bottom: 1px solid #e2e2e2 !important;
}
.md-headline {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
}
.table-devider {
	width:100%;
	height:40px;
	clear:both;
}
md-card md-card-title {
    padding: 15px 15px 10px !important;
    border-bottom: 1px solid #e2e2e2 !important;
}
.md-headline {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
}
.file-download, .firmware-dld {
	position:relative;
	cursor:pointer;
}
.file-download:focus, .firmware-dld:focus{
	outline: 0px;
}
.file-download i.download {
	    position: absolute;
    left: 14px;
    color: #fff;
    font-size: 10px;
    top: -1px;
    background: #757575;
    border-radius: 50%;
    padding: 1px;
    border: 1px solid #fff;
        box-sizing: content-box;
}
.file-download:hover i.download{
	background:#21ae5e;
	font-size: 14px;
	top: -3px;
	left: 12px;
	padding: 2px;
}
.firmware-dld .download{
    position: absolute;
    font-size: 10px;
    left: 9px;
    top: -10px;
    background: #757575;
    color: #fff;
    padding: 2px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #fff;
        box-sizing: content-box;
}
.firmware-dld:hover i.download{
	background:#21ae5e;
	font-size: 14px;
	top: -12px;
	left: 7px;
	padding: 2px;
}
.choose-file {
	position:relative;
	width: 250px;
    float: left;
    background: #fff;
    margin-right: 15px;
    height: 45px;
    border-radius: 2px;
    margin: 8px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    box-sizing: border-box;
    float: left;
}
.choose-file label {
    position: absolute;
    top: 5px;
    font-size: 10px;
    color: #039be5;
    left: 10px;
    font-weight: 500;
}
.choose-file md-input-container {
	margin: 0px;
}
.choose-file input{
    margin-top: 21px;
    font-size: 12px;
    margin-left: 9px;
}
.settings-table {
	min-width:45%;
}
.settings-table tr td{
    border-bottom: 1px solid #eee;
    padding: 15px 5px;
 }
 .hotspot-title {
     display: flex;
    flex-direction: row;
 }
  .hotspot-title md-switch {
          margin: -5px 0 0 40px !important;
  }
  
.cmd-holder {
	overflow:hidden;
	    position: relative;
	        width: calc(100% - 120px);
    background: #000;
    padding: 0;
    height:40px;
}
.cmd-btns .md-button {
	margin:0px !important;
	    height: 40px;
}
.cmd-prompt-divename{ 
  /*position: absolute;
    z-index: 9;
    color: #fff;
        top: 23px;
    left: 19px;*
    color: #039be5;
    font-size: 13px;
    width: auto;
    white-space: nowrap;
    word-break: keep-all;
    height: 40px;
    background: #000;
    line-height: 40px;
    padding-left: 10px;
}
.cmd-prompt {
	padding: 5px 10px 5px 5px;
    height: 40px;
    width: auto;
    color: #fff;
    resize: none;
    vertical-align: middle;
    font-size: 13px !important;
        width: 100%;
    background: transparent;
    border: 0;
}
.cmd-prompt:focus {
	outline:0px;
}
md-card-actions.cmd-actions {
	    margin-top: 0px;
    margin-bottom: 5px;
}
md-card-actions.cmd-actions .md-button {
	    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left:10px !important;
}
.logs_nots{
	    height: calc(100vh - 229px);
    box-sizing: border-box;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 5px;
    color: #fff;
    font-size: 15px !important;
    background: #000 !important; 
}
.logs_format{
	margin-top: -40px;
    margin-left: 8px;
}
.logs-holder {
	padding:10px !important;
}
.config-container {
	
}
.config-item {
	/*border:1px solid #eee;*
	    box-sizing: border-box;
	    margin-bottom:10px;
	        background: #fff;
	        box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
} 
.config-item .item-header{
    display: flex;
    flex-direction: row;
}
.config-item .item-content {
	border-top: 2px solid #eee;
}
.config-item .item-header .md-button {
	margin: 0px !important;
    width: 35px;
    box-sizing: border-box;
    border-radius: 0;
    border-left: 1px solid #ddd;
        min-height: 35px;
    height: 35px;
}
.config-item md-switch {
	    padding: 3px 15px;
	margin:0px;
	width: 100%;
	    box-sizing: border-box;
	    height: 35px;
}
.config-item .item-header md-switch.md-inverted .md-container {
     margin-right: 8px; 
     margin-left: 0px; 
}
.config-item .has-item-content md-switch {
	width: calc(100% - 35px);
}
.config-item md-switch .md-label, .item-header.select-box-item label.select-box-title {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
}
.config-container .config-item md-switch.md-checked {
	    /*border-bottom: 2px solid #eee;*
}
.config-item md-switch{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.splash-page-card {
	background: transparent;
	    box-shadow: none;
}
.item-content {
	padding:10px;
}
.choose-file-btn {
	height: 38px;
    display: block;
}
.choose-file-btn .md-button {
	margin: 0px !important;
}
.upload-btn-holder .md-button{
	float:left;
}
.upload-btn-holder p{
	float: left;
    padding: 7px;
    margin: 0;
    font-size: 14px;
}
.item-header.select-box-item {
	display: flex;
    justify-content: space-between;
    padding: 3px 15px;
}
.item-header.select-box-item md-select{
	margin:0px;
}
.item-header.select-box-item label.select-box-title{
    line-height: 30px;
}

/************************************
**************Splash Page Preview****
.splas-page-preview .video-container {
	width:100%;
	height:210px;
	overflow:hidden;
	}
.splas-page-preview .video-container video {
	width: 100%;
}
.splas-page-preview .video-container img {
	max-width: 100%;
	max-height: 100%;
	 width: 100%;
	 height: 100%;
}
.splas-page-preview {
	position: relative;
    width: 100%;
    height: auto;
    background: #eee;
    display: block;
    overflow: hidden;
        padding: 20px 0;
            z-index: 1;
}
.splas-page-preview .hotspotpage-wrapper {
	/*min-width: 300px;*
    width: 90%;
    max-width: 340px;
		margin: auto;
		background-color: #fff;
		box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
			rgba(0, 0, 0, 0.19);
		/*position: absolute;
		top: 40px;
		bottom: 40px;
		left: 0;
		right: 0;*
		border-radius: 2px;
		overflow: hidden;
        height: auto;
            position: relative;;
            background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.splas-page-preview .logo-wrapper {
    width: 100%;
	position: absolute;
	z-index: 1;
}
.splas-page-preview .text-wrapper {
	width:auto;
	position: absolute;
	z-index: 1;
}

.splas-page-preview .preview-text-wrapper {
	width:100%;
	position: absolute;
	z-index: 1;
}



.splas-page-preview .page-title {
	text-align: center;
	font-size: 22px;
	font-weight: 500;
	margin-top: 55px;
	text-align: center;
	color: #555;
}

.splas-page-preview .drag-page-title {
/* 	text-align: center; *
	font-size: 22px;
	font-weight: 500;
	/* margin-top: 55px; *
	text-align: center;
	color: #555;
}

.splas-page-preview .drag-page-title p {
	word-break: break-all;
}

.splas-page-preview .page-title span {
	color: #039be5;
}

.splas-page-preview .login-form {
	/*min-width: 270px;*
	width:90%;
	max-width:300px;
	margin: 31px auto;
}
.splas-page-preview input:-webkit-autofill, .splas-page-preview input:-webkit-autofill:hover, 
.splas-page-preview input:-webkit-autofill:focus, 
	.splas-page-preview textarea:-webkit-autofill, .splas-page-preview textarea:-webkit-autofill:hover
	.splas-page-preview textarea:-webkit-autofill:focus, .splas-page-preview select:-webkit-autofill, .splas-page-preview select:-webkit-autofill:hover,
	.splas-page-preview select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
	transition: background-color 5000s ease-in-out 0s;
	border-color: #039be5 !important;
	border-width: 0 0 1.5px !important;
}

.splas-page-preview .input-container {
	position: relative;
	margin-bottom: 15px;
}

.splas-page-preview .input-container i {
	position: absolute;
	bottom: 11px;
	font-size: 19px;
	color: #555;
}

.splas-page-preview .input-container input {
	width: 100%;
	padding: 5px 5px 10px 30px;
	border-width: 0 0 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.12);
}

.splas-page-preview .input-container input:focus {
	border-color: #039be5;
	outline: 0px;
	border-width: 0 0 1.5px;
}

.splas-page-preview .login-btn {
	width:100%;
	height: 40px;
	line-height: 40px;
	background: #039be5;
	color: #fff;
	border: 0px;
	border-radius: 2px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0
		rgba(0, 0, 0, 0.15);
	cursor: pointer;
	margin-top: 15px;
}
.splash-config-error .fill-data-error{
	display: block;
    font-size: 12px;
    text-transform: none;
    font-weight: 500;
    color: #f00;
}
.fill-data-error {
	display:none;
}
.config-item md-switch .md-label{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding-right: 15px;
}
.login-btn-disable {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: #ddd;
	color: #999;
	border: 0px;
	border-radius: 2px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1), 2px 2px 2px 0 rgba(0, 0, 0, 0.18);
    cursor: not-allowed;
	margin-top: 15px;
}
.signup-link{
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: #555;
}
.signup-link div {
text-decoration: none;
    color: #555;
    }
.signup-link span.link, .signup-link a {
    /*  text-transform: uppercase; *
    font-weight: 600;
    color: #039be5;
   }
 .signup-link a:hover{
    text-decoration: none;
    font-weight: 600;
    color: #039be5;
 }
.country-code {
	position: absolute;
    top: 5px;
    left: 29px;
    font-size: 14px;
}
#adVideo {
	box-sizing: border-box;
    background: rgba(0,0,0,0.7);
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 7;
    display: flex;
    justify-content: center;
    align-items: center;
}
	
	.ad-video-preview{
	    width: 80%;
    background: #fff;
    min-height: 200px;
	}
	.md-button.show-ad-btn{
	margin: 0px !important;
    min-height: 20px;
    height: 23px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 600;
	}
	.splash-config-title {
	    margin: 0px 0px 10px 0;
    font-size: 16px;
	}
	.cmd-prompt-form{
    margin-bottom: 0px;
}
.sp-logo {
	width:150px;
}
.sp-logo img, .selected-background img {
	width:100%;
}
.selected-background {
	width:200px;
}
.unStyleList{
		list-style: none;
		margin: 0px;
		padding-left: 0;
	}
.splash-text h1 {
	margin:0px !important;
}
.video-item {
	float:left;
	text-align: center;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
}
.video-item .video-thumb {
	    width: 100px;
    height: 72px;
    border-radius: 2px;
    border: 1px solid #ddd;
    background-color: #eee;
    cursor:pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.video-item span {
	    font-size: 12px;
    font-weight: 600;
    text-align: center;
    width: 100%;
}
.interface-parameters {
	border:1px solid #ddd;
	margin-bottom:10px;
}
.interface-parameters-title {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    cursor: pointer;
}
.interface-parameters-title:focus {
	outline:0px;
}
.interface-parameters-title h2{
        margin: 0px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}
.parameters{
	border-top: 2px solid #eee;
    padding: 10px;
}

.profile-splash-logo img {
	width:70px;
}
.profile-video-thumb img, .profile-video-thumb video {
	width:50px;
}
.profile-video-thumb .youtube-video-thumb{
	width:50px;
	height:26px;
}
.profile-video-thumb {
	position:relative;
	  cursor: pointer;
}
.profile-video-thumb:hover::after {
	content: '';
    top: 5px;
    left: 44%;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 11px solid #fff;
    border-bottom: 7px solid transparent;
}
.profile-video-thumb:hover::before {
	content:'';
	top:0;
	left:0;
	position: absolute;
	background:rgba(0,0,0,0.5);
	width:100%;
	height:100%;
	
}
.splas-background img {
	width:70px;
}
.splash-profile-text h1 {
	font-size:13px;
	    margin: 0px;
}
.nirad_subheader.md-subheader.hotspot-subheader {
	    /*height: 72px;*
}
.nirad_subheader.md-subheader.hotspot-subheader .md-subheader-content {
    display: flex;
    flex-direction: column;
}
.hotspot-switch md-switch {
	    float: left;
    margin: 3px 0px;
}
.hotspot-switch md-switch .md-label {
	    font-size: 12px;
    color: #999;
    text-transform: capitalize;
}
.hotspot-switch{
	float: left;
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #ddd;
    height: 36px;
}

.hotspot-switch span.label {
	color: #555;
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
}
.hotspot-switch span.value {
	color: #757575;
    font-size: 12px;
    line-height: 36px;
    text-transform: capitalize;	
}
.md-subheader.nirad_subheader.hotspot-subheader .md-subheader-inner {
	padding: 0 !important;
}
.md-subheader.nirad_subheader.hotspot-subheader md-tabs{
	    padding: 0 16px;
}
.filter-menu {
	
}
.filter-menu .menu-btn{
    width: 100%;
    height: 45px;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 11px;
    color: #555;
        font-size: 13px;
    font-weight: 600;
}
.filter-menu .menu-btn:focus {
	outline:0px;
}
.upload-xls-file input{
	    line-height: 30px;
    margin-left: -90px;
    width: 340px;
    padding-top: 24px;
    padding-left: 42px;
    font-size: 12px;
    color: #999;
    z-index: 2;
    cursor: pointer;
    position:relative;
}
.upload-xls-file:hover, .upload-xls-file:hover input::before {
	background:#ececec;
}
.upload-xls-file input::before {
	    content: '';
    position: absolute;
    width: 36px;
    height: 20px;
    background: #fff;
    bottom: 4px;
    left: 88px;
     transition-timing-function: linear;
    -webkit-transition-delay: 260ms;
  transition-delay: 260ms;
}
.upload-xls-file input::after {
	content: "\f0c6";
    position: absolute;
    width: 0;
    height: 0;
    top: 5px;
    left: 110px;
    font-size: 27px;
    font-family: 'FontAwesome';
    -ms-transform: rotate(44deg);
    -webkit-transform: rotate(44deg);
    transform: rotate(44deg);
    color: #757575;
}
.upload-xls-file .xls-file-label {
	    position: absolute;
    top: 12px;
    font-size: 13px;
    left: 19px;
     color: #555;
}

.download-file-xls-btn{
	    margin: 0 !important;
	        text-align: left !important;
	    width:100%;
	    font-size: 14px !important;
    text-transform: capitalize !important;
    color: #555;
        height: 48px;
}
.download-file-xls-btn .download-icon{
	color:#757575;
	-ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
        line-height: 18px;
    font-size: 27px;
}
.download-logs-btn {
    margin: 0 !important;
    min-height: 20px !important;
    height: 20px;
}
.download-logs-btn .download-icon {
	color:#757575;
	-ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
        line-height: 22px;
    font-size: 22px;
}
.download-logs-btn:hover .download-icon{
color:#039BE5;
}
.download-menu-item md-menu{
	    margin: 0px;
	        padding-left: 0px;
    padding-right: 0px;
}
.firmware-download-container {
	    position: relative;
}
.download-tools-btn.md-button.md-fab.md-mini {
	    position: absolute;
    right: 10px;
    top: -25px;
        border-radius: 20px;
        transition:width 1s ease-in-out;
}
.download-tools-btn.md-button.md-fab.md-mini .md-ripple-container {
	border-radius: 20px;
}
.download-tools-btn.md-button.md-fab.md-mini:hover {
	    width: 160px;
	    transition:width 1s ease-in-out;
}
.download-tools-btn span {
	    /*visibility: hidden;*
	    opacity:0;
	        text-transform: capitalize;
	    transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.download-tools-btn:hover span {
	       /*visibility: visible;*
	       opacity:1;
	       transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.download-tools-btn i {
	-ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
        line-height: 18px;
    font-size: 27px;
}
.file-menu-content {
	/*padding:0px;*
}
.file-menu-content md-menu-divider {
	margin:0px !important;
}
.download-file-xls-btn .arrow-right{
    text-align: right;
    float: right;
    line-height: 34px;
    color: #999;
    }
    
  .download-btns-content {
  overflow:hidden;
  }
  
 .download-btns-content .download-icon {
 	color:#757575;
	-ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
        line-height: 15px;
    font-size: 21px;
 }
 .download-btns-content .md-button {
 	margin:0px !important;
 	padding-left: 7px;
 	    font-size: 14px;
    color: #555;
 }
 .choose-file-xls .custom-file-upload{
 margin: 0px;
    display: inline-table;
    width: 200px;
    height: 48px;
    line-height: 34px;
    }
    
 .min-width-600 {
    min-width: 600px !important;
 }   
 .min-width-700 {
 	min-width:700px !important;
 }
 .min-width-800 {
  	min-width:800px !important;
 }
 .min-width-900 {
  	min-width:900px !important;
 }
 .min-width-950 {
    min-width: 950px !important;
 }
 .min-width-1000 {
 	min-width:1000px !important;
 }
 .min-width-1150 {
 	min-width:1150px !important;
 }
 
 .device-firmware-height {
 	min-height: calc(100vh - 141px);
 }
 .device-list-height{
    min-height: calc(100vh - 202px);
}

.splash-page-preview-card md-card-header md-card-header-text i {
	display:none;
}
.tbl-perametars-container {
	display:flex;
	flex-direction:row;
}
.interface-perametars-view .tbl-perametars {
	    width: 50%;
    /*float: left;
    border-right: 1px solid #eee;*
    margin-bottom: 0;
}
.interface-perametars-view .tbl-perametars:first-child{
	border-right: 1px solid #eee;
}
.interface-perametars-view {
	border:1px solid #ddd;
	overflow: hidden;
    margin-bottom: 10px;
}
.interface-perametars-view h2 {
	    font-size: 16px;
    border-bottom: 1px solid #eee;
    margin: 0px;
    padding: 10px;
}
.network-list-table tr td .md-menu .md-icon-button.md-button{
	margin: 0px !important;
    height: 20px;
    min-height: 20px;
    padding: 0;
}
.md-table-th-150 tr th {
	    width: 154px;
}
.td-colon {
	width:5px;
	    padding-left: 0px !important;
    padding-right: 0px !important;
}
.full-width {
	width:100%;
}

.splashpage-thumbs-container {
	display: inline-block;
    padding: 10px 15px;
    width: 100%;
    border-top: 1px solid #ddd;
}
.splashpage-thumb {
	width: 100px;
    float: left;
    overflow: hidden;
    height: 90px;
    border: 2px solid #ddd;
    margin-right: 10px;
    box-sizing: border-box;
    position: relative;
}
.splashpage-thumb img {
	width:100%;
}
.splashpage-thumb.active{
	    border-color: #039be5;
}
.splashpage-thumb.active::after {
	    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 15px;
    height: 19px;
    color: #fff;
    font-size: 12px;
}
.splashpage-thumb.active::before{
	    content: '';
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 0px;
    height: 0px;
    border-bottom: 30px solid #039be5;
    border-left: 35px solid transparent;
 }


.error-msg {
	    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.55,0,.55,.2);
    opacity: 1;
    margin-top: 0;
    padding-top: 5px;
        color: rgb(221,44,0);
}
.locate-me-btn {
	    position: absolute;
    right: 0px;
    top: 2px;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    /* background: #eee; *
    padding: 5px 10px;
    border-radius: 20px;
}
.locate-me-btn i {
	    font-size: 16px;
    margin-right: 5px;
}
.locate-me-btn:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #eee;
  z-index: -2;
}
.locate-me-btn:hover:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}
.locate-me-btn:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}
.no-of-devices {
	min-width:160px;
}
.no-of-devices span {
	font-size: 12px;
	margin-left:8px;
}
.no-of-devices span.online b {
	color:#0f9d58;
}
.no-of-devices span.offline b {
	color:#dc1d38;
}
td.sites-list span{
	display:block;
}
.download-tools-options {
	text-align:center;
}
.download-tools-options .option-item {
	margin-bottom:15px;
}
.download-tools-options .option-item span {
	display:block;
}
.download-tools-options .option-item i {
	font-size:31px;
}
.download-tools-options .option-item a {
	font-size:13px;
}
.td-url-list small {
	    display: block;
    margin-bottom: 5px;
}

.profile-form-container {
	padding: 10px;
}

.add-profile-switch-container {
	border: 1px solid #ddd;
	margin-bottom: 10px;
}

.add-profile-header md-switch {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 10px;
	margin: 5px 0;
}

.add-profile-header.quick-profile-has-switch md-switch {
    margin: 0px;
    padding-left: 0px;
    width: 100%;
}

.add-profile-header {
	padding: 0 10px;
	font-size: 14px;
	font-weight: 600;
	display: flex;
    flex-direction: row;
    justify-content: space-between; 
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.add-profile-content {
	border-top: 2px solid #ddd;
	padding: 10px 15px;
	    overflow: hidden;
}

.add-profile-content .title {
	font-size: 14px;
	font-weight: 600;
	color: #555;
	margin-bottom: 0px;
}

md-checkbox.profile-cb .md-label {
	margin-top: 9px;
	/*font-weight: 600;*
}
.ssid-profile-value{
	display:block;
}
.ssid-cb {
	padding-top: 15px;
}
md-checkbox.profile-cb {
	margin-left: 15px;
}

md-checkbox.profile-cb .md-container {
	top: 18px;
}

ol.custom-list {
	counter-reset: myCounter;
	margin-left: 0;
	padding-left: 5px;
	color: rgb(100, 100, 100);
}

ol.custom-list li {
	position: relative;
	padding-left: 3em;
	margin: 0.45em 0;
	list-style: none;
	line-height: 1.8em;
	cursor: pointer;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

ol.custom-list li:hover {
	color: rgb(0, 0, 0);
}

ol.custom-list li:before {
	/*content:counter(myCounter);
        counter-increment:myCounter;*
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1.8em;
	height: 1.8em;
	line-height: 1.8em;
	padding: 0px;
	color: #fff;
	background: rgb(203, 203, 203);
	font-weight: bold;
	text-align: center;
	border-radius: .9em;
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
	z-index: 1;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

ol.custom-list li:hover:before {
	background-color: #039be5;
}

ol.custom-list li li:before {
	background-color: rgb(203, 203, 203);
}

ol.custom-list li:after {
	position: absolute;
	top: 2.1em;
	left: 0.9em;
	width: 2px;
	height: calc(100% - 2em);
	content: '';
	background-color: rgb(203, 203, 203);
	z-index: 0;
}

ol.custom-list li:hover:after {
	background-color: #039be5;
}

ol.custom-list li ol {
	padding-left: 0px;
}

ol.custom-list li li {
	font-size: 0.8em;
}

.custom-list .list-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
	padding-top: 5px;
}

.custom-list .list-sub-title {
	font-size: 14px;
	font-weight: 500;
}

.custom-list .has-form {
	margin-bottom: 15px;
}

.padding-top-30 {
	padding-top: 30px;
}

.wesites-allowed-box {
	border: 1px solid #ddd;
	    padding: 30px 10px 10px 10px;
}

.wesites-allowed-box .table {
	border: 1px solid #eee;
}

.add-website-input {
	position: relative;
}

.add-website-input .add-wesite-btn {
	position: absolute;
	    right: 3px;
    top: 9px;
	height: 30px;
	min-height: 30px;
	line-height: 30px;
}

.select-splash-page {
	border: 1px solid #eee;
	width: 100%;
}

.select-splash-page h2 {
	font-size: 14px;
	font-weight: 400;
	margin: 10px !important;
}
.hotspot-sub-header {
	display: flex;
    flex-direction: row;
    padding: 0px 15px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
}
.hotspot-sub-header md-switch {
	margin: 3px 0px;
}
.hotspot-sub-header .delete-btn.md-button {
	    display: flex;
    flex-direction: row;
}
md-input-container.md-input-has-value label, md-input-container.md-input-focused label {
	margin-bottom: -5px;
}
md-input-container {
	margin: 10px 0 0 0 !important;
}
md-input-container label {
	margin-bottom: -5px;
}
md-input-container .md-select-placeholder span {
	margin-bottom: -9px;
}
.remove-extra-space{
    margin-top: -30px;
}
md-card md-card-title.collapse-header {
	height:40px;
	line-height:40px;
	padding:0 15px !important; 	
}
.collapse-header:focus {
	outline: 0px;
}
.collapse-icon i{
	line-height:40px;
}
.page-bottom-btns-section {
	width:100%;
	display:flex;
	padding-right:10px;
}
.page-bottom-btns-section .md-button {
	    margin-left: 10px !important;
    padding: 0 10px;
        display: flex;
    flex-direction: row;
    justify-content: center;
}
.page-bottom-btns-section .md-button i {
	margin-right:5px;
	    font-size: 20px;
}
.margintop-ve30 {
	margin-top:-30px;
}
.select-auth-type .md-select-value.md-select-placeholder {
	margin-top:0;
	    margin-bottom: -10px;
}
.auth-type-predefine md-select {
	margin:0px;
}
.auth-type-predefine {
    display: flex;
    flex-direction: row;
}
.auth-type-predefine .label{
    color: #757575;
    font-size: 14px;
    font-weight: 600;
    padding-top: 7px;
    padding-left: 0;
}
.add-profile-content md-input-container .md-errors-spacer{
	/*min-height:0px;*
}
.advanced-profile-btn.md-button {
	width: 175px;
    display: flex;
    flex-direction: row;
    /*float: left;
    margin-left: 20% !important;*
    color: #fff;
    border-radius: 20px;
    border: 2px solid #fff;
    height: 25px;
    min-height: 33px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.advanced-profile-btn.md-button i {
    margin-left: -3px;
    margin-right: 4px;
}
.add-new-license {
	margin-top: 15px !important;
    margin-bottom: 0px !important;
    float:right;
}
.license-container {
	border:1px solid #ddd;
	padding:10px 10px 0;
	margin-bottom:5px;
}
.terms-container {
	width:60%;
	margin:auto;
}
.terms-content{
    height: calc(100vh - 225px);
    overflow-x: auto;
    padding:15px;
}
.terms-content h2 {
	    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}
.terms-content ul li {
	font-size:13px;
}
.md-button.md-raised.accept-terms {
	padding:0 15px;
}
/*****Extra Small Checkbox****
.xs-checkbox-group md-checkbox .md-label {
    font-size: 12px;
	margin-left: 23px;
	color:#757575;
}
.xs-checkbox-group md-checkbox {
    margin-bottom: 0px;
}

.xs-checkbox-group  md-checkbox .md-container {
    width: 12px;
    height: 12px;
}

.xs-checkbox-group md-checkbox .md-icon {
    width: 12px;
    height: 12px;
    border-width: 1px;
	top: -3px;
}

.xs-checkbox-group  md-checkbox.md-checked .md-icon::after {
        left: 2.67px;
    top: -0.78px;
    width: 4.67px;
    height: 9.33px;
}





.custom-signup-form {
	border: 1px solid #ddd;
    margin-right: 10px;
}
.custom-signup-body {
	max-height: 450px;
    overflow: auto;
    padding: 10px;
}
.custom-signup {
	padding:10px;
}
.custom-field-values{
    margin-left: 18px;
    margin-bottom: 10px;
}
.custom-field-values tr th, .custom-field-values tr td {
	    font-size: 11px;
    padding: 3px 5px;
        vertical-align: text-bottom;
}
.custom-field-values tr th {
	color:#555;
	font-weight: 500;
}
.custom-field-values tr td{
	color:#757575;
}
.custom-signup md-switch {
	    justify-content: left;
	        padding: 0;
}
.custom-signup md-switch .md-label {
    text-transform: capitalize;
}
.feild-val-input {
	    width: 80px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #ddd;
}
.feild-val-input:focus {
	outline:0px;
	border-bottom: 1px solid #039be5;
}
.custom-field-values tr th .no-cb{
	font-size: 12px;
	margin-left: 23px;
	color:#757575;
	display:block;
	margin-bottom:5px;
}
.field-item {
	width:100%;
	float:left;
	position:relative;
}
.feild-item-btn-group {
	display:flex;
	    flex-direction: row;
}
.custom-signup{
    border: 1px solid #ddd;
    max-height: 450px;
    padding:0px;
}
md-select.input-type-select {
    margin: 0;
    }
md-select.input-type-select .md-select-value.md-select-placeholder {
	    margin: 0;
    font-size: 12px;
    padding: 0 !important;
}
.feild-name-input{
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #ddd;
    margin-top: 10px;
    margin-left: 23px;
    margin-bottom: 10px;
    font-size: 13px;
    padding: 5px;
    width: 85%;
}
.feild-name-input:focus {
	outline:0px;
	border-bottom: 1px solid #039be5;
}
.delete-field {
	    position: absolute;
    right: 10px;
    padding: 0;
    background: #fff;
    border: 0;
    top: 7px;
}
.delete-field i {
	color:#f00;
	font-size:20px;
}
.custom-signup-header {
	border-bottom:2px solid #ddd;
	    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 30px;
        padding: 0 5px;
}
.custom-signup-header h2{
	    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
        line-height: 30px;
}
.signup-form-title {
	font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
}
.add-new-field-btn {
	color: #039be5;
    background: transparent;
    border: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.add-new-field-btn i {
	margin-right:5px;
}
.custom-signup-body .cb-item {
	width:33.33%;
	float:left;
}
.fit-content {
	max-height: fit-content !important;
}
.md-button.add-field {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    align-items: center;
    font-weight: 600;
    margin-left: 15px !important;
}
.md-button.add-field i {
	font-size:14px;
	margin-right:5px;
}
.md-button.edit-field {
 /* position:absolute;
    right: -25px;
    top: 0px; *
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0 !important;
}
.md-button.edit-field i {
    font-size: 100%;
    text-align: center;
    line-height: 15px;
    margin-left: -4px;
}
.splash-preview-tabs {
    width:100%;
    border-bottom:1px solid #ddd;
}
.splash-preview-tabs md-tab-item span {
    font-size: 13px;
    font-weight: 600;
}
.signup-preview-form {
    padding:0 10px;
}
.hideit {
    display: none !important;
}
md-switch.hotspot-enable-switch {
    margin:0 10px !important;
}
.md-button.md-warn.md-raised[disabled]{
    color: rgba(0,0,0,0.38);
}
#inputLocation {
        padding-right: 100px;
}
/*md-input-container>md-select {
	    margin-bottom: 20px !important;
}*
.dialog-content-min-height {
    min-height:60%;
}
.if-has-config-btn{
    display: flex;
    flex-direction: row-reverse;
}
.if-has-config-btn md-select{
    width: 100%;
}
.if-has-config-btn .btn.md-button{
    margin: 0px 0px 0px 5px !important;
    min-height: 25px;
    height: 31px;
    line-height: 19px;
    font-size: 12px;
    font-weight: 600;
    width: 200px;
}

.dialog-content-min-height {
    min-height:60%;
}
.option-select{
    position: absolute;
    right: 5px;
    margin: 0px;
    bottom: 20px;
}
.option-select md-select-value {
        color: #999;
    font-size: 11px;
        text-align: right;
}
.option-select .md-select-value .md-select-icon {
    width: 10px;
}*/

.value-type {
    position: absolute;
    right: 10px;
    color: #999;
    font-size: 11px;
    /*bottom: 26px;*/
    top: 24px;
}

.get-from-utl {
    display: flex;
    flex-direction: row;
}

.get-from-utl md-input-container {
    width: calc(100% - 101px);
}

.get-from-utl.has-add-btn md-input-container {
    width: calc(100% - 101px);
}

.get-from-utl .md-button {
    height: 38px;
}

.chooslogo-img.md-button,
.choose-bg-img.md-button {
    max-width: 300px;
    padding-right: 10px;
}

.choose-img-btn.md-button {
    padding-right: 10px;
}

.choose-video-btn.md-button {
    max-width: 300px;
    padding-right: 10px;
}

.file-name {
    color: #757575;
}

.img-upload-btn.md-button {
    /*margin-left: 10px !important;*/
    padding: 0 10px;
}

.img-upload-btn.md-button .material-icons {
    font-size: 21px;
    margin-top: -3px;
}

.url-img-container {
    width: 200px;
    margin-top: -15px;
}

.url-img-container img {
    width: 100%;
    border-radius: 2px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.ad-video-list .video-thumbnail {
    width: 70px;
    height: 40px;
    background-color: #eee;
    border-radius: 2px;
    background-position: center;
    background-size: cover;
}

.table.ad-video-list>tbody>tr>td {
    vertical-align: middle;
}

.video-thumbnail .overlay {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 40px;
    text-align: center;
    display: none;
}

.video-thumbnail .overlay i {
    line-height: 40px;
    color: #039be5;
    font-size: 31px;
    text-align: center;
}

.video-thumbnail .pause,
.table.ad-video-list>tbody>tr.playing .video-thumbnail .play {
    display: none;
}

.table.ad-video-list>tbody>tr:hover .video-thumbnail .overlay,
.table.ad-video-list>tbody>tr.playing .video-thumbnail .overlay {
    display: inline-block;
}

.table.ad-video-list>tbody>tr.playing .video-thumbnail .pause {
    display: inline-block;
}

.table.ad-video-list>tbody>tr.playing td {
    background-color: rgba(3, 155, 229, 0.15);
}

.default-tag {
    background: #039be5 !important;
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
}

.table.ad-video-list>tbody>tr>td i.fa-youtube {
    font-size: 24px;
}

.add-new-video-btn {
    border: 0;
    background: transparent;
    float: right;
    margin-bottom: 10px;
    color: #039be5;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.add-new-video-btn:focus {
    outline: 0px;
}

.add-new-video-btn span {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.add-new-video-btn i {
    font-size: 19px;
    margin-right: 5px;
}

.ad-new-video-form {
    display: block;
    border: 2px solid #ddd;
    margin-bottom: 10px;
    width: 100%;
    clear: both;
    overflow: hidden;
    transition: transform 0.5s ease-out;
    height: auto;
    transform: scaleY(1);
    transform-origin: top;
}

.ad-new-video-form.ng-hide {
    transform: scaleY(0);
}

.action-btn-group {
    border-top: 1px solid #ddd;
}

.action-btn-group .md-button {
    margin-left: 5px !important;
    margin-right: 5px !important;
    min-width: 95px !important;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
}


/* .note-btn-group.btn-group.note-color.open div > li > div:nth-child(1) {display:none;} */

.note-btn-group.btn-group.note-para {
    display: none;
}

.note-btn-group.btn-group.note-table {
    display: none;
}

.note-btn-group.btn-group.note-insert.btn-group>.btn:last-child:not(:first-child) {
    display: none;
}

.note-btn-group.btn-group.note-insert.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    display: none;
}

.removeLink div.note-btn-group.btn-group.note-insert.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    display: none;
}

.note-btn-group.btn-group.note-view {
    display: none;
}

.note-editor .note-dropzone {
    opacity: 0 !important;
}

.note-editor.note-frame {
    border: 1px solid #a9a9a9;
    z-index: 1;
}


/*.td-download-btn.md-button{
    margin: 0px !important;
    min-height: 20px !important;
    height: 20px;
    line-height: 20px !important;
    font-size: 12px;
    font-weight: 600;
}
.fill-height {
	min-height: calc(100vh - 141px);
}
.fill-height-has-one-subheader {
	min-height: calc(100vh - 177px);
}
.fill-height-has-one-subheader-filters {
	min-height: calc(100vh - 238px);
}
.fill-height-has-filters {
	min-height: calc(100vh - 202px);
}
.fill-height-has-one-subheader-card-actions {
	min-height: calc(100vh - 241px);
}
md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child {
	-webkit-transform:translateY(-12px) translateX(-2px) scale(.75) !important;
	transform:translateY(-12px) translateX(-2px) scale(.75) !important;
}
.card-footer md-input-container>md-select {
    margin-bottom: 0px !important;
}
.edit-interface-fields {
	overflow:hidden;
}
.edit-interface-fields md-input-container{
	width:24.5%;
	/*float: left;*
	padding-bottom: 15px;
	display: inline-block;
    box-sizing: border-box;
}
.edit-interface-fields md-input-container .input-container-hint {
	position: absolute;
    left: 0;
    bottom: 0px;
}
.edit-interface-fields md-input-container>md-select {
	margin-bottom: 0px !important;
}

/*added on 02-july-2019*
.pg-refresh button.md-button{
	border: 0px;
    border-left: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 13px;
    height: 36px;
    float: left;
 }
 .mt-0{
  margin-top:0px !important;
 }
 .mb-0{
  margin-bottom:0px !important;
 }
 .mb-15{
 margin-bottom:15px;
 }
 .mb-30{
    margin-bottom: 30px;
}
 .mr-2{
  margin-right:2rem !important;
 }
 .ml-1{
  margin-left:1rem !important;
 }*/


/* Added on 08-07-2019 */


/* .btn-wrapper{
	width:40px !important;
    background: none !important;
    box-shadow:none !important;
 } */


/* .clear-btn{
    height: 45px;
    background: #039be5;
    border: 0px;
    color: #FFF;
    width: 40px;
    text-align: center;
    margin-right: 0px;
    float: right;
    border-radius: 0 2px 2px 0;
 } */


/* term of use congratulation text style */

.terms-content-success {
    padding: 15px;
}

.terms-content-success h2 {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.terms-content-success ul li {
    font-size: 13px;
}


/*default cursor pointer*/

.md-button.md-raised.md-primary:not([disabled]) {
    /* position: right !important;*/
    color: #FFFFFF;
    /*background-color:#008cba;    */
}

.note-editor .note-btn-group.note-color.open .dropdown-menu li {
    display: flex;
    flex-direction: row-reverse;
}

.note-editor .note-btn-group.note-color.open .dropdown-menu li .btn-group {
    padding: 5px;
}

.note-editor .note-btn-group.note-color.open .dropdown-menu li .btn-group .note-color-row {
    display: flex;
    flex-direction: row;
}

.note-editor .note-btn-group.note-color.open .dropdown-menu li .btn-group .note-palette-title {
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 5px;
}

.note-editor .note-btn-group.note-color.open .dropdown-menu li .btn-group .note-color-reset {
    padding: 2px 10px;
    margin: 5px 0;
    font-size: 12px;
    border-radius: 2px;
    width: 100%;
    border: 1px solid #ddd;
}

.note-editor .note-btn-group.note-color.open .dropdown-menu li .btn-group .note-color-reset.btn.btn-default:hover,
.note-editor .note-btn-group.note-color.open .dropdown-menu li .btn-group .note-color-reset:focus {
    background-color: #039be5;
    color: #fff;
    border: 1px solid #039be5;
}

.note-editor.note-frame.panel.panel-default {
    margin-bottom: 0px;
    border: 0px;
}

.note-editor.note-frame.panel.panel-default .panel-heading.note-toolbar {
    background-color: #fff;
}

.note-editor.note-frame.panel.panel-default .panel-heading {
    border-bottom: 0px;
    padding-left: 0px;
}

.note-editor.note-frame.panel.panel-default .note-statusbar {
    border-top: 0px;
}

.note-editor.note-frame.panel.panel-default .note-statusbar {
    background: transparent;
    border: 0px;
}

.note-editor.note-frame.panel.panel-default .note-editable.panel-body {
    border: 1px solid #ddd;
}

.note-editor.note-frame.panel.panel-default .note-btn-group.btn-group .note-btn.btn {
    height: 29px;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 25px;
    border-radius: 0px;
}

.note-editor.note-frame.panel.panel-default .note-btn-group.btn-group .note-btn.btn:hover,
.note-editor.note-frame.panel.panel-default .note-btn-group.btn-group .note-btn.btn:focus,
.note-editor.note-frame.panel.panel-default .note-btn-group.btn-group.open .note-btn.btn {
    background: #039be5;
    color: #fff;
    border-color: #039be5;
    box-shadow: none;
}

.note-editor.note-frame.panel.panel-default .note-btn-group.btn-group .note-btn.note-current-color-button:hover,
.note-editor.note-frame.panel.panel-default .note-btn-group.btn-group .note-btn.note-current-color-button:focus,
.note-editor.note-frame.panel.panel-default .note-btn-group.btn-group.open .note-btn.note-current-color-button {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.note-editor.note-frame.panel.panel-default .panel-heading.note-toolbar>.btn-group {
    margin-top: 0px;
}

.note-popover .popover-content .dropdown-menu,
.panel-heading.note-toolbar .dropdown-menu {
    padding-bottom: 30px;
    border-radius: 2px;
    border-color: #ddd;
}


/* added 30-08-2019 for logo/test drag and drop*/

#container {
    /*     margin-left: -180px;
    margin-top: -398px; */
}

.shap-container {
    left: 0px;
    top: 0px;
    height: 100%;
    z-index: -1;
    right: 0px;
    margin: 0px auto;
}

.shape {
    position: absolute;
    width: 118px;
    height: 80px;
    background-color: white;
}

.terms-conditions-link {
    margin-top: 10px;
}

.hotspotpage-wrapper .login-btn-disable {
    margin-bottom: 10px;
}

#text-container-div a:hover,
#text-container-div a {
    color: inherit;
    text-decoration: none;
}


/* added on 17-09-2019 */

.term-login a:link {
    color: blue;
}


/* visited link */

.term-login a:visited {
    color: blue;
}


/* mouse over link */

.term-login a:hover {
    color: blue;
}


/* selected link */

.term-login a:active {
    color: blue;
}

.splas-bg-img {
    padding: 2px;
    height: 50px;
    overflow: hidden;
}

.collapse-header-xl {
    align-items: center;
}

.collapse-header-xl:focus {
    outline: 0px;
}

.select-multiwan-interface {
    margin-right: 30px;
}

.select-multiwan-interface md-input-container {
    margin: 0px !important;
}

.select-multiwan-interface md-input-container>md-select {
    margin-bottom: 0px !important;
}

.select-multiwan-interface md-select .md-select-value.md-select-placeholder {
    padding-bottom: 0px !important;
}

.select-multiwan-interface .md-select-value .md-select-icon:after {
    top: 4px;
}

.multi-wan-type-selection {
    margin-bottom: 30px;
}

.config-multi-wan-type-selection {
    margin: 8px 8px 20px;
}

md-card.collapse-card {
    background: transparent;
}

md-card.collapse-card md-card-title {
    border-bottom: 0px !important;
    cursor: pointer;
}

md-card.collapse-card md-card-content {
/*    margin-left: 13px;
    margin-right: 13px;*/
    /* border-top: 0px !important; */
    /* border: 1px solid #e2e2e2 !important; */
    padding: 0px 0px 0px 0px !important;
    position: relative;
    z-index: 0;
    border-left: 1px solid #e2e2e2 !important;
    border-right: 1px solid #e2e2e2 !important;
    border-bottom: 1px solid #e2e2e2 !important;
    background:#fff;
    margin-top: -3px;
    z-index: 0;
}

.blue-header-table-card .nirad_table tr th{
    padding-top:8px;
}


.md-button.add-btn-with-label {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    align-items: center;
    font-weight: 600;
    margin: 0px !important;
}

.md-button.add-btn-with-label:hover {
    background: transparent;
}

.md-button.add-btn-with-label i {
    font-size: 21px;
    margin-right: 5px;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.parameters-form {
    /*border: 1px solid #e2e2e2; */
    margin-top: 14px;
    margin-bottom: 5px;
    padding: 19px 10px 10px;
    background: #f2f2f2;
}

.parameters-form .md-button {
    padding: 0 10px;
    margin-left: 2px !important;
}


/*multi wan styles*/

.btn-multiwan-realtime.md-primary.md-button {
    position: absolute;
    top: 43px;
    right: 15px;
    z-index: 2;
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    min-height: 25px;
    font-size: 12px;
    font-weight: 600;
}

.multiwan-save-btn {
    margin: 8px !important;
    float: right;
}

.title-with-select-filter {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.title-with-select-filter md-select {
    margin: 0;
}

.title-with-select-filter md-select .md-select-value.md-select-placeholder {
    padding: 0 !important;
    margin: 0 !important;
}

.radio-btn-rised-group {
    display: flex;
    flex-direction: row;
}

md-radio-button.radio-btn-rised {
    margin: 0 10px 0 0;
    color: #555;
    vertical-align: middle;
    align-items: center;
    text-align: center;
    border-radius: 2px;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    outline: none;
    border: 0;
    padding: 4px 10px;
    font-style: inherit;
    font-variant: inherit;
    font-family: inherit;
    text-decoration: none;
    overflow: hidden;
}

md-radio-button.radio-btn-rised.md-checked {
    color: #fff;
    background-color: #039BE5;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1);
}

md-radio-button.radio-btn-rised .md-container.md-ink-ripple {
    display: none;
}

md-radio-button.radio-btn-rised .md-label {
    margin: 0;
}

.time-picker-no-border {
    position: relative;
}

.time-picker-no-border i {
    position: absolute;
    top: 6px;
    left: 4px;
    color: #737373;
    font-size: 20px;
    cursor: pointer;
}

.time-picker-no-border md-input-container .md-input {
    border: 0px;
}

.time-picker-no-border mdp-time-picker .md-button.md-icon-button {
    margin: 0 !important;
    padding: 0px !important;
    height: 30px;
    width: 30px;
    min-height: 18px;
    opacity: 0.1;
}

.time-picker-no-border md-input-container.md-icon-float {
    margin: 0px !important;
    height: 30px;
}

.time-picker-no-border md-input-container label {
    margin-bottom: -8px;
}

.enterprise-count {
    height: calc(100% - 34px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.enterprise-count h1 {
    /*color:#039BE5;
	    font-weight: 600;*/
}

.enterprise-count p {
    color: #999999;
}

.total-sms-count {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}

.total-sms-count i {
    font-size: 41px;
    color: #039BE5;
    margin-right: 5px;
}

.total-sms-count h1 {
    color: #555;
    font-weight: 500;
    margin: 0;
    font-size: 41px;
}

.usage-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0;
}

.usage-item h2 {
    color: #039BE5;
    font-weight: 600;
    font-size: 22px;
    min-width: 61px;
}

.usage-item p {
    color: #999999;
}

.usage-details {
    margin-top: 30px;
}

.filter-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.filter-select i {
    margin-right: 5px;
    color: #828282;
    font-size: 16px
}

.download-excel-btn img {
    width: 26px;
}


/* custom tooltip for dashboard graph */

.axis-lable {
    position: relative;
}

#tooltipcustom {
    display: inline;
    position: absolute;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0% 0%;
    border: 2px solid rgb(221, 221, 221);
    border-radius: 8px;
    padding: 5px;
    font-size: 12px;
    transform: translate3d(-220px, -50%, 0);
    z-index: 1 !important;
    top: -5px;
    /*right: 105%;*/
}

.nvtooltip {
    border: 0px solid rgba(0, 0, 0, .5) !important;
    border-radius: 0px !important;
    top: -7.5% !important;
}

.nirad-dialog md-dialog-content .nvtooltip {
    margin-left: -150px;
}

.graph-holder .nvtooltip {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    z-index: 2 !important;
}

.md-button.md-default-theme[disabled],
.md-button[disabled] {
    cursor: not-allowed !important;
}


/*multi wan config sortable table*/

.as-sortable-item,
.as-sortable-placeholder {
    display: block;
}

table .as-sortable-item,
table .as-sortable-placeholder {
    display: table-row;
}

.as-sortable-item {
    -ms-touch-action: none;
    touch-action: none;
    /* to disable context menu on iOS devices */
    -webkit-touch-callout: none;
}

.as-sortable-item-handle {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

.as-sortable-placeholder {
    background: #eee;
}

.as-sortable-drag {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.as-sortable-hidden,
.as-sortable-dragging {
    display: none !important;
}

.as-sortable-un-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.as-sortable-dragging {
    border: 1px dotted #000 !important;
}

.as-sortable-item {
    display: contents !important;
    cursor: move;
}

.md-button.btn-add.graph-btn i {
    font-size: 20px;
}


/* SDWAN Rules by-type / SDWAN Class profiles view popups — bound the scroll region so long lists don't push the dialog off-screen. */
.sdwan-rules-by-type-scroll,
.sdwan-class-profiles-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.md-button.md-fab.md-mini.load-balancing-add-btn {
    position: absolute;
    right: 15px;
    top: -1px;
    z-index: 1;
}

.md-button.md-fab.md-mini.load-balancing-add-btn.route-profile-add-btn {
    top: -27px;
}

md-card.load-balancing-card.collapse-card {
    box-shadow: none;
    border: 2px solid #eee;
    margin-bottom: 15px;
}

.move-btn {
    margin: 0px !important;
    min-width: auto !important;
    min-height: auto !important;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    z-index: 1;
}



.move-btn i {
    font-size: 18px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.datepicker-no-border .md-button.md-datepicker-button.md-icon-button {
    margin: 0px !important;
    height: 20px;
    min-width: 0;
    line-height: 20px;
    padding: 0px;
    width: 20px;
    border-radius: 2px;
}

.datepicker-no-border .md-button.md-datepicker-button.md-icon-button .md-datepicker-calendar-icon {
    width: 20px;
}

.datepicker-no-border .md-datepicker-input-container {
    margin-left: 5px !important;
    border-bottom: 0;
}

.datepicker-no-border .md-datepicker-input-container input {
    width: auto;
    min-width: 90px;
    max-width: 90px;
}

.datepicker-no-border .md-button.md-datepicker-triangle-button {
    margin: 0 !important;
}


/*sms report calender design*/

.startDate .md-subheader-inner,
.endDate .md-subheader-inner {
    color: #444 !important;
}

.hint {
    /* Position the hint */
    position: absolute;
    left: 2px;
    right: auto;
    bottom: 7px;
    top: auto;
    max-height: 0px;
    /* Copy styles from ng-messages */
    font-size: 12px;
    line-height: 14px;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    /* Set our own color */
    color: rgba(0, 0, 0, 0.54);
}

.inputdemoErrorsAdvanced .hint.ng-hide,
.inputdemoErrorsAdvanced .hint.ng-enter,
.inputdemoErrorsAdvanced .hint.ng-leave.ng-leave-active {
    bottom: 26px;
    opacity: 0;
}

.inputdemoErrorsAdvanced .hint.ng-leave,
.inputdemoErrorsAdvanced .hint.ng-enter.ng-enter-active {
    bottom: 7px;
    opacity: 1;
}


/******SMS Reports********/

.sms-reports-chart-container {
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
}

#sms-reports-chart {
    width: 100%;
}

.chart-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 30px;
    width: 100%;
}

.chart-title h2 {
    margin: 0px;
    font-size: 16px;
    font-weight: 500;
    color: #555;
}

.chart-filters {
    display: flex;
    flex-direction: row;
}

.chart-filter-item {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .15);
    height: 38px;
    margin-left: 15px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 15px;
    padding-right:5px;
    background: #039be5;
}

.chart-filter-item.blue-bg .md-select-value .md-select-icon:after{
	color: #fff;
}

.chart-filter-item.blue-bg md-select .md-select-value.md-select-placeholder {
    color: #fff;
}

.chart-filter-item md-input-container .md-select-placeholder span {
    margin-bottom: -9px;
    font-size: 12px;
}

.chart-filter-item i.fa-filter {
    font-size: 16px;
    color: #fff;
    margin-right: 10px;
}

.chart-filter-item md-input-container {
    margin: 0px !important;
    min-width: 120px;
}

.chart-filter-item md-input-container>md-select {
    margin-bottom: -10px !important;
}

.chart-filter-item .md-select-value>span:not(.md-select-icon) .md-text {
    color: #fff;
    font-size: 13px;
}

.chart-filter-item .select-server .md-select-value.md-select-placeholder {
    color: #fff;
}

.chart-filter-item .material-icons {
    color: #fff;
}

.chart-filter-item md-input-container.md-input-has-value label,
.chart-filter-item md-input-container.md-input-focused label,
.chart-filter-item md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value,
.chart-filter-item md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value.md-select-placeholder {
    color: #fff !important;
}

.chart-filter-item md-input-container.md-input-has-value label,
.chart-filter-item md-input-container.md-input-focused label {
    margin-bottom: -6px;
    text-transform: uppercase;
    font-size: 12px;
}

.chart-filter-item .md-select-value .md-select-icon {
    margin-top: 0px;
    color: #fff;
}

.chart-filter-item md-input-container.md-input-has-value .md-select-value .md-select-icon {
    margin-top: -10px;
}

.chart-filter-item .time-range {
    color: #FFF;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding-right: 8px;
    cursor: pointer;
}

.chart-filter-item .time-range i {
    font-size: 18px;
    margin-left: 5px;
    /* color: #555; */
}

.time-range-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.time-range-filter:focus {
    outline: 0;
}

.time-range-filter span {
    font-size: 13px;
    color: #757575;
}

.time-range-filter i {
    font-size: 20px;
    margin-right: 5px;
    color: #757575;
}

.filter-select-no-bdr {
    display: flex;
    align-items: center;
}

.filter-select-no-bdr md-select {
    margin: 0px;
}

.filter-select-no-bdr i {
    margin-right: 5px;
    color: #757575;
    font-size: 18px
}

.filter-select-no-bdr md-select .md-select-value.md-select-placeholder {
    padding-bottom: 0px !important;
    margin-top: 0px;
}


/* .multiwanOptions, .singlewanOptions {
	display:none;
}
 */

.multiwanOptions.multiwan,
.singlewanOptions.singlewan {
    display: block;
}


/* 
profile multiwan design changes
 */

.radio-fx-align-center md-radio-button {
    display: flex;
    align-items: center;
}

.member-cb {
    min-width: 100px;
}


/* added for mwan profile details */

.config-multi-wan-type-selection-profile {
    margin: 10px 7px 10px;
}


/* padding for mwan status*/

.padding-8x {
    padding: 8px !important;
}

.margin-btm-0 {
    margin-bottom: 0px !important;
}

.bg-white {
    background-color: #fff;
}

.online i {
    color: #4caf50;
    font-size: 9px;
    line-height: 2;
}

.offline i {
    color: #CFCFCF;
    font-size: 9px;
    line-height: 2;
}

.errorflag i {
    color: #FF0011;
    font-size: 9px;
    line-height: 2;
}


.active--state i {
    color: #6edb72;
    font-size: 9px;
    line-height: 2;
}

.offline--state i {
    color: #ed4c57;
    font-size: 9px;
    line-height: 2;
}

.backup--state i {
    color: #eded7b;
    font-size: 9px;
    line-height: 2;
}


.port-style{
    background: gray;
    color: white;
    padding: 3px 3px 3px 5px;
    border-radius: 10px;
    margin-left: 5px;
}

.dynamicUsers{
 
    position: relative;
    /* bottom: 0px; */
    /* right: -129px; */
    height: 69px;
    /* border: 1px solid; */
    width: 26%;
    overflow: auto;
    color: #969696;
    right: -73%;
    font-size: 12px;


    
}
.dynamicUsers p{
    margin: 0 0 0 0 !important;
}

.tooltip-multiline {
    height: auto;
}
.textwrap{
    text-wrap: auto !important;
}

md-dialog-content md-input-container.md-icon-right {
    padding-right: 0px;
}

md-input-container.md-icon-right .md-input {
    padding-right: 28px;
}

md-input-container.md-icon-right>md-icon {
    position: absolute;
    right: 0px;
    top: 5px;
    cursor: help;
}

md-input-container.md-icon-right>md-icon>i {
    font-size: 17px;
    color: #aaa;
}

md-tooltip.no-ellipsis-tooltip {
    max-width: 200px !important;
    white-space: pre-wrap;
    text-overflow: unset;
    overflow: unset;
    height: auto;
}


/*bridge style in network page*/

.subheader-radio-btns {
    color: #555;
    text-transform: capitalize;
    display: flex;
    height: 36px;
    align-items: center;
}

.subheader-radio-btns .radio-group-label {
    font-size: 13px;
    margin-right: 10px;
}
.custom-placeholder::placeholder {
    color: black !important;
}


/*disabled anchor*/

.disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.download-disabled{
    cursor: not-allowed !important;
    pointer-events: none !important;
    color: yellow !important;
}
.download-enabled{
    color: #008cce !important;
}


/*real time display unit*/

.realtime-graph-container {
    width: 100%;
    position: relative;
    padding-left: 15px;
}

.vertical-header {
    font-size: 14px;
    font-weight: 600;
    color: gray;
    transform: rotate(270deg);
    transform-origin: 0 0;
    position: absolute;
    top: 50%;
    left: 0;
}

.md-select-menu-container.md-active md-select-menu[multiple] {
    margin-left: 21px;
    /*margin-right: 20px;*/
}

.icon-title {
    display: flex;
    align-items: center;
    color: #555;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 13px;
}

.icon-title i {
    margin-right: 10px;
    font-size: 14px;
    margin-right: 5px;
    font-size: 18px;
}

.errorflag i,
.device_errorflag i {
    /* font-size: 8px !important;
    color: #ff0000 !important;
    line-height: 2 !important;*/
}


/*route profile*/

.add-routeprofile-list {
    padding: 10px 0;
    position: relative;
}

md-card md-card-content.device-heartbeat-graph {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.network-members-list small {
    white-space: nowrap;
    margin-right: 5px;
    margin-bottom: 3px;
    display: inline-block;
}

.td-maxwidth-md {
    max-width: 180px;
}

.moreinfo-graph .nvtooltip {
    background: transparent;
}

.moreinfo-graph .nvtooltip table {
    margin: 6px;
    border-spacing: 0;
    transform: rotate(-90deg);
    margin-left: -100px;
    background: rgba(255, 255, 255, .8);
}

.moreinfo-graph .nvtooltip table td {
    font-size: 12px;
}

.geofence-switch .md-label {
    margin-right: 40px;
}


/*################## Stepper
##########################################*/

.stepper {
    overflow-x: hidden;
    overflow-y: auto;
    counter-reset: section;
    background: #f0f0f0;
    padding: 10px;
}

.steps-title {
    font-size: 13px;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: 600;
}

.steps-title:first-child {
    margin-top: 0px;
}

.stepper .step .tepper-header {
    padding: 1.5rem;
    text-align: center
}

.stepper .step .stepper-header .circle {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: .5rem;
    line-height: 24px;
    color: #fff;
    text-align: center;
    background: #2e323d;
    border-radius: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper .step.active .stepper-header .circle,
.stepper .step.current .stepper-header .circle {
    font-weight: 600;
    color: #fff;
    background: #039be5;
}

.stepper-vertical {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.stepper-vertical .step {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.stepper-vertical .step .stepper-header {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.stepper-vertical .step .stepper-header .circle {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.stepper-vertical .step .step-content {
    display: block;
    padding: 10px 15px;
    margin-top: 0;
    margin-left: 10px;
    width: 100%;
    background: #fff;
    margin-bottom: 15px;
    border-radius: 2px;
    position: relative;
    font-size: 12px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04), 0 2px 10px 0 rgba(0, 0, 0, 0.02);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04), 0 2px 10px 0 rgba(0, 0, 0, 0.02);
}

.stepper-vertical .step .step-content:after {
    content: '';
    position: absolute;
    top: 6px;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 8px solid #fff;
    border-bottom: 6px solid transparent;
}

.stepper-vertical .step .step-content p {
    font-size: .88rem;
}

.stepper-vertical .step:after {
    position: absolute;
    top: 24px;
    left: 11px;
    width: 4px;
    height: calc(100% - 24px);
    content: "";
    background-color: #2e323d;
}


/**###########**/

.location-history-header {
    padding: 10px 15px;
    border-bottom: 1px solid #dddd;
    font-size: 14px;
    color: #555;
}

.location-history-header .title {
    display: flex;
    align-items: center;
}

.location-history-header i {
    margin-right: 5px;
    font-size: 16px;
}

.location-history-content {
    padding: 10px;
}

.address-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
}

.address-title .time {
    display: flex;
    align-items: center;
    font-size: 10px;
    color: #999;
}

.address-title .time i {
    font-size: 15px;
    margin-right: 3px;
}

.geofence-detatils {
    padding-right: 15px;
}

.geofence-detatils .details-item {
    margin-bottom: 15px;
}

.geofence-detatils .details-item label {
    font-size: 14px;
    display: block;
    font-weight: 600;
    color: #555;
}

.geofence-detatils .details-item span {
    color: #757575;
}

.geofence-detatils .details-select.sm-checkbox-group md-checkbox {
    margin-bottom: 0;
    margin-top: 10px;
}

.available-user-list-content {
    padding: 0px;
    height: 280px;
    display: flex;
    flex-direction: column;
}

.available-user-search-wrapper {
    flex: none;
    padding: 0 16px;
}

.available-user-list {
    overflow-y: auto;
    flex: 1;
}

.geofence-detatils .details-item .available-user-search-wrapper label {
    font-size: 11px;
    font-weight: normal;
    color: #999;
    padding-bottom: 10px;
}

.btn-add.btn-add-remove {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-add.btn-add-remove i {
    margin-bottom: -7px;
}

.geofence-devices-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.geofence-devices-header h5 {
    color: #555;
    font-size: 14px;
    font-weight: 600;
}

.geofence-devices-header .search-box {
    position: relative;
    width: 200px;
    top: auto;
    right: auto;
}

.addRemove-btns-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 45px;
}

.addRemove-btns-group .md-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    min-height: auto;
    height: 35px;
    line-height: 35px;
}

.mini-add-btn-ontable {
    position: absolute !important;
    right: 14px;
    top: -26px;
}

.scroll-bar {
    width: auto;
    height: 490px;
    overflow: auto;
    text-align: justify;
}


/*add device to geo fence styles*/

.horizontal-center {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*view geofence tab styles*/

.view-fence-tab {
    top: 0px !important;
    box-shadow: none !important;
    border-bottom: 1px solid #eee;
    padding: 0px 30px !important;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

.inline-text {
    display: inline !important;
}

.remove-device-link {
    color: blue;
    text-decoration: underline;
    float: right;
}

.geofence-map-container {
    background: #eee;
}

.active-subscribers-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.active-subscribers-details i {
    font-size: 55px;
    color: #039be5;
}

.active-subscribers-details h2 {
    font-size: 46px;
    font-weight: 100;
    color: #039be5;
}

.active-subscribers-details span {
    color: #999;
    font-size: 16px;
}

.device-site-graph {
    min-height: 220px;
    max-height: 220px;
    /*padding-left: calc(50% - 122px);*/
    align-items: center;
    justify-content: center;
    position: relative;
}

.device-site-graph:before {
    content: '';
    position: absolute;
    bottom: 31px;
    left: 5%;
    height: 1px;
    width: 90%;
    background: #f3f3f3;
}

.active-sites-pro-bar-group {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 210px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    padding: 0px 25px 0px 25px;
    margin-left: 60px;
}

.active-sites-pro-bar-group .progress {
    position: relative;
    width: 100%;
    height: 10px;
    margin: 0px;
    /* margin-left: 30px; */
    margin-bottom: 60px;
    overflow: visible;
    background-color: #fff;
    /*background-color: #f7f7f7;*/
    border-radius: 0px 20px 20px 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.active-sites-pro-bar-group .progress-bar span.value {
    position: absolute;
    top: 11px;
    left: 4px;
    /* -webkit-transform: rotate(-90deg); */
    /* transform: rotate(90deg); */
    /* right: -24px; */
    font-weight: 400;
    font-size: 10px;
    /* padding-top: 31px;*/
}

.active-sites-pro-bar-group .progress span.total-number {
    position: absolute;
    top: 0px;
    left: -46px;
    font-weight: 500;
    font-size: 9px;
    width: 69px;
    /* background: #f00; */
    transform: rotate(90deg);
    text-align: center;
    color: #cacaca;
}


/*  */

.active-enterprise-pro-bar-group {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 15% 10px 15%;
}

.active-enterprise-pro-bar-group .progress {
    position: relative;
    width: 100%;
    height: 20px;
    margin-bottom: 25px;
    overflow: visible;
    background-color: #fff;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.active-enterprise-pro-bar-group .progress-bar span.value {
    position: absolute;
    top: 2px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(90deg);
    right: -28px;
    font-weight: 600;
    font-size: 13px;
}

.active-enterprise-pro-bar-group .progress span.total-number {
    position: absolute;
    top: 26px;
    left: 1px;
    font-weight: 600;
    font-size: 12px;
}

.active-enterprise-pro-bar-group .progress span.total-number b,
.active-sites-pro-bar-group .progress span.total-number b {
    color: #757575;
    font-weight: 600;
}

.active-enterprise-pro-bar-group .progress-bar,
.active-sites-pro-bar-group .progress-bar {
    position: relative;
    border-radius: 0px 20px 20px 0px;
    box-shadow: 2px 3px 9px 1px rgb(182 182 182 / 33%);
}

.active-enterprise-pro-bar-group md-progress-linear,
active-sites-pro-bar-group md-progress-linear {
    width: 100%;
    height: 25px;
}

.active-enterprise-pro-bar-group md-progress-linear .md-container,
.active-enterprise-pro-bar-group md-progress-linear .md-container .md-bar,
.active-sites-pro-bar-group md-progress-linear .md-container,
.active-sites-pro-bar-group md-progress-linear .md-container .md-bar {
    height: 25px;
}

.header-justify-space-beteen {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.header-justify-space-beteen .search-box {
    position: relative;
    right: 0;
    top: 0;
}

.activeEnterprise i {
    color: #00cd8c;
    font-size: 9px;
    line-height: 2;
}

.expiredEnterprise i {
    color: #f1526e;
    font-size: 9px;
    line-height: 2;
}

.syncEnterprise i {
    color: #f6a201;
    font-size: 9px;
    line-height: 2;
}

.float-btn-right-top {
    border-radius: 50px !important;
    z-index: 20;
    vertical-align: middle;
    overflow: hidden;
    position: absolute;
    top: 0px;
    cursor: pointer;
    right: 0px;
    color: #ffffff;
    padding-right: 8px;
}

.float-top-position-22 {
    margin-top: 22px;
}

.material-icons.md-18 {
    font-size: 18px;
}
.material-icons.sort-icon {
    font-size: 14px;
    line-height: 0.8;
}
.sort-active{
    color: #ffffff;
}
.sort-inactive{
    color: #ededed;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

.chart-container {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -250%);
}

.chart-container-dashboard {
    position: absolute;
    float: left;
    /*top: calc(50% - 53px);
    left: calc(50% - 32.5px);*/
    /* transform: translate(-50%, -200%); */
    width: 65px;
    height: 68px;
}

.chart-container-devices {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -290%);
}

.chart-content {
    text-align: center;
    z-index: -1 !important;
}

.chart-container .chart-content h5,
.chart-container-dashboard .chart-content h5,
.chart-container-devices .chart-content h5 {
    margin-bottom: 0px;
    margin-top: 0;
    font-size: 10px;
    text-transform: uppercase;
}

.chart-container .chart-content span,
.chart-container-dashboard .chart-content span,
.chart-container-devices .chart-content span {
    font-size: 35px;
    font-weight: 700;
    color: #444;
}

md-switch#traffic_log,
md-switch#ssh {
    position: relative;
    margin: 0;
}

#traffic_log .md-container,
#ssh .md-container {
    position: absolute;
    margin-left: 94%;
    float: right;
}

#traffic_log .md-label,
#ssh .md-label {
    float: left;
    position: absolute;
    margin-left: 1%;
}

md-input-container.auto-error-space .md-errors-spacer {
    min-height: 0px !important;
}

md-tabs.cmd-tabs .md-tab {
    font-size: 13px;
    padding: 6px 35px 0 12px;
    text-transform: capitalize;
    background: rgba(255, 255, 255, 0.4);
}

md-tabs.cmd-tabs .md-tab.md-active {
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

md-tabs.cmd-tabs md-ink-bar {
    height: 0px;
}

.oobm_tabs md-tabs {
    padding: 8px 8px 0 6px;
}

.oobm_tabs md-tabs-canvas {
    height: 35px;
}

.oobm_tabs md-pagination-wrapper {
    left: 2px;
}

md-card.oobm_container {
    margin-top: 0px;
}

.remove-tab-btn {
    background: transparent;
    border: 0px;
    position: absolute;
    right: 8px;
    top: 10px;
    margin: 0px;
    border-radius: 50%;
    padding: 1px;
}

.remove-tab-btn i {
    font-size: 13px;
    color: #333;
}

.remove-tab-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.oobm_container .logs_nots {
    height: calc(100vh - 280px);
}

.alert-list-header {
    padding: 0px 16px 0;
    display: flex;
    align-items: center;
}

.alert-list-header .search-box {
    position: relative;
    right: 0;
}

.alert-action {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.alert-action .download-excel-btn,
.md-button.download-excel-btn {
    /* margin: -5px 0px 0px 10px !important; */
    border-radius: 50%;
}


.alert-type {
    color: #fff;
    border-radius: 4px;
    width: auto;
    display: flex;
    align-items: center;
    font-size: 10px;
    padding: 3px 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.alert-type span {
    font-size: 9px;
}

.alert-type .icon {
    background: rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    padding: 2px;
    margin-right: 3px;
}

.td-download-btn span {
    font-size: 21px;
    color: #388E3C;
}

.alert-type .icon i {
    font-size: 14px;
}

.alert-sub-type {
    margin-bottom: 15px;
}

.alert-sub-type-header md-checkbox {
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 0px;
}

.alert-sub-type-header md-checkbox .md-container.md-ink-ripple {
    left: 10px;
}

.alert-sub-type-body {
    padding: 15px 10px;
    background: #f9f9f9;
}

.alert-sub-type-body .title h2 {
    color: #555;
    font-size: 15px;
    font-weight: 500;
}

.alert-sub-type-body .sm-checkbox-group {
    display: flex;
}

.add-parmes-form {
    background: #f5f5f5;
    padding: 20px 10px 0;
    border: 1px solid #ddd;
}

.add-parmes-form .md-primary, .add-parmes-form .md-secondary {
    margin: 13px 0px 0 5px !important;
    height: 30px;
    min-height: auto;
    line-height: 30px;
    font-size: 12px;
    font-weight: 600;
}

.enable-input md-checkbox {
    margin: 0;
    max-height: 60px;
}

.brake-word {
    word-break: break-word !important;
}


/*oobm mappings*/

.oobmMappings span i.material-icons {
    position: relative;
    font-size: 10px;
    margin-right: 4px;
    top: 1px;
}

.oobmMappings .md-button {
    min-height: auto;
    line-height: normal;
    font-size: 11px;
    padding: 0px 20px;
    background: #fff;
    border-radius: 20px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
}

.oobmMappings .connected {
    color: #00ff0a;
}

.oobmMappings .disConnected {
    color: #b9b9b9;
}

.td-min-width-100 {
    min-width: 100px;
}

.td-min-width-150 {
    min-width: 150px;
}

.td-min-width-400 {
    min-width: 400px;
}

.nowrap {
    white-space: nowrap;
}

.table-no-word-brake tr td {
    word-break: unset !important;
}

.table-th-nowrap tr th {
    white-space: nowrap;
}

md-chips.sm-chips .md-chips .md-chip-input-container input {
    height: 26px;
    line-height: 26px;
}

md-chips.sm-chips .md-chips md-chip {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    margin: 0px 5px 0 0;
    padding: 0 10px;
}

md-chips.sm-chips .md-chips md-chip .md-chip-remove {
    width: 20px;
    height: 20px;
}

.border-right {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}


/*device alert graph styles*/

.active-device-pro-bar-group {
    width: 65%;
    /* transform: rotate(-90deg);*/
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 15% 10px 5px;
}

.active-device-pro-bar-group .progress {
    position: relative;
    width: 100%;
    height: 20px;
    margin-bottom: 25px;
    overflow: visible;
    background-color: #fff;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.active-device-pro-bar-group .progress-bar span.value {
    position: absolute;
    top: 2px;
    /*  -webkit-transform: rotate(-90deg);
    transform: rotate(90deg); */
    right: -28px;
    font-weight: 600;
    font-size: 13px;
}

.active-device-pro-bar-group .progress span.total-number {
    position: absolute;
    top: 26px;
    left: 1px;
    font-weight: 600;
    font-size: 12px;
}

.active-device-pro-bar-group .progress span.total-number b {
    color: #757575;
    font-weight: 600;
}

.active-device-pro-bar-group .progress-bar {
    position: relative;
}

.active-device-pro-bar-group md-progress-linear {
    width: 100%;
    height: 25px;
}

.active-device-pro-bar-group md-progress-linear .md-container,
.active-device-pro-bar-group md-progress-linear .md-container .md-bar {
    height: 25px;
}

.bar-green .progress-bar {
    background-color: #4caf50;
   /*  box-shadow: 2px 3px 9px 1px rgb(0 205 140 / 22%); */
}

.bar-green.progress span {
    color: #4caf50;
}

.bar-grey .progress-bar {
    background-color: #CFCFCF;
}

.bar-grey.progress span {
    color: #CFCFCF;
}

.bar-yellow .progress-bar {
    background-color: #ffff00;
    /* box-shadow: 2px 3px 9px 1px rgb(246 162 1 / 22%); */
}

.bar-yellow.progress span {
    color: #ffff00;
}

.bar-red .progress-bar {
    background-color: #FF0011;
   /*  box-shadow: 2px 3px 9px 1px rgb(241 82 110 / 22%); */
}

.bar-red.progress span {
    color: #FF0011;
}

.nirad-bar .progress-bar {
    background-color: #039be5;
}

.nirad-bar.progress span {
    color: #039be5;
}

.header-justify-space-beteen {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.alertTypeTable {
    padding: 0;
}

.alertTypeTable tr:last-child {
    border: none;
}

.disableWifiPosition {
    float: right;
    margin-top: -60px;
}

.alert-sub-type-col td span:last-child {
    margin-bottom: 10px;
}

.table-no-out-border {
    border: 0px !important;
}

.table-no-out-border tr th:last-child,
.table-no-out-border tr td:last-child {
    border-right: 0px !important;
}

.table-no-out-border tr th:first-child,
.table-no-out-border tr td:first-child {
    border-left: 0px !important;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.show-hide-password.material-icons {
    position: absolute;
    right: 3px;
    top: 9px;
    font-size: 21px;
    color: #555;
}

.show-hide-password:focus {
    outline: 0;
    border: 0px;
}

.chart-doughnut {
    /*width:auto !important;*/
    height: 100% !important;
    z-index:1;
}

.superdashboard-graphs .graph-holder md-card-content {
    height: 220px;
}

.oobmBtnCol {
    padding: 0 0 0 8px !important;
}


/*alert filter styles*/

.validation-messages-alerts {
    margin-top: 50px;
    position: absolute;
    color: red;
}


/*oobm tab loader style*/

.console_loader {
    display: block;
    padding: 30px;
}

.console_loader_hide {
    display: none;
}

.chips-input md-chips .md-chips {
    padding: 0px;
    font-size: 13px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: none;
    height: 37px;
    width: 100%;
}

.chips-input .md-chips.md-removable md-chip {
    height: 23px;
    line-height: 22px;
    margin: 8px 8px 4px 0;
}

.chips-input .md-chips md-chip .md-chip-remove {
    width: 20px;
    height: 25px;
    line-height: 25px;
}

.chips-input .md-chips md-chip .md-chip-remove md-icon {
    height: 15px;
    width: 15px;
}

.chips-input .md-chips .md-chip-input-container {
    height: 23px;
    width: 100%;
    line-height: 23px;
    margin: 8px 8px 4px 0;
}

.chips-input .md-chips .md-chip-input-container input:not([type]) {
    height: 23px;
    width: 100%;
}

.chips-input .hint {
    display: block;
    max-height: unset;
    bottom: -12px;
}

.webhook-input md-select .md-select-value {
    height: 34px;
}

#video {
    object-fit: initial;
    min-width: 890px;
    max-width: auto;
    height: 490px;
}

.file-upload-button-wrap input[type="file"] {
    position: absolute;
    z-index: -1;
    top: 5px;
    left: -86px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.57);
    display: flex;
    flex-direction: row-reverse;
    
    word-break: break-word;/* added by poulomi ticket_8380_31/Oct/2023*/
    margin-left: 6px;/* added by poulomi ticket_8380_31/Oct/2023*/
}

.file-upload-button-wrap.has-title input[type="file"] {
    left: -45px;
}

.file-upload-button-wrap input[type="file"]:focus {
    outline: 0;
    box-shadow: none;
}

.file-upload-button-wrap {
    position: relative;
    width: calc(100% - 6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    /* height: 30px; */
    overflow: hidden;
    margin: 12px 3px;
}

.file-upload-btn-overlap {
    display: flex;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 2px;
    background-color: var(--primary);
    font-size: 12px;
    color: #fff;
    float: right;
    margin-top: 3px;
    align-items: center;
    justify-content: center;
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-weight: 500;
}

.file-upload-btn-overlap .material-icons {
    font-size: 16px;
    margin-right: 5px;
}

.file-upload-label {
    position: absolute;
    height: 30px;
    width: 45px;
    background: #fff;
    text-align: left;
    /* line-height: 30px; */
    line-height: normal;
    font-weight: 500;
    font-family: Roboto, Helvetica Neue, sans-serif;
}

.overflow-y-scroll {
    overflow-y: auto;
    max-height: 300px;
}

.info-card {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.vpn-subtunnel-bar {
    padding: 0;
    justify-content: space-between;
}

.info-item {
    display: flex;
    margin-right: 30px;
    align-items: center;
}

.info-item strong {
    color: #555;
    font-weight: 600;
    margin-right: 5px;
}

.info-item span {
    color: #757575;
}

.radio-btn-label {
    font-size: 14px;
    font-weight: 500;
}

.radio-btn-label input {
    margin-right: 5px;
}

.linkbonding-network-box {
    width: auto;
    border: 1px solid #ddd;
    padding: 15px 20px;
    margin-right: 10px;
    height: 140px;
    border-radius: 4px;
}

.linkbonding-network-box .title {
    margin-top: 0;
    margin-bottom: 0px;
}

linkbonding-network-box md-switch {
    margin-top: 10px;
}

.linkbonding-section {
    display: flex;
    flex-wrap: wrap;
}

md-select-menu>md-content {
    padding-top: 0px !important;
}

.md-thumb {
    background-color: rgb(3 155 229);
}

md-switch.md-default-theme.md-checked .md-ink-ripple,
md-switch.md-checked .md-ink-ripple {
    color: rgb(3 155 229);
}

md-switch.md-default-theme.md-checked .md-bar,
md-switch.md-checked .md-bar {
    background-color: rgba(3, 155, 229, 0.4);
}

.margin-0 {
    margin: 0 !important;
}

md-switch.md-default-theme.md-checked .md-thumb,
md-switch.md-checked .md-thumb {
    background-color: rgb(3 155 229);
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.ml-15 {
    margin-left: 15px;
}

.track-by {
    color: #999;
    font-size: 13px;
}

.fa-angle-down.toggled {
    transform: rotate(180deg);
}

.file-view {
    position: relative;
    left: 10%;
    display: flex;
    align-items: center;
    width: 70%;
    word-break: break-all;
}

.file-icon {
    width: 40px;
    height: 40px;
    background: url(../images/file-img.png) no-repeat bottom;
    background-size: 100%;
    display: inline-block;
}

.showError {
    display: block !important;
}

.has-error {
    display: block;
}

.has-success {
    display: none;
}

.flex-one-half {
    -webkit-flex: 1.5 1 0% !important;
    -ms-flex: 1.5 1 0% !important;
    flex: 1.5 1 0% !important;
    box-sizing: border-box;
}

.addr-geo {
    display: inline-block;
    width: 100%;
}

.checkBoxDisable {
    cursor: not-allowed !important;
}

.sk-visibility {
    display: inline-block;
    position: absolute;
    right: 0;
    cursor: pointer;
}

th.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1;
}

md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    min-height: auto !important;
}

.dyn-ht-chart {
    height: 290px;
    display: flex;
    flex-direction: column;
}
.dyn-ht-chart > div[flex] {
    flex: 1;
    position: relative;
    min-height: 0;
}
.dyn-ht-chart canvas {
    max-width: 100%;
    max-height: 100%;
}

/* IPsec form: reusable "Local/Remote Identifier" and "IKE/ESP Proposal Set" two-column rows
 * Each half always takes 50% of the row so dropdowns inside can grow to fill their half. */
.ipsec-pair-row {
    margin: 12px 0;
    gap: 24px;
}
.ipsec-pair-half {
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    gap: 8px;
    min-width: 0;
    flex: 0 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
    box-sizing: border-box;
}
/* Keep dropdown / input vertically centered against the checkbox baseline */
.ipsec-pair-half > md-input-container,
.ipsec-pair-half > md-checkbox,
.ipsec-pair-half > span {
    align-self: center;
}
.ipsec-auto-derived {
    font-size: 13px;
    display: inline-block;
    white-space: nowrap;
}
.ipsec-mode-select {
    margin: 0 !important;
    min-width: 160px;
    flex: 1 1 0;
}

/* Data Usage card title row: title on left, Select Hub on right */
.data-usage-title-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    gap: 12px;
}
.data-usage-title-row .data-usage-title-text {
    flex: 1;
}
.data-usage-title-row .data-usage-hub-select {
    width: 200px;
    flex: 0 0 200px;
}

.fgt-pwd {
    margin: auto;
}

.no-data-section {
    margin: auto;
    width: 50%;
    padding-top: 24%;
    text-anchor: middle;
}

.no-data-lable {
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
}

.pad-0 {
    padding: 0 !important;
}

.cert_brd {
    position: relative;
}

.dvcd-ht {
    height: 290px;
}

.dvcd-ht-sq {
    height: 230px;
}

.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w-49 {
    width: 49%;
}

.graph-card-ht {
    max-height: 240px;
}

@media screen and (max-width: 960px) {
    .graph-card-ht {
        max-height: 350px;
    }
}

@media only screen and (min-width: 1500px) and (max-width: 1800px) {
    .graph-card-ht {
        max-height: 290px;
    }
}

@media screen and (min-width: 1800px) {
    .graph-card-ht {
        max-height: 85%;
    }
}

.dyn-ht-chart-1 {
    height: 210px;
}

.report-data {
    position: relative;
}

.report-data .search-box {
    top: 8px;
}

.openVPNSearch .search-box {
    top: 6px;
    color: black;
}

.device-range-type {
    padding: 5px 10px 5px 10px;
}

.align-strech {
    align-items: stretch;
    display: flex;
}

.flex-auto {
    display: flex;
    flex: auto;
}

.h-350-px {
    height: 350px;
}

.required-field {
    color: red;
    font-size: 12px;
}

.hint-field {
    color: #888;
    font-size: 12px;
    font-style: italic;
}

.ip-convert-btn {
    min-height: 28px;
    min-width: 28px;
    padding: 0;
    margin: 6px 0 0 0;
    line-height: 28px;
    cursor: pointer;
}

.ip-convert-btn i {
    font-size: 20px;
    color: #03a9f4;
}

.input-container-datepicker {
    width: 190px;
    padding-top: 10px;
}

@media screen and (max-width: 960px) {
    .display-block {
        position: absolute;
        display: block;
    }
    .md-card-title-copy {
        align-items: flex-start !important;
        height: 200px !important;
        max-height: 200px !important;
    }
    .download-excel-btn-copy {
        bottom: -140px;
        right: -80px;
    }
    .input-container-datepicker {
        width: 250px;
    }
}

.edit-cancel {
    box-shadow: none;
    color: #039be5;
    background: #f9f9f9;
    margin-right: 5px !important;
}

.wrapperMap {
    width: 100%;
    height: 100%;
    position: relative;
}

.ol-map {
    background: #000000;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    top: 0px;
    animation-name: bkg;
    animation-delay: 2.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes bkg {
    from {
        background: transparent;
        transition: background 1000ms linear;
    }
    to {
        background: #000000;
        transition: background 1000ms linear;
    }
}

.dis-none {
    display: none !important;
}

.dis-fix {
    position: relative;
    bottom: 15px;
}

.geofence-devices {
    background: #039be5;
    border: 0px;
    color: #FFF;
    padding: 3px 5px;
    border-radius: 4px;
}

.btn-add-traffic-rule {
    color: rgb(255, 255, 255) !important;
    right: 30px !important;
    position: absolute !important;
    background: #0579b2 !important;
    margin-top: -40px !important;
    margin-top: -20px;
}

.add-firewall-form-container {
    padding: 20px;
}

.save-firewall {
    float: right;
    padding: 0px 15px !important;
}

.param-dropdown {
    background: #039be5;
    border-radius: 4px;
    padding: 0px 10px;
}

.param-dropdown md-select {
    margin: 0px;
}

.param-dropdown .md-select-value>span:not(.md-select-icon) .md-text {
    display: inline;
    color: #fff;
    font-size: 12px;
}

.param-dropdown .md-select-value .md-select-icon {
    color: #fff;
}

.blue-header-table-card {
    overflow: visible;
    position: relative;
}

.blue-header-table-card.collapse-card {
    overflow: unset;
    margin-left: 0px;
    margin-right: 0px;
}

.blue-header-table-card md-card-title,
.blue-header-table-card md-card-header {
    background: var(--primary);
    padding: 5px 15px;
}

.blue-header-table-card md-card-title md-card-title-text span {
    color: #fff;
}

.blue-header-table-card md-card-title md-card-title-text .title,
.blue-header-table-card md-card-header md-card-header-text {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.blue-header-table-card md-card-content {
    border: 0px !important;
}

.blue-header-table-card .nirad_table tr th {
    background: var(--primary-dark);
    color: #fff;
    font-weight: 500;
    border-top: 0px;
    padding: 5px 8px;
    font-size: 12px;
}

.blue-header-table-card .nirad_table tr th:first-child,
.blue-header-table-card .nirad_table tr td:first-child {
    padding-left: 8px !important;
}

.blue-header-table-card .nirad_table tr td .child-table tr td:first-child {
    padding-left: 8px;
}

.blue-header-table-card .nirad_table tr td {
    word-break: break-all;
    padding: 5px 8px !important;
    font-size: 12px;
    vertical-align: middle;
}

.blue-header-table-card .nirad_table .child-table tr td{
	padding: 0px 5px 2px 0 !important;
}

.blue-header-table-card .nirad_table tr td md-switch {
    margin: 0px;
}

.blue-header-table-card md-card-title md-input-container label,
.blue-header-table-card md-card-title md-input-container .md-datepicker-input {
    color: #fff;
}

.blue-header-table-card md-card-title md-input-container.md-input-has-value label,
.blue-header-table-card md-card-title md-input-container.md-input-focused label {
    color: #fff !important;
}

.blue-header-table-card md-card-title .md-datepicker-button md-icon.md-default-theme,
.blue-header-table-card md-card-title .md-datepicker-button md-icon {
    color: #fff;
}

.blue-header-table-card md-card-title .clear-btn {
    background: #0089ca;
}

.blue-header-table-card .search-box input {
    background: rgba(0, 110, 180, 0.6);
    border: 0px;
    border-radius: 15px;
    padding: 5px 15px 5px 40px;
    font-size: 13px;
    font-weight: 400;
    width: 100%;
    color: #fff;
}

.blue-header-table-card .search-box i.search-icon {
    color: #fff;
    border: 0px;
}

.blue-header-table-card .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

.blue-header-table-card .search-box input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.blue-header-table-card .search-box input::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.blue-header-table-card .table {
    margin-bottom: 0px;
}

.blue-header-table-card .showall-btn {
    padding: 5px 10px;
    color: #555 !important;
    background: #fff !important;
    font-size: 11px;
    min-height: inherit;
    line-height: inherit;
    text-transform: capitalize !important;
    font-weight: 600;
    border-radius: 20px;
    min-height: 25px !important;
    height: 25px;
    line-height: 27px !important;
}

.blue-header-table-card md-radio-button.md-default-theme .md-off,
.blue-header-table-card md-radio-button .md-off {
    border-color: rgba(255, 255, 255, 0.3);
    background: #008dd0;
}

.blue-header-table-card md-radio-button.md-default-theme .md-on,
.blue-header-table-card md-radio-button .md-on {
    background-color: rgb(255 255 255 / 87%);
}

.blue-header-table-card md-radio-button.md-default-theme.md-checked .md-off,
.blue-header-table-card md-radio-button.md-checked .md-off {
    border-color: rgba(255, 255, 255, 1);
}

.blue-header-table-card .sorting-table tr th a {
    color: #fff;
}

.blue-header-parameters-colapse-panel .parameters {
    padding: 0px;
    border: 0px;
}

.blue-header-parameters-colapse-panel .config-multi-wan-type-selection {
    background: var(--primary-dark);
    margin: 0;
    padding: 13px 8px 11px;
}
.collapse-content .config-multi-wan-type-selection {
    background: var(--primary-dark);
    margin: 0;
    padding: 13px 8px 11px;
}

.blue-header-parameters-colapse-panel .config-multi-wan-type-selection md-radio-group.radio-btn-sm md-radio-button {
    color: #fff;
}
.collapse-content .config-multi-wan-type-selection md-radio-group.radio-btn-sm md-radio-button {
    color: #fff;
}

.blue-header-parameters-colapse-panel .config-multi-wan-type-selection md-radio-group.radio-btn-sm md-radio-button .md-off {
    border-color: rgba(255, 255, 255, 0.3);
    background: #008cce;
}

.blue-header-parameters-colapse-panel .config-multi-wan-type-selection md-radio-group.radio-btn-sm md-radio-button.md-checked .md-off {
    border-color: rgba(255, 255, 255, 1);
}

.blue-header-parameters-colapse-panel .config-multi-wan-type-selection md-radio-group.radio-btn-sm md-radio-button.md-checked .md-on {
    background-color: rgba(255, 255, 255, 1);
}
.collapse-content .config-multi-wan-type-selection md-radio-group.radio-btn-sm md-radio-button .md-off {
    border-color: rgba(255, 255, 255, 0.3);
    background: #008cce;
}

.collapse-content .config-multi-wan-type-selection md-radio-group.radio-btn-sm md-radio-button.md-checked .md-off {
    border-color: rgba(255, 255, 255, 1);
}

.collapse-content .config-multi-wan-type-selection md-radio-group.radio-btn-sm md-radio-button.md-checked .md-on {
    background-color: rgba(255, 255, 255, 1);
}

.blue-header-parameters-colapse-panel .nirad_table tr th {
    background: #008cce;
    color: #fff;
    font-weight: 500;
    border-top: 0px;
}

.blue-header-parameters-colapse-panel .table-bordered {
    border: 0px;
}

.blue-header-parameters-colapse-panel .table-bordered>thead>tr>th,
.blue-header-parameters-colapse-panel .table-bordered>tbody>tr>th {
    border: 1px solid #017db7;
}

.oxygen-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.oxygen-info-item {
    display: flex;
    align-items: baseline;
    margin-right: 60px;
}

.oxygen-info-item .title {
    white-space: nowrap;
    font-size: 13px;
    text-transform: capitalize;
}

.oxygen-info-item span {
    padding: 0 5px;
}

.oxygen-info-item .info {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}

.search-box-1 {
    width: 300px;
    position: absolute;
    right: 40px;
    top: 6px;
    z-index: 9999;
}

.search-box-1 input:focus {
    outline: 0px;
}

.search-box-1 input {
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 5px 15px 5px 40px;
    font-size: 13px;
    width: 100%;
    color: black;
}

.dely-msg {
    animation: 1s fadeIn;
    animation-fill-mode: forwards;
    visibility: hidden;
}

@keyframes fadeIn {
    99% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}


/*.selectBandSection{
	padding-top: 9px;
    padding-left: 30px;
}*/

.active-menu {
    color: #fff !important;
    background: #039be5 !important;
}

.text-white {
    color: #fff !important;
}

.excel-export-btn .download-excel-btn {
    margin: -5px 0px 0px 10px !important;
}

.md-button.upload-file-btn,
.md-button.download-sample-btn {
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    text-transform: capitalize;
}

.tableHeader{
    width: 13%;
    vertical-align: middle !important;
}

.md-button.download-sample-btn {
    border: 1px solid #fff;
    min-height: 20px;
    height: 29px;
    padding: 0px 9px;
    font-size: 11px;
    margin: -5px 20px 0px 10px !important;
}

.md-button.upload-file-btn {
    color: #2e7d32;
    padding: 0px 15px;
    font-size: 12px;
    margin: -5px 0px 0px 15px !important;
}

.md-button.upload-file-btn i {
    font-size: 19px;
    margin-right: 5px;
    color: #2e7d32;
}

.md-button.download-sample-btn i {
    font-size: 19px;
    margin-right: 5px;
}

.addNewModuleBtn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.addNewModuleBtn i {
    color: #fff;
    margin-right: 5px;
}

md-card.deviceMacAddressFieldContainer {
    width: 30%;
    margin-bottom: 15px;
}

md-card.deviceMacAddressFieldContainer md-card-content {
    padding: 5px 10px;
}

md-card.deviceMacAddressFieldContainer md-card-content md-input-container {
    width: calc(100% - 72px);
}

.subheader-with-select-box {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    height: 36px;
}

.md-subheader.nirad_subheader .subheader-with-select-box .title {
    text-transform: capitalize;
    font-size: 12px;
}

.subheader-with-select-box md-select {
    margin: 0px;
    background: var(--primary);
    border-radius: 20px;
    margin-left: 5px;
    padding: 0px 15px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);
}

.subheader-with-select-box md-select .md-select-value {
    color: #fff;
    margin-top: 0;
    padding-bottom: 0 !important;
    text-transform: capitalize;
    font-size: 13px;
}

.subheader-with-select-box md-select:focus:not([disabled]) .md-select-value.md-select-placeholder,
.subheader-with-select-box md-select:focus:not([disabled]) .md-select-value {
    color: #fff;
}

.td-width-150 {
    min-width: 150px;
    max-width: 150px;
}

.td-width-220 {
    min-width: 220px;
    max-width: 220px;
}

.td-width-810 {
    min-width: 810px;
    max-width: 810px;
}

.child-table-last-child-no-border tr:last-child td {
    border-bottom: 0px;
}

.select-margin {
    margin: -5px 0 -9px !important;
}

.oobmForm md-select.md-default-theme .md-select-icon,
md-select .md-select-icon {
    color: #999;
}

.oobmForm md-select .md-select-value.md-select-placeholder {
    color: #999 !important;
}

span.md-toast-text {
    -webkit-line-clamp: 6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-height: 12rem;
}

.td-width-600 {
   
    max-width: 560px;
}
.no-padding-left{
    padding-left: 0 !important;
}
.padding-left-15{
    padding-left: 15px !important;
}
.td-width-100 {
    min-width: 90px;
    max-width: 90px;
}

.td-width-120 {
    min-width: 120px;
    max-width: 120px;
}

.td-width-100-130 {
    min-width: 100px;
    max-width: 130px;
}
.td-width-130 {
    min-width: 130px;
    max-width: 130px;
}

.td-width-103 {
    min-width: 103px;
    max-width: 103px;
}
.renew{
    font-size: 11px;
    color: blue;
    text-decoration: underline;

}
.graph-toggle{
    background: rgb(3, 155, 229);
    color: white;
    border: none;
    border-radius: 3px;
    min-width: 55px;
    width: auto;
    height: 20px;
}
.graph-toggle:hover {
    background: rgb(2, 119, 179); /* Darker shade on hover */
    cursor: pointer; /* Optional: Changes the cursor to pointer */
}
.graph-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.table-cus{
    margin-bottom: 0 !important;
}
.table-cus2{
    height: 150px !important;
}
.licence-stat{
    top: 22px !important;
     left: 17px !important;
    text-align: left !important;

}
.imei-table table>th,
td {
    padding: 8px 4px !important;
}

.align-top {
    vertical-align: super !important;
}

.md-enterprise-select .md-select-value .md-select-icon {
    width: 15px;
}

.pop-up--excel-sheet {
    position: absolute !important;
    top: 2px;
    margin: 0 !important;
    min-height: 30px !important;
    right: 2px;
}

.pop-up--excel-sheet img {
    width: 20px;
}

.text-link {
    text-decoration: underline;
    font-size: 14px;
}

.text-blue:hover {
    color: #0680b9;
}

.text-red:hover {
    color: #dc1d38;
}

.text-green:hover {
    color: #0f9d58;
}

.no-data-available {
    position: absolute;
    width: 20vw;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
}

.active-sites-card .material-icons {
    font-size: 8px !important;
}

.active-sites-title {
    /* padding-top: 30px; */
}

.active-site-scale {
    margin-left: 35%;
    font-size: 12px;
}

.vpn-tunnel--unregistereddevice {
    position: relative;
    top: 50%;
    transform: translate(25%, -50%);
}

.vpn-linechart--unregistereddevice {
    position: relative;
    top: 44%;
    transform: translate(25%, -50%);
}

.td-link {
    color: var(--primary);
    cursor: pointer;
}

.td-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.td-config-list {
    color: var(--primary);
}

.dialog-table-header {
    padding: 7px 10px;
    /* background: #e9e8e8; */
    background: var(--primary);
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.dialog-table-header .title {
    flex-grow: 1;
    color: #fff;
}

.dialog-table-header .search-box input {
    border: 0px;
    background: var(--primary-dark);
    color: #fff;
}

.dialog-table-header .search-box i {
    color: #fff;
    border-right: 0;
}

.dialog-table-header .search-box {
    flex-grow: 1;
    width: auto;
    position: relative;
    right: inherit;
    top: inherit;
}

.dialog-table-header .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

.dialog-table-header .search-box input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.dialog-table-header .search-box input::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.dialog-table-filter-items {
    background: #e9e8e8;
    padding: 5px 5px 0 3px;
    border-top: 1px solid #d1d1d1;
}

.dialog-table-filter-items md-input-container.md-icon-left {
    padding: 2px;
}

.dialog-table-filter-items md-input-container .md-input {
    padding-left: 26px;
}

.dialog-table-filter-items md-input-container.md-icon-left>label {
    left: 26px;
}

.dialog-table-filter-items md-input-container.md-icon-float>md-icon {
    top: 8px;
    left: 2px;
    right: auto;
    font-size: 18px;
}

.dialog-table-filter-items md-input-container>md-icon {
    color: #999;
}

.dislog-table-scroll {
    height: auto;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 200px;
}

.view-import-config-file {
    width: 100%;
    min-height: 300px;
    font-family: "Courier New" !important;
    resize: none;
}

.cp {
    cursor: pointer;
}

.config-edit {
    font-size: 12px !important;
    cursor: pointer;
}

.d-grid {
    display: flex;
    align-items: center;
    min-height: 46px;
}

.config-visibility {
    font-size: 18px !important;
}

.fit-content {
    width: fit-content !important;
}

.view-file-padding {
    padding: 8px !important;
}

.date-active-site {
    font-size: 10px;
    /* color: #0388c9; */
    color: #727272;
}

.md-open-menu-container {
    min-width: 200px !important;
}

.text-transform-capitalize {
    text-transform: capitalize;
}


/* bug fix - import Config */

.autocomplete-import md-input-container label:not(.md-container-ignore).md-required:after {
    content: "*";
    font-size: 13px;
    vertical-align: top;
    display: inline-block;
}

.autocomplete-import md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after,
md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
    color: red;
}

.vpn-server-client-error {
    margin-top: -12px;
    font-size: 12px;
    color: #2196f3;
}

.bulk-device-pegination {
    position: absolute;
    bottom: 40px;
    width: 98%;
}

.ml-0 {
    margin-left: 0;
}

.data-report-msg {
    display: flex;
    height: 90%;
    align-items: center;
    justify-content: center;
}

.firmware-update {
    font-size: 10px;
    color: #03a9f4;
}

.firmware-update-input {
    min-width: 160px;
    margin: 0px !important;
}

.router {
    display: flex;
    justify-content: space-around;
    width: 100%;
    flex-direction: column
}

.dynWidth {
    width: 100%;
}

.nirad-router-logo {
    top: 65%;
}

.port-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

.port-wrapper md-select-value,
md-select-icon {
    text-align: end;
    color: ghostwhite;
}

.port-wrapper md-select.md-default-theme .md-select-icon,
md-select .md-select-icon {
    color: ghostwhite;
}

.bg-router {
    /* background-image: url('assets/images/AA39318_5.png'); */
    /* background: #646361; */
    /* background: #88857f;  */
    /* background:#c6c2c1; */
    background: #7e7e7e;
    ;
    padding-top: 17px;
    border-radius: 7px;
    border-bottom-left-radius: 68px;
    border-bottom-right-radius: 68px;
    border-top: 10px solid black;
    clip-path: polygon(0 0, 100% 0, 99% 30%, 100% 75%, 100% 100%, 0 100%, 0 70%, 1% 26%);
    box-shadow: 0px 1px 4px #9ea6af;
}

.port-container {
    display: flex;
    flex-direction: column;
    width: 13%;
    align-items: center;
}

.port-container img {
    width: 80%;
}

.combo-port-container {
    display: flex;
    flex-direction: column;
    width: 23%;
    align-items: center;
}

.combo-images {
    display: flex;
    width: 90%;
    gap: 2px;
}

.port-img-wrapper {
    position: relative;
    width: 50%;
}

.port-img-wrapper img {
    width: 100%;
}

.combo-images .port-img-wrapper {
    display: flex;
    align-items: center;
}

.combo-images .port-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.port-type-label {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    color: honeydew;
    white-space: nowrap;
}

.port-container .port-img-wrapper {
    width: 80%;
}

.ports {
    display: flex;
}

.wifi-wrapper {
    display: flex;
    margin: 0 5%;
}

.nirad-router-logo {
    width: 6%;
    position: absolute;
    left: 12px;
    top: 5px;
}

.router-model-number {
    margin-top: -10px;
    font-size: 9px;
    position: relative;
    color: mintcream;
}

.led-box {
    /* height: 30px;
  width: 25%; */
    margin: 2px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.led-green {
    margin: 0 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;
}

.power-symbol-router {
    font-size: 15px;
    color: darkgray;
}

.router-special-effect {
    width: 90%;
    margin-top: 0px;
    box-shadow: 1px 10px 17px 1px rgb(0 0 0 / 75%);
}

.port-label {
    font-size: 8px;
    color: honeydew;
}


/* configuration port config */

.portConfig-container .title {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 0px;
    margin-top: 10px;
}

.port-config-section {
    padding-top: 20px;
}

.title {
    font-size: 14px;
    /* font-weight: 600; */
    color: #555;
    margin-bottom: 0px;
}

.port-config-title {
    margin-top: 10px;
    font-size: 20px;
    color: rgb(100, 100, 100);
}

.config-profile-delete {
    width: fit-content;
    border: 1px solid #03a9f4 !important;
    border-radius: 50% !important;
}

.config-profile-delete i {
    color: #03a9f4;
}

.config-profile-delete:hover {
    background-color: #03a9f4 !important;
}

.config-profile-delete:hover i {
    color: #FFFFFF;
}

.config-profile-cancel {
    width: fit-content;
    border: 1px solid #FFFFFF !important;
    border-radius: 50% !important;
    background-color: #03a9f4 !important;
}

.config-profile-cancel i {
    color: #FFFFFF;
}

.config-profile-cancel:hover {
    background-color: #FFFFFF !important;
    border: 1px solid #03a9f4 !important;
}

.config-profile-cancel:hover i {
    color: #03a9f4;
}

.list-member {
    display: block;
}

.device-port-config-header {
    background: var(--primary);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.member-align {
    display: flex;
    align-items: center;
}


/* version loader css  */

.version-loader {
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid blue;
    border-bottom: 2px solid blue;
    width: 10px;
    height: 10px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin: 10px 0px 0px 10px;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* version loader css end */

.device-tag-description {
    max-width: 450px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wifi-display-position {
    display: flex;
    margin-top: 9px;
    width: auto;
    align-items: center;
}

.wifi-title {
    margin: 4px 10px auto auto;
}

.wifi-status-title {
    padding-left: 11px;
    margin: auto;
    pointer-events: none;
}

.wifi-status-detail {
    margin: 10px 10px 0 -3px !important;
    display: flex;
    width: 100%;
    align-items: center;
}

@media screen and (max-width:630px) {
    .wifi-status-detail {
        justify-content: space-around !important;
    }
}

.scan-button {
    margin-left: 10px !important;
    border-radius: 4px !important;
}

.card-spacing {
    margin-bottom: 13px !important;
}

.table-align {
    margin-left: 10px !important;
    margin-right: 10px !important;
    width: auto !important;
}

.ssid-padding {
    padding: 5px;
}

.ssid-content {
    width: 100%;
    text-align: center;
}

.ssid-content-inner {
    width: 100%;
}

.port-unavailablity {
    display: none;
    opacity: 0;
    animation-name: port-status;
    animation-timing-function: linear;
    animation-delay: 3s;
}

.wifi_enable {
    padding-top: 1px;
    color: rgb(69, 255, 0);
}

.wifi_disable {
    padding-top: 1px;
    color: rgb(111, 111, 111);
}

.icon-size {
    margin-top: 1px;
    margin-right: 5px;
    font-size: 8px !important;
}

.status-font {
    margin-right: 40px;
    font-size: 16px;
}

.netowrkClass {
    width: 284px;
}

@keyframes port-status {
    from {
        display: block;
        opacity: 0;
    }
    to {
        display: block;
        opacity: 1;
    }
}

td.zone-fowarding {
    vertical-align: middle !important;
}

.zone-fowarding md-input-container {
    width: 100%;
    margin-top: 0 !important;
}

.zone-fowarding md-select {
    margin-bottom: 0 !important;
}

td.zone-fowarding:first-child {
    background-color: #f7f7f7;
    font-weight: 600;
}


/* Styles go here */

.nirad-draggable-table tbody[dnd-list],
.nirad-draggable-table tbody[dnd-list]>tr {
    position: relative;
}

.nirad-draggable-table tbody[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

.nirad-draggable-table tbody[dnd-list] .dndDraggingSource {
    display: none;
}

.nirad-draggable-table tbody[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    min-height: 42px;
}

.nirad-draggable-table tbody[dnd-list] tr {
    background-color: #fff;
    margin-bottom: -1px;
}

.nirad-draggable-table tbody[dnd-list] tr.selected {
    background-color: #dff0d8;
    color: #3c763d;
    cursor: move;
}

.nirad__sticky {
    right: 0;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 1;
    background: #fff;
}

td.nirad__sticky {
    box-shadow: 0px 0px 5px rgb(0 0 0 / 30%);
}

td.url-list {
    word-wrap: break-word;
    width: 300px;
    max-width: 300px;
}

.traffic-fwd {
    position: relative;
    padding: 0 !important;
}

.traffic-fwd>span {
    display: block;
    text-align: left;
    padding: 10px 15px 15px 10px;
}

.tfwd {
    padding-bottom: 15px !important;
}

.dest-zone {
    position: absolute;
    top: 100%;
    left: 80%;
    transform-origin: 0 0;
    transform: rotate(-90deg);
    font-size: 11px;
    border-top: 1px solid #fff;
    width: 100%;
    text-align: center;
}

.src-zone {
    position: absolute;
    bottom: 0;
    font-size: 11px;
    text-align: center;
    width: 80%;
    border-top: 1px solid #fff;
}

.input-container--readonly {
    position: relative;
    top: 10px;
}

.input--readonly {
    border-bottom: 0 !important;
}

.view-manage-title {
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    margin: 0px;
    padding: 10px 10px 10px 0;
}

.firewall-view-table th,
.firewall-view-table td {
    word-break: normal !important;
    word-wrap: initial;
}


.view-manage-flex {
 display: flex;
 color: black;
 flex-wrap: wrap;
 
 }
 
 
 
 .mar-r-12{
 
     margin-right: 10px;
 
 }

.view-manage-flex>tbody>tr>td {
    color: #757575;
    font-weight: 400;
    padding: 9px;
    vertical-align: top;
    word-wrap: break-word;
    border-top: 0px;
}

.view-manage-flex>tr>td>span {
    font-weight: bold;
    color: black;
}

.deviceName {
    width: 50% !important
}

.connectBtnCenter {
    /* writing-mode: vertical-rl; */
    margin: auto;
}

.tunnel-info-container {
    display: flex;
    align-items: center;
}

.pie-chart-size {
    display: block;
    /*width: 100% !important;*/
    /* height: 100% !important;
    margin-top: 10px !important; */
}

.dashboard-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 220px;
}


.deviceDash-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 172px;
}

.chart-error-container span {
	font-size: 165px;
    opacity: 0.08;
}
.chart-error-message{
    padding: 5px 0;
    margin: 0px;	
}
.chart-error-message span{
	opacity: 0.2;
	position: relative;
    top: -19px;
}

.chart-footer-legends {
    display: flex;
}

.chart-footer-legends .item {
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 10px;
}

.chart-footer-legends .item:last-child {
    margin-right: 0px;
}

.chart-footer-legends .item i {
    line-height: normal;
    font-size: 13px;
    margin-right: 3px;
    display:flex;
    flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 0.8vw;
}
.chart-footer-legends .item span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
	height: 0.7vw;
}

.devicesRegisteredChartContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.devicesRegisteredChart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 0px;
}

.enterpriseDoughnutChartContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.enterpriseDoughnutChart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 100%;
}
.enterpriseDoughnutChart .chart-container-dashboard {
	top: calc(50% - 50px);
}
.overLay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: transparent;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    cursor: no-drop;
}

ol.custom-list li.no:after {
    content: none;
}

.md-dialog-content h2 {
    font-size: 14px;
}

.text-align-vertical--middle {
    vertical-align: middle !important;
}
.text-align-center{
    text-align: center;
}
.no-data-section-popup {
    margin: auto;
    width: 50%;
    padding-top: 10%;
    padding-bottom: 10%;
    text-align: center;
}

.no-data-lable-popup {
    font-size: 18px;
    font-weight: 700;
}

.dis-flex {
    display: flex;
}



.child-table-list {
    color: #757575;
    font-weight: 400;
    word-wrap: break-word;
    border-top: 0px;
    text-transform: uppercase;
    vertical-align: top;
    display: inline-flex;
}

.child-table-list.separator~.child-table-list.separator::before {
    content: ',';
}

tr.child-table-list>td {
    padding: 0px !important;
}

.loader-nirad--container {
    display: flex;
    align-content: center;
    justify-content: center;
    margin: 0;
    height: 100vh;
    width: 100vw;
    background: ghostwhite;
}

.loader-nirad {
    --size: 150px;
    --_dimension: calc(0.353*var(--size));
    /* 0.353 = sin(45deg)/2 */
    width: calc(var(--size) + var(--_dimension));
    height: calc(var(--size) + var(--_dimension));
    aspect-ratio: 1;
    display: flex;
    /* margin: calc(var(--size)) 0; */
    margin: 15% 0;
}

.loader-nirad:before,
.loader-nirad:after {
    content: "";
    flex: 1;
    clip-path: polygon(var(--_dimension) 0, 100% 0, 100% calc(100% - var(--_dimension)), calc(100% - var(--_dimension)) 100%, 0 100%, 0 var(--_dimension));
    /* background:
      conic-gradient(from -90deg at calc(100% - var(--_dimension)) var(--_dimension),
       #fff 135deg,#666 0 270deg,#aaa 0); */
    background: conic-gradient(from -90deg at calc(100% - var(--_dimension)) var(--_dimension), #fff 135deg, #034d72 0 270deg, #039be5 0);
    animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
}

.loader-nirad:before {
    margin-right: calc(var(--_dimension)/-2 - 1px);
}

.loader-nirad:after {
    margin-left: calc(var(--_dimension)/-2 - 1px);
    animation-delay: -.75s
}

.loader-text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20% 15px;
    font-size: 18px;
    color: #727272;
}

@keyframes load {
    0%,
    40% {
        transform: translateY(calc(var(--size)/-4))
    }
    60%,
    100% {
        transform: translateY(calc(var(--size)/4))
    }
}

.md-select-value .md-select-icon:after {
    color: #555;
}

.add-zone-section {
    width: 50%;
    margin-top: 15px;
}

.selected-zones-section {
    width: 100%;
}

.table-border-left-right tr td:first-child {
    border-left: 1px solid #eceff5;
}

.table-border-left-right tr td:last-child {
    border-right: 1px solid #eceff5;
}

.selected-zones-section md-switch {
    margin: 0px;
}

md-switch.sm-switch {
    height: 16px;
}

md-switch.sm-switch .md-container {
    width: 27px;
    height: 15px;
}

md-switch.sm-switch .md-bar {
    width: 27px;
    top: 2.5px;
    height: 11px;
}

md-switch.sm-switch .md-thumb-container {
    top: 0px;
    left: 0;
    width: 16px;
}

md-switch.sm-switch .md-thumb {
    height: 15px;
    width: 15px;
}

.zone-delete-btn.md-button {
    margin: 0px !important;
    padding: 0px;
    min-height: auto;
}

.zone-delete-btn i {
    font-size: 15px;
    color: #555;
}

.add-zone-section .add-zone-btn.md-button {
    margin-left: 5px !important;
    min-height: auto;
    padding: 5px 12px;
    height: 30px;
    line-height: 23px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px !important;
}

.td-ssid-details-section {
    /* background: #fdfeff; */
    background: #f3f6fb;
}

.ssid-details-row {
    position: relative;
}

.row-connecting-line {
    position: relative;
}

.row-connecting-line:before {
    content: '';
    position: absolute;
    top: 0;
    left: 17px;
    width: 2px;
    height: 100%;
    background: var(--primary-dark);
    z-index: 1;
}

.row-connecting-line.main-row:before {
    top: 10px;
    height: calc(100% - 8px);
}

.row-connecting-circle {
    width: 20px;
    height: 20px;
    color: #fff;
    border-radius: 50%;
    background: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -7px;
    position: relative;
    z-index: 1;

}

.config-import-fields {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.config-import-fields .item {
    padding: 2px 0;
}

.sm-edit-btn {
    border: 0px;
    background: var(--primary);
    color: #fff;
    padding: 2px 1px;
    min-width: auto;
    width: 15px;
    border-radius: 2px;
    margin-top: 4px;
    box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 13%);
}


.sm-edit-btn i {
    font-size: 10px !important;
}

.md-button.btn-add-ssid {
    color: rgb(255,255,255);
	top: 0px !important;
	background: #039be5;
    width: 45px !important;
    height: 45px !important;
    line-height: 45px !important;
    z-index: 1 !important;
    position: absolute;
    right: 5px !important;
    bottom: 0 !important;
}
.wifi-align{
   display: flex;
   align-items: flex-start; 
}

.md-sidenav-right{
	transition: ease 2s all;
}
.md-sidenav-right.md-closed{
	transition: ease 2s all;
}
.toggleFilterBtn {
    margin: 0px 5px !important;
    height: 40px;
    min-height: auto;
}
.toggleFilterBtn i {
	color:#fff;
}
.toggleFilterBtn[disabled] {
	opacity: 0.7;
}

.filters-panel{
	-webkit-box-shadow: -4px -1px 30px -3px rgba(201,201,201,0.4);
-moz-box-shadow: -4px -1px 30px -3px rgba(201,201,201,0.4);
box-shadow: -4px -1px 30px -3px rgba(201,201,201,0.4);
}
.filters-panel-header{
	    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid #ddd;
      font-size: 13px;
    font-weight: 600;
}
.closeFilterPanel{
	border:0px;
	background:transparent;
	font-size: 16px;
}
.filter-panel-content{
	height:calc(100vh);
}

.filters-panel-header .title{
	margin: 0px;
    font-size: 14px;
    color: #555;
    font-weight: 600;
}

.filters-panel-header .md-button{
	margin: 0px !important;
    background: var(--secondary-color);
    padding: 0px;
    width: 20px;
    height: 20px;
    min-width: auto !important;
    min-height: auto;
    line-height: normal;
}
.filters-panel-header .md-button:hover{
	background: var(--secondary-color-dark);
}

.filters-panel-header .md-button i {
	font-size:14px;
	color:#fff;
}

.filter-footer {
	background:#fff;
	width: 100%;
    height: 40px;
    overflow: hidden;
    border-top:1px solid #ddd;
        display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

.filter-footer .md-button{
	margin: 0px !important;
    height: 30px;
    min-height: auto;
    line-height: 30px;
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 600;
}
.filterd-values {
	display: flex;
    align-items: center;
    padding: 5px 10px;
}
.filterd-values .filter-icon{
	margin-right: 5px;
    opacity: 0.2;
}
.filterd-values .filtered-item {
	display: flex;
    align-items: center;
    background: #fff;
    border-radius: 30px;
    padding: 4px 7px 2px 15px;
        margin-right: 10px;
}

.filterd-values.graph-filtered-values {
    padding: 5px 10px 5px;
    background: #f5f5f5;
    border-radius: 20px;
    margin-bottom: 9px;
}

.filterd-values.graph-filtered-values .filtered-item{
	background:var(--primary);
	padding: 8px 15px 8px 15px;
}
.filterd-values.graph-filtered-values .filtered-item .value label {
	font-size: 8px;
    margin-bottom: 0px;
    color: #fff;
}

.filterd-values.graph-filtered-values .filtered-item .value span {
    font-size: 10px;
    color: #fff;
}


.filterd-values .filtered-item .value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 10px;
    max-height: 1.8rem;
}
.filterd-values .filtered-item .value label {
	font-size: 7px;
    margin-bottom: 1px;
    color: #999;
    font-weight: 500;
}
.filterd-values .filtered-item .value span {
	font-size: 10px;
    color: #757575;
}
.filterd-values .filtered-item .md-button{
	margin: 0px 0px 1px !important;
    padding: 0px;
    background: rgb(45 50 62 / 90%);
    min-width: auto !important;
    min-height: auto;
    width: 15px;
    height: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filterd-values .filtered-item .md-button:hover{
	background: rgb(45 50 62 / 100%);
}
.filterd-values .filtered-item .md-button .material-icons{
	color: #fff;
    font-size: 9px;
    margin: 0;
    height: auto;
}
.clear-network{
    position: absolute;
    display: flex;
    right: 0;
    align-items: center;
    height: 100%;
    border-radius: 50%;
    width: 10%;
    bottom: 20%;
}
.clear-network i,.option-btn i{
    font-size: 14px;
}
.clear-option > div.md-text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.graph-filter-header{
	padding: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.graph-filter-header .toggleFilterBtn {
    margin: 0px 10px !important;
    height: 20px;
    width: 20px;
    /* min-width: auto !important; */
    min-height: auto;
    padding: 0px;
    background: var(--primary);
}
.graph-filter-header .toggleFilterBtn:hover,
.graph-filter-header .toggleFilterBtn:focus{
	background: var(--primary);
}
.graph-filter-header .toggleFilterBtn i {
	color:#fff;
	font-size: 14px;
}

button.toggleFilterBtn.invert-bg {
    background-color: whitesmoke;
}
button.toggleFilterBtn.invert-bg:hover,
button.toggleFilterBtn.invert-bg:focus{
    background-color: whitesmoke;
}
button.toggleFilterBtn.invert-bg i {
    color: var(--primary);
    font-size: 16px;
}

.network-add {
    background: #039be5 !important;
    color: white !important;
    position: relative !important;
    bottom: 3px;
    border-radius: 30% !important;
}
.noscroll{
    overflow-y: inherit;
}

.noCursor{
    cursor: not-allowed !important;
    opacity: 0.7;
}

.input-custom--border-btm{
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1rem;
}
.input-container--user-vpn{
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 8px;
}
.input-label--user-vpn{
    position: absolute;
    bottom: 100%;
    left: 0;
    right: auto;
    font-size: 11px;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    order: 1;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    padding-left: 3px;
    padding-right: 0;
    z-index: 1;
    max-width: 100%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    transform: translate3d(0,6px,0) scale(.75);
    transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
    color: #039be5 !important;
    margin-bottom: -4px;
}
.hub--no-rcords{
    font-size: 1.2rem;
}
.flex-wrap{
    flex-wrap: wrap;
}

.tunnel-chips-input .md-chips md-chip{
    line-height: 22px;
    height: 22px;
    font-size: 12px;
    margin: 5px 5px 0 0;
}
.tunnel-chips-input md-chips-wrap{
    padding-bottom: 3px;
}

.innerPageNavBtnsContainer{
	padding:5px 10px;
    flex: auto;
}

.innerPageNavBtnsContainer .innerNavBtn{
	border: 1px solid #cccccc;
    border-radius: 12px;
    background: #fff;
    padding: 8px 12px 6px 12px;
    font-size: 14px;
    line-height: initial;
    margin-right: 6px;
    font-weight: 500;
    color:#555;
}

.innerPageNavBtnsContainer .innerNavBtn.active{
	background: var(--primary);
	color:#fff;
	/* border: 1px solid var(--primary); */
}
.innerPageNavBtnsContainer .innerNavBtn:hover{	
	color:var(--primary);
	/* border: 1px solid var(--primary); */
}
.innerPageNavBtnsContainer .innerNavBtn.active:hover{
	color:#fff;
	background: var(--primary);
    font-weight: 600;
}
.innerPageNavBtnsContainer .innerNavBtn.member{
    background: transparent;
    border-style: dashed;
    color: #666;
}
.innerPageNavBtnsContainer .innerNavBtn.member.active{
    background: var(--primary);
    color: #fff;
    border-style: solid;
}
.innerPageNavBtnsContainer .tunnel-pill-divider{
    display: inline-block;
    width: 1px;
    height: 20px;
    background: #cccccc;
    margin: 0 8px;
    vertical-align: middle;
}
.filter-panel-content .tunnel-search-row{
    margin-bottom: 8px;
    max-width: 100%;
    box-sizing: border-box;
    gap: 4px;
    overflow: hidden;
}
.filter-panel-content .tunnel-search-row .tunnel-search-btn{
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
}
.innerPageNavBtnsContainer .tunnel-group-label{
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin: 0 6px 0 4px;
    vertical-align: middle;
    line-height: 1;
}
.innerPageNavBtnsContainer.sleek{
    padding: 3px 8px;
}
.innerPageNavBtnsContainer.sleek .innerNavBtn{
    padding: 4px 10px 3px 10px;
    font-size: 12px;
    margin: 2px 3px;
}
.innerPageNavBtnsContainer.sleek .tunnel-pill-divider{
    height: 16px;
    margin: 0 6px;
}

/* Horizontal pill scroller (<nirad-hscroll>) — arrows replace the scrollbar, so the strip can
   hold any number of members without stretching the card.
   The strip container is normally inline flow; a block-level flex child would drop onto its own
   line, so opt it into a flex row here rather than changing .innerPageNavBtnsContainer globally. */
.innerPageNavBtnsContainer.pill-strip {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;   /* keeps the row intact even if flex is overridden elsewhere */
    min-width: 0;          /* lets it shrink inside .info-card instead of widening the row */
}
nirad-hscroll {
    display: inline-flex;  /* inline-level, so it stays on the label's line in either flow mode */
    vertical-align: middle;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;          /* lets the strip shrink instead of forcing the row wider */
    max-width: 100%;
}
.hscroll-viewport {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;      /* arrows are the affordance; the bar would double up */
    -ms-overflow-style: none;
}
.hscroll-viewport::-webkit-scrollbar {
    display: none;
}
.hscroll-arrow {
    flex: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    color: #666;
}
.hscroll-arrow:hover {
    color: var(--primary);
}
.hscroll-arrow .material-icons {
    font-size: 20px;
}

md-card-header.chart-header{
    padding-bottom: 0;
}
md-card-header-text.chart-title {
    display: flex;
    justify-content: center;
}
md-card-header-text.chart-title-end {
    display: flex;
    justify-content: center;
}

.chart-filter {
    position: relative;
    bottom: 32px;
    float: right;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .15);
    height: 34px;
    background: #039be5;
    padding-left: 15px;
    padding-right: 5px;
    border-radius: 30px;
    z-index: 7;
}

.chart-filter.blue-bg .md-select-value .md-select-icon:after{
	color: #fff;
}

.chart-filter.blue-bg md-select .md-select-value.md-select-placeholder {
    color: #fff;
}

.chart-filter md-input-container .md-select-placeholder span {
    /* margin-bottom: -9px; */
    font-size: 12px;
}

.chart-filter i.fa-filter {
    font-size: 16px;
    color: #fff;
    margin-right: 10px;
}

.chart-filter md-input-container {
    min-width: 145px;
}

.chart-filter md-input-container>md-select {
    margin-bottom: 8px !important;
}

.chart-filter .md-select-value>span:not(.md-select-icon) .md-text {
    position: relative;
    top: 2px;
    color: #fff;
    font-size: 12px;
}

.chart-filter .select-server .md-select-value.md-select-placeholder {
    color: #fff;
}

.chart-filter .material-icons {
    color: #fff;
}

.chart-filter md-input-container.md-input-has-value label,
.chart-filter md-input-container.md-input-focused label,
.chart-filter md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value,
.chart-filter md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value.md-select-placeholder {
    color: #fff !important;
}

.chart-filter md-input-container.md-input-has-value label,
.chart-filter md-input-container.md-input-focused label {
    margin-bottom: -10px;
    text-transform: uppercase;
    font-size: 12px;
}

.chart-filter .md-select-value .md-select-icon {
    margin-top: 0px;
    color: #fff;
}

.chart-filter md-input-container.md-input-has-value .md-select-value .md-select-icon {
    /* margin-top: -10px; */
    position: relative;
    top: 2px;
}

.vpn-mt{
    position: relative;
    margin-top: 7px;
}

.chart-global-filter{
    max-width: 180px;
    display: flex;
    align-items: center;
}

.w-80{
    width: 80%;
}
.rotate-40 {
    transform: rotate(-40deg);
}
.alarm-title {
    height: 35px !important;
}
.dyn-ht-alarm{
    height: 338px;
}

ul.accordion-alarm-list{
    display: block;
    width: 100%;
    height: auto;
    padding: 15px 0px;
    margin: 0;
    list-style: none;
}
li.alarm-item{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: #FFF;
    padding: 12px 6px;
    margin: 0 auto 15px auto;
    border: 1px solid #eee;
    border-radius: 5px;
}
li.alarm-item:hover{
    border-radius: 5px;
    border: 1px solid #2d323e;
    cursor: pointer;
}
li.alarm-item > h3 {
    font-weight: 600;
    position: relative;
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.01em;
    display: flex;
}
.alarm-parameter--width{
    display: inline-block;
    width: 45%;
}
li.alarm-item > h3:after{
    font-family: "Material Icons";
    content: 'arrow_right_alt';
    position: absolute;
    right: 0;
    top: 0;
    color: #Fcc110;
    transition: all 0.3s ease-in-out;
    font-size: 18px;
    animation: alarm-highlight 1.5s infinite forwards;
}


.alarm-led{
    margin: 0 10px;
    display: inline-block;
    width: 30px;
    height: 15px;
    border-radius: 50%;
}
.alarm-status--green{
    background-color: #ABFF00;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px,
     inset #304701 0 -1px 9px, 
     #89FF00 0 2px 12px;
}
.alarm-status--grey{
    background-color: #9fa398;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px,
    inset #304701 0 -1px 9px, 
    #89FF00 0 2px 12px;
}
.alarm-status--yellow{
    background-color: #FF0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px,
     inset #808002 0 -1px 9px,
      #FF0 0 2px 12px;
    animation: yellow-led-blink 1s infinite;
}
.alarm-status--red{
    background-color: #F00;
    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;
    animation: red-led-blink 0.5s infinite;
}
@keyframes alarm-highlight {
    0%, 100% {
        transform: translate(0px);
    }
    50% {
        transform: translate(3px);
    }
}
@keyframes red-led-blink {
    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 yellow-led-blink {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
/* not right styles-> from here onwards */
.my-table {
    position: relative;
    border-collapse: separate;
    border-spacing: 2px 5px;
    width: 100%;
    /* table-layout: fixed; */
    text-align: center;
  }
  .my-table tbody{
    font-size: 12px;
  }

  .my-table td, .my-table th{
    /* text-align: center !important; */
    padding: 4px 4px !important;
    width: auto !important;
  }
  .my-table td > i{
    font-size: 24px;
  }
  .corner {
    background-color: #f5f5f5;
    padding: 10px;
    text-align: center;
  }

.alarm-status-details{
    width: 100%;
}
  .alarm-status-details h3 {
    position: relative;
    margin: 0 0 10px 0;
    font-size: 14px;
    letter-spacing: 0.01em;
  }

  .alarm-arrow--previous {
    font-size: 16px !important;
    margin-right: 10px;
  }

  .alarm-high{
    color: rgb(255 61 36);
  }
  .alarm-not-ready{
    color:grey
  }
  .alarm-close{
    color: rgb(145 224 24);
  }
  .alarm-low{
    color: rgb(218 215 75);
  }
  .alarm-medium {
  	color:#ff8040;
  }
  .w-95{
    width: 90%;
  }
  .ht-100{
    height: 100%;
    max-height: 100%;
  }

  .panelItem{
    padding:8px;
    border-radius:5px;
    cursor: pointer;
  }

  .selectedPanelItem--hover{
    background-color: #f5f5f5 !important;
    cursor: pointer;
  }

  .border-spacing-40{
    border-spacing: 40px;
  }
  .deviceAlarmChartContainer{
    height: 100%;
    max-height: 100%;
  }

  .nodetailsavailable {
  	display: flex;
    justify-content: center;
    vertical-align: middle;
    justify-self: center;
    align-items: center;
    align-self: center;
    width: 100%;
    height: 100%;
  }

  .log-container {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr;
    grid-auto-rows: auto;
    grid-column-gap: 5px;
  }
  .log-container ul {
    list-style: none;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
  }
  .log-container ul li{
    /* display: flex; */
    align-items: center;
    min-height: 45px;
    overflow: auto;
    max-height: 45px;
  }
  .log--config__value {
    font-size: 14px;
   }

  .log--config__key {
    font-size: 14px;
    color: cornflowerblue;
  }

  table.logView {
    border-collapse: separate;
    width: 100%;
    border-spacing: 2px 10px;
}

/* table.logView > th, table.logView > td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
} */

table.logView > td > div {
    margin-bottom: 10px;
}

table.logView > th {
    background-color: #f2f2f2;
}

table.logView > tbody > tr > td:nth-child(1), 
table.logView > tbody > tr > td:nth-child(2),
table.logView > tbody > tr > td:nth-child(3)
{
    background-color: #edf1f6;
}

table.logView > thead > tr > th:first-child
table.logView > tbody > tr > td:first-child {
    border-left: none;
}

table.logView > thead > tr > th:last-child
table.logView > tbody > tr > td:last-child {
    border-right: none;
}

table.logView > tbody > tr > td:nth-child(2),
table.logView > tbody > tr > td:nth-child(3){
    vertical-align: baseline;
}
.dataListFilter {
    width: 100%;
    position: sticky;
    top: 0; 
    background: white;
    display: block;
    z-index: 10;
}

.nirad-dialog-NVX86-LBS-V2-HA-model {
    /*width: 70% !important;*/
    width: 60% !important;
}
.addRowBtn{
	border-radius: 11px;
    border: 1px solid gainsboro;
    width: 22px;
    background: #0579b2;
    color: white;
    padding: 0px;
    color: white;
}
.removeRowBtn{
	border:none;
	background:transparent;
}
.bulk-delete-certs-btn{
	border: none !important;
    padding-left: 10px !important;
    margin-left: 10px !important;
    color: #555 !important;
    background: #fff !important;
    font-size: 11px !important;
    min-height: inherit !important;
    line-height: inherit !important;
    text-transform: capitalize !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    min-height: 25px !important;
    height: 25px !important;
    line-height: 27px !important;
   
    height: 45px !important;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 11px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
}

.bulk-delete-certificate-btn{
	border: none !important;
    padding-left: 10px !important;
    margin-left: 10px !important;
    color: #555 !important;
    background: #fff !important;
    font-size: 11px !important;
    min-height: inherit !important;
    line-height: inherit !important;
    text-transform: capitalize !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    min-height: 25px !important;
    height: 25px !important;
    line-height: 27px !important;
   
    height: 35px !important;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 11px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
}

.vpn-user-bulk-delete-btn{
	/*border: 1px solid gainsboro !important;*/
    position: absolute !important;
    right: 80px !important;
   /* top: 6px !important;*/
    color: #555 !important;
    background: #fff !important;
    font-size: 11px !important;
    min-height: inherit !important;
    line-height: inherit !important;
    text-transform: capitalize !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    min-height: 25px !important;
    height: 25px !important;
}


.profile-column{
	padding-left: 17px;
    padding-right: 17px ;
    border: 1px solid #e2e2e2;
    border-top: 0px ;
    margin-left: 13px;
    margin-right: 13px ;
    padding-top: 17px;
}

.settings-table .md-raised.md-primary,
.upgrade_btn .md-raised.md-primary{
	padding-left:15px;
	padding-right:15px;
	text-transform: capitalize;
}

.add-vlantag-btn{
	position: absolute !important;
    left:96%;
    width: 35px !important;
    height: 20px !important;
    line-height: 20px !important;
    z-index: 2 !important;
    color: #fff !important;
    float: right;
    margin-top: -10px !important;
    margin-bottom: -17px !important;
    margin-right: 10px !important;
    background: #039be5;
    border-radius: 18px;
  }
  .vlan-btn--wrapper{
    position: relative;
  }
  .add-vlantag-btn--pos1, .add-vlantag-btn--pos2, .add-vlantag-btn--pos3{
    bottom: 0px;
  }

  .vlan-row-Div{
  	background: #f5f5f5;
    padding: 20px 10px 0;
    border: 1px solid #ddd;
    flex-wrap: wrap;
    display: flex;
  /*  margin-top: -45px;*/
  }
  .graph-th{
  	width:160.65px;
  }


  .server-collapse-icon > i{
    font-size: 15px;
  }
 
  
  .search-user{
    position: relative;
    right: 0;
    top: 0;
    color: white;
}

.auto-select > md-autocomplete-wrap:after {
    display: block;
    content: "\25BC";
    font-size: 13px;
    position: absolute;
    top: 10px;
    right: 5px;
    speak: none;
    font-size: 13px;
    -webkit-transform: scaleY(.5) scaleX(1);
    transform: scaleY(.5) scaleX(1);
}

#multiwan-slider {
    overflow: hidden;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    display: flex;
    align-items: center;
}
#multiwan-slider > .graph-card {
    flex-shrink: 0;
    min-width: 250px;
    width: 100%;
}
.multiwan-slider--btn{
    position: absolute;
    border-radius: 50%;
    border: 0;
    background: aliceblue;
    opacity: 0.7;
    color: #0388c9;
    z-index: 5;
}

.multiwan-slider--btn_left{
    left: 10px;
}
.multiwan-slider--btn_right{
    right: 10px;
}

md-button.device-hub-btn {
    background: white;
    padding: 5px;
    border-radius: 50%;
    position: absolute;
}
.wan-bonding--no_records{
    font-size: 13px;
    text-align: center;
}


#sContainer {
    width: 400px;
    height: 400px;
    position: relative;
    margin: auto;
}

#sValue {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 32px;
    text-align: center;
}
.font-sz--12{
    font-size: 12px; 
}
.font-sz--18{
    font-size: 18px;
}
/* #loadingDots {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 24px;
    text-align: center;
}

#megabitsText {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 24px;
    text-align: center;
    opacity: 0; 
} */

/* missed styles from qa branch - changed*/
.speed-btn__pulse{
    width: 200px;
    height: 200px;
    font-size: 24px;
    color:white;
    border-radius: 50%;
    background-color: #019ae3;
    background-clip: padding-box, border-box;
    border: 6px solid transparent;
    background-image: linear-gradient(#039be5, #2d323e), linear-gradient(to bottom, #2de5d1, #1fa4e9);
    background-origin: border-box;
    box-shadow: 0 0 2px #2de5d1, 0 0 4px #2de5d1, 0 0 6px #1fa4e9, 0 0 8px #1fa4e9;
    animation: pulse 1.5s infinite;
    -webkit-animation: pulse 1.5s infinite;
}
.speed-btn__pulse:hover{
    animation: none;
    -webkit-animation: none;
}
@keyframes pulse {
    0% {
      transform:  scale(0.95);
      box-shadow: 0 0 2px #2de5d1, 0 0 4px #2de5d1, 0 0 6px #1fa4e9, 0 0 8px #1fa4e9;
    }
    50% {
      transform: scale(1);
      box-shadow: 0 0 10px #2de5d1, 0 0 14px #2de5d1, 0 0 18px #1fa4e9, 0 0 22px #1fa4e9;
    }
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 2px #2de5d1, 0 0 4px #2de5d1, 0 0 6px #1fa4e9, 0 0 8px #1fa4e9;
    }
  }
span.color--white{
    color: white !important;
}

span.unit {
    position: absolute;
    right: 19px;
    top: 7px;
    z-index: 8;
    background: #588a9a;
    padding: 2px 2px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
}

.toolkit-btn {
    position: relative;
    width: 100%;
    display: block;
    text-align: start;
    vertical-align: middle;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    border-radius: 6px;
    background: #1e9ed3;
    color: white;
    margin-bottom: 20px;
    padding: 0px;
    overflow: hidden;
}

.toolkit-btn:hover {
    color: white;
}

.toolkit-btn:active {
    box-shadow: 0 3px #999;
    transform: translateY(5px);
}


.toolkit-btn::before{
    content: ' ';
    display: inline-block;
    background: rgb(55 66 71 / 30%);
    transform-origin: left center;
    height: 100%;
    width: 38px;
    border-radius: 0 50% 50% 0;
    padding: 0px 10px;
}

.toolkit-icon {
    position: absolute;
    color: white;
    left: 5px;
    top: 5px;
}

.toolkit-btn > span {
    position: relative;
    bottom: 13px;
    font-size: 14px;
    margin-left: 15px;
}

.admin-header{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.admin-header--firmware{
    width: 255px;
}
.admin-header--reboot{
    width: 100px;
}

.admin-header--ntp{
    width: 165px;
}
.admin-header--speed-test{
    width: 110px;
}

.admin-header--switchover {
    width: 160px;
}

.unit-selection{
    position: absolute;
    right: 18px;
    top: 6px;
    outline: 0;
}
.email-autocomplete-validate{
    position: absolute;
    color: red;
    top: 100%;
    padding: 10px 30px 0;
}
.center-pie {
    display:flex;
    margin: 0 auto;
}
.label-view--softher{
    color: #969696;
    font-size: 12px;
    font-weight: 400;
    padding: 0 5px;
    vertical-align: top;
}
.autoband-header {
    padding: 5px 8px 10px;
    border-bottom: 1px solid #ebebeb;
}
.switchover-schedule{
    padding-top: 12px;
}

.free-calender-style.md-calendar tbody,
.free-calender-style.md-calendar td,
.free-calender-style.md-calendar tr {
  position: relative;
  box-sizing: content-box;
  bottom: 65px;
}

.flex-row-center {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-grow-1 {
  flex: 1;
  display: flex;
}
.ntpForm{
    display: flex;
    align-items: center;
    width: 100%;
}
.ntp-input{
    margin-right: 9px;
    border: 1px solid rgb(221, 221, 221);
    padding: 5px 10px;
    font-size: 13px;
    height: 35px;
    border-radius: 2px;
    width: 50%;
}

.ntp-sub-table {
  position: absolute;
  width: 100%;
  top: 0rem;
  border-collapse: collapse;
}

.ntp-sub-table td {
  padding: 4px 10px;
  font-size: 13px;
  color: #444;
}
.ntp_ip--content {
        max-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.align-switch--ntp{
    margin-bottom: 1rem;
    margin-top: 0.3rem;
}
.schedule-details-table tr > td {
    display: block;
    width: 100%;
}

.hub-select{
    position: absolute;
    bottom: 100%;
    right: 0;
    padding-bottom: 20px;
}
.system-header--time{
    width: 192px;
}


.sup-5g {
    position: relative;
    top: -0.95em;
    background: #888888;
    color: white;
    padding: 0.2em;
    border-radius: 85%;
    font-size: 0.6em;
}

/* Toggle Button Styles */
.toggle-btn {
    background-color: #2196F3 !important;
    color: white !important;
    border-radius: 4px;
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.toggle-btn:hover {
    background-color: #1976D2 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}

.toggle-btn:focus {
    background-color: #1976D2 !important;
    outline: none;
}

.toggle-btn md-icon {
    color: white !important;
    font-size: 20px;
}

 .wan-checkbox-blue.md-checked .md-icon {
                background-color: #2196F3 !important; /* Material Blue 500 */
                
            }
           
            .wan-checkbox-blue .md-ripple-element {
                background-color: rgba(33,150,243,0.2) !important;
            }
.nirad-router-logo-view {     
    position: absolute;
    left: 8px;
    top: 5px;
    width: 4%;
}
.custom-for-report td:last-child{
    word-break: normal !important;
}




.rf-status-report tr th {
    font-size: 11.8px !important;
    padding: 8px 4px !important;
}

.rf-status-report tr td {
    font-size: 11.8px !important;
    padding: 5px 4px !important;
    word-break: normal !important;
}
    .sdwan-custom-tabs {
        padding: 6px 0 0px;
    }
    .sdwan-custom-tabs-container {
        display: flex;
        gap: 10px;
        padding: 0 20px;
    }
    .sdwan-custom-tab {
        padding: 10px;
        border-radius: 25px;
        background: white;
        border: 1px solid #ddd;
        cursor: pointer;
        font-weight: 500;
        color: #666;
        transition: all 0.3s ease;
    }
    .sdwan-custom-tab:hover {
        background: #f0f0f0;
    }
    .sdwan-custom-tab.active {
        background: #039be5;
        color: white;
        border-color: #039be5;
    }

    .sdwan-dashboard-container {
        padding: 24px;
        background: #fafbfc;
        min-height: calc(100vh - 200px);
    }

  
    .sdwan-cards-wrapper {
        display: flex;
        gap: 8px;
        margin-bottom: 0;
        width: 100%;
    }

 
    .sdwan-card-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        border-bottom: 2px solid #039be5;
        padding-bottom: 0;
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 0px;
    }

    .sdwan-card-container:first-child {
        margin-left: 0;
        padding-left: 0;
    }

    .sdwan-card-container:last-child {
        margin-right: 0;
        padding-right: 0;
    }

    .sdwan-card-container:has(.sdwan-selection-card.active) {
        border-bottom: none;
        margin-bottom: 0;
    }

    .sdwan-selection-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px 16px 24px 16px;
        position: relative;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        min-height: 280px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .sdwan-selection-card:hover:not(.active) {
        border-color: #d1d5db;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    .sdwan-selection-card.active {
        border: 2px solid #039be5;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: 0 4px 12px rgba(3, 155, 229, 0.15);
        padding: 28px 15px 28px 15px;
        margin-bottom: 0;
    }

    .sdwan-selection-card .card-title-badge {
        position: absolute;
        top: -12px;
        left: 16px;
        background: #039be5;
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 4px;
        letter-spacing: 0.3px;
        z-index: 2;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(3, 155, 229, 0.3);
    }

    .sdwan-selection-card.active .card-title-badge {
        opacity: 1;
        transform: translateY(0);
    }

    .sdwan-card-header {
        text-align: left;
        margin-bottom: 16px;
        transition: margin 0.3s ease;
        /* position: relative; */
    }

    .sdwan-selection-card.active .sdwan-card-header {
        margin-top: 8px;
    }

    .sdwan-selection-card .card-icon {
        font-size: 32px;
        color: #6b7280;
        margin-bottom: 8px;
        transition: color 0.25s ease;
    }

    .sdwan-selection-card.active .card-icon {
        color: #039be5;
    }

    .sdwan-selection-card .card-title {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin: 0 0 4px 0;
        transition: all 0.3s ease;
        opacity: 1;
        transform: translateY(0);
    }

    .sdwan-selection-card.active .card-title {
        opacity: 0;
        transform: translateY(-10px);
        height: 0;
        margin: 0;
        overflow: hidden;
    }

    .sdwan-selection-card .card-description {
        font-size: 11px;
        color: #9ca3af;
        margin: 0;
        line-height: 1.3;
    }

    /* Bar Chart in Card */
    .sdwan-card-chart {
        margin-top: 16px;
        height: 160px;
        position: relative;
        padding: 0 8px;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .sdwan-card-chart canvas {
        max-height: 100% !important;
        max-width: 100% !important;
    }

    .sdwan-card-filter {
        position: absolute;
        top: 8px;
        right: 16px;
        z-index: 5;
    }

    .sdwan-card-filter .md-icon-button {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        line-height: 28px;
        margin: 0;
        padding: 0;
    }

    .sdwan-card-filter .md-icon-button md-icon {
        font-size: 18px;
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        color: #6b7280;
    }

    .sdwan-card-filter .md-icon-button:hover md-icon {
        color: #039be5;
    }

    .sdwan-detail-panel {
        background: #ffffff;
        border: 2px solid #039be5;
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding: 0;
        width: 100%;
        margin-top: 0px;
        box-shadow: 0 4px 12px rgba(3, 155, 229, 0.12);
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .sdwan-detail-panel > div[ng-if] {
        padding-top: 18px;
    }

    /* .sdwan-detail-panel-header {
        padding-bottom: 16px;
        border-bottom: 1px solid #e5e7eb;
        background: var(--primary);
        padding: 5px 15px;
        border-radius: 4px;
    } */

    /* .sdwan-detail-panel-title {
        font-size: 18px;
        font-weight: 600;
        color: white;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    } */

    .sdwan-detail-panel-title md-icon {
        color: #039be5;
        font-size: 24px;
    }

    /* Blue Header Table Variant - Uses project standard nirad_table with blue header */
    .nirad_table.table-blue-header thead {
        background: var(--primary-dark);
    }

    .nirad_table.table-blue-header tr th {
        color: white;
        background: var(--primary-dark);
    }

    /* Status Badge */
    .status-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .status-badge.online {
        background: #d1fae5;
        color: #065f46;
    }

    .status-badge.warning {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.offline {
        background: #fee2e2;
        color: #991b1b;
    }

    .status-badge.inactive {
        background: #f3f4f6;
        color: #4b5563;
    }

    /* Tag Badge */
    .tag-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        background: #039be5;
        color: #ffffff;
    }

    .sdwan-chart-container {
        height: 350px;
        position: relative;
    }

    .sdwan-chart-container canvas {
        max-height: 100% !important;
    }

    /* Responsive Design */
    @media (max-width: 1200px) {
        .sdwan-cards-wrapper {
            flex-wrap: wrap;
        }
        
        .sdwan-card-container {
            flex: 1 1 calc(50% - 8px);
            min-width: 250px;
        }
    }

    @media (max-width: 768px) {
        .sdwan-cards-wrapper {
            flex-direction: column;
        }

        .sdwan-card-container {
            flex: 1 1 100%;
        }

        .sdwan-detail-panel {
            padding: 20px;
        }

        .sdwan-dashboard-container {
            padding: 16px;
        }
    }


/* ── WAN Distribution card – inline WAN selector ───────────────────────── */
.wan-card-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wan-card-controls .wan-select-inline {
    margin: 0;
    padding: 0;
    min-width: 90px;
    width: 90px;
}

.wan-card-controls .wan-select-inline md-select {
    margin: 0;
    font-size: 12px;
}

.wan-card-controls .wan-select-inline md-select-value {
    min-height: 26px;
    padding: 2px 4px;
    border-bottom-color: #d0d6dd;
}

.wan-card-controls .wan-select-inline md-select-value > span:not(.md-select-icon) {
    font-size: 12px;
    color: #374151;
    font-weight: 500;
}

/* ── Add Rules page – routing / QoS pill UI ─────────────────────────────── */
.ar-section-label {
    font-size: 11px;
    color: #9e9e9e;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    margin-top: 4px;
}

.ar-policy-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.ar-pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ar-pill-btn {
    height: 32px !important;
    line-height: 32px !important;
    font-size: 12px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

.ar-routing-section {
    margin-top: 16px;
}

.ar-sl-inputs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ar-sl-input {
    margin: 0 !important;
}

.ar-lb-profile {
    width: 280px;
}

.ar-lb-input {
    margin: 0 !important;
    width: 100% !important;
}

.ar-specified-wan {
    width: 240px;
}

.ar-specified-wan-input {
    margin: 0 !important;
    width: 100% !important;
}

.ar-warn-mt {
    margin-top: 6px;
}

.ar-qos-bw {
    margin-top: 10px;
    margin-left: 4px;
}

.ar-bw-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.ar-bw-wan-name {
    width: 90px;
    font-size: 13px;
    font-weight: 500;
    color: #424242;
}

.ar-bw-input {
    margin: 0 0 0 12px !important;
    width: 160px !important;
}
.md-datepicker-open .md-datepicker-input-container,
.md-datepicker-open input.md-input {
    border-bottom-color: transparent !important;
}

md-datepicker .md-datepicker-input-container {
    border-bottom: none !important;
}

.md-datepicker-calendar-pane {
    border: none !important;
}

.md-calendar tr:last-child td {
    border-bottom: none !important;
}

.md-calendar:first-child {
    border-top: none !important;
}

.md-calendar-scroll-container {
    box-shadow: none !important;
}

.md-calendar-day-header {
    border: none !important;
}

.md-calendar-day-header th {
    border: none !important;
}

/* ================================================================
 * Dashboard L1 nav dropdown + L2 drill-down strip
 * Scoped class names (dash-l1-*, drill-*) that don't exist anywhere
 * else in the codebase so no style collisions with shared header.
 * ================================================================ */

/* L1 dropdown: fixed-positioned over the shared header next to "NiradTeam".
 * Using fixed (not absolute) so it's independent of any ancestor positioning context
 * and stays pinned to the toolbar while the dashboard content scrolls.
 * Default left value assumes the sidebar is EXPANDED (240px wide) so the pill
 * sits past the enterprise-name <h3>. See sidebar-state override below. */
.dash-l1-nav {
    position: fixed;
    top: 12px;
    left: 460px;
    z-index: 61; /* above md-toolbar */
    display: flex;
    align-items: center;
    gap: 10px;
    transition: left 0.25s ease; /* match the sidebar width transition */
}
/* Sidebar collapsed (.nirad-app-layout.sidebar-is-collapsed sets sidebar width 60px).
 * Slide L1 left so it still sits just past the enterprise name. */
.nirad-app-layout.sidebar-is-collapsed .dash-l1-nav {
    left: 280px;
}
/* Small label that tells the user this control is a view switcher (manager feedback: must be easier to identify). */
.dash-l1-prefix {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #78909c;
    line-height: 40px;
    user-select: none;
}
.dash-l1-trigger {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #039be5;
    border-radius: 20px; /* pill shape */
    background: #039be5;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    box-shadow: 0 2px 6px rgba(3, 155, 229, 0.32);
    -webkit-tap-highlight-color: transparent;
    min-width: 160px;
}
.dash-l1-trigger:hover,
.dash-l1-trigger:focus {
    background: #0288d1;
    border-color: #0288d1;
    outline: none;
    box-shadow: 0 4px 12px rgba(3, 155, 229, 0.45);
}
.dash-l1-trigger.dash-l1-trigger-open {
    background: #0277bd;
    border-color: #0277bd;
    box-shadow: 0 4px 14px rgba(3, 155, 229, 0.5);
}
.dash-l1-trigger .dash-l1-icon {
    font-size: 20px;
    line-height: 1;
    margin: 0 10px 0 0;
    color: #ffffff;
    flex: 0 0 auto;
}
.dash-l1-trigger .dash-l1-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    flex: 1 1 auto;
    letter-spacing: 0.2px;
}
.dash-l1-trigger .dash-l1-caret {
    font-size: 22px;
    line-height: 1;
    margin-left: 10px;
    color: #ffffff;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
/* Keep icon column consistent whether or not a menu item has an icon (Overview has none). */
.dash-l1-menu-spacer {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}
.dash-l1-menu {
    position: absolute;
    top: 44px;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #eceff1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(38, 50, 56, 0.16), 0 2px 6px rgba(38, 50, 56, 0.08);
    z-index: 62;
    overflow: hidden;
    animation: dashL1MenuIn 0.14s ease-out;
}
@keyframes dashL1MenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dash-l1-menu li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #37474f;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    position: relative;
    line-height: 1.2;
}
.dash-l1-menu li i.material-icons {
    font-size: 20px;
    color: #78909c;
    flex: 0 0 20px;
    line-height: 1;
}
.dash-l1-menu li:hover {
    background: #f5f9fb;
    color: #039be5;
}
.dash-l1-menu li:hover i.material-icons {
    color: #039be5;
}
.dash-l1-menu li.dash-l1-item-active {
    background: rgba(3, 155, 229, 0.08);
    color: #039be5;
    font-weight: 600;
}
.dash-l1-menu li.dash-l1-item-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: #039be5;
    border-radius: 0 2px 2px 0;
}
.dash-l1-menu li.dash-l1-item-active i.material-icons {
    color: #039be5;
}
.dash-l1-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 60; /* below menu (62), above toolbar content so outside-click closes */
}

/* Narrower screens: tighten gaps and drop the "VIEW" prefix so the pill still fits. */
@media (max-width: 960px) {
    .dash-l1-nav { left: 420px; gap: 6px; }
    .nirad-app-layout.sidebar-is-collapsed .dash-l1-nav { left: 240px; }
    .dash-l1-prefix { display: none; }
    .dash-l1-trigger { min-width: 140px; padding: 0 14px; }
}

/* Neutralize the legacy `sub-sub-header` offset (designed to sit below a 36px L1 tab strip that no longer exists on /dashboard).
 * Scoped to the dashboard page root so the shared rule still works on siteDashboard, customerDashboard, etc. */
.dashboard-root .md-subheader.nirad_subheader.sub-sub-header {
    top: 0 !important;
    margin: 0 !important;
}
/* Tighten the top padding of the ng-switch container so the L2 tab strip hugs the blue banner's bottom edge */
.dashboard-root > md-content > ui-view .padding-container {
    padding-top: 0 !important;
}
/* Kill the gap between the L2/drill strip and the first content element inside each L2 panel.
 * The default 8px padding-container + 24px sdwan-dashboard-container + 16px card inner padding
 * stacks up to ~48px of empty space before the first card content. Collapse most of it. */
.dashboard-root .padding-container {
    padding: 0 !important;
}
.dashboard-root .sdwan-dashboard-container {
    /* SD-WAN's active card renders a .card-title-badge at `top: -12px` that pops above the card.
     * Need ~24px of clear space above the card so the badge doesn't get clipped by the drill strip. */
    padding: 24px 16px 8px 16px !important;
    min-height: 0 !important;
}
/* First tabpanel child inside an L2 panel shouldn't start with its own top gap.
 * Exclude .sdwan-dashboard-container — it owns its own top padding to give the
 * floating `.card-title-badge` room to sit above the active card. */
.dashboard-root [role="tabpanel"] > .device-dashboard,
.dashboard-root [role="tabpanel"] > .device-dashboard > :first-child,
.dashboard-root [role="tabpanel"] > :first-child:not(.sdwan-dashboard-container) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* device-dashboard wrapper used on every L2 panel — strip its own vertical spacing */
.dashboard-root .device-dashboard {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ----------------------------------------------------------------
 * L2 drill-down strip
 * Designed to visually match the existing .nirad_subheader / md-tabs
 * so switching into and out of drill mode feels seamless.
 * Height: 36px (same as .nirad_subheader). Single horizontal row.
 * ---------------------------------------------------------------- */
.drill-strip {
    background: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05), 0 1px 1px 0 rgba(0, 0, 0, .05), 0 2px 1px -1px rgba(0, 0, 0, .03);
    padding: 0;
    height: 36px;
    box-sizing: border-box;
}
.drill-strip.dash-l2-strip {
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.drill-strip .drill-strip-inner {
    display: flex;
    align-items: stretch;
    height: 36px;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* Back button: circular icon-only action, 36px square, flush left */
.drill-strip .drill-back-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 4px 0 8px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #546e7a;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.drill-strip .drill-back-btn i.material-icons {
    font-size: 20px;
    line-height: 20px;
}
.drill-strip .drill-back-btn:hover {
    background: #eceff1;
    color: #039be5;
}
.drill-strip .drill-back-btn:focus,
.drill-strip .drill-back-btn:active {
    outline: none;
    box-shadow: none;
    background: #e0f2fa;
    color: #039be5;
}

/* Breadcrumb label (parent L2 name). Vertically centered in the 36px row. */
.drill-strip .drill-breadcrumb {
    display: inline-flex;
    align-items: center;
    padding: 0 16px 0 8px;
    margin-right: 4px;
    border-right: 1px solid #eceff1;
    height: 36px;
}
.drill-strip .drill-parent-label {
    font-size: 14px;
    font-weight: 600;
    color: #37474f;
    white-space: nowrap;
    line-height: 36px;
}

/* Tab list — flex row filling the remaining space */
.drill-strip .drill-tablist {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    flex: 1;
}

/* Individual tab — text-only, underline on active. Matches md-tab visual rhythm. */
.drill-strip .drill-tab {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 24px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #546e7a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
.drill-strip .drill-tab:hover {
    color: #039be5;
    background: rgba(3, 155, 229, 0.04);
}
.drill-strip .drill-tab.drill-tab-active {
    color: #039be5;
    border-bottom-color: #039be5;
}
.drill-strip .drill-tab:focus,
.drill-strip .drill-tab:active {
    outline: none;
    box-shadow: none;
    background: transparent;
}
.drill-strip .drill-tab.drill-tab-active:focus,
.drill-strip .drill-tab.drill-tab-active:active {
    background: transparent;
}
.drill-strip .drill-tab::-moz-focus-inner {
    border: 0;
}

/* VPN tabs row: type dropdown on the left + underline sub-tabs to its right */
.drill-strip .drill-tablist.vpn-tabs-row {
    width: 100%;
    flex: 1;
    align-items: center;
}
.drill-strip .drill-tablist.vpn-tabs-row .vpn-type-dropdown-menu {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-right: 12px;
    padding-right: 12px;
    border-right: 1px solid #e0e4e8;
}
.drill-strip .drill-tablist.vpn-tabs-row .vpn-type-dropdown {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px 0 14px;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    background: #fff;
    color: #263238;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
.drill-strip .drill-tablist.vpn-tabs-row .vpn-type-dropdown:hover {
    border-color: #90a4ae;
    background: #fafbfc;
}
.drill-strip .drill-tablist.vpn-tabs-row .vpn-type-dropdown:focus,
.drill-strip .drill-tablist.vpn-tabs-row .vpn-type-dropdown:active {
    outline: none;
    border-color: #039be5;
}
.drill-strip .drill-tablist.vpn-tabs-row .vpn-type-dropdown .material-icons {
    font-size: 20px;
    color: #78909c;
}
.vpn-type-dropdown-content .md-button {
    text-align: left;
    text-transform: none;
    min-width: 140px;
    font-size: 13px;
}
.vpn-type-dropdown-content .vpn-type-option-active {
    color: #039be5;
    font-weight: 600;
}


/* IPsec Tunnels: header title with Responder / Initiator sub-tabs alongside */
.ipsec-tunnel-header-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex: none;
}
.ipsec-tunnel-role-tabs {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.ipsec-tunnel-role-tab {
    -webkit-appearance: none;
    appearance: none;
    height: 26px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ipsec-tunnel-role-tab:not(.ipsec-tunnel-role-tab--active):hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.ipsec-tunnel-role-tab--active {
    background: #fff;
    color: #039be5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
.ipsec-tunnel-role-tab--active:hover {
    background: #fff;
    color: #039be5;
}
.ipsec-tunnel-role-tab:focus,
.ipsec-tunnel-role-tab:active {
    outline: none;
}

/* Pack the header right side: the shared rule reserves 60px at the edge and lets the
   search box stretch, which left a wide blue gap after the mode counts. Extra class
   raises specificity so no !important is needed. */
.ipsec-tunnel-header.nirad-card-header-with-search {
    padding-right: 16px;
    gap: 16px;
}
.ipsec-tunnel-header.nirad-card-header-with-search .card-header-rignt-content {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    gap: 14px;
}
.ipsec-tunnel-header.nirad-card-header-with-search .card-header-rignt-content .search-box {
    flex: 0 1 260px;
    width: auto;
    max-width: 260px;
}
.ipsec-tunnel-header .ipsec-tunnel-mode-counts {
    flex: none;
    white-space: nowrap;
}
/* Thin rule instead of a "|" glyph, which carried its own side bearings */
.ipsec-tunnel-header .ipsec-count-sep {
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    vertical-align: -1px;
    background: rgba(255, 255, 255, 0.45);
}

/* Reduce gap between drill-strip and content below it (device info page) */
.drill-strip.dash-l2-strip + .padding-container {
    padding: 0 !important;
}
/* VPN > Tunnel: kill the gap between the drill strip tabs and the IPSec Tunnels card */
.dashboard-root [role="tabpanel"] .dashboard_top_row {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.dashboard-root [role="tabpanel"] .dashboard_top_row > .dashboard_device_list {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.drill-strip.dash-l2-strip + .padding-container .padding-container {
    padding: 0 !important;
}

/* ── Dashboard Header (Option B — compact modern bar) ─────── */
.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 0 16px;
    z-index: 12;
    position: sticky;
    top: 0;
    box-sizing: border-box;
}
.dash-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.dash-header-logo {
    font-size: 16px;
    font-weight: 700;
    color: #1a237e;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.dash-header-sep {
    width: 1px;
    height: 24px;
    background: #e0e0e0;
    flex-shrink: 0;
}
.dash-header-breadcrumb {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    min-width: 0;
}
.dash-header-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.dash-header-breadcrumb li span {
    font-size: 13px;
    color: #546e7a;
    font-weight: 500;
}
.dash-header-breadcrumb li .material-icons {
    font-size: 16px;
    color: #90a4ae;
}
.dash-header-breadcrumb li:first-child .material-icons {
    color: #039be5;
}
.dash-header-breadcrumb li:last-child span {
    color: #263238;
    font-weight: 600;
}
.dash-header-breadcrumb li.arrow .material-icons {
    font-size: 18px;
    color: #b0bec5;
}

/* Right side: action buttons + user */
.dash-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.dash-header-icon-btn,
button.dash-header-icon-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #546e7a;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.dash-header-icon-btn .material-icons {
    font-size: 20px;
}
.dash-header-icon-btn:hover {
    background: #f5f5f5;
    color: #039be5;
}
.dash-header-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    background: #f44336;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    padding: 0 3px;
}

/* Notification menu bar overrides inside dashboard header */
.dash-header-notify {
    padding: 0 !important;
}
.dash-header-notify .md-button {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border: none !important;
    border-radius: 50% !important;
    line-height: 36px !important;
}

/* User avatar + dropdown */
.dash-header-user-menu {
    padding: 0 !important;
    margin-left: 4px !important;
}
.dash-header-user-menu .md-button,
.dash-header-avatar-btn,
.dash-header-user-menu .md-button.dash-header-avatar-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px 4px 4px !important;
    margin: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    border: none !important;
    border-radius: 20px !important;
    width: auto !important;
    color: #37474f !important;
    text-transform: none !important;
}
.dash-header-user-menu .md-button:hover,
.dash-header-avatar-btn:hover {
    background: #f5f5f5 !important;
}
.dash-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e3f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-header-avatar .material-icons {
    font-size: 20px;
    color: #1565c0;
}
.dash-header-username {
    font-size: 13px;
    font-weight: 500;
    color: #37474f;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-header-caret {
    font-size: 18px !important;
    color: #90a4ae;
}

/* Override content top padding — old header was 64px + 45px banner = 109px offset.
   New header is 48px sticky, so reset. */
.dashboard-root > md-content,
.deviceinfo-root > md-content {
    padding-top: 0 !important;
}

/* Clickable breadcrumb link (e.g. "Devices" navigates back) */
.dash-crumb-link {
    font-size: 13px;
    font-weight: 500;
    color: #039be5;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}
.dash-crumb-link:hover {
    color: #0277bd;
    text-decoration: underline;
}

/* Page title strip — sits between header bar and tab strip */
.dash-page-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    min-height: 36px;
}
.dash-page-title-back {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid #cfd8dc;
    border-radius: 50%;
    color: #546e7a;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.dash-page-title-back .material-icons {
    font-size: 18px;
}
.dash-page-title-back:hover {
    background: #e3f2fd;
    border-color: #039be5;
    color: #039be5;
}
.dash-page-title-name {
    font-size: 17px;
    font-weight: 700;
    color: #1a237e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}
.dash-page-title-sub {
    font-size: 13px;
    color: #78909c;
    white-space: nowrap;
}

/* Status dot (shared between header and title strip) */
.dash-header-status-dot .material-icons {
    font-size: 10px;
    line-height: 1;
}
.dash-header-status-dot.device_online .material-icons { color: #4caf50; }
.dash-header-status-dot.device_offline .material-icons { color: #9e9e9e; }
.dash-header-status-dot.device_sync .material-icons { color: #fdd835; }
.dash-header-status-dot.device_errorflag .material-icons { color: #f44336; }

/* ── SD-WAN V2 Detail Page ────────────────────────────────── */
.sdwan-detail-page {
    padding-top: 0 !important;
}
.sdwan-detail-back-row {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    gap: 8px;
}
.sdwan-detail-back-row .material-icons {
    font-size: 22px;
    color: #546e7a;
}
.sdwan-detail-back-row .material-icons:hover {
    color: #039be5;
}
.sdwan-detail-back-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}
.threat-signature-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #90a4ae;
    margin-bottom: 1px;
    user-select: none;
}
.sdwan-detail-chart-card {
    margin: 0 8px 12px !important;
}

.sdwan-detail-page .dashboard_top_row {
    margin: 0 !important;
}
.sdwan-detail-page .dashboard_top_row > .dashboard_device_list > md-card {
    margin: 0 8px 12px !important;
}
/* Report card header: trim the excess right gap and align the filter + excel buttons */
.sdwan-detail-page .nirad-card-header-with-search {
    padding-right: 1px;
}
.sdwan-detail-page .nirad-card-header-with-search .card-header-rignt-content {
    gap: 8px;
}
.sdwan-detail-page .nirad-card-header-with-search .card-header-rignt-content .md-button {
    margin: 0 !important;
    min-width: 40px;
    width: 34px;
    height: 34px;
    padding: 0;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sdwan-detail-chart-area {
    height: 280px;
    position: relative;
}
#sdwanDetailChartTooltipScroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
#sdwanDetailChartTooltipScroll::-webkit-scrollbar {
    width: 6px;
}
#sdwanDetailChartTooltipScroll::-webkit-scrollbar-track {
    background: transparent;
}
#sdwanDetailChartTooltipScroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
}
#sdwanDetailChartTooltipScroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55);
}

/* ── SD-WAN V2 Dashboard ─────────────────────────────────── */
.sdwan-v2-container {
    padding: 8px;
}
.sdwan-v2-row {
    margin-bottom: 8px;
    align-items: stretch;
}
.sdwan-v2-card {
    margin: 0 4px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}
.sdwan-v2-card md-card-content {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sdwan-v2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.sdwan-v2-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.sdwan-v2-duration-select {
    margin: 0;
    max-width: 130px;
}
.sdwan-v2-duration-select .md-select-value {
    font-size: 11px;
    min-height: 28px;
    border-bottom: 1px solid #d1d5db;
}
.sdwan-v2-toggle-row {
    margin-bottom: 8px;
}
.sdwan-v2-toggle-btn {
    min-width: 0 !important;
    min-height: 26px !important;
    line-height: 26px !important;
    padding: 0 12px !important;
    margin: 0 4px 0 0 !important;
    font-size: 11px !important;
    border-radius: 13px !important;
    background: #e5e7eb !important;
    color: #6b7280 !important;
    text-transform: none !important;
}
.sdwan-v2-toggle-btn.active {
    background: #039be5 !important;
    color: #fff !important;
}
.sdwan-v2-chart-area {
    flex: 1;
    min-height: 180px;
    position: relative;
}
.sdwan-v2-no-data {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
}

/* Empty-state glyph for the chart cards: bars plus an exclamation, the same composition as
   the pie-with-exclamation the doughnut cards use (.chart-error-container). Drawn as an
   inline SVG background on the shared placeholder class, so every No Data Available spot
   picks it up without touching markup. */
/* Doughnut cards keep a pie-shaped glyph: a ring with a slice missing, plus the same
   exclamation. Only the image differs from the bar variant above. */
.sdwan-v2-no-data.sdwan-v2-no-data-pie::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 56'%3E%3Cg fill='none' stroke='%23000000' stroke-width='9'%3E%3Ccircle cx='30' cy='28' r='17' stroke-dasharray='78 29' transform='rotate(-90 30 28)'/%3E%3C/g%3E%3Cg fill='%23000000'%3E%3Crect x='66' y='14' width='6' height='23' rx='3'/%3E%3Ccircle cx='69' cy='45' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

.sdwan-v2-no-data::before {
    content: '';
    flex: none;
    width: 88px;
    height: 62px;
    margin-bottom: 6px;
    opacity: 0.13;
    background: transparent no-repeat center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 56'%3E%3Cg fill='%23000000'%3E%3Crect x='6' y='46' width='56' height='3' rx='1.5'/%3E%3Crect x='10' y='30' width='9' height='16' rx='2'/%3E%3Crect x='23' y='20' width='9' height='26' rx='2'/%3E%3Crect x='36' y='35' width='9' height='11' rx='2'/%3E%3Crect x='49' y='26' width='9' height='20' rx='2'/%3E%3Crect x='68' y='14' width='6' height='23' rx='3'/%3E%3Ccircle cx='71' cy='45' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.sdwan-v2-chart-area canvas {
    max-height: 100%;
}
.sdwan-v2-chart-area-tall {
    height: 260px;
    /* This card has no toggle/duration row, so add spacing between the title and the chart. */
    margin-top: 14px;
}
/* SDWAN V2 - App Category Doughnut with right-side legend */
.sdwan-v2-doughnut-row {
    flex: 1;
    padding: 10px 0;
    overflow: hidden;
    flex-wrap: nowrap;
    align-items: center;
}
.sdwan-v2-doughnut-wrap {
    position: relative;
    flex: 0 0 auto;
}
.sdwan-v2-doughnut-wrap .devicesRegisteredChart {
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    position: relative;
}
.sdwan-v2-doughnut-wrap .devicesRegisteredChart canvas {
    width: 150px !important;
    height: 150px !important;
}
.sdwan-v2-doughnut-wrap .chart-container-dashboard {
    top: 59%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
.sdwan-v2-doughnut-wrap .chart-container-dashboard .chart-content span {
    font-size: 18px;
}
.sdwan-v2-doughnut-legend {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    overflow: hidden;
}
.sdwan-v2-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 11px;
    color: #444;
}
.sdwan-v2-legend-item i {
    font-size: 10px;
    margin-right: 5px;
    flex-shrink: 0;
}
.sdwan-v2-legend-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
}
.sdwan-v2-legend-pct {
    font-weight: 600;
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* SDWAN V2 - Server List sparkline rows */
.sdwan-v2-server-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 4px 0;
}
.sdwan-v2-server-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.sdwan-v2-server-row:last-child {
    border-bottom: none;
}
.sdwan-v2-server-info {
    display: flex;
    align-items: center;
    flex: 0 0 120px;
}
.sdwan-v2-server-dot {
    font-size: 10px;
    margin-right: 8px;
}
.sdwan-v2-server-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}
.sdwan-v2-server-sub {
    font-size: 10px;
    color: #999;
}
.sdwan-v2-server-sparkline {
    flex: 1;
    height: 30px;
    min-width: 60px;
    padding: 0 8px;
}
.sdwan-v2-server-value {
    flex: 0 0 60px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: #333;
}
.sdwan-v2-server-trend {
    flex: 0 0 50px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.sdwan-v2-server-trend.up {
    color: #34A853;
}
.sdwan-v2-server-trend.down {
    color: #EA4335;
}
.sdwan-v2-server-trend i {
    font-size: 18px;
}

.sdwan-v2-view-details-row {
    margin-top: 6px;
    border-top: 1px solid #f0f0f0;
    padding-top: 6px;
}
.sdwan-v2-view-details {
    font-size: 12px;
    color: #039be5;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}
.sdwan-v2-view-details:hover {
    color: #0277bd;
}
.sdwan-v2-view-details .material-icons {
    font-size: 14px;
    transition: transform 0.2s;
}
.sdwan-v2-view-details:hover .material-icons {
    transform: translateX(3px);
}
.sdwan-v2-wan-pills {
    margin-bottom: 4px;
}
.sdwan-v2-wan-pill {
    min-width: 0 !important;
    min-height: 28px !important;
    line-height: 28px !important;
    padding: 0 16px !important;
    margin: 0 6px 0 0 !important;
    font-size: 11px !important;
    border-radius: 14px !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    color: #6b7280 !important;
    text-transform: none !important;
}
.sdwan-v2-wan-pill.active {
    border-color: #039be5 !important;
    background: #e1f5fe !important;
    color: #039be5 !important;
}
.sdwan-v2-wan-percentage {
    margin-bottom: 8px;
}
.sdwan-v2-pct-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin: 0 16px;
}
@media (max-width: 600px) {
    .sdwan-v2-card { margin: 4px 0; }
}

/* ── SD-WAN Connections Page ─────────────────────────────── */
.sdwan-conn-container {
    padding: 8px;
}
.sdwan-conn-filter-pill {
    position: static !important;
    float: none !important;
    bottom: auto !important;
    margin: 0 12px 0 auto;
    align-self: center;
    z-index: 11;
}
.sdwan-conn-summary-row {
    margin: 0 0 12px;
    gap: 12px;
}
.sdwan-conn-summary-card {
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14) !important;
    border-radius: 4px !important;
}
.sdwan-conn-summary-card md-card-content {
    padding: 20px 16px !important;
}
.sdwan-conn-summary-value {
    font-size: 28px;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.2;
}
.sdwan-conn-summary-label {
    font-size: 13px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.54);
    margin-top: 6px;
}
.ipsec-tunnel-stats-col {
    padding-left: 8px;
}
.ipsec-tunnel-stats-col md-card {
    margin-bottom: 8px !important;
}

/* IPSec Detail Slide-in Panel */
.ipsec-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 65%;
    height: 100vh;
    background: #f5f5f5;
    box-shadow: -4px 0 16px rgba(0,0,0,0.15);
    z-index: 70;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}
.ipsec-detail-panel.open {
    transform: translateX(0);
}
.ipsec-detail-panel.fullscreen {
    width: 100%;
}
.ipsec-detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    min-height: 42px;
}
.ipsec-detail-panel-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}
.ipsec-detail-panel-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ipsec-detail-panel-actions .md-icon-button {
    margin: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
}
.ipsec-detail-panel-actions .md-icon-button i {
    color: #fff;
    font-size: 20px;
}
.ipsec-detail-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.ipsec-list-with-panel {
    margin-right: 50%;
}

/* IPSec Status Dot */
.ipsec-status-dot-cell {
    text-align: center !important;
    width: 8px !important;
    min-width: 8px !important;
    padding: 4px 2px !important;
}
.ipsec-status-dot {
    font-size: 10px !important;
    line-height: 1;
}
.ipsec-dot-green { color: #4caf50; }
.ipsec-dot-yellow { color: #ffc107; }
.ipsec-dot-gray { color: #9e9e9e; }

/* Panel Overview Card - unified info + stats + traffic selectors */
.ipsec-panel-overview-card {
    margin: 0 0 12px 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
}
.ipsec-panel-overview-body {
    padding: 0 !important;
}
.ipsec-panel-overview-top {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e8e8e8;
}
.ipsec-panel-info-section {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 16px;
    flex: 1;
    flex-wrap: wrap;
}
.ipsec-panel-info-item {
    display: flex;
    flex-direction: column;
}
.ipsec-panel-info-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(0,0,0,0.45);
    font-weight: 700;
    line-height: 1;
}
.ipsec-panel-info-value {
    font-size: 13px;
    font-weight: 400;
    color: #333;
    margin-top: 3px;
}
.ipsec-panel-stats-section {
    display: flex;
    align-items: center;
    border-left: 1px solid #e8e8e8;
    flex-shrink: 0;
    padding: 0 4px;
}
.ipsec-panel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
}
.ipsec-panel-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    white-space: nowrap;
}
.ipsec-panel-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(0,0,0,0.45);
    font-weight: 500;
    margin-top: 1px;
    white-space: nowrap;
}
.ipsec-panel-stat-divider-v {
    width: 1px;
    height: 32px;
    background: #e0e0e0;
    flex-shrink: 0;
}
.ipsec-panel-ts-section {
    padding: 0;
}
.ipsec-panel-ts-section .alert-list-header {
    padding: 6px 12px !important;
    min-height: 32px !important;
}
.ipsec-panel-ts-section .md-headline {
    font-size: 13px !important;
}
.ipsec-panel-ts-table td,
.ipsec-panel-ts-table th {
    padding: 4px 16px !important;
    font-size: 12px;
}

/* Compact card overrides for panel */
.ipsec-panel-compact-card {
    margin: 0 0 12px 0 !important;
}
.ipsec-panel-compact-header {
    padding: 6px 12px !important;
    min-height: 32px !important;
}
.ipsec-panel-compact-header .md-headline {
    font-size: 13px !important;
}
.ipsec-panel-compact-content {
    padding: 0 !important;
}
.ipsec-panel-compact-content .nirad_table td,
.ipsec-panel-compact-content .nirad_table th {
    padding: 4px 8px !important;
    font-size: 12px;
}

/* IPSec Member Cards */
.ipsec-panel-members-section {
    margin: 0 0 12px 0;
}
.ipsec-member-card {
    margin: 8px 0 !important;
    border-left: 3px solid #039be5;
}
.ipsec-member-card md-card-content {
    padding: 12px !important;
}
.ipsec-member-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}
.ipsec-member-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.ipsec-member-card-status {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
}
.ipsec-member-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 16px;
}
.ipsec-member-card-item {
    display: flex;
    flex-direction: column;
}
.ipsec-member-card-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.ipsec-member-card-value {
    font-size: 13px;
    color: #333;
    font-weight: 400;
}
.ipsec-member-card-divider {
    width: 1px;
    height: 20px;
    background: #ccc;
    margin: 0 4px;
}
.ipsec-member-card-header .oobmMappings .connected {
    color: #00ff0a;
}
.ipsec-member-card-header .oobmMappings .disConnected {
    color: #b9b9b9;
}
.sdwan-conn-vpn-pct {
    color: #2e7d32;
    font-weight: 500;
}
.sdwan-conn-tag {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 8px;
    background: #ff7043;
    color: #fff;
    vertical-align: middle;
}
.sdwan-conn-range-row {
    margin: 0 0 8px;
}
.sdwan-conn-range-row .sdwan-conn-duration-badge,
.sdwan-conn-hero-card .sdwan-conn-duration-badge {
    background: #eef3f8;
    color: #374151;
    font-size: 12px;
    padding: 4px 12px;
    border: 1px solid #d1d5db;
}
.sdwan-conn-range-row .sdwan-conn-duration-badge i.material-icons,
.sdwan-conn-hero-card .sdwan-conn-duration-badge i.material-icons {
    color: #6b7280;
    font-size: 14px;
}

/* Sleek 3-stat summary card */
.sdwan-conn-hero-card {
    margin: 0 0 14px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    border: 1px solid #eef1f5;
    transition: box-shadow 0.2s ease;
}
.sdwan-conn-hero-card:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
}
.sdwan-conn-hero-card md-card-content {
    padding: 18px 24px;
}
.sdwan-conn-stats-row {
    gap: 4px;
}
.sdwan-conn-stat {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.sdwan-conn-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}
.sdwan-conn-stat-icon i.material-icons {
    font-size: 22px;
}
.sdwan-conn-stat-icon-active {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}
.sdwan-conn-stat-icon-active i.material-icons {
    color: #0284c7;
}
.sdwan-conn-stat-icon-internet {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}
.sdwan-conn-stat-icon-internet i.material-icons {
    color: #059669;
}
.sdwan-conn-stat-icon-vpn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.sdwan-conn-stat-icon-vpn i.material-icons {
    color: #d97706;
}
.sdwan-conn-stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.sdwan-conn-stat-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sdwan-conn-stat-value {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.3px;
}
.sdwan-conn-stat-divider {
    width: 1px;
    height: 40px;
    background: #e5e7eb;
    margin: 0 28px;
}
.sdwan-conn-duration-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}
.sdwan-conn-duration-badge i.material-icons {
    font-size: 13px;
}
@media (max-width: 600px) {
    .sdwan-conn-summary-row { gap: 8px; }
}

/* IPSec Tunnel List - Details button */
.ipsec-details-btn.md-button {
    font-size: 10px !important;
    min-height: 22px !important;
    line-height: 22px !important;
    min-width: 60px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border-radius: 20px !important;
}

/* ===================== IPSec Overview Dashboard ===================== */

.ipsec-overview-title {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
}
.ipsec-overview-title md-card-title-text {
    flex: 1 !important;
}
.ipsec-view-details-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #039be5;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}
.ipsec-view-details-link:hover { color: #0277bd; text-decoration: underline; }
.ipsec-view-details-link .material-icons { font-size: 14px; }

.ipsec-enabled { color: #4caf50 !important; }
.ipsec-disabled { color: #f44336 !important; }

/* Tunnel badges in Config Set table */
.ipsec-tunnel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.ipsec-tunnel-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    background: #e8f0fe;
    color: #1a73e8;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.ipsec-tunnel-badge.ipsec-tunnel-more {
    background: #fff3e0;
    color: #e65100;
    cursor: pointer;
}
.ipsec-tunnel-badge.ipsec-tunnel-more:hover {
    background: #ffe0b2;
}
.ipsec-tunnel-badge.ipsec-badge-sm {
    padding: 2px 6px;
    font-size: 10px;
}
/* Config Set table — group separation */
/* ===== IPsec Config Set table ===== */
.ipsec-configset-table {
    border-collapse: collapse;
    width: 100%;
}
.ipsec-configset-table thead th {
    text-transform: capitalize;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #fff;
    font-weight: 600;
}
.ipsec-th-group {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.ipsec-th-config {
    min-width: 160px;
    width: 160px;
}
.ipsec-th-action {
    width: 48px;
    text-align: center;
}

/* Config group separation — subtle spacing between groups */
.ipsec-configset-table .ipsec-config-group + .ipsec-config-group > tr:first-child > td {
    border-top: 1px solid #cfd8dc !important;
    padding-top: 10px !important;
}
.ipsec-configset-table .ipsec-config-group + .ipsec-config-group > tr:first-child > td.ipsec-config-name-cell {
    padding-top: 3px !important;
}

/* Config name cell (rowspan) */
.ipsec-config-name-cell {
    background: #f5f7fa !important;
    border-right: 2px solid #cfd8dc !important;
    padding: 3px 8px !important;
    vertical-align: middle !important;
    width: 160px;
    min-width: 160px;
}
.ipsec-config-name {
    font-size: 13px;
    font-weight: 700;
    color: #263238;
    line-height: 1.4;
    white-space: nowrap;
}
.ipsec-config-meta {
    font-size: 11px;
    color: #78909c;
    font-weight: 400;
    margin-top: 2px;
}

/* Tunnel rows inside a config group */
.ipsec-tunnel-row td {
    padding: 3px 8px !important;
    border-bottom: 1px solid #dee2e6;
    font-size: 12px;
    vertical-align: middle;
    color: #37474f;
    line-height: 1.2;
    height: 30px;
}
.ipsec-tunnel-row:last-child td {
    border-bottom: none;
}
.ipsec-tunnel-row:hover td:not(.ipsec-config-name-cell) {
    background: #f5f8ff;
}
.ipsec-configset-table tbody.ipsec-config-group:first-of-type tr:first-child td {
    border-top: none;
}
.ipsec-td-action {
    text-align: center;
    width: 36px;
    padding: 0 !important;
}
.ipsec-td-action .md-icon-button {
    margin: 0 !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    line-height: 28px !important;
}
.ipsec-td-action md-icon {
    font-size: 18px !important;
}

md-tooltip.ipsec-tunnel-tooltip {
    background-color: rgba(0,0,0,0.8) !important;
    font-size: 10px;
    font-weight: bold;
}

/* Tunnel name styling */
.ipsec-tunnel-name-text {
    font-weight: 600;
    color: #1a73e8;
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Subnet code styling */
.ipsec-subnet {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    background: #eceff1;
    padding: 2px 6px;
    border-radius: 3px;
    color: #455a64;
    border: 1px solid #dce3e8;
}

/* Proposal set badge */
.ipsec-proposal-set-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 500;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* "+N more" row */
.ipsec-more-tunnels-cell {
    text-align: left;
    padding: 2px 8px !important;
    background: #fafbfc;
    border-bottom: none !important;
}
.ipsec-more-row td {
    border-bottom: none !important;
}

/* ===== Config Set — Alternative Design (one row per config) ===== */
.ipsec-configset-alt-table {
    border-collapse: collapse;
    width: 100%;
}
.ipsec-configset-alt-table thead th {
    background: #f5f7fa;
    font-weight: 600;
    font-size: 12px;
    color: #555;
    padding: 10px 12px;
    border-bottom: 2px solid #dde3ea;
    text-align: left;
}
.ipsec-configset-alt-table .ipsec-alt-row td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
    font-size: 13px;
}
.ipsec-configset-alt-table .ipsec-alt-row:hover td {
    background: #f5f8ff;
}
.ipsec-alt-comma-list {
    display: inline;
}
.ipsec-alt-more-btn {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.ipsec-alt-more-btn:hover {
    background: #bbdefb;
}

/* Scrollable table with sticky header for ipsec popup */
.ipsec-scroll-table {
    max-height: 240px;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.ipsec-scroll-table::-webkit-scrollbar {
    width: 4px;
}
.ipsec-scroll-table::-webkit-scrollbar-track {
    background: transparent;
}
.ipsec-scroll-table::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.ipsec-scroll-table::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ===== nirad-tooltip-panel directive ===== */
nirad-tooltip-panel {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.nirad-ttp-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    cursor: pointer;
    border-radius: 50%;
    color: #999;
    transition: color 0.15s, background 0.15s;
}
.nirad-ttp-trigger:hover {
    color: #2196F3;
    background: #e3f2fd;
}
.nirad-ttp-trigger i.material-icons {
    font-size: 18px;
}
.nirad-ttp-panel {
    position: fixed;
    z-index: 9999;
    min-width: 380px;
    max-width: 560px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    overflow: hidden;
}
.nirad-ttp-panel-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 9999;
    pointer-events: none;
}
.nirad-ttp-panel-wrap .nirad-ttp-panel {
    pointer-events: auto;
    visibility: hidden;
}
.nirad-ttp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eef1f5;
    background: #fafbfc;
}
.nirad-ttp-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
.nirad-ttp-title small {
    font-weight: 400;
    color: #888;
    font-size: 11px;
}
.nirad-ttp-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    cursor: pointer;
    border-radius: 50%;
    color: #888;
    margin-left: 8px;
    transition: color 0.15s, background 0.15s;
}
.nirad-ttp-close:hover {
    color: #333;
    background: #eee;
}
.nirad-ttp-close i.material-icons {
    font-size: 16px;
}
.nirad-ttp-body {
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}
.nirad-ttp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.nirad-ttp-table th {
    background: #f5f7fa;
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #dde3ea;
    white-space: nowrap;
}
.nirad-ttp-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #eef1f5;
    color: #333;
    white-space: nowrap;
}
.nirad-ttp-table tr:last-child td {
    border-bottom: none;
}

/* Wrapper for md-input-container with tooltip panel */
.nirad-ttp-select-wrap {
    position: relative;
}
.nirad-ttp-select-wrap md-input-container {
    position: relative;
}
.nirad-ttp-select-wrap md-input-container > nirad-tooltip-panel {
    position: absolute;
    right: 24px;
    bottom: 12px;
    z-index: 2;
}

/* Make md-option text wrapper full width so eye icon floats to far right */
md-option .md-text {
    width: 100%;
    display: flex;
    align-items: center;
}

/* Eye icon inside md-option (dropdown items) */
.nirad-ttp-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    cursor: pointer;
    border-radius: 50%;
    color: #999;
    margin-left: auto;
    float: right;
    transition: color 0.15s, background 0.15s;
}
.nirad-ttp-option-icon:hover {
    color: #2196F3;
    background: #e3f2fd;
}
.nirad-ttp-option-icon i.material-icons {
    font-size: 16px;
}
/* Hide the option icon in the selected value display area */
.md-select-value .nirad-ttp-option-icon {
    display: none;
}

/* Section header with add button */
.ipsec-section-header {
    display: flex;
    align-items: center;
    padding: 8px 16px 0;
}
.ipsec-section-header .ipsec-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    display: inline-block;
}
.ipsec-section-add-btn {
    margin-left: 4px !important;
}
/* Inline proposal form in popup */
.ipsec-inline-section { margin-top: 8px; }
.ipsec-inline-section-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.ipsec-inline-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}
.ipsec-inline-form {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
/* Section title (standalone) */
.ipsec-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}

/* Tunnel Summary table in overview */
.ipsec-detail-content .nirad_table {
    font-size: 12px;
    border-radius: 4px;
    overflow: hidden;
}
.ipsec-detail-content .nirad_table thead th {
    background: var(--secondary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 12px;
}
.ipsec-detail-content .nirad_table tbody td {
    padding: 8px 12px;
    font-size: 12px;
    border-bottom: 1px solid #eee;
}

/* ---- Tunnel Accordion ---- */
.ipsec-tunnel-accordion {
    margin-bottom: 10px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #e8e8e8;
}
.ipsec-accordion-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s;
}
.ipsec-accordion-header:hover {
    background: #f0f7fd;
}
.ipsec-accordion-header .material-icons {
    font-size: 20px;
    color: var(--primary);
    margin-right: 10px;
    transition: transform 0.2s;
}
.ipsec-accordion-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    flex: 1;
}
.ipsec-accordion-badge {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.ipsec-accordion-body {
    padding: 16px;
    background: #f9fafb;
    border-top: 1px solid #eee;
}

/* ---- Detail cards inside accordion ---- */
.ipsec-detail-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin: 0 4px 12px;
    overflow: hidden;
    border: 1px solid #eee;
}
.ipsec-detail-card-title {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ipsec-detail-card-title .material-icons {
    font-size: 15px;
}
.ipsec-detail-card-body {
    padding: 10px 14px;
}

/* ---- Key-value rows ---- */
.ipsec-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 12px;
    line-height: 1.4;
}
.ipsec-detail-row:last-child {
    border-bottom: none;
}
.ipsec-detail-row .label {
    color: #777;
    font-weight: 500;
    flex: 0 0 45%;
}
.ipsec-detail-row .value {
    color: #333;
    font-weight: 600;
    text-align: right;
    flex: 0 0 50%;
    word-break: break-word;
}

/* ---- Proposal items ---- */
.ipsec-proposal-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.ipsec-proposal-item:last-child {
    border-bottom: none;
}
.ipsec-proposal-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #ddd;
}

/* ---- Clickable row ---- */
.clickable-row {
    cursor: pointer;
    transition: background 0.15s;
}
.clickable-row:hover {
    background: #e8f4fd !important;
}
.clickable-row td:last-child .md-icon-button {
    color: var(--primary);
}

/* Backdrop overlay when panel is open */
.ipsec-panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 79;
}

/* Panel tabs (Overview / Tunnels) */
.ipsec-panel-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
}
.ipsec-panel-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: #fff;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.ipsec-panel-tab:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}
.ipsec-panel-tab .material-icons {
    font-size: 18px;
}
.ipsec-panel-tab:hover {
    background: #f5f5f5;
    color: #333;
}
.ipsec-panel-tab.active {
    background: var(--primary);
    color: #fff;
}
.ipsec-panel-tab.active .material-icons {
    color: #fff;
}

/* ---- IPsec proposal accordion sub-headers ---- */
.ipsec-proposal-section {
    margin-bottom: 12px;
    overflow: visible;
}
.ipsec-proposal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding: 0 8px 0 4px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
}
.ipsec-proposal-section-header .ipsec-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}
.ipsec-proposal-section-header .ipsec-section-title > i {
    font-size: 18px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.ipsec-proposal-section-header .ipsec-section-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ipsec-proposal-section-header .search-box {
    position: relative;
    right: auto;
    top: auto;
    width: 250px;
}
.ipsec-proposal-section-header .search-box input {
    background: rgba(0, 110, 180, 0.6);
    border: 0;
    border-radius: 15px;
    padding: 5px 15px 5px 40px;
    font-size: 13px;
    width: 100%;
    color: #fff;
}
.ipsec-proposal-section-header .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}
.ipsec-proposal-section-header .search-box input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}
.ipsec-proposal-section-header .search-box i.search-icon {
    color: #fff;
    border: 0;
}
.ipsec-proposal-section-header .ipsec-section-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ipsec-proposal-section-header .ipsec-section-btn:hover {
    background: rgba(255,255,255,0.35);
}
.ipsec-proposal-section-header .ipsec-section-btn:disabled {
    background: #bdbdbd;
    color: #757575;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}
.ipsec-proposal-section-header .ipsec-section-btn i {
    font-size: 20px;
}
.ipsec-proposal-section-header *:focus,
.ipsec-proposal-section-header *:active,
.ipsec-proposal-section-header:focus,
.ipsec-proposal-section-header:active {
    outline: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
.ipsec-proposal-section-body {
    border: none;
}

/* ---- IPsec Proposal Set Popup — Bucket layout ---- */
.ipsec-proposal-set-buckets {
    gap: 0;
    min-height: 300px;
}
.ipsec-bucket {
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ipsec-bucket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.ipsec-bucket-header .ipsec-bucket-actions {
    display: flex;
    gap: 8px;
}
.ipsec-bucket-header .ipsec-bucket-actions a {
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
}
.ipsec-bucket-header .ipsec-bucket-actions a:hover {
    text-decoration: underline;
}
.ipsec-bucket-search {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}
.ipsec-bucket-search i {
    font-size: 18px;
    color: #999;
    margin-right: 6px;
}
.ipsec-bucket-search input {
    border: none;
    background: transparent;
    font-size: 13px;
    width: 100%;
    outline: none;
    color: #333;
}
.ipsec-bucket-search input::placeholder {
    color: #aaa;
}
.ipsec-bucket-body {
    flex: 1;
    overflow-y: auto;
    max-height: 350px;
}
.ipsec-bucket-body .table {
    margin-bottom: 0;
    font-size: 12px;
}
.ipsec-bucket-body .table th {
    font-size: 11px;
    padding: 6px 8px;
    white-space: nowrap;
}
.ipsec-bucket-body .table td {
    padding: 5px 8px;
    font-size: 12px;
}
.ipsec-bucket-row-selected {
    background: rgba(0, 137, 202, 0.08) !important;
}
.ipsec-bucket-row-locked {
    background: rgba(0, 137, 202, 0.06) !important;
    opacity: 0.6;
}
.ipsec-bucket-checkbox {
    margin: 0 !important;
    min-height: 20px !important;
    height: 20px !important;
    width: 20px !important;
}
.ipsec-bucket-checkbox .md-container {
    width: 18px !important;
    height: 18px !important;
}
.ipsec-bucket-checkbox.md-checked .md-icon {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.ipsec-bucket-checkbox .md-icon {
    border-color: #999 !important;
}
.ipsec-bucket-transfer {
    padding: 0 6px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ipsec-bucket-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #aaa;
    text-align: center;
}
.ipsec-bucket-empty i {
    font-size: 36px;
    margin-bottom: 8px;
    color: #ccc;
}
.ipsec-bucket-empty p {
    font-size: 13px;
    margin: 0;
}

/* ---- IPsec single-table checkbox selection ---- */
.ipsec-select-section {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}
.ipsec-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--primary);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border-radius: 4px 4px 0 0;
}
.ipsec-select-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ipsec-select-header-actions a {
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
}
.ipsec-select-header-actions a:hover {
    text-decoration: underline;
}
.ipsec-select-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 4px 12px;
    gap: 6px;
}
.ipsec-select-search i {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
}
.ipsec-select-search input {
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    width: 180px;
    padding: 2px 0;
}
.ipsec-select-search input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}
.ipsec-select-search input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.ipsec-select-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #999;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 4px 4px;
}
.ipsec-select-empty i {
    font-size: 40px;
    color: #ccc;
    margin-bottom: 10px;
}
.ipsec-select-empty p {
    margin: 0;
    font-size: 14px;
    text-align: center;
}
.ipsec-select-body {
    overflow-y: auto;
    max-height: 400px;
}
.ipsec-select-body .table {
    margin-bottom: 0;
}
.ipsec-bucket-table th,
.ipsec-bucket-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: middle;
}


/* Device IPSec Dashboard - Constrain doughnut inside card */
.ipsec-card-row .devicesRegisteredChart {
    width: 150px;
    height: 150px;
}
.ipsec-card-row .devicesRegisteredChart canvas {
    max-width: 150px !important;
    max-height: 150px !important;
}
.ipsec-card-row .chart-container-dashboard {
    top: calc(50% - 30px);
    left: calc(50% - 32px);
}

/* Device IPSec Dashboard - HA Info Card */
.ipsec-ha-info-content { padding: 16px 20px !important; align-items: flex-start !important; justify-content: flex-start !important; }
.ipsec-traffic-content { padding: 16px 20px !important; align-items: flex-start !important; justify-content: center !important; }
.ipsec-ha-row { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; color: #333; }
.ipsec-ha-label { font-weight: 500; margin-right: 4px; }
.ipsec-ha-value { font-weight: 600; }
.ipsec-ha-members { color: #666; font-size: 13px; }
.ipsec-ha-section-title { font-weight: 500; font-size: 14px; color: #333; margin: 12px 0 8px; }
.ipsec-ha-indent { padding-left: 16px; }
.dyn-ht-chart-ipsec { height: 220px; }

/* Device IPSec Dashboard - Equal height cards & horizontal bar charts */
.ipsec-card-row {
    display: flex;
    align-items: stretch;
}
.ipsec-card-row > div {
    display: flex;
}
.ipsec-card-row > div > md-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.ipsec-card-row > div > md-card > md-card-content {
    flex: 1;
}
.ipsec-duration-row {
    padding: 0 16px;
}
.ipsec-duration-select {
    margin: 0;
    max-width: 130px;
}
.ipsec-duration-select .md-select-value {
    font-size: 11px;
    min-height: 28px;
    border-bottom: 1px solid #d1d5db;
}
.ipsec-bar-chart-content {
    padding: 8px 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Each category now stacks a name line above its bar, so five rows need more room */
    min-height: 230px;
}
.ipsec-bar-chart-content canvas {
    width: 100% !important;
    max-height: 230px;
}

/* Device IPSec Dashboard - Traffic Summary Card */
.ipsec-traffic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}
.ipsec-traffic-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ipsec-traffic-icon { font-size: 22px !important; }
.ipsec-traffic-label { font-size: 11px; color: #999; }
.ipsec-traffic-val { font-size: 14px; font-weight: 600; color: #333; }

/* IPSec Tunnel Details - Overview Tab */
.ipsec-tunnel-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    padding: 16px 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px;
}
.ipsec-tunnel-summary-item { display: flex; align-items: center; gap: 6px; }
.ipsec-tunnel-summary-label { font-size: 13px; color: #666; font-weight: 500; }
.ipsec-tunnel-summary-value { font-size: 13px; color: #333; font-weight: 600; }

/* IKE SA → Child SA Hierarchy */
.ipsec-sa-hierarchy { margin-bottom: 12px; background: #fff; }

.ipsec-ike-sa-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #039be5;
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.ipsec-ike-sa-banner:hover { background: #0288d1; }

.ipsec-child-sa-list { margin-left: 32px; margin-top: 6px; margin-bottom: 12px; background: #fff; }

.ipsec-child-sa-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e3f2fd;
    padding: 8px 16px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.ipsec-sa-banner-left { display: flex; align-items: center; gap: 6px; min-width: 140px; }
.ipsec-sa-banner-title { font-size: 13px; font-weight: 600; }
.ipsec-ike-sa-banner .ipsec-sa-banner-title { color: #fff; }
.ipsec-child-sa-banner .ipsec-sa-banner-title { color: #333; }
.ipsec-sa-expand-icon { font-size: 20px !important; color: #fff; }

.ipsec-sa-banner-params {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 12px;
    color: #444;
}
.ipsec-sa-banner-params b { font-weight: 500; }
.ipsec-ike-sa-banner .ipsec-sa-banner-params { color: rgba(255,255,255,0.9); }
.ipsec-ike-sa-banner .ipsec-sa-banner-params b { color: rgba(255,255,255,0.75); }
.ipsec-child-sa-banner .ipsec-sa-banner-params b { color: #666; }

/* IPSec Tunnel Details - Child SA Pill Tabs */
.ipsec-child-sa-pills { display: flex; gap: 6px; padding: 12px 0; flex-wrap: wrap; }
.ipsec-child-pill {
    min-width: 0 !important;
    min-height: 28px !important;
    line-height: 28px !important;
    padding: 0 16px !important;
    margin: 0 4px 0 0 !important;
    font-size: 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    background: transparent !important;
    color: #fff !important;
    text-transform: none !important;
    box-shadow: none !important;
}
.ipsec-child-pill.active {
    border-color: #fff !important;
    background: #fff !important;
    color: #039be5 !important;
    font-weight: 600 !important;
}


/* IPSec Tunnel Details - Uptime View */
.ipsec-uptime-container { padding: 20px 0; }
.ipsec-uptime-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ipsec-uptime-pct { font-size: 36px; font-weight: 700; color: #4caf50; }
.ipsec-uptime-label { font-size: 14px; color: #666; }
.ipsec-uptime-bar-bg {
    width: 100%;
    height: 24px;
    background: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.ipsec-uptime-bar-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 12px;
    transition: width 0.4s ease;
}
.ipsec-uptime-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 13px;
    color: #444;
}
.ipsec-uptime-details b { font-weight: 500; color: #666; }

/* IPSec Connection History - Radio in blue header */
.ipsec-history-radio .md-label { color: #fff !important; font-size: 12px !important; }
.ipsec-history-radio .md-container .md-off { border-color: rgba(255,255,255,0.6) !important; }
.ipsec-history-radio .md-container .md-on { background-color: #fff !important; }

md-option .md-text {
    display: flex;
    flex: 1;
}

/* IPSec — Associated WANs sleek card list */
.ipsec-wan-list {
    padding: 8px 4px 4px;
}
.ipsec-wan-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 10px 110px 10px 28px;
    margin-bottom: 8px;
    background: #fafbfc;
    border: 1px solid #e3e7ec;
    border-radius: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ipsec-wan-card:hover {
    border-color: #b8c2cc;
    background: #fff;
}
.ipsec-wan-card::before {
    content: '';
    position: absolute;
    top: 34px;
    bottom: 12px;
    left: 14px;
    width: 2px;
    background: #d0d7de;
    border-radius: 1px;
}
.ipsec-wan-card__marker {
    position: absolute;
    left: 10px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e88e5;
    box-shadow: 0 0 0 3px rgba(30,136,229,0.15);
    z-index: 1;
}
.ipsec-wan-card--compact {
    padding: 8px 110px 8px 14px;
}
.ipsec-wan-card--compact::before,
.ipsec-wan-card--compact .ipsec-wan-card__marker {
    display: none;
}
.ipsec-wan-card__body {
    flex: 1;
    min-width: 0;
}
.ipsec-wan-card__field {
    margin: 0 8px 0 0 !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}
.ipsec-wan-card__field label {
    font-size: 12px !important;
}
/* None of these fields render a validation message, so the spacer Material reserves under
   them is dead height - and it is what stopped layout-align centre from lining the BFD
   checkbox up with the profile beside it. */
.ipsec-wan-card__field .md-errors-spacer {
    min-height: 0;
}

/* Explains a value the operator cannot change, so it reads as information rather than as
   a field they have failed to fill in. */
.ipsec-policy-ts-note {
    margin: 8px 0 4px;
    font-size: 12px;
    color: #616161;
}
.ipsec-wan-card__delete {
    position: absolute !important;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    min-height: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    margin: 0 !important;
    text-transform: none !important;
}
.ipsec-wan-card__delete .material-icons {
    font-size: 16px;
}
.ipsec-wan-empty {
    padding: 12px 16px;
    margin-bottom: 8px;
    color: #888;
    font-size: 13px;
    text-align: center;
    background: #fafbfc;
    border: 1px dashed #d0d7de;
    border-radius: 6px;
}
.ipsec-wan-add-row {
    padding: 4px 0;
}
.ipsec-wan-add-btn {
    font-size: 12px !important;
    padding: 0 14px !important;
    min-height: 30px !important;
    line-height: 30px !important;
    text-transform: none !important;
}


.ip-chips-container {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 6px 2px 1px;
    gap: 4px;
    margin-top: 0;
    min-height: 30px;
    line-height: 26px;
    box-sizing: border-box;
    width: 100%;
}
.ip-chip {
    display: inline-flex;
    align-items: center;
    background: #e0e0e0;
    border-radius: 16px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 20px;
}

/* ===== Threat Alerts — severity / disposition colors (shared by list + detail) =====
 * Text-only color rules. Add .threat-sev-badge or .threat-disp-badge alongside
 * for the rounded pill (light-tinted background + padding) used on the detail page. */
.threat-sev-critical { color: #d32f2f; font-weight: 600; }
.threat-sev-high     { color: #f24535; font-weight: 600; }
.threat-sev-medium   { color: #f2b540; font-weight: 600; }
.threat-sev-low      { color: #2e7d32; font-weight: 600; }
.threat-disp-blocked   { color: #d32f2f; font-weight: 600; }
.threat-disp-allowed   { color: #2e7d32; font-weight: 600; }
.threat-disp-monitored { color: #e65100; font-weight: 600; }

.threat-sev-badge,
.threat-disp-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 18px;
}
.threat-sev-badge.threat-sev-critical { background: #ffe2e2; }
.threat-sev-badge.threat-sev-high     { background: #ffe7d0; }
.threat-sev-badge.threat-sev-medium   { background: #fff5cc; }
.threat-sev-badge.threat-sev-low      { background: #e6f4ea; }
.threat-sev-undefined                 { color: #78909c; font-weight: 600; }
.threat-sev-badge.threat-sev-undefined { background: #eceff1; }
.threat-disp-badge.threat-disp-blocked   { background: #ffe2e2; }
.threat-disp-badge.threat-disp-allowed   { background: #e6f4ea; }
.threat-disp-badge.threat-disp-monitored { background: #fff5cc; }

/* Enrichment pipeline's tag classification (uuid_hit / novel / generic). */
.threat-tag-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 18px;
    font-weight: 600;
}
.threat-tag-uuid_hit { color: #d32f2f; background: #ffe2e2; }
.threat-tag-novel    { color: #e65100; background: #fff0da; }
.threat-tag-generic  { color: #546e7a; background: #eceff1; }

/* ===== Threat Alert Detail page (reuses .sdwan-detail-back-row / -back-title for the header) ===== */
.threat-detail-page { padding: 8px 16px 16px; }

.threat-detail-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    margin: 0 0 12px 38px; color: #607d8b; font-size: 12px;
}
.threat-detail-meta .meta-label { color: #90a4ae; margin-right: 4px; user-select: none; }
.threat-detail-meta .meta-value { font-family: 'Roboto Mono', monospace; color: #37474f; }

.threat-detail-row { margin: 0 -6px 8px -6px; }
.threat-detail-col { padding: 0 6px 12px; box-sizing: border-box; }
.threat-detail-col--full { flex: 1 1 100%; max-width: 100%; }

.threat-detail-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-radius: 6px;
    margin: 0 !important; /* row gap is the single source of spacing */
    background: #fff;
}
.threat-detail-card md-card-content { padding: 12px 16px; }
.threat-detail-card-title {
    text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px;
    color: #90a4ae; margin-bottom: 8px; font-weight: 600;
}
.threat-detail-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; user-select: none; }
.threat-detail-card-heading { font-size: 14px; font-weight: 600; color: #263238; flex: 1; }
.threat-detail-card-icon-box {
    width: 26px; height: 26px; border-radius: 4px; display: inline-flex;
    align-items: center; justify-content: center; color: #fff;
}
.threat-detail-card-icon-box .material-icons { font-size: 16px; }
.threat-card-icon-warning { background: #ef5350; }
.threat-card-icon-info    { background: #29b6f6; }
.threat-detail-pill {
    padding: 2px 10px; border-radius: 12px; background: #eceff1;
    color: #546e7a; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
}

/* Enforcement chain / Intel loop */
.threat-chain { position: relative; padding: 4px 0 0; }
.threat-chain-step {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; position: relative; z-index: 1;
}
.threat-chain-icon {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.12); background: #607d8b;
}
.threat-chain-icon .material-icons { font-size: 18px; }
.threat-chain-title { margin-top: 6px; font-size: 12px; font-weight: 600; color: #37474f; }
.threat-chain-sub   { font-size: 11px; color: #78909c; }
/* connector lines */
.threat-chain .threat-chain-step:not(:last-child)::after {
    content: ''; position: absolute; top: 17px; left: 60%; right: -40%;
    height: 2px; background: #ef9a9a; z-index: 0;
}
.threat-chain.threat-chain-intel .threat-chain-step:not(:last-child)::after { background: #ce93d8; }
/* shared circle/dot color tokens — used by enforcement chain icons,
 * intel loop icons, and path-history dots */
.threat-chain-detected,
.threat-color-red    { background: #ef5350; }
.threat-chain-connmark,
.threat-color-slate  { background: #455a64; }
.threat-intel-local,
.threat-color-blue   { background: #29b6f6; }
.threat-intel-misp,
.threat-color-purple { background: #ab47bc; }
.threat-intel-pushed { background: #7e57c2; }

/* KV grid used in Threat detail page — 3 columns on wide screens, label above value.
   Spacing matches .nirad-table-2 (9 px vertical padding per cell). */
.threat-kv-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 32px;
    padding: 4px 0;
}
.threat-kv-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 9px 0;
}
/* Typography matched to .nirad-table-2 (used on deviceSystem):
   label = dark 14 px / 400, value = muted 12 px / 400. */
.threat-kv-key {
    color: #333333;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    user-select: none;
}
.threat-kv-val {
    color: #969696;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
}
/* Unbounded free text (threat name, match comment) reads badly in a third of the row. */
.threat-kv-row--wide {
    grid-column: 1 / -1;
}
.threat-code-wrap { position: relative; display: block; }
.threat-code-block {
    margin: 2px 0 0;
    padding: 10px 34px 10px 12px;
    background: #f5f7f8;
    border: 1px solid #e0e6e8;
    border-radius: 4px;
    color: #37474f;
    font-size: 11.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Copy-to-clipboard affordance — single icon next to a value, or floated top-right of a
   code block. Reused by the SID meta chip, copyable single fields, and code blocks. */
.threat-copy-icon {
    font-size: 10px;
    width: 10px;
    height: 10px;
    line-height: 10px;
    color: #b0bec5;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
}
.threat-copy-icon:hover { color: #607d8b; }
.threat-copy-icon--code {
    position: absolute;
    top: 8px;
    right: 8px;
    margin-left: 0;
    background: #fff;
    border-radius: 3px;
    padding: 2px;
}

/* Array-of-string fields (IOCs, tags, refs) — each chip copies its own value on click. */
.threat-pill-copyable { cursor: pointer; }
.threat-pill-copyable:hover { background: #dde3e6; }
.threat-kv-val .threat-kv-sub {
    display: block;
    font-size: 11px;
    color: #90a4ae;
    font-weight: 400;
    font-style: italic;
    margin-top: 2px;
}
@media (max-width: 1200px) { .threat-kv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .threat-kv-list { grid-template-columns: 1fr; } }

/* Forensic flow detail card */
.threat-card-icon-forensic { background: #455a64; }

.threat-forensic-metrics { margin: 4px 0 22px; }
.threat-forensic-metric { padding: 4px 4px; box-sizing: border-box; }
.threat-forensic-value { font-size: 22px; font-weight: 600; color: #263238; line-height: 28px; }
.threat-forensic-label { font-size: 11px; color: #90a4ae; margin-top: 2px; }

.threat-section-title {
    text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;
    color: #90a4ae; margin: 14px 0 8px; font-weight: 600;
}

/* Path & decision history timeline */
.threat-path-list { padding: 4px 0 6px; }
.threat-path-row {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 0; font-size: 13px; color: #455a64;
}
.threat-path-time { color: #78909c; font-family: 'Roboto Mono', monospace; font-size: 12px; min-width: 60px; }
.threat-path-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; display: inline-block; }
.threat-path-text  { color: #455a64; }
.threat-path-text strong { color: #263238; font-weight: 600; }
.threat-path-dash  { color: #b0bec5; margin: 0 4px; }
.threat-path-desc  { color: #607d8b; }

/* Related alerts list inside forensic card */
.threat-related-list { padding: 4px 0; }
.threat-related-row {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid #eceff1;
}
.threat-related-row:last-child { border-bottom: none; }
.threat-related-text { color: #455a64; font-size: 13px; flex: 1; }
.threat-related-time { color: #90a4ae; font-family: 'Roboto Mono', monospace; font-size: 12px; }

/* ===== Threat Alerts table — sleeker rows + pill Details button ===== */
.threat-alerts-table.nirad_table thead th { padding: 8px 10px !important; font-size: 12px !important; }
.threat-alerts-table.nirad_table tbody td { padding: 6px 10px !important; font-size: 12px !important; line-height: 18px !important; }
.threat-alerts-table.nirad_table tbody tr { height: 32px !important; }
.threat-alerts-table td .md-button.md-primary {
    border-radius: 20px !important;
    font-size: 10px !important;
    min-height: 22px !important;
    line-height: 22px !important;
    min-width: 60px !important;
    padding: 0 10px !important;
    margin: 0 !important;
}

/* Opt-in helper: apply `.nirad-table-tight-header` on the wrapper of a <nirad-table>
   to normalise header spacing to the flex `gap` only (search / filter / download sit
   on an even 16px rhythm) AND drop the 60px right padding the shared header uses by
   default. Pages without this class keep their existing layout.
   The `!important` on .md-button is only to defeat the pre-existing !important on
   .toggleFilterBtn (style.css:19547) — no way around it. */
.nirad-table-tight-header .nirad-card-header-with-search {
    padding-right: 0;
}
.nirad-table-tight-header .nirad-card-header-with-search .card-header-rignt-content .md-button {
    margin: 0 !important;
}


/* BGP Route Map / Prefix List popups - editable row grid.

   The controls sit bare in each cell rather than in an md-input-container: that wrapper
   adds a floating label and an error spacer a table row has no room for, so the column
   headers label the cells instead. The rules below exist because .nirad_table is the
   read-only listing style - #969696 text and padding !important - and these rows are
   editable, so its colour and metrics have to be undone here. */
.bgp-form-dialog {
    max-width: 560px;
}

/* Headroom: md-dialog-content.md-padding is 16px, which puts the first field almost
   against the toolbar. */
.bgp-form-dialog md-dialog-content.md-padding {
    padding: 22px 22px 18px;
}

.bgp-form-dialog .add-profile-switch-container {
    margin-top: 22px;
}

/* The global "md-input-container label { margin-bottom: -5px }" pulls each label onto
   its field, which is what makes the top of the form feel tight. */
.bgp-form-dialog md-input-container {
    margin-top: 14px;
}

.bgp-form-dialog md-input-container > label {
    margin-bottom: 2px;
}

/* An invalid field keeps its red label and helper text, but only carries a
   full-strength red underline while focused. */
.bgp-form-dialog md-input-container.md-input-invalid:not(.md-input-focused) .md-input {
    border-color: rgba(198, 40, 40, 0.45);
}

/* Keep the action buttons clear of the dialog edge: .nirad-dialog puts a 10px margin on
   each one, so 12px here lands the button edge on the content gutter. */
.bgp-form-dialog-actions {
    padding: 8px 12px 12px;
}

/* ---- The grid itself ---- */
.bgp-grid-table th,

/* Headers recede so the values carry the weight, and hold position while rows scroll.
   The background must be opaque (.nirad_table own #eee) or rows show through. */
.bgp-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eee;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6b6b;
}

/* .nirad_table paints cell text #969696, about 2.8:1 on white - fine for a listing, but
   here the cells hold editable values and the whole row reads as disabled. */
.bgp-grid-table tbody tr td {
    color: #212121;
}

.bgp-grid-table thead th,
.bgp-grid-table tbody tr td {
    padding: 12px 14px !important;
}

.bgp-grid-table thead th:first-child,
.bgp-grid-table tbody tr td:first-child {
    padding-left: 14px !important;
    padding-right: 6px !important;
    white-space: nowrap;
}

.bgp-grid-table thead th:last-child,
.bgp-grid-table tbody tr td:last-child {
    padding-left: 4px !important;
    padding-right: 8px !important;
}

/* A stand-alone md-select keeps Material form-row margins and sizes to its content, and
   reserves 10px under the value for validation text this dialog renders elsewhere. */
.bgp-grid-table md-select {
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.bgp-grid-table md-select .md-select-value {
    min-height: 0;
    padding: 4px 0;
    background: transparent;
    border-bottom: 1px solid #9e9e9e;
    color: #212121;
}

.bgp-grid-table md-select:not([disabled]):focus .md-select-value {
    border-bottom-width: 2px;
    border-bottom-color: var(--primary);
}

/* The caret is the only thing marking a dropdown here, so it must not be a 6px glyph. */
.bgp-grid-table md-select .md-select-icon {
    width: 18px;
    color: #546e7a;
}

.bgp-grid-table md-select .md-select-icon:after {
    font-size: 14px;
    top: 2px;
}

/* .feild-val-input is sized for the 80px hotspot fields it was written for. */
.bgp-grid-table .feild-val-input {
    width: 100%;
    max-width: 100%;
    padding: 4px 0;
    background: transparent;
    color: #212121;
    border-bottom-color: #9e9e9e;
}

.bgp-grid-table .feild-val-input:focus {
    border-bottom: 2px solid var(--primary);
}

/* Placeholders only - Material default grey falls short of 4.5:1 on white. */
.bgp-grid-table .feild-val-input::-webkit-input-placeholder,
.bgp-grid-table .feild-val-input::placeholder {
    color: #6b6b6b;
}

.bgp-grid-table md-select .md-select-value.md-select-placeholder {
    color: #6b6b6b;
}

/* A required row is .ng-invalid the moment it is added, and Material paints an invalid
   select in the warn colour. Opening a dialog to a red field blames the user for not
   having typed yet, so red is held back until they submit (.show-errors). */
.bgp-grid-table md-select.ng-invalid .md-select-value {
    color: #212121;
    border-bottom-color: #9e9e9e;
}

.bgp-grid-table md-select.ng-invalid .md-select-value.md-select-placeholder {
    color: #6b6b6b;
}

.bgp-grid-table.show-errors md-select.ng-invalid .md-select-value {
    border-bottom-color: #c62828;
}

.bgp-grid-table.show-errors md-select.ng-invalid .md-select-value.md-select-placeholder {
    color: #c62828;
}

.bgp-grid-table .bgp-grid-remove {
    margin: 0;
}

.bgp-grid-table .md-icon-button .material-icons {
    color: #9e9e9e;
}

.bgp-grid-table .md-icon-button:hover .material-icons,
.bgp-grid-table .md-icon-button:focus .material-icons {
    color: var(--primary);
}

/* Per-cell validation message, directly under the field it refers to. */
.bgp-grid-cell-error {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.3;
    color: #c62828;
    white-space: normal;
}

/* Rows scroll rather than the dialog, so height is the same with one action or ten. */
.bgp-grid-scroll {
    max-height: 38vh;
    min-height: 58px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* The add row belongs to the grid above it, so the divider is hairline. */
.bgp-grid-footer {
    border-top: 1px solid #eceff5;
    padding: 6px 8px;
}

.bgp-grid-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #c62828;
}

/* Only the Set Actions list scrolls. md-dialog-content is overflow:auto by default, so
   a tall action list produced a second scrollbar on the dialog itself; the dialog is
   bounded (toolbar + two fields + a 220px capped list + actions), so nothing is cut off. */
.bgp-form-dialog md-dialog-content {
    overflow: hidden;
}

/* Row height. Measured at 77px, driven by two Material defaults that tie these rules on
   specificity and win on source order, so both are re-stated one level deeper:
   .md-icon-button is 40px tall with a 6px vertical margin (52px, taller than the fields),
   and .md-select-value keeps a 10px bottom reserve for validation text this grid renders
   in its own cell. Together with 8px cells that brings a row to about 56px. */

.bgp-grid-table thead th,
.bgp-grid-table tbody tr td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Row alignment. Measured: the four cells sat on centres 299/303/316/317 - an 18px
   spread - because each control has a different intrinsic box (select 35px with a 10px
   bottom reserve, input 26px, icon button 40px with a 6px vertical margin) and
   vertical-align does not reconcile inline-blocks of unequal height.

   These are stated !important on purpose: Material re-declares the button margin as
   longhand in a later rule and the shared stylesheet sets the select padding, so two
   earlier attempts at greater specificity both lost. Scoped to this one grid. */
.bgp-grid-table tbody td md-select,
.bgp-grid-table tbody td .feild-val-input,
.bgp-grid-table tbody td .md-icon-button {
    margin: 0 !important;
    vertical-align: middle !important;
}


.bgp-grid-table tbody td .feild-val-input {
    height: 28px;
    line-height: 28px;
}

/* 32px keeps a usable hit area while matching the fields' line. */
.bgp-grid-table tbody td .md-icon-button {
    height: 32px !important;
    width: 32px !important;
    min-height: 0 !important;
    padding: 4px !important;
    line-height: 24px !important;
}

.bgp-grid-table tbody td .md-icon-button .material-icons {
    font-size: 20px;
    line-height: 24px;
}

/* Row alignment, measured rather than guessed. Two causes:
   1. the cells compute to vertical-align: top - the shared .nirad_table rule outweighs a
      plain `middle` here, so it is restated;
   2. min-height:0 squashed md-select to 18px, leaving its 27px .md-select-value
      overflowing 12px above the cell - the select is given a real height instead.
   With every control on a 28px line and the cells middle-aligned, the row number, the
   dropdown, the value and the remove button share one centre. */
/* Top, not middle: an error message lives inside the value cell, which makes that cell
   taller than its neighbours. With middle alignment each cell re-centres its own content
   independently, so the dropdown slid down while the input stayed put. Aligned to the top
   with every control on the same 28px band, the controls keep one line and the message
   simply extends the row downwards. */
.bgp-grid-table thead th {
    vertical-align: middle !important;
}

.bgp-grid-table tbody td {
    vertical-align: top !important;
}

/* The row number and the remove button sit on the controls' line. */
.bgp-grid-table tbody td:first-child {
    line-height: 28px !important;
}

.bgp-grid-table tbody td .md-icon-button {
    height: 28px !important;
    width: 28px !important;
    padding: 4px !important;
    line-height: 20px !important;
}

.bgp-grid-table tbody td md-select {
    height: 28px !important;
    align-items: center !important;
}

.bgp-grid-table tbody td md-select .md-select-value {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

/* Measured: an empty select computes line-height 20px (.md-select-placeholder) while a
   filled one computes 17.14px, so placeholder rows sat 4px off and were 5px taller than
   filled rows - 44px vs 49px. Pinning one line-height and one border-box height makes
   every row identical whether or not it has a value. */
.bgp-grid-table tbody td md-select .md-select-value,
.bgp-grid-table tbody td md-select .md-select-value.md-select-placeholder {
    box-sizing: border-box !important;
    height: 28px !important;
    min-height: 28px !important;
    line-height: 18px !important;
}

.bgp-grid-table tbody td .feild-val-input {
    box-sizing: border-box !important;
}

/* Room for four to five rows. Material caps md-dialog at 80% of the viewport, which is
   what forced the list down to ~2.5 rows on a short window; 92vh gives the list its 40vh
   without the dialog clipping its own content. */
.bgp-form-dialog {
    max-height: 92vh;
}

/* The header is its own table outside the scroll box, so the scrollbar runs alongside
   the rows only instead of starting at the header row. Both tables are table-layout:
   fixed and share the same colgroup, so the columns cannot drift; the header reserves a
   gutter equal to the scrollbar so its columns stay over the body's. */
.bgp-grid-head table,
.bgp-grid-scroll table {
    table-layout: fixed;
    width: 100%;
}

/* The header reserves exactly the scrollbar's width so its columns sit over the body's.
   scrollbar-gutter: stable makes the list reserve that space whether or not it is
   currently scrolling, so the two never drift as rows are added or removed. An
   overflow-y:scroll gutter on the header would instead draw real scrollbar arrows there
   on Windows Chrome, and a plain padding drifted by 9px whenever the list did not
   scroll. */
.bgp-grid-head {
    padding-right: 10px;
    background: #eee;
}

/* Slim scrollbar for the rows. */
.bgp-grid-scroll {
    scrollbar-width: thin;
    scrollbar-color: #c4ccd4 transparent;
}

.bgp-grid-scroll::-webkit-scrollbar {
    width: 8px;
}

.bgp-grid-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.bgp-grid-scroll::-webkit-scrollbar-thumb {
    background: #c4ccd4;
    border-radius: 4px;
}

.bgp-grid-scroll::-webkit-scrollbar-thumb:hover {
    background: #9aa5b1;
}

/* A value fixed by its attribute (set table is always 300) is read-only, so it reads as
   derived rather than editable. */
.bgp-grid-table tbody td .feild-val-input.is-fixed {
    color: #607d8b;
    border-bottom-style: dotted;
    cursor: default;
}

/* Placeholder rows still sat 5px low: the select's value box and the text input had
   different internal padding and line boxes, so equal outer heights were not enough.
   Both are pinned to the same 28px box with no padding and one line-height. */
.bgp-grid-table tbody td md-select .md-select-value {
    margin: 0 !important;
    line-height: 26px !important;
}

.bgp-grid-table tbody td .feild-val-input {
    height: 28px !important;
    padding: 0 !important;
    line-height: 26px !important;
}


/* The row number doubles as the drag handle for reordering. */
.bgp-grid-table tbody td.bgp-grid-handle {
    cursor: grab;
}

.bgp-grid-table tbody tr.dndDragging {
    opacity: 0.55;
}

.bgp-grid-table tbody tr.dndDraggingSource {
    display: none;
}


.bgp-form-dialog-wide {
    max-width: 680px;
}

/* Three columns need more room than the two-column dialogs: model numbers run to
   A2A-I-G-4G3-4G3-W, which truncates at a third of 680px. */
.bgp-form-dialog-3col {
    max-width: 900px;
}

/* Checkboxes sitting beside an md-input-container: the container carries the floating-label
   headroom, so the bare checkboxes need matching offset or they ride high against it. */
.bgp-toggle-row {
    margin-bottom: 10px;
}

.bgp-toggle-row--with-field .bgp-toggle-row__toggle {
    margin-bottom: 24px;
}

.bgp-toggle-row__toggle md-checkbox {
    margin: 0;
}


/* Material gives each field 18px above and 24px below; over three rows that is ~126px of
   dead space in a dialog whose fields are all single-line. Errors still get their spacer,
   just a tighter one. */
.bgp-form-dialog-3col md-input-container {
    margin-top: 8px;
    margin-bottom: 4px;
}

.bgp-form-dialog-3col md-input-container .md-errors-spacer {
    min-height: 14px;
}

/* Columns are exact thirds, so the gutter comes from the row rather than per-field padding
   that would make the outer edges uneven. */
.bgp-form-dialog-3col md-dialog-content > ng-form > div[layout="row"] {
    margin: 0 -6px;
}

.bgp-form-dialog-3col md-dialog-content > ng-form > div[layout="row"] > md-input-container {
    padding: 0 6px;
}

/* BGP attach picker: the header and the rows are separate tables so the header stays
   put while the rows scroll. Both are table-layout: fixed over an identical colgroup,
   otherwise each sizes its columns to its own content and they drift apart. The header
   reserves the scrollbar width, and the scroll box keeps that gutter whether or not it
   is currently scrolling, so the two never diverge as pages load in. */
.bgp-picker-table {
    table-layout: fixed;
    width: 100%;
}

.bgp-picker-head {
    padding-right: 10px;
    background: #eee;
}

.bgp-picker-scroll {
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.bgp-picker-scroll::-webkit-scrollbar {
    width: 8px;
}

.bgp-picker-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.bgp-picker-scroll::-webkit-scrollbar-thumb {
    background: #c4ccd4;
    border-radius: 4px;
}

.bgp-picker-table td,
.bgp-picker-table th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Attached-records tables on the BGP Profile page. .nirad_table pads cells 10px/8px
   !important for a read-only listing, and an md-icon-button is 40px tall with a 6px
   vertical margin, so each row ran to ~68px. These are read-only rows with one action,
   so they are tightened to a single compact line. */
.bgp-attached-table thead th,
.bgp-attached-table tbody td {
    padding: 6px 10px !important;
    vertical-align: middle !important;
}

.bgp-attached-table tbody td {
    color: #212121;
}

.bgp-attached-table tbody td .md-icon-button {
    height: 26px !important;
    width: 26px !important;
    min-height: 0 !important;
    padding: 3px !important;
    line-height: 20px !important;
    margin: 0 !important;
}

.bgp-attached-table tbody td .md-icon-button md-icon {
    font-size: 18px;
    line-height: 20px;
    height: 20px;
    width: 20px;
    color: #9e9e9e;
}

.bgp-attached-table tbody td .md-icon-button:hover md-icon,
.bgp-attached-table tbody td .md-icon-button:focus md-icon {
    color: var(--primary);
}

/* Read-only view reuses the create/update popup so the layout is identical. Controls
   are made inert rather than restyled, so the form looks exactly as it does when
   editing; text stays selectable so values can still be copied. */
/* Prefix-list rules as chips rather than one comma-separated run, so permit/deny is readable
   at a glance and each rule is a distinct unit. */
.bgp-rule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0;
}
.bgp-rule-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
    background: #eceff1;
    color: #37474f;
}
.bgp-rule-chip b {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.bgp-rule-chip.bgp-rule-permit {
    background: #e6f4ea;
    color: #1b5e20;
}
.bgp-rule-chip.bgp-rule-deny {
    background: #ffe2e2;
    color: #b71c1c;
}
/* Route-map names carry no permit/deny sense, so they get one neutral tone and read as
   a set of attached maps rather than a comma-run. */
.bgp-rule-chip.bgp-rule-rm {
    background: #e8f0fe;
    color: #174ea6;
    border: 1px solid #d2e3fc;
}
/* Overflow trigger: same affordance as .nirad-ttp-trigger, but the count carries the
   information an icon would not. */
.route-map-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: #e8f0fe;
    color: #174ea6;
    user-select: none;
    transition: color 0.15s, background 0.15s;
}
.route-map-count:hover,
.route-map-count:focus {
    background: #d2e3fc;
    color: #0b3d91;
}
/* Read-only route map rows sit beside md-input-container fields, so they carry the same
   label tone and vertical rhythm without needing an input to hang a floating label on. */
.bgp-readonly-row {
    padding: 18px 0 2px;
}
.bgp-readonly-row .bgp-readonly-label {
    color: rgba(0, 0, 0, 0.54);
    margin-right: 4px;
}
.bgp-readonly-row .bgp-rule-chips {
    margin-left: 6px;
}

.bgp-readonly input,
.bgp-readonly textarea,
.bgp-readonly md-select,
.bgp-readonly md-checkbox,
.bgp-readonly .md-button {
    pointer-events: none;
}

.bgp-readonly input,
.bgp-readonly md-select .md-select-value {
    color: #212121;
    -webkit-user-select: text;
    user-select: text;
}

.bgp-readonly md-select .md-select-icon {
    visibility: hidden;
}


/* .add-profile-header sets cursor: pointer for its click-to-collapse variant; this header
   has no ng-click, so only the switch should look clickable. */
.ipsec-bgp-header {
    cursor: default;
}

/* Same reason: a header that does not collapse should not offer a pointer. */
.ipsec-static-header {
    cursor: default;
}

/* Shows state without offering to change it. ng-disabled would do that too, but it also
   fades the switch and its label to the disabled colour, which is the opposite of what a
   field whose whole job is to be read wants. Blocking the pointer and taking it out of the
   tab order stops the interaction while it keeps full contrast. */
.switch-readonly {
    pointer-events: none;
}

/* md-input-container carries its own horizontal padding, so the gutter between the
   three pickers comes from the row's negative-free padding rather than a gap. */
.ipsec-bgp-fields {
    margin: 0 -4px;
}

.ipsec-bgp-fields > md-input-container {
    padding: 0 4px;
    margin-bottom: 4px;
}

/* Client group per hub. One row per HA member, so the table is as tall as the
   memberList and never scrolls - hence a single table rather than the split
   header/body pair the popups use. It borrows .bgp-grid-table for the cell metrics an
   editable row needs, since .nirad_table alone paints cells as a read-only listing. */
.ipsec-hub-pg {
    margin: 4px 0 0;
}

/* Caption: table name left, completeness right. */
.ipsec-hub-pg__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 6px;
}

/* Heavier than a caption, lighter than the section header above it. */
.ipsec-hub-pg__title {
    font-size: 13px;
    font-weight: 600;
    color: #546e7a;
}

.ipsec-hub-pg__count {
    font-size: 12px;
    color: #78909c;
}

.ipsec-hub-pg .bgp-grid-table {
    table-layout: fixed;
    width: 100%;
}

/* The section box already frames this table, so the first header row does not need a
   second top rule of its own. */
.ipsec-hub-pg .bgp-grid-table thead th {
    border-top: 0;
}

/* The hub cell stacks id over endpoint. */
.ipsec-hub-pg__table tbody td {
    vertical-align: middle;
}

.ipsec-hub-pg__table tbody td .ipsec-config-name {
    white-space: normal;
    word-break: break-all;
}

/* Row counter reads as an index, not data. */
.ipsec-hub-pg__table thead th:first-child,
.ipsec-hub-pg__table tbody td:first-child {
    color: #90a4ae;
    text-align: center;
}


/* Label and radios on one line. */
.ipsec-tunnel-mode {
    padding: 2px 0;
}

.ipsec-tunnel-mode__label {
    margin-right: 16px;
    white-space: nowrap;
    color: #546e7a;
    font-weight: 600;
}

/* .radio-btn-group carries form-row margins meant for a standalone block. */
.ipsec-tunnel-mode__group {
    margin: 0;
}

/* Sub-heading inside the Tunnel card: a rule separates the WANs from the mode without a
   second blue bar. */
.ipsec-tunnel-wans__title {
    margin: 10px 0 2px;
    padding-top: 10px;
    border-top: 1px solid #eceff1;
    font-size: 13px;
    font-weight: 600;
    color: #546e7a;
}


/* Inline label + control row in the profile form's tabs. md-input-container reserves 18px
   above for a floating label and ~24px below for an error line; neither is used here, so
   both are dropped and the row collapses to the height of the control. */
.profile-inline-field {
    padding: 2px 0 6px;
}

.profile-inline-field__label {
    margin-right: 12px;
    white-space: nowrap;
}

/* Capped: an underline spanning the card reads as a far bigger field than it is. */
.profile-inline-field .profile-inline-field__control {
    margin: 0;
    padding: 0;
    max-width: 340px;
}

.profile-inline-field .profile-inline-field__control .md-errors-spacer {
    display: none;
}

.profile-inline-field__hint {
    margin-left: 12px;
    font-size: 12px;
    color: #e65100;
}

/* Inline validation text under form fields. */
.form-error-text {
    color: red;
    font-size: 1rem;
}