* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*
* ---------------------------------------------------------- GENERAL TAGS
*/
html, body { width: 100%; height: 100%; }

body { font-family: "Arial"; font-size: 13px; background-color: #212121; color: #dddddd; padding: 0 10px; margin: 0; }

h1 { font-weight: normal; letter-spacing: 2px; color: #fff; font-size: 40px; margin: 0; padding: 0; }

a { color: #dddddd; text-decoration: none; }

a:hover { color: #dddddd; text-decoration: none; }

img { border: 0; }

/*
* ----------------------------------------------------------- LAYOUT
*/
.wContainer { width: 100%; display: block; }

.wSpan { float: left; border: 0; margin: 0; padding: 0; }

.wSpan:last-child { clear: right; }

.wSpan1 { width: 8.33333%; }

.wSpan1_5 { width: 12.5%; }

.wSpan2 { width: 16.66667%; }

.wSpan2_5 { width: 20.83333%; }

.wSpan3 { width: 25%; }

.wSpan3_5 { width: 29.16667%; }

.wSpan4 { width: 33.33333%; }

.wSpan5 { width: 41.66667%; }

.wSpan6 { width: 50%; }

.wSpan7 { width: 58.33333%; }

.wSpan8 { width: 66.66667%; }

.wSpan9 { width: 75%; }

.wSpan10 { width: 83.33333%; }

.wSpan11 { width: 91.66667%; }

.wSpan12 { width: 100%; }

.quickStartContainer { max-width: 1100px; margin: auto; }

.gps-background { background-color: limegreen; }

.glonass-background { background-color: yellow; }

.galileo-background { background-color: cyan; }

.beidou-background { background-color: magenta; }

.sbas-background { background-color: purple; }

.qzss-background { background-color: blue; }

.gps-color { color: limegreen; }

.glonass-color { color: yellow; }

.galileo-color { color: cyan; }

.beidou-color { color: magenta; }

.sbas-color { color: purple; }

.qzss-color { color: blue; }

.yellowTopcon { color: #ffbf31; }

/* ------------------------------------------------------------ LOGIN PAGE */
.login { margin: 0; padding: 0; background: url("../images/login-background.jpg") no-repeat center; background-size: 100% 100%; }

.login a { text-decoration: underline; }

.login a:hover { text-decoration: underline; }

.loginContainer { position: absolute; padding: 10px 20px; background-color: #333; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }

/*  position is dynamic from directive  */
/* ------------------------------------------------------------ LABEL*/
.label { padding: 3px; color: white; background-color: #979696; }

/*
* --------------------------------------------------------- FORM CHECKBOX RADIO CUSTOM
*/
input[type=text], input[type=number], input[type=password], select, textarea { /*background-color: #7e7e7e; */ background-image: -webkit-linear-gradient( #4e4e4e, #555555); background-image: linear-gradient( #4e4e4e, #555555); font-size: 15px; color: #ffbf31; border: 1px solid transparent; padding: 7px; }

input:disabled { opacity: 0.7; filter: alpha(opacity=70); }

input[type=checkbox], input[type=radio] { display: none; }

input[type=checkbox] + label, input[type=radio] + label { padding-left: 40px; height: 18px; background-image: url("../images/sprite-input.png"); background-repeat: no-repeat; display: inline-block; }

input[type=checkbox] + label { background-position: 0px -18px; }

input[type=checkbox]:checked + label { background-position: 0px 0px; }

input[type=checkbox]:checked:disabled + label { background-position: 0px -36px; opacity: 0.7; filter: alpha(opacity=70); }

input[type=checkbox]:disabled + label { background-position: 0px -54px; opacity: 0.7; filter: alpha(opacity=70); }

input[type=radio] + label { background-position: 0px -90px; }

input[type=radio]:checked + label { background-position: 0px -72px; }

input[type=radio]:checked:disabled + label { background-position: 0px -108px; opacity: 0.7; filter: alpha(opacity=70); }

input[type=radio]:disabled + label { background-position: 0px -126px; opacity: 0.7; filter: alpha(opacity=70); }

select { display: none; -webkit-appearance: none; background-color: #555; border: none; }

select option { border: none; margin: 7px; }

select:disabled { opacity: 0.7; filter: alpha(opacity=70); }

span.info-label { display: block; padding: 5px 0 0 0; }

.form-error { color: #ffbf31; }
.form-error small { display: block; }

/*
* --------------------------------------------------------- FORM BUTTON
*/
button.big, .button { /* background-color: #7e7e7e; */ background-image: -webkit-linear-gradient( #333333, #222222); background-image: linear-gradient( #333333, #222222); border: 1px solid transparent; padding: 7px; color: #ffbf31; font-size: 15px; font-weight: bold; display: inline-block; cursor: pointer; text-align: center; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

button.big:hover, .button:hover { /* background-color: #8e8e8e; */ background-image: -webkit-linear-gradient( #222222, #222222); background-image: linear-gradient( #222222, #222222); }

button.big[disabled], .button[disabled] { opacity: 0.3; filter: alpha(opacity=30); cursor: default; }

/*
* --------------------------------------------------------- ACTION BUTTON IN TABLE
*/
.button-action { padding: 5px; height: 25px; width: 50px; display: block; margin: 0; padding: 0; background-color: #333333; background-repeat: no-repeat; background-position: center; }

.button-action-modify { background-image: url("../images/mod_deact.png"); }

.button-action-delete { background-image: url("../images/delete_deact.png"); }

tr .button-action { opacity: 0.4; filter: alpha(opacity=40); }

tr:hover .button-action { opacity: 1; filter: alpha(opacity=100); }

/*
* --------------------------------------------------------- FORM COMBO BOX
*/
.comboBox { max-height: 225px; width: 100%; display: block; overflow: auto; padding: 5px; border: 1px solid #444444; background-color: #555; background-color: #555555; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(50%, #555555), color-stop(100%, #666666)); background-image: -webkit-linear-gradient(#555555, #555555, #666666); background-image: linear-gradient(#555555, #555555, #666666); }

.comboBox .box { text-align: center; margin: 5px; width: 125px; height: 50px; font-size: 11px; display: inline-block; border: 1px solid #444444; background-color: #666; color: #000000; cursor: pointer; overflow: none; background-color: white; background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, white), color-stop(100%, #aaaaaa)); background-image: -webkit-radial-gradient(white, #aaaaaa); background-image: radial-gradient(  white, #aaaaaa); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; }

.comboBox .box:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; }

.comboBox .box[selected] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

/*
* --------------------------------------------------------- ANGULAR TAB
*/
.tab { width: 100%; height: 100%; }

2 .tab   > ul { list-style-image: none; list-style-type: none; width: 100%; }

.tab > ul, tab > ul > li { margin: 0; padding: 0; }

.tab > ul > li { display: inline-block; background-color: #5e5e5e; border-top: 5px #424242 solid; float: left; margin-right: 1px; opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }

.tab > ul > .right { float: right; }

.tab > ul > #selected { opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ border-top: 5px #ffbf31 solid; }

.tab > ul > li:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }

.tab > ul > li > a { display: inline-block; color: #fff; padding: 7px 8px; height: 35px; font-size: 11px; /* font-weight:bold; */ text-transform: uppercase; }

.tabBig > ul > li > a { padding: 7px 8px; height: auto; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }

.tab > ul > .double-line > a { font-size: 9px; }

.tab > div { display: none; padding: 10px; background-color: #5e5e5e; clear: left; }

.tab > div.tabcontent-shared { display: block; }

.tab > div.tabcontent-fullheight { min-height: 100%; clear: both; }

/*
* --------------------------------------------------------- ACCESSORIES
*/
.debug-border { border: 1px solid #ff0000; }

.no-background { background: none; }

/*
* --------------------------------------------------------- MAIN MENU
*/
.main-menu { /* border:1px solid #fff; */ display: inline-block; z-index: 2; font-size: 11px; line-height: 11px; text-transform: uppercase; }

.main-menu ul, .main-menu ul > li { margin: 0; padding: 0; }

.main-menu ul { list-style-image: none; list-style-type: none; }

.main-menu > ul > li > a { width: 80px; height: 70px; background-color: #535353; display: block; margin-bottom: 7px; text-align: center; padding-top: 34px; color: #fff; position: relative; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.main-menu > ul > li > a:hover:not(#current) { background-color: #666; transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari and Chrome */ }

.main-menu > ul > li:first-child { background-color: #333333; margin-top: 10px; }

.main-menu > ul > li:last-child { margin-bottom: 20px; }

.main-menu > ul > li > #selected { /* background-color:#979696;   border-bottom:6px #eee solid; */ background-color: #007bc5; /*@include background-image(linear-gradient( #0e5483 , $color-blu-topcon));*/ background-image: -webkit-linear-gradient( #1e1e1e, #2d2d2d); background-image: linear-gradient( #1e1e1e, #2d2d2d); border-bottom: 6px #ffbf31 solid; }

/* .logo-topcon{ position:absolute; bottom:17px; z-index:-1; display:block; } */
.logo-topcon { margin-top: 15px; }

/*
* --------------------------------------------------------- ICON
*/
.icon-space { width: 30px; height: 30px; background-repeat: no-repeat; background-image: url("../images/sprite-icon-main-30x30.png"); display: inline-block; }

.main-menu > ul > li > a > .icon-space { position: absolute; top: 5px; left: 25px; }

/*First Row*/
.icon-back { background-position: 0px 0px; }

.icon-message { background-position: -30px 0px; }

.icon-user { background-position: -60px 0px; }

.icon-help { background-position: -90px 0px; }

.icon-about { background-position: -120px 0px; }

.icon-arrow-big-right { background-position: -150px 0px; }

.icon-arrow-big-left { background-position: -180px 0px; }

.icon-forward { background-position: -210px 0px; }

.icon-backward { background-position: -240px 0px; }

.icon-thunderbolt { background-position: -270px 0px; }

.icon-home { background-position: -300px 0px; }

/*Second Row*/
.icon-quick-start { background-position: 0px -30px; }

.icon-satellite-tracking { background-position: -30px -30px; }

.icon-positioning { background-position: -60px -30px; }

.icon-receiver-settings { background-position: -90px -30px; }

.icon-status-health { background-position: -120px -30px; }

.icon-firmware-options { background-position: -150px -30px; }

.icon-terminal { background-position: -180px -30px; }

.icon-quick-setup { background-position: -210px -30px; }

.icon-file-explorer { background-position: -240px -30px; }

.icon-next { background-position: -270px -30px; }

.icon-search { background-position: -300px -30px; }

/*3° Row*/
.icon-up { background-position: 0px -60px; }

.icon-down { background-position: -30px -60px; }

.icon-up-down { background-position: -60px -60px; }

/*
* --------------------------------------------------------- LAYOUT JQUERY  UI
*/
.ui-layout-pane { background-color: #424242; }

.ui-layout-pane-transparent { background-color: transparent; }

.ui-layout-west { text-align: center; }

.ui-layout-center { overflow: auto; /* overflow-x:hidden; */ }

/* Loader */
.loader { width: 100%; height: 100%; background-color: #000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; position: absolute; top: 0px; left: 0px; z-index: 1000; }

.loader .loaderImage { width: 142px; font-weight: bold; color: #fff; height: 142px; position: absolute; top: calc(50% - 71px); left: calc(50% - 71px); background: url("../images/page-loader.gif"); background-position: 0px 0px; }

.loader .loaderMessage { width: 200px; font-weight: bold; color: #fff; height: 50px; position: absolute; top: calc(50% - 35px); left: calc(50% - 100px); }

/* Dialog */
.dialog { width: 100%; height: 100%; background-color: #000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; position: absolute; top: 0px; left: 0px; z-index: 1000; }

.dialogContent { font-weight: bold; position: absolute; width: 200px; height: 200px; z-index: 1001; top: 50%; left: 50%; margin: -100px 0 0 -100px; }

/*
* --------------------------------------------------------- HOME FLUID
*/
.colHome { height: 540px; min-width: 270px; margin-bottom: 15px; }

.module { background-color: #3d3d3d; margin: 15px 7px; margin-top: 0; position: relative; display: block; }

.tab .module { background-color: #6b6b6b; display: inline-block; }

.module > .title { text-transform: uppercase; padding: 10px; padding-bottom: 0px; font-size: 1.3em; font-weight: bold; }

.module > .content { padding: 10px; }

.module-title-icon { position: absolute; right: 10px; top: 10px; text-align: center; }

.module-title-icon .icon-space { display: block; text-align: center; }

.module-satellite-tracking, .module-positioning { height: 262.5px; text-align: left; }

.module-receiver-settings { height: 262.5px; }

.module-firmware-options { height: 262.5px; }

.module-status-health, .module-quick-start { height: 540px; }

.module-quick-start { background-color: #15181a; }

/* COLOR TEXT QUICK START PAGE */
.blueLight { color: #00d9bb; }

.orangeLight { color: #ffc586; }

.orange { color: #ea7f00; }

.red { color: #ff0000; }

.bold { font-weight: bold; }

.big { font-size: 1.3em; }

.biggest { font-size: 1.7em; }

.small { font-size: 0.8em; }

/* CAKE GRAPH */
.cakeGraph1 { position: relative; }

.cakeGraph1 div { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 65%; text-align: center; color: #ffffff; }

.batteryContainer { width: 80px; height: 45px; line-height: 45px; position: relative; background-color: #222; margin: auto; }
.batteryContainer .battery { background: url("../images/battery-background.png") transparent no-repeat center; background-size: 100% 100%; width: 100%; height: 100%; text-align: center; color: #ffffff; position: absolute; left: 0; top: 0; z-index: 2; }
.batteryContainer .battery-level { position: absolute; left: 0; top: 0; width: 0%; height: 100%; background-color: #FF8080; z-index: 1; }

.progressContainer, .progressContainer3, .progressContainer5, .progressContainer7, .progressContainer10 { height: 12px; line-height: 12px; position: relative; background-color: #222; }
.progressContainer .progress, .progressContainer3 .progress, .progressContainer5 .progress, .progressContainer7 .progress, .progressContainer10 .progress { background: url("../images/progress-ball-background.png") transparent no-repeat left; background-size: 119px 100%; width: 100%; height: 100%; text-align: center; position: absolute; left: 0; top: 0; z-index: 2; }
.progressContainer .progress-level, .progressContainer3 .progress-level, .progressContainer5 .progress-level, .progressContainer7 .progress-level, .progressContainer10 .progress-level { position: absolute; left: 0; top: 0; width: 0%; height: 100%; background-color: #00d9bb; z-index: 1; }

.progressContainer3 { width: 35.7px; }

.progressContainer5 { width: 59.5px; }

.progressContainer7 { width: 83.3px; }

.progressContainer10 { width: 119px; }

.percValue { font-size: 1.1em; font-weight: bold; }

.percSmall { font-size: 0.8em; }

.triangleAlert { width: 60px; height: 50px; background: url("../images/triangle-alert.png") transparent no-repeat center; background-size: 100% 100%; line-height: 55px; }

/*
* --------------------------------------------------------- LIST TABLE
*/
.listTable tr:nth-child(odd) { background-color: #777c7d; }

.listTable tr:nth-child(even) { background-color: #646a6b; }

.listTable tr#GPS { background-color: limegreen; color: #fff; }

.listTable tr:nth-child(even)#GPS { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }

.listTable tr#GLONASS { background-color: yellow; color: #000; }

.listTable tr:nth-child(even)#GLONASS { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }

.listTable tr#Galileo { background-color: cyan; color: #fff; }

.listTable tr:nth-child(even)#Galileo { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }

.listTable tr#SBAS { background-color: purple; color: #fff; }

.listTable tr:nth-child(even)#SBAS { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }

.listTable tr#BeiDou { background-color: magenta; color: #fff; }

.listTable tr:nth-child(even)#BeiDou { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }

.listTable tr#QZSS { background-color: blue; color: #fff; }

.listTable tr:nth-child(even)#QZSS { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }

/*
* --------------------------------------------------------- SATELLITES BAR QUANTITY
*/
.satBar { line-height: 13px; margin-bottom: 11px; }
.satBar .satQty { font-size: 1.2em; float: left; width: 20px; height: 17px; padding-right: 7px; }
.satBar .satCircles { float: left; display: inline-block; height: 17px; }
.satBar .satCircles img { float: left; margin-top: 1px; }
.satBar .satName { font-size: 1em; font-weight: bold; clear: both; }

/*
* --------------------------------------------------------- PAGINATION
*/
.pagination ul { margin: 0; padding: 0; list-style: none; list-style-image: none; clear: left; display: inline-block; float: right; }
.pagination li { display: inline-block; margin: 0; padding: 0; display: inline-block; float: left; }
.pagination li a { text-align: center; width: 35px; height: 35px; padding-top: 8px; margin-right: 2px; background-color: #555; border: 1px #555 solid; display: inline-block; }
.pagination li a:hover { background-color: #444; }
.pagination li info { padding: 9px 9px; height: 35px; margin-right: 2px; display: inline-block; font-weight: bold; }

/*
* --------------------------------------------------------- TERMINAL
*/
#terminal { padding: 15px; background-color: #000000; color: #ffffff; font-weight: bold; overflow: auto; overflow-y: auto; /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }

.errorDialog { width: 100%; height: 100%; background-color: black; opacity: 0.8; z-index: 10; }
.errorDialog .errorMessage { color: red; font-weight: bold; text-align: center; height: 100%; }

.error { margin: 10px 0px; padding: 10px; width: 100%; color: white; font-weight: bold; background-color: #ff0000; }