@font-face {
	font-family: 'Roboto';
	src: url('/se/utils/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
  }
  @font-face {
	font-family: 'RobotoLight';
	src: url('/se/utils/fonts/Roboto/Roboto-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
  }
  
  /* latin */
@font-face {
	font-family: 'Dancing Script';
	font-style: normal;
	font-weight: 400;
	src: url('/se/utils/fonts/DancingScript.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  

.modalPage{
    font-family: Arial;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px !important; 
    left: 0px;
    z-index: 2000;
}


.modalPage.modal label {
	width: 110px;
	display: inline-block;
}
.modalPage.modal input[type="date"],
.modalPage.modal input[type="text"],
.modalPage.modal select {
	width: 220px;
	padding: 0px;
}

.modalBackground{
    position: absolute;
    filter: alpha(opacity=30);
    opacity: 0.3;
    -moz-opacity:0.3;
    -webkit-opacity:0.3;
    -o-opacity:0.3;
    -ms-opacity:0.3;
    background-color: #999999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
}

.modalContainer{
    top: 25%;
    width: 330px;
    background-color: #fff;
    position: relative;
    margin: 1% auto;
    padding: 20px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 0 #fff;
}

.modalBox{
    max-width:100%;
    min-width: 300px;
    position: relative;
    display: table;
    top: 25%;
    margin: 1% auto;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modalTop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-size: 12pt;    
    padding-bottom: 10px;
    background-color: #0c2340;
}

.modalTitle{
    color: #d6d6d6;
}

.modalContent {
    display: flex;
    align-items: center;
    background-color: white;
	box-sizing: border-box;
    font-size: 14px;
    margin: 0;
    padding: 40px;
    min-width: 300px;
    min-height: 100px;
    max-height: 500px;
}

.modalBottom {
    display: flex;
    justify-content: center;
	background-color: #f7f7f7;
}

.modalBottom button {
    color: #505050;
    border-radius: 20px;
    border-color: #a0a0a0;
    border-style: solid;
    border-width: 1px;
    background-color: #F0F0F0;
    margin: 15px;
    min-width: 100px;
    height: 28px;
    cursor: pointer;
	font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

.alerticon {
  flex-shrink:0;
  margin-right: 10px;
  position: unset;
  margin-top: 0;
  background: url(/se/images/alert3.png) no-repeat;
  width: 40px;
  height: 40px;
  background-size: 40px 40px;
}

.mCont{ font-size: 14px; margin: 30px 0 30px 0; max-height: 300px; overflow-y: auto; overflow-x: hidden;}
.mCont .label {margin-left: 50px;}

.mCont input[type="text"] { 
    border-radius: 1px;
    -moz-border-radius: 1px;
    padding: 8px;
    border: 1px solid #c8c8c8;
    color: #505050;
    margin: 10px 0 10px 0;
    font-size: 15px;
    outline: none;
    width: 95%
}

.mCont input[type="text"]:focus {border: 1px solid #5D9FEF;}
.mCont textarea {
    width: 100%;
    height: 200px;
    resize:vertical;
    padding: 10px;
    font-family: arial;
}

.mCont_top{
    color: #1F3A63;
    font-size: 13pt;
    padding-bottom: 10px;
    border-bottom: 1px solid #d7d7d7;
}

.mCont_bottom{ text-align: center;}

#progressStop {	width: 20px; color: #d6d6d6;}
#progressStop:hover { color: white; }


#spinner {
    position: absolute;
    margin-top: -8px;
    width: 80px;
    height: 80px;
    background:  url(/se/images/spinner-blue.gif) no-repeat;
}


/* start CSS Spinner  ********************* */ 

.ouro {
    position: relative;
    display:inline-block;
    height: 46px;
    width: 46px;
    margin: 1em 2em 1em 1em;
    border-radius: 50%;  
    background: none repeat scroll 0 0 #DDDDDD;
    overflow:hidden;
    box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075);
}

.ouro > span {
    position: absolute;
    height: 100%; width: 50%;
    overflow: hidden;
}
.ouro .left  { left:0   }
.ouro .right { left:50% }

.ouro .anim {
    position: absolute;
    left: 100%; top: 0;
    height: 100%; width: 100%;
    border-radius: 999px;
    background: none repeat scroll 0 0 #0c2340;
    opacity: 0.8;
    animation: ui-spinner-rotate-left 3s infinite;
    animation-delay: 0s;
    animation-duration:4s;
    animation-timing-function: linear;
}
.ouro .left .anim {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    transform-origin: 0 50% 0;
    animation-delay: 1s;
}
.ouro .right .anim {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    left: -100%;
    transform-origin: 100% 50% 0;
    animation-name: ui-spinner-rotate-right;
    animation-delay:0;
}

@keyframes ui-spinner-rotate-left{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(180deg)}
  50%{transform:rotate(180deg)}
  75%{transform:rotate(360deg)}
  100%{transform:rotate(360deg)}
}
@keyframes ui-spinner-rotate-right{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(180deg)}
  50%{transform:rotate(180deg)}
  75%{transform:rotate(360deg)}
  100%{transform:rotate(360deg)}
}

/* end CSS Spinner  ********************* */ 


html {
 
}
body 
{
  display: grid;
  grid-template-columns: 26px auto;
  grid-template-rows: 40px auto;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Arial;
}

header {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #0c2340;
}

aside {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  background: #ECEDEF;
  border-right: 1px solid #D6D6D6;
 }

aside p { 
    transform-origin: top left;
    position: fixed;
    left: 8px;
    top: calc(100% - 33px);   
    transform: rotate(-90deg);
    color: #A9A9A9;
    font-size: 12px;
    white-space: nowrap;
    cursor: default;
}

aside svg {
	height: 16px;
	margin: auto;
	display: block;
	color: #0c2340;
	cursor: pointer;
	margin-top: 40px;
}

aside svg:hover {
	color: #9e9e9e;
}



.tsidebar {
	min-width: 275px;
	border-right: 1px solid #D6D6D6;
	background: #FAFAFA ;
	padding: 35px 0px 25px 0px;
	overflow: auto;
	display: none;
}
.tsidebar h2 {
    font-family: Arial, 'Open+Sans', sans-serif;
   	margin: 0;
	padding: 0px 20px 20px 15px;
	white-space: pre-wrap;
	font-size: 24px;
	font-weight: 400;
}
.tsidebar ul {
	margin: 0px;
	padding: unset;
}
.tsidebar li{   
	padding: 0px 10px 0px 15px;
	border: 1px solid #FAFAFA;
	cursor: pointer;
	list-style: none;
	line-height: 1.9em;
	color: #000052;
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-family: Arial, 'Open+Sans', sans-serif;
}

.tsidebar li:hover{
	color: #FFFFFF;
	background:  #0c2340;
	cursor:pointer;
}

.sb1 { /*separator */
    margin: 5px 2px 5px 2px;
    border-top: 1px solid #C5C5C5;
}


main {
  grid-column-start: 2;
  grid-row-start: 2;
  overflow: auto;
  background: white;
  padding: 35px 20px;
}

h1 {
  font: 28px RobotoLight, Arial;
  color: #0c2340;
  margin: 0;
}

h4 {
	color: #0c2340;
	font-family: Arial;
	font-size: 16px;
	font-weight: normal;
	margin: 0px;
	white-space: nowrap;
}

h4:after {
    content: '';
    display: block;
    margin: 2px 0 15px 0;
    border-top: 1px dashed #e3e3e3;
}

hr { 
  all:unset;
  display: block;
  width: 100%;
  margin: 18px 0;
  border-bottom: 1px solid #eee;
}

#h-logo { display: none; box-sizing: unset; min-width:110px; height:40px; padding-left:40px; align-items: center;}
#h-logo svg { margin: 0;}
#h-title { display: none; color: #B0B0B0; font:bold 21px RobotoLight; white-space: nowrap;cursor: default; }
#h-close { height:18px; margin-left: auto;}
#h-close svg{color: #c5c5c5; margin: 0 15px; height:100%;}
#h-close svg:hover{ color:#f5f5f5;}

ul { padding:0;}

li {
  display: flex;
  flex-wrap: nowrap;
  font-size: 14px;
  line-height: 23px;
  flex-direction: column;
  padding-bottom: 5px;
  align-items: flex-start;
  }

input:disabled{background-color: #F8F8F8;color: #404040;}
input:read-only {background-color: #f8f8f8;  color: #404040; outline: none; cursor: default;}


input[type="date"]::-webkit-clear-button {
    display: none;
}

input[type="date"]::-webkit-inner-spin-button { 
    display: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button 
{
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
	-moz-appearance:textfield;
}

table {
    font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    table-layout: auto;
    border-top: 1px solid #a0a0a0;
    border-left: 1px solid #a0a0a0;
    border-right: 1px solid #a0a0a0;
    border-bottom: 1px solid #a0a0a0;
    color: #000;
}

tr {white-space:nowrap;}

th
{
    text-align: left;
    font-weight: bold;
    color: #1F3A63;
    background: #F0F0F0;
    border: 1px solid #BFBFBF;
    padding: 0 2em;
}

th:hover{ cursor: default; }

td {
    border: 1px solid #EEE;
    padding: 0 2em;
    white-space: nowrap;
    text-align: left;
}

td:hover{ cursor: default;}


.C1 { 
  flex: 0 0;
    white-space: nowrap;
    padding-right: 10px;  
    color: #777;
  }

.CR {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
}


.C2 { 
	display: flex;
	flex: 1 1 auto;
	width: 100%;
	max-width: 250px;
}

.C2 > select {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  color: black;
  min-height: 27px;
  font-size: 13px;
  width: 100%;
  margin: 0;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  padding-left: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='24' height='16' viewBox='0 0 24 16'><polygon points='0,0 16,0 8,16' style='fill: rgb%28138, 138, 138%29'></polygon></svg>") no-repeat;
  background-size: 13px;
  background-position: calc(100% - 5px) center;
  background-repeat: no-repeat;
  background-color: white;
}

.C2 > select:disabled{background-color: #F8F8F8;}

.C2 > input:not([type=checkbox]):not([type=radio]){
    -webkit-appearance: none;
	-moz-appearance:textfield;
	font-family: arial;
	box-sizing: border-box;
    border-radius: 0;       
    font-size:13px;
    margin:0px;
    padding: 0px 10px 0px 10px;
    border: 1px solid #d9d9d9;
    line-height: 25px;
    height: 25px;
    min-height: 25px;
    width: 100%;
}


.C2 .unit {
    min-width:85px;
    background-color: #f8f8f8; 
    text-align: center;
    border: 1px solid #d9d9d9;
    border-left: 0;
    font-size:12px;
}


.dms {
	display: flex;
}
.dms-unit {

	margin-right: 5px;
	min-width: 20px;
	height: 25px;
	background-color: #f7f7f7;
	border: 1px solid #d9d9d9;
	border-left: 0;
	text-align: center;
	box-sizing: border-box;
}
.dms-val {
	flex: 1 1 auto;
	width: 100%;
	min-width: 40px;
	-webkit-appearance: none;
	border-radius: 0;
	font-size: 12px;
	text-align: center;
	padding: 0px 3px 0px 3px;
	border: 1px solid #d9d9d9;
	line-height: 25px;
	height: 25px;
	min-height: 25px;
	margin: 0px;
	box-sizing: border-box;
}
.dms-hem {
	-webkit-appearance: none;
	padding: 0;
	min-width: 20px;
	height: 25px;
	background-color: #f7f7f7;
	border: 1px solid #d9d9d9;
	text-align: center;
	box-sizing: border-box;
	font-size: 12px;
	}
	
.dms-hem {
	outline:none;
}



.buttonBar 
{ display: flex;
  flex-direction: column;
}

button {
	-webkit-appearance: none;
	white-space: nowrap;
	color: #505050;
	border: 1px solid #a0a0a0;
	background-color: #F0F0F0;
	margin-right: 30px;
	margin-bottom: 10px;
	min-width: 100px;
	padding-left: 10px;
	padding-right: 10px;
	height: 25px;
	border-radius: 20px;
	cursor: pointer;
	font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}
.module-table {
  width: 100%;
  border-collapse: collapse;
}

.module-table th, .module-table td {
  padding: 12px;
  border: 1px solid #ccc;
  text-align: left;
}

.module-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

.module-table td {
  word-wrap: break-word;
  white-space: normal;
}

.module-table th:nth-child(1),
.module-table td:nth-child(1) {
  width: 30%; /
}

.module-table th:nth-child(2),
.module-table td:nth-child(2) {
  width: 25%; 
}

.module-table th:nth-child(3),
.module-table td:nth-child(3) {
  width: 25%; 
}

.module-table th:nth-child(4),
.module-table td:nth-child(4) {
  width: 15%; 
}

.module-table th:nth-child(5),
.module-table td:nth-child(5) {
  width: 15%; 
}
button:active{ outline:0;}
button:focus{ outline:0;}

button:hover { background:  url(/se/images/bg_blue3.gif) repeat-x; }

button svg
{
  height: 14px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 8px;
}

.mapBtn {
	position: absolute;
	right:0;
	bottom:20px;
	margin: 5px;
	padding: 0;
	text-align: center;
	min-width: 35px;
	height: 25px;
	background: white;
	opacity: 0.8;
	box-shadow: 0 0 2px #888;
	border-radius: 2px;
	cursor: pointer;
}

.mapBtn svg { margin: 0;}

.msg-error {
    background-color: #f2dede;
    border-color: #960000;
    color: #960000;	
    border: 1px solid;
    padding: 5px;
    white-space: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}

.msg-warning{
    background-color: #f9edbe;
    border-color: #B89000;
    color: #8C6E04;
    border: 1px solid;
    padding: 5px;
    white-space: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}

.msg-info{
    background-color: #d9edf7;
    border-color: #006ABC;
    color: #006ABC;
    border: 1px solid;
    padding: 5px;
    white-space: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}

.msg-success{
    background-color: #dff0d8;
    border-color: #1D6000;
    color: #1D6000;
    border: 1px solid;
    padding: 5px;
    white-space: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}	    



#h-menu-sm 
{ 
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  justify-content: space-around;
  color:#ccc; 
  height:40px;
  margin:0;
}

#h-menu-sm li
{ 
  display: flex;
  flex: 1 1 0;
  overflow:hidden;
  flex-direction: column;
  align-items: center;
  padding: 1px 0px 3px 0px;
}
#h-menu-sm svg 
{ 
  height: 20px;
  margin-top:2px;
  margin-bottom:4px;
  
}

#h-menu-sm p 
{ 
margin: 0 auto;
line-height: normal;
font-size: 9px;
text-overflow: ellipsis;
overflow: hidden;
}

#h-menu-txt{
	display: none;
    flex-direction: row;
    color: white;
    height: 40px;
    margin: 0;
}
#h-menu-txt li { 
	align-items: center;
    padding: 0;
    margin-left: 54px;
}

#h-menu-txt a {
	color: white;
	text-decoration: none;
} 

#h-menu-txt a.active {
	color: #1c9ad6;;
} 



#h-menu-txt a:hover {color: #FCCA00;}

#h-menu-txt-right
{
	display: none;
	flex-direction: row;
	color: white;
	height: 40px;
	margin: 0;
	justify-content: flex-end;
	flex: 1 1 auto;
}

#h-menu-txt-right li 
{ 
	align-items: center;
    padding: 0;
    margin-right: 15px;
	line-height: 0;
}

#h-menu-txt-right svg 
{
	color: #c5c5c5;
	height: 16px; 
}
#h-menu-txt-right svg:hover 
{
	color: white;
}

#h-menu-txt-right a {
	color: #c5c5c5;
	text-decoration: none;
	max-width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
} 

#h-menu-sm a {
	color: #c5c5c5;
    text-overflow: ellipsis;
    white-space: nowrap;
	text-decoration: none;
	line-height: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
} 
#h-menu-sm a:hover {color: white;}

#h-menu-txt-right a:hover {color: white;}
#h-menu-sm li:hover {color: white;}



@media only screen and (min-width: 600px)
{
	#h-title {display:block;}
	#h-logo {display:block;}

	main {  padding: 35px 35px;}
	li { flex-direction: row;}
	.buttonBar { flex-direction: row;}
  .C1 {text-align: left;}
}

@media only screen and (min-width: 900px)
{

main {  padding: 35px 35px;}
li { flex-direction: row;}
.buttonBar { flex-direction: row;}

#h-menu-sm {display:none;}
#h-menu-txt {display:flex;}
#h-menu-txt-right {display:flex;}
#ilogout, #network, #chatopen {display:block;}

}


table
{
  border: 1px solid #d9d9d9;
  width: 100%;
  table-layout: fixed;
}

td input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  text-align: center;
}

.heff td
{
  border: 1px solid #d9d9d9;
  text-align: center;
  height: 25px;
  padding:0;
}


.heff td:nth-child(odd) {
  background: #f8f8f8;
  max-width: 50px;
}

.heff td:nth-child(even) {
  background: #f8f8f8;
  min-width: 50px;
}
#diagHpattern, #diagVpattern {
  text-align: center;
  max-width:250px; 
  margin:auto;
}


.dynmtblbtd select {
	max-width: 100%;
	width: 100%;
    border: 0px;
}

td.dynmtblbtd {
	padding: 0px;
}

td.dynmtblbtdfirst {
    padding: 0px;
    text-align: center;
}
th.dynmtblbtdfirst {
	width: 1em;
    text-align: center;
}
th.dynmtblbth {
	padding: 0.5em;
	overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete {position: relative; display: inline-block;}
.autocomplete-items {position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 0; right: 0;}
.autocomplete-items div {padding: 10px; cursor: pointer; background-color: #fff;  border-bottom: 1px solid #d4d4d4;  line-height: 8px;}
.autocomplete-items div:hover {background-color: #e9e9e9; }
.autocomplete-active {background-color: DodgerBlue !important;  color: #ffffff; }