html, body {
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Lato';
}

.header {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 50px 0 15px;
    box-sizing: border-box;
}

.main {
    width: 50%;
    margin: 0 auto 15px;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    max-width: 950px;
    font-weight: lighter;
}

form#frm_new_date input, form#frm_new_date select {
    width: 200px;
    margin: 5px;
    box-sizing: border-box;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid #999;
}

div#calendario {
    display: inline-block;
}

.footer {
    width: 100%;
    text-align: center;
    margin: 10px 0;
    line-height: 27px;
    display: inline-block;
}

a.btn_reservas {
    width: auto;
    box-sizing: border-box;
    padding: 10px 15px;
    display: inline-block;
    margin: 10px auto;
    border-radius: 5px;
    text-decoration: none;
    transition: .2s;
}

a.back_btn {
    box-sizing: border-box;
    padding: 5px 10px;
    display: block;
    border-radius: 5px;
    text-decoration: none;
    transition: .2s;
    width: 150px;
    text-align: center;
    cursor: pointer;
    margin:10px;
}

.elemento_reserva {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
}

.lista_fecha {
    box-sizing: border-box;
    padding: 7px;
    font-weight: bold;
}

.renglon {
    box-sizing: border-box;
    padding: 5px;
    text-align: left;
    position: relative;
    width: 49%;
    display: inline-block;
}

.foot {
    text-align: right;
    font-size: 13px;
    width: 100%;
}

div#detalle_reserva {
    margin: 10px 0;
}

a.btn_editar {
    width: 100%;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    transition: .2s;
    box-sizing: border-box;
    padding: 10px 15px;
}

p.succes_msg {
    z-index: 9;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    top: 200px;
    width: 300px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    font-size: 22px;
}

p.error_msg {
    z-index: 9;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    top: 200px;
    width: 375px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}

.input_container {
    width: 210px;
    display: inline-block;
}

input#enviar {
    cursor: pointer;
    transition:.2s;
}

.section_title {
    font-weight: bold;
    font-size: 24px;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 15px 0;
}

span.reservas_totales {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 0;
    border-radius: 5px;
    margin-bottom: 2px;
}

select#sel_month {
    font-size: 14px;
    box-sizing: border-box;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

div.tabla_reservas {
    border-radius: 5px;
    width: 48%;
    display: inline-table;
    margin-bottom: 15px;
}

.tabla_reservas .renglon {
    width: 100%;
}

.renglon.titulo {
    font-size: 20px;
    text-align: center;
}

.totales {
    font-size: 23px;
    background-color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid #999;
}

.nota {
    text-align: center;
    font-size: 13px;
}

.tabla_reservas .renglon a, .ingresos_grafica span {
    text-decoration: none;
    box-sizing: border-box;
    padding: 0px 10px;
    border-radius: 5px;
    font-weight: lighter;
}

.fill_reservas {
    position: absolute;
    z-index: -1;
    height: 100%;
    left: 0;
    top: 0;
}

.fill_ingresos {
    position: absolute;
    z-index: -1;
    height: 100%;
    left: 0;
    top: 0;
}

a.btn_salir {
    float: right;
    padding: 3px 10px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 5px;
    text-decoration: none;
    position: absolute;
    top: 10px;
    right: 10px;
}

.alert_past {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    background-color: red;
    color: #fff;
}

span.past_title {
    font-size: 16px;
    display: block;
}

.alert_past a {
    color: #fff;
    display: inline-block;
    margin-bottom: 10px;
}

.past_title b {
    font-size: 18px;
}

a.btn_cambio_bis {
    float: right;
    padding: 3px 10px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 5px;
    text-decoration: none;
    position: absolute;
    top: 10px;
    right: 77px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
    background: transparent;
    font-weight: normal;
    color: #555555;
    border-radius: 5px;
}

.top_belt {
    width: 100%;
    box-sizing: border-box;
    background-color: cadetblue;
    text-align: right;
    color: #fff;
    margin-bottom: 20px;
    position: fixed;
    top: 0;
    z-index: 10;
}

.nav_container {
    width:100%;
}

a.btn_belt {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: lighter;
    font-size: 13px;
    padding: 9px 10px;
    border-left: 1px solid #fff;
    transition: .2s;
}

a.btn_belt:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.btn_toggle_menu {
    display: none;
}

span.title_services {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: lighter;
    width: 109%;
    position: relative;
    background-color: cadetblue;
    top: -15px;
    padding: 5px;
    box-sizing: border-box;
    left: -15px;
    color: #fff;
}

a.btn_services {
    width: 100%;
    text-align: right;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid cadetblue;
    border-radius: 5px;
    padding: 5px 10px;
    color: cadetblue;
    text-decoration: none;
    background-color: rgba(95, 158, 160, 0.23);
    margin: 5px 0;
    transition:.2s;
}

a.btn_services:hover {
    background-color: rgba(95, 158, 160, 0.09);
}

a.btn_services i {
    text-align: left;
    float: left;
    line-height: 21px;
}

span.services_list {
    width: 100%;
    display: block;
    text-align: left;
    margin: 3px 0;
}

span.services_list i {
    float: left;
    margin-right: 10px;
}

.btn_general_negocios {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 5px;
}

.stars_likes {
    text-align: center;
    background-color: #fff;
    padding: 5px;
}

.stars_likes span {
    margin: 0 10px;
    display: inline-block;
}

span.likes_counter {
    color: #fff;
    background-color: #ea6928;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 2px 5px;
}

span.reputation_counter i {
    color: orange;
    font-size: 20px;
    margin: 0 2px;
}

.messages_list {
    display: inline-block;
    width: 500px;
    float: left;
    border-radius: 5px;
    margin: 3px 0px 5px 10px;
}

.messages_list_title {
    background-color: #666;
    color: #fff;
    box-sizing: border-box;
    font-size: 20px;
    padding: 5px;
    border-radius: 5px;
}

.message_header span {
    display: inline-block;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 14px!important;
}

.message_body {
    padding: 5px;
    box-sizing: border-box;
    text-align: justify;
}

.messa_item:nth-child(even) {
    background-color: #e6e6e6;
}

.messa_item {
    border-bottom: 1px solid #999;
    margin: 5px 0;
    border: 1px solid #999;
    border-radius: 5px;
    background-color: #fff;
}

.nombre_negocio_message {
    background-color: rgba(95, 158, 160, 0.68);
    color: #fff;
}

span.sin_mensajes {
    margin: 20px 0;
    box-sizing: border-box;
    display: inline-block;
    font-style: italic;
}

#form_services label:hover {
    background-color: #e6e6e6;
}

.edit_logo {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: relative;
    border: 1px solid #999;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    color: #666;
}

.edit_logo span {
    background-color: rgba(230, 230, 230, 0.86);
    width: 100%;
    text-align: center;
    font-size: 13px;
    display: block;
    position: absolute;
    bottom: 0;
}

.logo_form_container, #prev_img {
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

input#fileToUpload {
    font-size: 15px;
    margin: 15px 0;
    color: #fff;
    background-color: #bbb;
    border-radius: 0 5px 5px 0;
    width: 100%;
}

.instructions_logo {
    font-size: 13px;
    color: #666;
    font-style: italic;
    width: 100%;
    display: block;
    margin: 10px auto;
}

img.logo_admin {
    max-width: 150px;
}

img.logo_header_admin {
    max-width: 200px;
}

img.prev_img_logo {
    width: 100%;
}

span.title_logo_change {
    background-color: #ccc;
    width: 100%;
    box-sizing: border-box;
    display: block;
    font-size: 13px;
    padding: 3px 0;
    color: #666;
}

div#prev_img {
    display: none;
}

.seccion_separada {
    float: left;
    vertical-align: top;
    display: inline-block;
    position: relative;
}

#from_registro {
    margin-right: 10px!important;
}

span.logo_size {
    width: 100%;
    background-color: rgba(204, 204, 204, 0.76);
    display: block;
    position: absolute;
    bottom: 0;
    font-size: 13px;
    color: #fff;
}

.photo_prev {
    width: 122px;
    height: 122px;
    display: inline-block;
    background-size: cover;
    background-position: center;
}

.edit_photo {
    width: 150px;
    height: 150px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #999;
    position: relative;
}

form#form_fotos {
    width: 100%;
    display: inline-block;
    background-color: #fff;
    overflow: hidden;
    padding-top: 15px;
}

.input_files_container {
    display: none;
}

.edit_photo i {
    width: 150px;
    height: 150px;
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 139px;
    position: relative;
    top: 0px;
    z-index: 1;
}

.btn_add_foto {
    width: 150px;
    height: 150px;
    font-size: 146px!important;
    color: cadetblue;
    cursor: pointer;
    transition: .2s;
}

.btn_add_foto:hover {
    color: rgba(95, 158, 160, 0.54);
}

span.remove_imgae i {
    color: #fff;
    font-size: 11px;
    width: 30px;
    height: 30px;
    top: 10px;
}

span.remove_imgae {
    background-color: red;
    position: absolute;
    width: 30px;
    height: 30px;
    top: -1px;
    right: -1px;
    cursor: pointer;
    transition: .2s;
    display: inline-block;
    z-index: 9999;
}

span.remove_imgae:hover {
    background-color: darkred;
}

/* ---- ICONOS ----- */

i.custom_icon_mobiliario {
    background-image: url(../img/icons/custom_icon_mobiliario.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: 100%;
}

i.custom_icon_sonido {
    background-image: url(../img/icons/custom_icon_sonido.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: 100%;
}

i.custom_icon_mesero {
    background-image: url(../img/icons/custom_icon_mesero.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: 100%;
}

i.custom_icon_karaoke {
    background-image: url(../img/icons/custom_icon_karaoke.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: 100%;
}

i.custom_icon_restaurant {
    background-image: url(../img/icons/custom_icon_restaurant.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: 100%;
}

i.custom_icon_piscina {
    background-image: url(../img/icons/custom_icon_piscina.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: 100%;
}

a.btn_belt i {
    margin-right: 10px;
}

.back_btn i.fa.fa-chevron-left {
    float: left;
    margin-top: 2px;
}

a.btn_belt i.temporadas_icon {
    background-image: url(../img/icons/temporadas_ico.png);
    background-size: cover;
    width: 12px;
    height: 13px;
    display: inline-block;
    margin: 2px 10px -2px 0;
}

.main.register #from_registro {
    float: none!important;
    display: inline-block;
}

span.price_item {
    text-align: left;
    width: 51%;
    margin: 5px 0;
    float: left;
}

span.day_title {
    font-weight: bold;
    margin-right: 10px;
}

span.day_price {
    float: right;
}

.second_column {
    display: inline-block;
    width: 40%;
}

#form_prices label, #form_temp label {
    width: 100%;
    text-align: left;
    display: inline-block;
    margin: 5px 0;
}

.input_price {
    float: left;
    box-sizing: border-box;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #999;
    font-size: 16px;
}

#from_registro label {
    width: 100%;
    text-align: left;
    display: inline-block;
}

a.temp_container {
    display: inline-block;
    width: 95%;
    border: 1px solid #999;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    margin: 5px 0;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

span.temp_title {
    display: inline-block;
    width: 105%;
    background-color: #999;
    color: #fff;
    position: relative;
    top: -5px;
    left: -6px;
    border-radius: 5px 5px 0 0;
}

span.temp_date {
    width: 50%;
    color: #333;
    display: inline-block;
    font-size: 13px;
    margin-bottom: 5px;
}

span.pct {
    display: inline-block;
    margin: 0 3px;
    color: #333;
    font-size: 13px;
    width: 22%;
    float: left;
    text-align: left;
}

a.temp_container:hover {
    border-width: 2px;
}

.select_menu {
    display: none;
}

select.select_menu {
    width: 99%;
    box-sizing: border-box;
    padding: 10px 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #999;
}

.input_temp {
    width: 50%!important;
    float: left;
    margin-right: 5px;
}

select.sel_sign {
    width: 55px!important;
    float: left;
    margin-right: 5px;
}

span.perc_inputs {
    float: left;
}

textarea.temp_description {
    width: 100%;
    height: 100px;
    border-radius: 5px;
}

.dates_container {
    width: 48%;
    float: left;
    margin-right: 5px;
}

input#datepicker, input#datepicker2 {
    background-image: url(../img/calendario_gris.jpg);
    background-repeat: no-repeat;
    background-position: 95% center;
}

.extra_btns {
    background-color: #fff;
    width: 82%;
    margin: 10px auto;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    height: auto;
    display: inline-block;
}

input#eliminar {
    box-sizing: border-box;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 16px;
    width: auto;
    background-color: #cd0a0a;
    color: #fff;
    border: none;
    cursor: pointer;
}

input#eliminar:hover {
    background-color: darkred;
}

input#desactivar {
    box-sizing: border-box;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 16px;
    width: auto;
    background-color: orange;
    color: #fff;
    border: none;
    cursor: pointer;
}

input#desactivar:hover {
    background-color: #a76f09;
}

input#activar {
    box-sizing: border-box;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 16px;
    width: auto;
    background-color: green;
    color: #fff;
    border: none;
    cursor: pointer;
}

input#activar:hover {
    background-color: darkgreen;
}

form#form_temp3, form#form_temp2 {
    width: 50%;
    float: left;
}

.temp_Activa {
    background-color: green;
    color: #fff;
    display: inline-block;
    position: absolute;
    z-index: 99;
    bottom: -1px;
    right: -3px;
    box-sizing: border-box;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 13px;
}

.temp_Desactivada {
    background-color: red;
    color: #fff;
    display: inline-block;
    position: absolute;
    z-index: 99;
    bottom: -1px;
    right: -3px;
    box-sizing: border-box;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 13px;
}

#from_registro .extra_btns {
    width: 100%;
    display: inline-block;
    height: auto;
    border: none;
}

#from_registro #desactivar, #from_registro #eliminar {
    width: 80%;
}

span.txt_status {
    background-color: red;
    position: absolute;
    top: -7px;
    right: -19px;
    color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0px 7px;
    border: 1px solid #fff;
}

a.btn_recuperar {
    color: cadetblue;
    margin: 15px 18px 3px;
    display: inline-block;
    text-decoration: none;
}

#from_registro ul li {
    text-align: left;
}

#from_registro p {
    text-align: justify;
}

div#terminos {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
    padding: 15px;
    text-align: justify;
}

#from_registro label input {
    display: inline-block;
    width: auto;
}

.instructions_logo a {
    color: cadetblue;
}

.seccion_separada span.title_services {
    cursor: pointer;
}

.seccion_separada span.title_services:hover {
    background: teal;
}

.title_services i {
    float: right;
    margin: 0;
    position: relative;
    right: 30px;
}

.footer a {
    color: #000;
    text-decoration: none;
    margin: 0 15px;
}

.footer a i {
    margin-right: 5px;
}

#comments {
    width: 100%;
    margin: 5px;
    box-sizing: border-box;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid #999;
}

a.reclaim_btn {
    background-color: gold;
    color: #666;
    padding: .2em .5em;
}

a.report_btn {
    background-color: tomato;
    color: #fff;
    padding: .2em .5em;
}

.loader_back {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.loader_back img {
    top: 20%;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}

@media screen and (max-width: 1500px) {
    .main {
        width: 80%;
    }
}

@media screen and (max-width: 680px) {
	.main {
	    width: 90%;
	}

	p.error_msg {
	    width: 100%;
        width: 100%;
        display: inline-block;
	}

	div.tabla_reservas {
		width: 100%;
	}

    .renglon {
        width:100%;
    }

    .nav_container {
        width: 50%;
        position: absolute;
        z-index: 14;
        background-color: cadetblue;
        left: -50%;
        transition:.2s;
    }

    a.btn_belt {
        width: 87%;
        text-align: left;
        border-bottom: 1px solid #fff;
        border-left: none;
    }

    .btn_toggle_menu {
        display: block;
        position: absolute;
        top: 0;
        right: -44px;
        background-color: cadetblue;
        color: #fff;
        padding: 7px 15px;
        box-sizing: border-box;
    }

    .top_belt {
        height:35px;
    }

    .messages_list {
        margin:10px 0;
        width:100%;
    }

    .#from_registro {
        float: none;
    }

    .seccion_separada {
        float:none;
        margin-left:0!important;
    }

    input#enviar {
        float: none!important;
    }

    span.title_services {
        width: 111%;
    }

    .second_column {
        width: 100%;
    }

    .select_menu {
        display: inline-block;
    }

    .dates_container {
        width: 100%;
    }

    #from_registro .extra_btns {
        width: 100%;
        height: 88px;
        display: none;
    }

    .toggle_container {
        display: none;
    }

}