/*
 *
 * date_time_plugin.css
 * 
 * Arquivo que define a folha de estilo do plugin de criação de seletor de data e hora nos inputs do formulário.
 * 
 */

#date_time_plugin{
    display: none;
    position: absolute;
    z-index: 99999;
}

/* Estilo do date plugin */
.date_plugin {
    width: 265px;
    height: 230px;
    background-color: #e1e1e1;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #a1a1a1;
    -webkit-box-shadow: 4px 7px 17px 0px rgba(50, 50, 50, 0.95);
    -moz-box-shadow:    4px 7px 17px 0px rgba(50, 50, 50, 0.95);
    box-shadow:         4px 7px 17px 0px rgba(50, 50, 50, 0.95);
}

.container-select-text-options {
    margin: 0 auto;
    margin-top: 5px;
    float: left;
    margin-left: 5px;
    width: 250px;
    height: 30px;
}

.button-left-plugin, .button-right-plugin {
    font-size: 18px;
    width: 20px;
    cursor: pointer;
}

.button-left-plugin {
    margin-left: 5px;
    margin-top: 5px;
}

.button-right-plugin {
    margin-left: 225px;
    margin-top: -22px;
    float: right;
}

.select-text-option-month, .select-text-option-year {
    border: 2px solid #a1a1a1;
    height: 25px;
    background-color: #ffffff;
    cursor: pointer;
    text-align-last: center;
    -webkit-appearance: none;  /* Remove estilo padrão do Chrome */
    -moz-appearance: none; /* Remove estilo padrão do FireFox */
    appearance: none;
}

.select-text-option-month {
    border-radius: 8px 0px 0px 8px;
    margin-right: 5px;
    margin-left: -2px;
    margin-top: -23px;
    width: 140px;
    text-decoration: none;
}

.select-text-option-year {
    float: right;
    border-radius: 0px 8px 8px 0px;
    margin-right: 25px;
    margin-left: 166px;
    margin-top: -25px;
    width: 60px;
}

.container-days-of-week{
    width: 250px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 40px;
    background-color: #ffffff;
}

.header-line{
    font-size: 12px;
    color: #000000;
    border: 1px solid #bebebe;
}

.body-line, .actual-day{
    border: 1px solid #c1c1c1;
    text-align: center;
}

.header-line, .body-line, .actual-day{
    width: 30px;
}

.red-day {
    color: #ff0000;
}

.opacity-day{
    background: rgba(10, 10, 10, 0.3);
    -webkit-tap-highlight-color: rgba(10,10,10,0.3);
}

.disabled-day{
    background: rgba(10, 10, 10, 0.5);
    -webkit-tap-highlight-color: rgba(10,10,10,0.5);
    color: #bebebe;
}

.body-line {
    z-index: 10;
}

.actual-day{
    /*border: 2px solid #00a85a;*/
    outline: 2px solid #00a85a;
    outline-offset: -1px;
    z-index: 20;
}

.btn-select-value, .btn-close-container {
    width: 53px;
    height: 30px;
    font-size: 20px;
    background-color: #ffffff;
    border-radius: 10px 10px 10px 10px;
    margin-left: 5px;
    margin-top: 5px;
    border: 2px solid #a1a1a1;
    cursor: pointer;
}

.btn-select-value>.fa-check-circle{
    margin-left: 5px;
    margin-top: 2px;
    position: absolute;
}

.text-btn-select-value {
    color: #000000;
    font-size: 14px;
    margin-top: 2px;
    margin-left: 16px;
}

.btn-close-container{
    float: right;
    margin-right: 5px;
    margin-top: -30px;
}

.btn-close-container>.fa-times-circle{
    margin-left: 15px;
    margin-top: 2px;
    position: absolute;
    color: #f33232;
}

/* Estilo do time plugin */
.time_plugin, .time_plugin_combined {
    width: 165px;
    height: 230px;
    background-color: #e1e1e1;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #a1a1a1;
    -webkit-box-shadow: 4px 7px 17px 0px rgba(50, 50, 50, 0.95);
    -moz-box-shadow:    4px 7px 17px 0px rgba(50, 50, 50, 0.95);
    box-shadow:         4px 7px 17px 0px rgba(50, 50, 50, 0.95);
}

.time_plugin_combined {
    left: 265px;
    position: absolute;
    top: -0px;
}

.container-btn-inc, .container-btn-dec {
    width: 120px;
    height: 30px;
    margin-left: 20px;
    margin-top: 40px;
}

.container-btn-dec {
    margin-top: 1px;
}

.btn-inc-hour, .btn-inc-minute, .btn-dec-hour, .btn-dec-minute{
    width: 53px;
    height: 30px;
    font-size: 20px;
    background-color: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #a1a1a1;
    cursor: pointer;
}

.btn-inc-minute, .btn-dec-minute{
    float: right;
    margin-top: -30px;
}

.btn-inc-hour>.fa-plus-circle, .btn-dec-hour>.fa-minus-circle, .btn-inc-minute>.fa-plus-circle, 
.btn-dec-minute>.fa-minus-circle {
    float: left;
    margin-left: 16px;
    margin-top: 3px;
}

.container-input-values-time {
    width: 120px;
    height: 63px;
    margin-left: 20px;
}

.field-hour, .field-minute {
    width: 53px;
    margin-top: 6px;
    height: 50px;
    font-size: 20px;
    text-align: -moz-center;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #c1c1c1;
}

.field-minute {
    float: right;
}

.separator-time{
    font-size: 20px;
    position: absolute;
    margin-left: 57px;
    margin-top: -40px;
}

.option-invisible{
    display: none;
}

.container-days-of-week>thead>tr>td, .container-days-of-week>tbody>tr>td {
    padding: 0px;
}

.datetime_plugin[mask-me="datahora"], .datetime_plugin[mask-me="data"]{
    background: url(../img/date.png) 92% / 1.6em no-repeat;
}

.datetime_plugin[mask-me="hora"]{
    background: url(../img/time.png) 92% / 1.6em no-repeat;    
}