/* Let's get this party started */
::-webkit-scrollbar {
    width: 8px; /* 1px wider than Lion. */
    /* This is more usable for users trying to click it. */
    background-color: rgba(0,0,0,0);
    -webkit-border-radius: 100px;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
    /* This is the EXACT color of Mac OS scrollbars. 
       Yes, I pulled out digital color meter */
    background: rgba(0,0,0,0.5);
    -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
    background: rgba(0,0,0,0.61); /* Some darker color when you click it */
    -webkit-border-radius: 100px;
}

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

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  font-family: Open Sans;
  font-size: 14px;
  line-height: 1.42857;
}

select{
    line-height: 30px!important;
}

img {
    max-width:100%;
}

fieldset {
    border: 0;
    padding: 0;
}

.modal-overlay {
    position: fixed;
    z-index: 10;
    background: black;
    display: none;
    opacity: .5;
    filter: alpha(opacity=50);
    width: 100%;
    height: 100%;
}

#divMensagem{
    border:2px solid #000;
    margin:10% 25%; 
    width:50%; 
    background-color:#00AEEF;
    color:#fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding:10px;
    text-align:left;
    position: fixed;
    z-index: 3000;
    display:none;
    font-size:18px;
    -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
    box-shadow:0 5px 15px rgba(0,0,0,.5);
}

#cabecalho{
    height:50px;
    background-color:#00416C;
    color:#fff;
    text-align:center;
    padding:5px;
    font-size:25px;
}

#btnMenuPrincipal{
    float:left;
    cursor:pointer;
    width:34px;
    margin:8px;
}

#menuPrincipal {
    display:none;
}
#menuPrincipal ul{
    font-size:18px;
    list-style: none;
    text-align: center; 
    padding: 0px;
    margin: 0px;
}
#menuPrincipal ul li{
    padding: 8px;
}
#menuPrincipal a{
    color:#fff;
    text-decoration: none;
}

#tituloPrincipal{
    padding:23px;
    background-color:#F2F2F2;
    color:#00416C;
    text-align: center;
    text-transform: uppercase;
    font-size:22px;
    min-height:80px;
}

.container{
    padding:40px 55px 0px 55px;
}

.ui-datepicker-trigger {
    background: url(../images/botao_calendario_32x32.png) no-repeat;
    background-size: 32px;
    border: 0px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    /*padding: 20px;*/
    display:none;
}

.greenButton{
    border: 2px solid #8DC63F;
    color: #8DC63F;
    padding: 5px 20px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    cursor: pointer;
    text-align:center;
    float:right;
    margin:10px 0px;
    text-transform: uppercase;
    font-size:18px;
}

.blueButton{
    border: 2px solid #00AEEF;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    color: #00AEEF;
    cursor: pointer;
    float: right;
    font-size: 18px;
    padding: 5px 20px;
    text-align: center;
}





/******************************************************************************* 
Grids
*/
.paginator{
    padding: 0px;
    list-style: none;
}
.paginator li{
    margin: 0px 3px;
    width: 40px;
    min-height: 40px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;

    zoom: 1;
    *display: inline;
    _height: 40px;
}
.paginator li input{
    border: 0px;
    background-color: #F2F2F2; 
    color: #000;
    border: 1px solid #808080;
    cursor: pointer;
    font-size:16px;
    width: 40px;
    height: 40px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-appearance: none;
}
.paginator li input.selected{
    background-color: #000;  
    color: #ffffff;
    cursor: default;
}
.paginator li input.disabled{
    cursor: default;
}

.paginator_fb{
    background:url(../images/paginator/fb_20x20.png) no-repeat;
    background-size:20px;
    background-position: center; 
}
.paginator_b{
    background:url(../images/paginator/b_20x20.png) no-repeat;
    background-size:20px;
    background-position: center; 
}
.paginator_f{
    background:url(../images/paginator/f_20x20.png) no-repeat;
    background-size:20px;
    background-position: center; 
}
.paginator_ff{
    background:url(../images/paginator/ff_20x20.png) no-repeat;
    background-size:20px;
    background-position: center; 
}

/** Container do grid **/
.searchContainer{
    width:100%;
}
.searchResultsContainer{
}
.listGrid{
    background-color: #ccc;
    width: 100%;
    font-weight: normal;
    font-size:13px;
    border-collapse:collapse;
}
.listGrid tbody tr td{
    padding: 5px;
    background-color: #FFF;
    border:1px solid #DDDDDD;
}
.listGrid thead{
    background-color: #000;
    color: #fff;
}
.listGrid thead tr th{
    padding: 5px;
}
.searchButton{
    background: url(../images/botao_buscar_32x32.png) no-repeat;
    background-size: 32px 32px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border: none;
    margin: 5px;
}
.visualizarButton{
    background: url(../images/botao_visualizar_32x32.png) no-repeat;
    background-size: 32px 32px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border: none;
    margin: 5px;
}
.editarButton{
    background: url(../images/botao_editar_32x32.png) no-repeat;
    background-size: 32px 32px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border: none;
    margin: 5px;
}
.removerButton{
    background: url(../images/botao_remover_32x32.png) no-repeat;
    background-size: 32px 32px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border: none;
    margin: 5px;
}




/******************************************************************************* 
Forms 
*/
form label {
    display: table;
}
form > div {
    clear: both;
    overflow: hidden;
    padding: 1px;
    margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
    margin: 0 0 5px 0;
}
form > div > label, 
legend {
    width: 25%;
    float: left;
    padding-right: 10px;
    font-weight: normal;
}
form > div > div,
form > div > fieldset > div {
    width: 75%;
    float: right;
}
form > div > fieldset label {
    font-size: 90%;
}

.formSubmitMessage{
    display:block;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.success{
    border:1px solid #00D11B;
    background-color:#DEF4E1;
}

.validationError{
    color:red;
    line-height: 10px;
    /*height: 20px;*/
}

input[type=text].validationError,
input[type=email].validationError,
input[type=url].validationError,
input[type=password].validationError,
textarea.validationError,
select.validationError {
    border:1px solid red;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
    width: 100%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 5px;
    height:35px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
    outline: 0;
    border-color: #4697e4;
}

@media (max-width: 600px) {
    form > div {
        margin: 0 0 15px 0; 
    }
    form > div > label,
    legend {
        width: 100%;
        float: none;
        margin: 0 0 5px 0;
    }
    form > div > div,
    form > div > fieldset > div {
        width: 100%;
        float: none;
    }
    input[type=text],
    input[type=email],
    input[type=url],
    input[type=password],
    textarea,
    select {
        width: 100%; 
    }
}
@media (min-width: 1200px) {
    form > div > label,
    legend {
        text-align: right;
    }
}





/******************************************************************************* 
Responsive design 
*/
@media(min-width: 850px){
    form > div { display: inline-block; }
    .col-submit { display: block; }
    .col-2, .col-3, .col-4 { box-shadow: 1px 1px #e4e4e4; border: none; }
    .col-2 { width: 50% }
    .col-3 { width: 33.3333333333% }
    .col-4 { width: 25% }
    .col-submit button { width: 30%; margin: 0 auto; }
}