/*************************************************/
/************* BASIC DEFAULT STYLES **************/
/*************************************************/
html { 
    height:100%;
    margin: 0; 
    min-width: 600px;
    overflow-x: auto;
    padding: 0;
    width: 100%;
}

body {
    height: 100%;
    font-family: "Segoe UI", cursive;
    font-size:12px;
}


.hover{
    display:block;
    float:left;
    font-family: FontAwesome;   
    width:74px;
    height:74px;
    background-color: #182439;
    padding: 9px 0 0 17px;
    font-size: 40px;
    vertical-align: middle;
}

.hover>span{
    color:#f9f500;
}



/*************************************************/
/********************* INDEX *********************/
/*************************************************/

.bodyIndex{
    overflow: hidden;
}

/** header **/
.headerIndex{
    height:104px;
    background-color: #182439;
    width:100%;
    display:block;
    float:left;
}

.headerInnerPage{    
    height:82px;
    background-color: #182439;
    width:100%;
    display:block;
    float:left;
 }

.logo{
    background-image: url('../images/logos/Identidade_Visual_Marinha_Horizontal_br.png');
    height:96px;
    margin:4px;
    display:inline;
    width:300px;
    float:left;
}

.headerInnerPage .logo{
  background-image: url('../images/logos/Identidade_Visual_Marinha_brInnerPage.png');
    height:74px;
    display:inline;
    width:66px;
    float:left;
}

.titleArea{
    display:inline;
    float:left;
    height:96px;
    margin:4px;
    width: calc(100% - 316px); /*300px - width logo; 16px - margins;*/
}




.headerInnerPage .titleArea{
    height:74px;
    margin:4px;
    width: calc(50% - 82px); /*66px - width logo; 16px - margins;*/
}

.title, .subtitle{
    display:block;
    float:left;
    text-align: center;
    width:100%;
    color:#fafafa;
}



.headerInnerPage .userMenu{
    display:block;

}

.title{
    font-size:45px;
}

.subtitle{
    font-size:20px;
    line-height:14px;
}

.headerInnerPage .title{
    text-align: left;
    font-size:30px;
    line-height:74px;
     
}

.headerInnerPage .subtitle{
    display:none;
}

.userArea{
    float:right;
    display:none;
    height:74px;
    width:calc(50% - 8px); /*8px - margins;*/
    margin:4px;
}

.userArea>.name{
    display:block;
    float:left;
    width:calc(100% - 98px); /*66px - width; 32px - margins;*/
    height: 74px;
    line-height: 74px;
    color: #fafafa;
    text-align:right;
    text-transform: uppercase;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size:16px;
    margin:0px 8px;
}

.userArea>.photo{
    display:block;
    float:left;
    width:74px;
    height:74px;
    background-image: url('../images/userDefault.png');
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid;
    background-repeat: no-repeat;
    background-position: 50% 25%;
    background-size: 74px;
    overflow:hidden;
}

.userArea>.photo>div{
    opacity:0;
    filter: alpha(opacity=0);
}

.userArea>.photo>div:hover{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.headerInnerPage .userArea{
    display:block;
}

/** main area **/
.mainArea{
    bottom: 40px;
    width:100%;
    display:block;
    float:left;
}

.mainAreaInnerPage{
    bottom: 40px;
    width:100%;
    display:block;
    float:left;
    background-color: #fafafa;
    min-height: calc(100% - 106px); /*82px - height header; 24px - height footer */
}

/** footer **/
.footerIndex{
    height:40px;
    background-color: #182439;
    width:100%;
    display:block;
    float:left;
    color:#fafafa;
    font-family: "Segoe UI", cursive;
    font-size: 1vw;
    position: fixed;
    bottom: 0;
    z-index:1000;
}

.footerInnerPage{
    height:24px;
    background-color: #182439;
    width:100%;
    display:block;
    float:left;
    color:#fafafa;
    font-family: "Segoe UI", cursive;
    font-size: 0.8vw;
    position: fixed;
    bottom: 0;
    z-index:1000;
}

.credits{
    display:inline;
    float:left;
    margin: 4px;
    width:50%;
}

.footerInnerPage>.credits{
    margin: 0px;
}

.credits>.text{
    margin-top:8px;
}

.footerInnerPage>.credits>.text{
    margin-top:4px;
}

.logoDITIC{
    display:block;
    float:left;
    margin:2px;
    margin-top: -40px;
    width:69px;
    height:75px;
    background-image: url('../images/ditic.png');
}

.footerInnerPage .logoDITIC{
    height:20px;
    width:18px;
    margin:0px 4px;
    background-image: url('../images/diticInnerPage.png');
}

.version{
    display:inline;
    float:right; 
    margin:12px 8px 0;
}

.footerInnerPage .version{
    margin-top:5px;
}


.flags{
    display:block;
    float:right;
    margin-top:5px;
}

.flags img{
    width:30px;
    float:left;
    display:block;
    margin-right: 10px;
    cursor:pointer;
    opacity:0.6;
}

.flagSelected, .flags>img:hover{
    opacity: 1!important;
}

.footerInnerPage .flags img{
    height: 20px;
    width: 20px;
    margin:-2px 4px;
}


/*************************************************/
/********************* LOGIN *********************/
/*************************************************/
#login{
    width:100%;
    height:100%;
    display:block;
    float:left;
    background: url('../images/bck.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

form {
    width: 480px;
    height:310px;
    margin: 0 auto;
    top: calc((100% - 500px) / 2); /*310 px + 170 px + 20 px*/
    position: relative;
    padding: 3em 2em 2em 2em;
    background-color:#fafafa;
    background-clip: padding-box;
    font-family: "Segoe UI", cursive;
    border-image-slice: 1;
}

#formLogin{
    opacity:0.8;
    position: static;
    margin-bottom: 20px;
}

input {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    -webkit-appearance: none;
    display: block;
    background: #fafafa;
    color: #636363;
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #182439;
}

input:focus { outline: none; }

.group { 
    position: relative; 
    margin-bottom: 40px;
    height: 40px;
}

.highlight {
    position: absolute;
    height: 60%; 
    width: 100px; 
    top: 25%; 
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

.bar {
    position: relative;
    display: block;
    width: 100%;
}

.bar:before, .bar:after {
    content: '';
    height: 2px; 
    width: 0;
    bottom: 1px; 
    position: absolute;
    background: #182439; 
    -webkit-transition:all 0.2s ease; 
    transition: all 0.2s ease;
}

.bar:before { left: 50%; }

.bar:after { right: 50%; }

#messageArea{
    height: 46px;
    width: calc(100% - 110px);
    margin-right:10px;
    display:inline;
    float: left;
}


#btsRegisto{
    margin-bottom: 15px;
    display: block;
    float: left;
}

#btLogin{
    margin-top:-35px;
}


/* active */
input:focus ~ label, input.used ~ label {
    top: -20px;
    -webkit-transform: scale(.75);
    transform: scale(.75); left: -2px;
    color: #182439;
}

input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }

input:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

/* Button */
.button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    margin: .3em 0 1em 0;
    vertical-align: middle;
    color: #fafafa;
    font-size: 16px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    letter-spacing: 1px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #182439;
    cursor: pointer;
    -webkit-transition:all 0.15s ease;
    transition: all 0.15s ease;
    float:right;
}
.button:focus { outline: 0; }


/* Button modifiers */
.buttonBlue {
    background: #182439;
    text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}

.buttonBlue:hover { background: #357bd8; }


/* Label */
label {
    color: #999; 
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    -webkit-transition:all 0.2s ease;
    transition: all 0.2s ease;
}


/* animations */
@-webkit-keyframes inputHighlighter {
    from { background: #182439; }
    to 	{ width: 0; background: transparent; }
}

@keyframes inputHighlighter {
    from { background: #182439; }
    to 	{ width: 0; background: transparent; }
}


/*************************************************/
/****************** INNER PAGES ******************/
/*************************************************/

/* menu horizontal */
.nav>li {
    width: 33.3%;
    text-align: center;	
}
.navbar-default .navbar-nav>.active>a, .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover   {
    color: #ffffff;
    background-color: #182439;
}

.navbar-default .navbar-nav>li>a {
    color: #182439;
    background-color: #ffffff;
}
.navbar-default .navbar-nav>li>a:hover {
    background-color: #e7e7e7;
}

#menu {
    margin: 10px auto 0;
    width:calc(100% - 40px);
}

#menuLinks {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.menuLeft a{
    border-radius: 6px 0 0 6px;
    border:1px solid #182439;

}

.menuCenter a{
    border:1px solid #182439;
    border-left:0;
    border-right:0;
}

.menuRight a{
    border-radius: 0 6px 6px 0;
    border:1px solid #182439;
}

.navbar-nav li{
    cursor: pointer;
}

.userBlock{display:none;}

.disable a, .disable a:hover{
    border-color:#cccccc !important;
    background-color: #e7e7e7 !important;
    color: #cccccc !important;
    font-style: italic;
}




/*************************************************/
/******************* WARNINGS ********************/
/*************************************************/

#dialogo {
/* css3 drop shadow */
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	
	/* css3 border radius */
	-moz-border-radius: 25px;
        -webkit-border-radius: 25px;
	border-radius: 25px;
	background:#ffffff;
	/* styling of the dialog box, i have a fixed dimension for this demo */ 
	width:328px;  
	
	/* make sure it has the highest z-index */
	position:absolute; 
	z-index:5000; 
}

#dialogo ::-webkit-scrollbar {
    width: 10px;
}
 
#dialogo ::-webkit-scrollbar-thumb {
    background: #957c17; 
    border-radius: 10px;
}

#dialogo ::-webkit-scrollbar-thumb:hover {
    background: #555; 
    border-radius: 10px;
}

#dialogo-cabecalho {display:block; position:relative; width:391px; padding:3px 6px 7px; height:14px; font-size:14px; font-weight:bold; box-sizing: content-box; -webkit-box-sizing: content-box;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
     border-radius: 7px;
}

#dialogo-titulo {float:left}

#dialogo-conteudo {display:block; min-height:200px; max-height:400px; -height:200px; padding:6px; color:#666666; font-size:13px; float: left; width: 405px; overflow-y:scroll;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
     border-radius: 7px;
}

#dialogo-mascara {position:absolute; top:0; left:0; min-height:100%; width:100%; background:#fafafa; opacity:.75; filter:alpha(opacity=75); z-index:100; overflow-y:auto;}

#dialogo-btsarea{float:left; margin: 20px 0;}

#dialogo-bt1, #dialogo-bt2{ cursor: hand; padding: 4px 10px; border-bottom:1px solid; font-size:12px; float:left; width:70px; position:relative;
      -moz-border-radius: 6px 6px 6px 6px;
      -webkit-border-radius: 6px;  
       border-radius: 6px 6px 6px 6px;   
      -moz-box-shadow: 3px 3px 5px #535353;
      -webkit-box-shadow: 3px 3px 5px #535353;       
       box-shadow: 3px 3px 5px #535353;
}
#dialogo-bt2{margin-left:10px;}

#dialogo-bt1:active{
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#label1 {cursor: hand; padding: 3000px 10px; border-bottom:1px solid; font: 13.3333px Arial; float:left; width:700px; -webkit-appearance: none;}

#checkbox1 {cursor: hand; display: block; float: left; height: 20px; z-index: 1000; position: absolute; width: 20px; -webkit-appearance: none;}

input[type=checkbox]
{
  -webkit-appearance:checkbox;
}

.erro {background:#fff url('../images/alerts/error_bg.jpg') bottom right no-repeat; border:1px solid #924949; border-top:none;}
.erro-cabecalho {background:url('../images/alerts/error_header.gif') repeat-x; color:#6f2c2c; border:1px solid #924949; border-bottom:none}
.aviso {background:#fff url('../images/alerts/warning_bg.jpg') bottom right no-repeat; border:1px solid #c5a524; border-top:none}
.aviso-cabecalho{background:url('../images/alerts/warning_header.gif') repeat-x; color:#957c17; border:1px solid #c5a524; border-bottom:none}
.sucesso {background:#fff url('../images/alerts/success_bg.jpg') bottom right no-repeat; border:1px solid #60a174; border-top:none}
.sucesso-cabecalho {background:url('../images/alerts/success_header.gif') repeat-x; color:#3c7f51; border:1px solid #60a174; border-bottom:none}
.questao {background:#fff url('../images/alerts/prompt_bg.jpg') bottom right no-repeat; border:1px solid #4f6d81; border-top:none}
.questao-cabecalho {background:url('../images/alerts/prompt_header.gif') repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none}

/*************************************************/
/********************* MAILS *********************/
/*************************************************/
.mailLinha1,.mailLinha2, .mailLinha3{
    display:block;
    float:left;
    width:100%;
    margin-bottom:15px;
}

.mailLinha2{
   width:80%;
   margin-left:20%;
}


/*************************************************/
/********************** MAPS *********************/
/*************************************************/
.map {
    width: 100%;
    border: 1px solid #ddd;
}

/* PopUp that shows when clicking an icon */
.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}

.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "X";
}

.popup-nome{
    min-width: 75px;
    width: auto;
    font-size:12px;
    padding:5px;
    text-align: center;
}


/*************************************************/
/********************** DATES ********************/
/*************************************************/
input::-webkit-calendar-picker-indicator{
    display: none;
}

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}