@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-ExtraBold.otf);
    font-weight: 900;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-ExtraBoldItalic.otf);
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-Bold.otf);
    font-weight: 800;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-BoldItalic.otf);
    font-weight: 800;
    font-style:italic;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-Medium.otf);
    font-weight: 600;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-MediumItalic.otf);
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-Regular.otf);
    font-weight: 500;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-RegularItalic.otf);
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-Light.otf);
    font-weight: 400;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-LightItalic.otf);
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-ExtraLight.otf);
    font-weight: 100;
}

@font-face {
    font-family: mtnsans;
    src: url(/fonts/MTNBrighterSans-ExtraLightItalic.otf);
    font-weight: 100;
    font-style: italic;
}


body {
    font-family: mtnsans;
    font-weight: 500;
    font-size:15px;
    margin: 0px;
    padding: 0px;
    color: #393939;
}


div#ptrb_msgbox {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #00000000;
}

div#ptrb_msg {
    position: absolute;
    width: 400px;
    height: 200px;
    background: #FFFFFF;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

table#ptrb_msg {
    border: 2px solid #ff0000;
}

    table#ptrb_msg tr#header {
        background: #ffcc2a;
        height: 40px;
        border: none;
    }

        table#ptrb_msg tr#header td {
            font-weight: 600;
            font-size: 16px;
            color: #393939;
        }

    table#ptrb_msg tr#detail {
        background: #ffffff;
        height: 100px;
        border: none;
        vertical-align: middle;
    }

        table#ptrb_msg tr#detail td {
            font-size: 20px;
            color: #393939;
            text-align: center;
        }

    table#ptrb_msg tr#buttons {
        background: #fafafa;
        height: 40px;
        border: none;
        vertical-align: middle;
    }

        table#ptrb_msg tr#detail td {
            font-size: 20px;
            color: #393939;
            text-align: center;
        }

div#ptrb_disconnected1 {
    position: absolute;
/*    visibility: hidden;*/
    width: 400px;
    height: 280px;
    background: #808080;
    color: #fafafa;
    
    top: 50%;
    left: 50%;

    margin-left: -200px;
    margin-top: -100px;
}


div#ptrb_disconnected {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #e0e0e0a0;
}

div#ptrb_dc_msg {
    position: absolute;
    width: 400px;
    height: 200px;
    background: #00000000;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

table#ptrb_dc_msg {
    border: 2px solid #ffcc2a;
}

    table#ptrb_dc_msg tr#header {
        background: #ffcc2a;
        height: 40px;
        border: none;
    }
        table#ptrb_dc_msg tr#header td {
            font-weight: 600;
            font-size: 16px;
            color: #393939;
        }
    table#ptrb_dc_msg tr#detail {
        background: #ffffff;
        height: 100px;
        border: none;
        vertical-align: middle;
    }
        table#ptrb_dc_msg tr#detail td {
            font-size: 20px;
            color: #393939;
            text-align: center;
        }
div#main {
    width: 900px;
    margin: auto;
}

ul#header {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}


div#topmenu {
    margin-left: 20px;
    padding-left: 0px;
    padding-top: 15px;
}

div#topmenuHolder div {
    float: left;
    display: inline;
    margin-top: 15px;
    margin-left: 20px;
    margin-right: 20px;
}

.topmenuMouseOn {
    color: #ff0000;
    cursor: pointer;
}

.topMenuItemSelected {
    color: #ffffff;
}


ul#submenu {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul#submenu li{
    vertical-align: middle;
    padding: 5px;
    margin-top: 0px;
}

ul#submenu li p {
    padding: 0px;
    margin-left: 30px;
}

.submenuImg {
    width: auto;
    height: 15px;
    margin-right: 10px;
}

.subMenuMouseOn {
    color: #007dff;
    background-color: #f5f5f5;
    cursor: pointer;
}

.subMenuSelected {
    color: #007dff;
    background-color: #fcfcfc;
    font-weight: 600;
    background-image: url("/images/selected-sub-menu-bg.jpg");
    background-repeat:repeat-y;
}


div#topmenuHolder {
    background-color: #ffcc2a;
    width: 100%;
    height: 50px;
}

div#header {
    /*background-color: #ffffff;*/
    background-color: #353635;
    width: 100%;
    height: 100px;
    /*background-image: url("/images/topheader.jpg");
    background-repeat: repeat-x;*/
}

div#subheader {
    background-color: #ffffff;
    width: 100%;
    height: 20px;
}

div#submenu {
    float: left;
    min-height: 400px;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
}

div#content {
    float: left;
    min-height: 600px;
    padding: 0px;
    margin: 0px;
    background-color: #fcfcfc;
    background-image: url("/images/content-bg.jpg");
    background-repeat: repeat-y;
}

div#contentHolder {
    padding: 10px;
}

.subMenuHidden {
    width: 0px;
}

.subMenuVisible {
    width: 25%;
}

.contentFull {
    width: 100%;
}

.contentNormal {
    width: 75%;
}

div#footer {
    float: left;
    width: 100%;
    height: 25px;
    background-color: #353635;
    color: #a0a0a0;
}

.headerImageFirst {
    float: left;
    margin-left: 50px;
    margin-top: 15px;
    width: auto;
    height: 60px;
}

.headerImageNext {
    float: left;
    margin-left: 50px;
    margin-top: 15px;
    width: auto;
    height: 60px;
}


.menuImg {
    width: auto;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

div#uconstruct {
    height: 400px;
    position: relative;
}

div#uconsub {
    margin: 0;
    position: absolute;
    top: 70%;
    left: 50%;
    -ms-transform: translate(-70%, -50%);
    transform: translate(-70%, -50%);
    text-align:center;
}

img#construct {
    width: 200px;
    height: auto;
}

p#bigbigTitle {
    font-size: 50px;
    font-weight: 800;
}

/*
body.login {
    font-family: mtnsans;
    font-weight: 500;
    font-size: 15px;
    margin: 0px;
    padding: 0px;
    color: #f0f0f0;
    background-image: url('/images/login-bg.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 1000px;
}
*/

body, html {
    height: 100%;
    margin: 0;
}
body.login {
    height: 100%;
    background-color: #ffcc2a;
    background-image: url('/images/login-bg.png');
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
}

table#loginBox {
	height: 100%; 
	width: 200px; 
	margin: 0px; 
	padding: 0px; 
	border: none; 
	background: #ffcc2aaf;
}

div#loginHeader {
    float: left;
    width: 100%;
    height: 50px;
    background-color: #e0e0e0;
}

div#loginContent {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}
.loginCAll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: transparent;
}

.loginCCon {
    background-color: transparent;
    height: 300px;
}

.loginSp {
    background-color: transparent;
    flex: 1;
}

div#loginFooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #e0e0e0;
}

img#loginLogo1 {
/*    float: left;
    margin-left: 100px;*/
    width: 180px;
    height: auto;
}

img#loginLogo2 {
    /*float: left;
    margin-left: 40px;*/
    width: 180px;
    height: auto;
}

label {
    font-family: mtnsans;
    font-weight: 500;
    font-size: 15px;
}

input {
    font-family: mtnsans;
    font-weight: 500;
    font-size: 15px;
}

label#login_un {
    color: #393939;
    width: 80px;
}

label#login_pass {
    width: 80px;
    color: #393939;
}

input[type=text] {
    font-size: 15px;
    color: #393939;
    background-color: #f0f0f0;
    border: 1px solid #808080;
    height: 20px;
}

input[type=text]:disabled {
    color: #696969 !important;
    background-color: #ececec !important;
}

input[type=password] {
    font-size: 15px;
    color: #393939;
    background-color: #f0f0f0;
    border: 1px solid #808080;
    height: 20px;
}

input#login_uname {
    width: 140px;
    background-color: transparent !important;
}

label#login_msg {
    top: 400px;
}

input#login_password {
    width: 140px;
    background-color: transparent !important;
}

button {
    font-family: mtnsans;
    font-weight: 500;
    font-size: 15px;
    background-color: #f0f0f0;
    color: #393939;
    border: 1px solid #a0a0a0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
}


    button#btn_login {
        float: left;
    }


.noborder {
    border: none !important;
}

.fitspace {
    width: 98% !important;
    margin: 0px !important;
    padding: 5px !important;
}

div.section {
    float: left;
    width: 96%;
    margin-left: 2%;
    padding: 0px;
    border: 1px solid #a0a0a0;
}

div.section_spacer {
    float: left;
    width: 100%;
    padding: 0px;
    margin: 0px;
    height: 15px;
}

div.section_title {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 35px;
    text-align: left;
    background-color: #606060;
    border: 1px solid #606060;
    color: #fafafa;
}

div.section_title.subtitle {
    background-color: #e0e0e0 !important;
    border: none !important;
    color: #393939;
}

div.section_title label {
    float: left;
    margin: 7px 0px 0px 20px;
}

div.section_detail {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

div.section_detail label {
    float: left;
    padding: 0px;
    margin-left: 5px;
}

div.section_detail_item {
    float: left;
    width: 48%;
    padding: 0px;
    margin-left: 1%;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
}

div.section_detail_item_full {
    float: left;
    width: 97.4%;
    padding: 0px;
    margin-left: 1%;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
}

div.section_detail_item_desc_panel {
    float: left;
    width: 92%;
    margin: 3%;
    padding: 0px;
    border: none;
    min-height: 40px;
    background-color: #00000000 !important;
    color: #393939 !important;
    font-weight: 600;
}

div.section_detail_item_title {
    float: left;
    font-weight: 800;
    font-size: 13px;
    width: 30%;
    min-height: 20px;
    height: 100%;
    padding: 6px 5px 5px 10px;
    background-color: #f8f8f8;
}

div.section_detail_item_title.doubleheight {
    min-height: 50px !important;
}

div.section_detail_item_title.fullsize {
    margin: 0px !important;
    padding: 0px !important;
    width: 100% !important;
}


div.section_detail_item_detail {
    float: left;
    font-weight: 500;
    font-size: 13px;
    min-height: 20px;
    padding: 6px 0px 5px 5px;
}

div.section_detail_item_detail.fullsize {
    padding: 0px !important;
    width: 67% !important;
}

div.item_spacer {
    float: left;
    width: 10px;
    padding: 0px;
    margin: 0px;
}

div.slice1 {
    float: left;
    width: 80% !important;
    padding: 0px;
    padding-top: 5px !important;
    margin: 0px;
}

div.slice2 {
    float: left;
    width: 50% !important;
    padding: 0px;
    padding-top: 5px !important;
    margin: 0px;
}

div.slice3 {
    float: left;
    width: 31% !important;
    padding: 0px;
    padding-top: 5px !important;
    margin: 0px;
}

div.slice4 {
    float: left;
    width: 25% !important;
    padding: 0px;
    padding-top: 5px !important;
    margin: 0px;
}

div.slice6 {
    float: left;
    width: 16% !important;
    padding: 0px;
    padding-top: 5px !important;
    margin: 0px;
}

div.slice8 {
    float: left;
    width: 12.5% !important;
    padding: 0px;
    padding-top: 5px !important;
    margin: 0px;
}

div.section_detail_item_spacer {
    float: left;
    width: 100%;
    height: 5px;
    padding: 6px 5px 5px 5px;
}

div.section_detail_item_detail input {
    float: left;
    margin: 0px;
    font-weight: 500;
    font-size: 13px;
    height: 20px;
    width: 100%;
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
}

div.section_button_panel {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #f0f0f0;
    height: 46px;
}

div.section_button_panel button {
    float: right;
    min-width: 80px;
    height: 30px;
    border: 1px solid #808080;
    color: #393939;
    margin-right: 5px;
    background-color: #fafafa;
    margin-top: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

button {
    float: right;
    min-width: 80px;
    height: 30px;
    border: 1px solid #808080;
    color: #393939;
    margin-right: 5px;
    background-color: #fafafa;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}


button.first {
    margin-right: 25px !important;
}

button.apply {
    background-color: #eb8900 !important;
    color: #ffffff !important;
    display: inline-block;
    border-radius: 4px;
    border: none;
}

button.critical {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    display: inline-block;
    border-radius: 4px;
    border: none;
}

button.cancel {
    background-color: #008CBA !important;
    color: #ffffff !important;
    display: inline-block;
    border-radius: 4px;
    border: none;
}

button.remove {
    background-color: #f44336 !important;
    color: #ffffff !important;
    display: inline-block;
    border-radius: 4px;
    border: none;
}

button.save {
    background-color: #eb8900 !important;
    color: #ffffff !important;
    display: inline-block;
    border-radius: 4px;
    border: none;
}

button.edit {
    background-color: #4CAF50 !important;
    color: #ffffff !important;
    display: inline-block;
    border-radius: 4px;
    border: none;
}

button.add {
    background-color: #4CAF50 !important;
    color: #ffffff !important;
    display: inline-block;
    border-radius: 4px;
    border: none;
}

button:disabled,
button[disabled] {
    background-color: #e0e0e0 !important;
    color: #a0a0a0 !important;
    cursor: default !important;
}

button.imagebutton {
    width: 30px !important;
    min-width: 30px !important;
    padding: 0px !important;
}
button.imagebutton img {
    width: 20px;
    height: auto;
}

button.floatleft {
    float: left !important;
}

    button.floatnone {
        float: none !important;
    }


button.floatleft_first {
    float: left !important;
    margin-left: 25px !important;
}

div.section_detail label.radio_container {
    float: left;
    width: 97%;
    padding: 0px;
    margin-left: 3%;
    display: block;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio_container {
/*    margin-bottom: 12px;*/
}

/* Hide the browser's default radio button */
.radio_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radiobutton {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .radiobutton {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio_container input:checked ~ .radiobutton {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobutton:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .radiobutton:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .radiobutton:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

div.section_detail label.chkbox_container {
    float: left;
    width: 97%;
    padding: 0px;
    margin-left: 3%;
    display: block;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.chkbox_container {
/*    margin-bottom: 5px;*/
}

/* Hide the browser's default checkbox */
    .chkbox_container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0px;
        width: 0px;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.chkbox_container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkbox_container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.chkbox_container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.chkbox_container .checkmark:after {
    left: 7px;
    top: 3px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

table {
    float: left;
    width: 100%;
    border: 1px solid #e0e0e0;
    margin: 0px;
    font-size: 14px;
    font-weight: 500;
}

tr {
    height: 40px;
    vertical-align: middle;
}

td {
    padding-left: 10px;
}

tr.header {
    font-weight: 600 !important;
    background-color: #606060;
    color: #fafafa;
    text-align: center;
    padding-left: 0px;
}

tr.header td {
    padding-left: 0px !important;
}

tr.row {
    background-color: #fafafa;
    color: #393939;
}

tr.even {
    background-color: #f0f0f0;
    color: #393939;
}


div.section_detail_item_full.ipholder {
    margin-top: 0px !important;
    border: none !important;
}

div.section_detail_item_full.ipholder input[type=text].ip {
    float: left;
    width: 50px !important;
    height: 21px !important;
    margin: 0px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-right: 5px !important;
    padding: 2px !important;
}

div.section_detail_item_full.ipholder label.ip {
    float: left;
    min-width: 5px !important;
    width: 5px !important;
    margin-left: 0px !important;
    height: 21px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-right: 5px !important;
    padding: 2px !important;
}

div.section_detail_item_full.ipholder input[type=text].ipv6 {
    float: left;
    width: 200px !important;
    height: 21px !important;
    margin: 0px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-right: 5px !important;
    padding: 2px !important;
}

div.section_detail_item_full.ipholder label {
    float: left;
    min-width: 50px !important;
    height: 21px !important;
    margin: 0px !important;
    margin-top: 5px !important;
    margin-right: 5px !important;
    vertical-align: middle;
    text-align: right;
}


img.passvisibility {
    width: 25px !important;
    height: 25px !important;
    float: right;
    cursor: pointer;
}

label.passv-u {
    float: right !important;
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer;
    background-image: url("/images/eth-port-off.png");
    background-position: left center;
    background-size: auto 100%;
}

label.passv-c {
    float: right !important;
    display: inline-block;
    width: 25px !important;
    height: 25px !important;
    cursor: pointer !important;
    background-image: url("/images/eth-port-on.png") !important;
    background-position: left center;
    background-size: auto 100%;
}

label[checked="1"].passv {
    background-image: url("/images/eth-port-on.png") !important;
}

img.pass_viviblity {
    float: right !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
}

label.mac-address-item {
    margin-top: 7px;
    width: 90%;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
}

div.error {
    float: left;
    margin-left: 10px;
    color: #ff0000;
    display: none;
    margin-top: 5px;
}

div#error {
    float: left;
    margin-left: 10px;
    color: #ff0000;
    display: none;
    margin-top: 5px;
}

.floatleft {
    float: left !important;
}

.floatright {
    float: right !important;
}