/*
    Created on : May 23, 2011, 5:57:26 PM
    Author     : Thiago Paes <mrprompt@gmail.com>
    Description: Definição de layout do ponto eletrônico
*/
/* classes */
.tinyTip {
    width: 325px;
    padding: 17px 0px 0px 0px;
    display: block;
    background: url(../img/tinyTip-top.png) 0px 0px no-repeat;
}
.tinyTip .content {
    padding: 0px 15px 0px 15px;
    font-size: 14px;
    font-family: "Lucida Sans Unicode";
    color: #010101;
    background: url(../img/tinyTip-content.png) 0px 0px repeat-y;
}
.tinyTip .bottom {
    height: 47px;
    background: url(../img/tinyTip-bottom.png) 0px 0px no-repeat;
    font: 0px/0px sans-serif;
}
/* --- /classes */

/* --- aviso */
noscript {
    display: block;
    width: 450px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2);
    box-shadow: 0 2px 3px rgba(0,0,0,.2);
    background-color: #fcefa1;
    border: 1px solid #909090;
    padding: 10px;
    text-align: center;
    font-size: 18pt;
    line-height: 20pt;
    margin: 10pt auto;
}

/* -- container */
#container {
    display: block;
    position: relative;
    width: 640px;
    margin: 0 auto;
}
/* -- /container /

/* --- sessões */
header {
    margin-bottom:10px;
    margin-top: 5px;
}
header span {
    display: inline-block;
    font-weight: bold;
    color: #505050;
    margin-top: 2px;
}
header nav {
    display: block;
    margin-top: 5px;
}
nav ul {
    list-style:none;
    display: inline-block;
}
nav ul li {
    display: inline-block;
}
nav b {
    text-transform: capitalize;
    display: inline-block;
}
nav .ui-button {
    margin-right: 4pt;
}
/* --- /sessões */

/* --- login */
#login-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 110%;
}
#login-form input[type="text"],
#login-form input[type="password"] {
    width: 160px;
    padding: 5px;
}
#login-form input[type="text"] {
    margin-left: 10px;
}
#login-form input[type="password"] {
    margin-left: 17px;
}
/* --- /login */

/* --- cadastro */
#cadastro-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 110%;
}
#cadastro-form input {
    padding: 5px;
}
#cadastro-form input[type="text"],
#cadastro-form input[type="password"] {
    width: 180px;
    vertical-align: bottom;
}
#cadastro-form input#nome {
    margin-left: 20px;
}
#cadastro-form input#usuario {
    margin-left: 22px;
}
#cadastro-form input#email {
    margin-left: 15px;
}
#cadastro-form input#senha,
#cadastro-form input#senha_confirmacao {
    margin-left: 15px;
}
#cadastro-form input#horas_dia {
    width: 25px;
    margin-left: 10px;
    text-align: center;
}
#cadastro-form input#horas_almoco {
    width: 25px;
    margin-left: 42px;
    text-align: center;
}
#cadastro-form fieldset fieldset {
    border: 1px solid #DDD;
    margin-top: 10px;
    text-align: center;
}
#cadastro-form fieldset fieldset label {
    display: inline-block;
    margin: 3px;
    text-align: center;
    color: #909090;
}
#cadastro-form fieldset fieldset label input {
    display: block;
}
/* --- /cadastro */

/* --- relatório */
.widget-calendario {
    display: block;
    position: relative;
    left: 335px;
    width: 250px;
}
.widget-grafico {
    display: block;
    position: relative;
    left: 332px;
    top: 15px;
    width: 250px;
}
.widget-relatorio {
    display: block;
    position: absolute;
    top: 68px;
    width: 316px;
    text-align: center;
    padding: 2px;
}
.widget-relatorio table {
    display: block;
}
.widget-relatorio table .data {
    width: 77px; /* Adjusted width */
}
.widget-relatorio table .entrada {
    width: 75px; /* Adjusted width */
}
.widget-relatorio table .saida {
    width: 75px; /* Adjusted width */
}
.widget-relatorio table .horas {
    width: 75px; /* Adjusted width */
}
/* Removed .observacao width as it's no longer in the table */
.widget-relatorio table thead {
    margin-bottom: 2px;
}
.widget-relatorio table thead tr th {
    padding: 2px;
}
.widget-relatorio table tbody tr:hover {
    background-color: #F2F2F2;
}
.widget-relatorio table tbody tr.comObs {
    background-color: #DDD;
}
.widget-relatorio table tbody tr.expedienteMenor {
    background-color: #FFDADA;
}
.widget-relatorio table tbody tr td {
    padding: 2px;
    border: 1px solid #F2F2F2;
    border-collapse: collapse;
}
.widget-relatorio table tbody tr td.noResult {
    text-align: center;
    border-style: none;
    display: block;
    width: 316px;
}
/* --- /relatório */

/* --- bater o ponto */
#ponto-form label {
    display: block;
    width: 100%;
}
#ponto-form textarea {
    border: 1px solid #DDD;
    width: 320px;
    height: 5em;
    clear: both;
    display: block;
    margin-bottom: 5px;
}
#ponto-form .radioContainer input[type="radio"] {
    vertical-align: top;
}
#ponto-form .radioContainer:last-Child input[type="radio"] {
    margin-left: 19px;
}
/* --- /bater ponto */

/* --- preferências */
.widget-preferencias input#nome,
.widget-preferencias input#email,
.widget-preferencias input#senha,
.widget-preferencias input#senha_confirmacao {
    width: 233px !important;
}
/* --- /preferências */

/* --- lista de usuário */
.widget-usuarios table {
    display: block;
    text-align: left;
    width: 100%;
}
.widget-usuarios table thead tr th {
    padding: 2px;
    border-collapse: collapse;
    width: 25%;
}
.widget-usuarios table tbody tr:hover {
    background-color: #F2F2F2;
}
.widget-usuarios table tbody tr td {
    padding: 4px;
    border: 1px solid #F2F2F2;
    border-collapse: collapse;
    width: 25%;
}
.widget-usuarios table tbody tr:first-child td {
    border-style: none;
}
.widget-usuarios table tbody tr td.id {
    width: 20px;
}
.widget-usuarios table tbody tr td.login,
.widget-usuarios table tbody tr td.nome {
    cursor: pointer;
}
.widget-usuarios table tbody tr td.expediente {
    text-align: center;
}
.widget-usuarios .noResult {
    text-align: center;
    border-style: none;
    display: block;
}
/* --- /lista de usuário */

/* --- edit-punch-modal specific styling */
#edit-punch-modal h4 {
    margin-bottom: 5px;
    color: #505050;
    font-size: 105%;
    border-bottom: 1px solid #EEE;
    padding-bottom: 3px;
}

#edit-punch-modal label {
    display: block; /* Keep labels on their own line */
    margin-bottom: 5px;
    font-size: 110%;
}
#edit-punch-modal input[type="text"],
#edit-punch-modal textarea {
    width: calc(100% - 12px); /* Adjust width to account for padding and border */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    padding: 5px;
    display: block; /* Ensure they break line after their label */
    margin-top: 2px; /* Small vertical spacing */
    margin-left: 0; /* Reset any inherited left margin */
}

/* Remove radioContainer specific styles as it's no longer used in this modal */
/*
#edit-punch-modal .radioContainer {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
}
#edit-punch-modal .radioContainer input[type="radio"] {
    margin-right: 5px;
    vertical-align: middle;
    margin-left: 0;
}
#edit-punch-modal .radioContainer label {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 0;
    font-size: 1em;
}
*/

/* --- Edit Punch Modal */
#edit-punch-dialog .edit-punch-form {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
#edit-punch-dialog .edit-punch-form:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
#edit-punch-dialog .edit-punch-form h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #505050;
}
#edit-punch-dialog .edit-punch-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 110%;
}
#edit-punch-dialog .edit-punch-form input[type="text"],
#edit-punch-dialog .edit-punch-form textarea {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}
#edit-punch-dialog .edit-punch-form .radioContainer {
    display: inline-block;
    margin-left: 10px;
}
#edit-punch-dialog .edit-punch-form .radioContainer label {
    display: inline-block;
    margin-right: 15px;
    font-size: 100%;
}
#edit-punch-dialog .delete-punch-button {
    float: right;
    margin-top: 10px;
    background-color: #cd0a0a; /* Red background for delete button */
    color: white;
    border-color: #cd0a0a;
}
#edit-punch-dialog .delete-punch-button:hover {
    background-color: #e17009; /* Darker red on hover */
    border-color: #e17009;
}
/* ---- responsive */
@media (max-width: 480px) {
    #container {
        width: 95%;
    }
    .widget-calendario {
        position: static;
        display: block;
        margin-bottom: 2em;
    }
    .widget-grafico {
        display: block;
        position: static;
        margin-bottom: 4em;
    }
    .widget-relatorio {
        display: block;
        position: static;
    }
}
/* ---- /responsive */