/*
* {
  border: 1px solid #111;
}
*/

.ui-autocomplete {
    z-index:2000;}

html {
  position: relative;
  min-height: 100%;
}

body {
    padding-top: 66px;
    margin-bottom: 35px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  min-height: 35px;
  background-color: #f8f9fa;
  border-top: 1px solid #e7e7e7;
}

.footer a {
    color: #959595;
}

.footer-copyright {
    color: #959595;
    line-height: 35px;
    min-height: 35px;
}

.footer-links {
    color: #959595;
    line-height: 35px;
    min-height: 35px;
    text-align: right;
}

.form-label {
    color: #959595;
}

.legend-circle {
      width: 20px;
      height: 20px;
      border-radius: 10px;
      margin: 5px;
      float: left;
    }

.legend-free {
    background: #8DC63F;
}

.legend-requested {
    background: #EBEB00;
}

.legend-full {
    background: #CB2439;
}

.legend-reserved {
    background: #00BCE4;
}

.legend-text{
    color: #939393;
}

#caption-car-id{
    color: #939393;
    text-align: right;
}

.input-group-btn-light{
    border-color:#cdd4da;
}

.accordion-button-iconless::after {
  display: none !important;
}

.accordion-button-left::before {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 1rem;
    content: "";
    background-image: var(--bs-accordion-btn-active-icon);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: None;
}

.accordion-button:not(.collapsed)::before{
    background-image:var(--bs-accordion-btn-active-icon);
    transform:var(--bs-accordion-btn-icon-transform)
}

.accordion-button-left::after {
    display: none !important;
}

/* =================================
     Gradients
   =================================*/

.gradient-purple{
    background: linear-gradient(40deg, #9072ec, #e96fcc) !important;
}
.gradient-blue{
    background: linear-gradient(40deg, #3459b0, #42b4ed) !important;
}
.gradient-aqua{
    background: linear-gradient(40deg, #0aedb3, #1ca6f1) !important;
}
.gradient-peach{
    background: linear-gradient(40deg, #fc7564, #ffc66d) !important;
}
.gradient-honeydew{
    background: linear-gradient(40deg, #43C6AC, #F8FFAE) !important;
}
.gradient-vicecity{
    background: linear-gradient(300deg, #3494E6, #EC6EAD) !important;
}
.gradient-twitch{
    background: linear-gradient(40deg, #6441a5, #2a0845) !important;
}
.gradient-harmonicenergy{
    background: linear-gradient(40deg, #16a085, #f4d03f) !important;
}
.gradient-antarctica{
    background: linear-gradient(40deg, #D8B5FF, #1EAE98) !important;
}

.gradient-danger{
    background: linear-gradient(to right, #eb3349, #f45c43) !important;
}

.gradient-warning{
    background: linear-gradient(to right, #FBB034, #FFDD00) !important;
}

.gradient-notify{
    background: linear-gradient(to right, #2193b0, #6dd5ed) !important;
}

.gradient-ok{
    background: linear-gradient(to right, #56ab2f, #a8e063) !important;
}

/* =================================
     PRIVACY POLICY
   =================================*/

.paragraph-privacy-policy p {
    text-align: justify;
}

.paragraph-privacy-policy ul li {
    text-align: justify;
}

/* =================================
     RESERV SINGLE - ADMIN DAY BOXES
   =================================*/

#lots table{
    padding: 0;
    margin: 0;
    width: 100%;
}

#lots tr{
    height: 50px;
}

#lots td{
    padding: 0 10px 0 10px;
    vertical-align: middle;
}

#lots td.lot-reserved-name{
    text-align:right;
}

#lots td:hover {
    cursor: pointer;
}

/* =================================
     RESERV SINGLE - CALENDAR
   =================================*/

#calendar {
    width: 100%;
}

#calendar a {
    color: #8e352e;
    text-decoration: none;
}

#calendar-monthform{
    float: right;
    margin-left: 15px;
}

.calendar-month_actions{
    line-height:34px;
    height:34px;
    margin-bottom: 10px;
}

#calendar-monthname {
    line-height: 38px;
    float: right;
    vertical-align: middle;
    font-size: 18px;
    font-weight: bold;
    color: #939393;
}

#calendar-userform{
    float: left;
    margin-left: 15px;
}

#calendar-username{
    float: left;
    vertical-align: middle;
    font-size: 18px;
    font-weight: bold;
    color: #939393;
}

#calendar ul.weekdays {
    height: 40px;
}

#calendar ul.weekdays li {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #939393;
    height: 20px;
    border: none !important;
    padding: 10px 6px;
    font-size: 13px;
}

#calendar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#calendar li {
    display: block;
    float: left;
    height: 100px;
    width: 14.342%;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #d5d5d5;
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
    cursor: pointer;
}

#calendar .date {
    position: absolute;
    top: 8px;
    left: 10px;
    color: #eee;
    font-weight: bold;
}


#calendar .date-current {
    color: #acacac;
}

#calendar .date-box-current {
    background: #d5d5d5;
    border-radius: 10%;
    height: 26px;
    width: 26px;
    position: absolute;
    top: 5px;
    left: 5px;
}

#calendar .date-noedit {
    color: #acacac;
}

#calendar .box-id {
    color: #eee;
    position: absolute;
    bottom: 8px;
    right: 10px;
}

#calendar .occupied-info {
    color: #eee;
    position: absolute;
    top: 8px;
    right: 10px;
}

#calendar .other-month {
    border: none;
}

#calendar .days .day-reserved-edit{
    background: #00BCE4;
}

#calendar .days .day-reserved-edit:hover{
    background: #00A7CC;
}

#calendar .days .day-reserved-noedit{
    background: #0AD2FF;
}

#calendar .days .day-reserved-noedit:hover{
    background: #0AD2FF;
}

#calendar .days .day-full-edit{
    background: #CB2439;
}

#calendar .days .day-full-edit:hover{
    background: #BF2237;
}

#calendar .days .day-full-noedit{
    background: #E05265;
}

#calendar .days .day-full-noedit:hover{
    background: #DD4055;
}

#calendar .days .day-free-edit{
    background: #8DC63F;
}

#calendar .days .day-free-edit:hover{
    background: #85BC38;
}

#calendar .days .day-requested{
    background: #EBEB00;
}

#calendar .days .day-requested:hover{
    background: #d3c515;
}

#calendar .days .day-free-noedit{
    background: #EBEBEB;
}

#calendar .days .day-free-noedit:hover{
    background: #E0E0E0;
}

#calendar .days .day-processing{
    background: #858585;
}

#calendar .days .other-month {
    background: none;
}

#calendar .days .other-month:hover {
    background: none;
}

/* =================================
     Reservation2.0 legend
   =================================*/

.rlegend-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.rlegend-text {
  display: inline-block;
  vertical-align: middle;
  color: #555;
  line-height: 1.4;
}

.rlegend-granted {
    background: #8DC63F;
}

.rlegend-requested {
    background: #00BCE4;
}

.rlegend-not-drawn {
    background: #CB2439;
}

.rlegend-not-drawn-retry-possible {
    background: #F89C1D;
}

.rlegend-reserving-disabled {
    background: #C8C8C8;
}

.rlegend-reserving-enabled {
    background: #F5F5F5;
    border: 1px solid #BBBBBB;
}

/* =================================
     Reservation2.0 calendar colors
   =================================*/

/* MONTH FORM */
#rcalendar-month_actions {
    margin-bottom: 10px;
}

.rcalendar-month-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
    height: 40px;
}

#rcalendar-monthname {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

#rcalendar-monthform {
    display: flex;
    gap: 6px;
}

/* WEEKDAYS HEADER */
#rcalendar ul.weekdays {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#rcalendar ul.weekdays li {
    flex: 1;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #333;
    padding: 10px 6px;
    font-size: 13px;
}

/* CALENDAR BODY */
#rcalendar ul.days {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
}

/* DAY CELL */
#rcalendar li.day {
    flex: 0 0 14.2857%; /* 100 / 7 days */
    height: 100px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #d5d5d5;
    position: relative;
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

/* OTHER MONTH DAY */
#rcalendar .days .other-month {
    background: none;
    border: none;
    cursor: default;
}

/* DAY CAPTION */
#rcalendar .date-box {
    position: absolute;
    top: 6px;
    left: 6px;
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rcalendar .date-current {
    position: relative;
    font-weight: 800;
    color: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

#rcalendar .date {
    position: relative;
    font-weight: bold;
    color: inherit;
    font-size: 14px;
}

/* BADGE ICON */
#rcalendar .badge-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: inherit;
    font-size: 14px;
    z-index: 2;
}

#rcalendar .day-badge-icon i {
    pointer-events: none;
}


/* LOT ID BADGE */
#rcalendar .box-id {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* STATES & COLORS */

#rcalendar .days .day {
    transition: box-shadow 0.15s ease-in-out, transform 0.1s ease-in-out;
    box-sizing: border-box;
}

#rcalendar .days .other-month {
    background: none;
    border: none;
    cursor: default;
}

#rcalendar .days .reserving-disabled{
    background: #C8C8C8;
    color: #333;
    cursor: default;
}

#rcalendar .days .reserving-enabled{
    background: #F5F5F5;
    color: #333;
}
#rcalendar .days .reserving-enabled:hover {
    box-shadow: inset 0 0 0 2px #bbb;
    transform: scale(1.02);
    z-index: 2;
    position: relative;
}

#rcalendar .days .reservation-requested{
    background: #00BCE4;
    color: #FFFFFF;
}
#rcalendar .days .reservation-requested:hover {
    box-shadow: inset 0 0 0 2px #009ABF;
    transform: scale(1.02);
    z-index: 2;
    position: relative;
}

#rcalendar .days .reservation-granted{
    background: #8DC63F;
    color: #FFFFFF;
}
#rcalendar .days .reservation-granted:hover {
    box-shadow: inset 0 0 0 2px #6DA02F;
    transform: scale(1.02);
    z-index: 2;
    position: relative;
}

#rcalendar .days .reservation-not-drawn{
    background: #CB2439;
    color: #FFFFFF;
}
#rcalendar .days .reservation-not-drawn:hover {
    box-shadow: inset 0 0 0 2px #A81D2F;
    transform: scale(1.02);
    z-index: 2;
    position: relative;
}

#rcalendar .days .reservation-not-drawn-retry-possible{
    background: #F89C1D;
    color: #FFFFFF;
}
#rcalendar .days .reservation-not-drawn-retry-possible:hover {
    box-shadow: inset 0 0 0 2px #E07E00;
    transform: scale(1.02);
    z-index: 2;
    position: relative;
}

/* RESERVATION DETAILS */

#rcalendar .reservation-details {
    position: absolute;
    bottom: 6px;
    left: 14px;
    right: 6px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
}

#rcalendar .reservation-line {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

#rcalendar .reservation-line i {
    font-size: 13px;
}

/* =================================
     Discount
   =================================*/

#ticket_info p {
    font-weight: bold;
    color: #939393;
    line-height: 15px;
    font-size: 15px;
}

#ticket_info #ticket_info_price{
    line-height: 25px;
    color: #656565;
    font-size: 20px;
}

#ticket_info #ticket_info_status {
    line-height: 25px;
    color: #656565;
    font-size: 20px;
}

.form-control-clear {
    align-items: center;
    color: #939393;
    cursor: pointer;
    display: flex;
    height: 48px;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 48px;
    z-index: 10;
}

/* =================================
     City Card
   =================================*/

#ticket_info .ticket_info_bold{
    line-height: 25px;
    color: #656565;
    font-size: 20px;
}

/* =================================
     Modal dialogs
   =================================*/

.dialog-danger-header {
      background-color: #dc3746;
      color:white !important;
}

.dialog-danger-header h4 {
    text-align: center;
    font-size: 30px;
}

.dialog-warning-header {
    background-color: #ffc20d;
    color:white !important;
}

.dialog-warning-header h4 {
    text-align: center;
    font-size: 30px;
}

.dialog-info-header {
    background-color: #1ba3b9;
    color:white !important;
}

.dialog-info-header h4 {
    text-align: center;
    font-size: 30px;
}

/* =================================
     Filter dialogs
   =================================*/

.highlighted {
    border: 2px solid #1ba3b9;
}

/* =================================
     Parking monitor
   =================================*/

.card-content-default{
    overflow-y: auto;
    min-height: 280px;
    max-height: 280px;
}

.card-content-ps{
    overflow-y: auto;
    min-height: 280px;
}

.card-centered-info{
    position: relative;
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    font-size: 20px;
    text-align: center;
    color:#dae0e5;
}

@media only screen and (min-width: 992px) {
    .card-centered-info{
        position: absolute;
        top: 50%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
}

.icon-tabs-left button.btn{
    min-height: 48px;
    min-width: 48px;
}

.villa-badge-counter{
    position: relative;
    top: -15px;
    left: -5px;
}

.villa-badge-counter-danger{
    color: #d53343;
}

.villa-badge-counter-warning{
    color: #ffc107;
}

.villa-badge-counter-notif{
    color: #1ba3b9;
}

.villa-progress-bar-text{
    position: absolute;
    display: block;
}

/* =================================
     Parking settings
   =================================*/

.sidebar li .submenu{
	list-style: none;
	margin: 0;
    padding: 0 1rem;
}
.sidebar .nav-link {
    font-weight: 500;
    color: var(--bs-dark);
}
.sidebar .nav-link:hover {
    color: var(--bs-primary);
}

.card-header-collapsible .fa {
    transition: .3s transform ease-in-out;
}
.card-header-collapsible .collapsed .fa {
    transform: rotate(90deg);
}


.bootstrap-tagsinput .tag [data-role="remove"]:after{
      content: " \00d7";
  }

/* =================================
     Visits
   =================================*/

.progress-label {
    float: right;
    font-weight: bold;
    color: #939393;
}

/* =================================
     Parking manager
   =================================*/

.ticket-link-delete {
    color: black;
    float: right;
    cursor: pointer;
}

/* =================================
     Residence
   =================================*/

.tagify__input, .car-id-input {
    text-transform: uppercase;
}

/* =================================
     Reservations
   =================================*/

.card-tab-link:link{
    color: white;
    text-decoration: underline;
}

.tempus-dominus-widget.inline{
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
}

/* =================================
     Mobile Responsiveness
   =================================*/

@media(max-width: 1200px) {
    .icon-tabs-left {
        padding-right: 0px;
    }
}

@media (max-width: 992px) {
    .icon-tabs-left{
        border-right:none !important;
    }

    .villa-badge-counter{
        position: relative;
        top: -2px !important;
        left: 0px !important;
    }

}

@media(max-width: 768px) {

    body {
        margin-bottom: 70px;
    }

    #calendar .weekdays, #calendar .other-month {
        display: none;
    }

    #calendar li {
        height: 50px;
        border: 1px solid #ededed;
        width: 100%;
        margin-bottom: -1px;
    }

    #calendar .date-box-current {
        top: 11.5px;
        left: 5px;
    }

    #calendar .date {
        top: 14.5px;
        left: 10px;
    }

    #calendar .box-id {
        bottom: 2px;
        right: 10px;
    }

    #calendar .occupied-info {
        top: 2px;
        right: 10px;
    }

    #calendar-userform{
        margin-left: 0px;
    }

    .dialog-info-header, .dialog-info-header h4, .dialog-info-close {
        font-size: 20px;
    }

    .ui-autocomplete.ui-widget {
        font-size: 22px;
    }
}