.internal-booking {
    padding: 40px 50px;
}


/*------------Flex Header----------*/

.internal-booking-header-flex {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.internal-booking-header-flex-right {
    margin-left: auto;
    display: flex;
    gap: 20px;
}

.internal-booking-header-flex .cp-booking-sub-title {
    margin-bottom: 0px;
}


/*------------Loading----------*/

.internal-booking-loading {
    text-align: center;
    padding: 80px;
    width: 100%;
}

.internal-booking-loading img {
    width: 60px;
}


/*------------Button----------*/

.internal-booking-button {
    background: var(--title-color);
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 11px;
    color: white;
    font-weight: 600;
    gap: 6px;
    border-radius: var(--customer-portal-border-radius);
    cursor: pointer;
}

.internal-booking-button img {
    width: 17px;
}

.internal-booking-button span {
    position: relative;
    bottom: 1px;
}


/*------------Datepicker----------*/

html body .ui-datepicker {
    width: 280px;
    border-radius: var(--customer-portal-border-radius);
    padding: 15px;
    box-shadow: none;
    border: 1px solid #d9e0e6;
}

html body .ui-datepicker .ui-datepicker-header {
    background: var(--title-color);
    padding: 10px 0px;
    padding-top: 0px;
    background: white;
    border-radius: var(--customer-portal-border-radius);
}

html body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev, html body .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    color: var(--title-color);
}

html body .ui-datepicker .ui-datepicker-month, html body .ui-datepicker .ui-datepicker-year {
    background: white;
    color: black;
    font-size: 11pt;
    font-weight: 700;
    width: 35px;
}

html body .ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day {
    background: var(--title-color);
}

html body .ui-datepicker .ui-datepicker-calendar thead {
    font-size: 10pt;
}

html body .ui-datepicker .ui-datepicker-calendar td, html body .ui-datepicker .ui-datepicker-calendar td a {
    font-size: 10pt;
}

html body .ui-datepicker .ui-datepicker-calendar th, html body .ui-datepicker .ui-datepicker-calendar td {
    padding: 10px 0px;
}

/*______________________________________________Booking________________________________________*/

.internal-booking-form {
    padding-left: 40px;
    margin-left: 20px;
    position: relative;
}

.internal-booking-form-line {
    height: 100%;
    width: 4px;
    position: absolute;
    background: var(--title-color);
    left: 0px;
    z-index: 0;
    opacity: 0.3;
    border-radius: 10px;
}


.internal-booking-no-results {
    padding: 25px;
    border-radius: var(--customer-portal-border-radius);
    border: 1px solid #d9e0e6;
    font-size: 110%;
}

.internal-booking-error {
    border: 1px solid #f21818;
    border-radius: var(--customer-portal-border-radius);
    padding: 22px;
    color: #f21818;
    font-weight: 500;
    margin-top: 20px;
    font-size: 105%;
}

/*-----Booking Cancel Message-----*/
.internal-booking-cancel-success {
    margin-bottom: 30px;
}

/*-----Availability Message-----*/
.internal-booking-availability-error {
    margin-top: 0px;
    margin-bottom: 30px;
}


/*------------Timer------------*/
.internal-booking-timer {
    padding: 22px;
    border: 1px solid var(--title-color);
    color: var(--title-color);
    border-radius: var(--customer-portal-border-radius);
    margin-bottom: 30px;
    font-size: 105%;
}

.internal-booking-timer-time {
    font-weight: 700;
}

/*------------Form Title------------*/

.ib-form-title {
    background: var(--title-color);
    display: inline-block;
    color: white;
    padding: 10px 20px;
    border-radius: var(--customer-portal-border-radius);
    font-weight: 600;
    margin-bottom: 25px;
    margin-left: -60px;
}


/*-------------Section-------------*/
.internal-booking-section {
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}


/*------------Booking Button----------*/

.internal-booking-button.ib-booking-button {
    padding: 16px 35px;
}

.internal-booking-button.ib-booking-button img {
    width: 20px;
}

.internal-booking-button.ib-cancel-booking {
    background: #f21818;
}

.internal-booking-button.ib-reset {
    color: #f21818;
    border: 1px solid #f21818;
    background: white;
}


/*------------Booking Name----------*/
.interal-booking-name {
    flex-grow: 2;
}


/*------------Inputs----------*/

.internal-booking-inputs {
    display: flex;
    align-items: end;
    gap: 20px;
}

.internal-booking-inputs > div {
    flex-grow: 1;
}

.ib-label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
}

.ib-input {
    border: 1px solid #d9e0e6;
    padding: 16px;
    width: 100%;
    border-radius: var(--customer-portal-border-radius);
    font-weight: 500;
}

.ib-input[type='time'] {
    padding: 14px 18px;
}

select.ib-input {
    padding: 18px 18px;
}

.ib-booking-button.ib-search-room {
    padding: 17px 25px;
}

.ib-delegates-cont {
    width: 100px;
}

html body .ib-date-plus-minus-cont{
    display:flex;
    align-items:center;
    gap:10px;
    align-self:center;
    padding-top:35px;
}

.ib-date-plus-minus-cont label{
    cursor:pointer;
    user-select: none;
}

html body .ib-date-plus-minus{
    position:relative;
    bottom:4px;
    transform:scale(1.3);
}


/*------------Rooms----------*/

.internal-booking-rooms {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.internal-booking-room {
    display: flex;
    align-items: stretch;
    gap: 30px;
    padding: 25px;
    border: 1px solid #d9e0e6;
    border-radius: var(--customer-portal-border-radius);
    line-height: 1.3;
}

.ib-room-image img {
    width: 165px;
    max-width: 100%;
    border-radius: var(--customer-portal-border-radius);
}

.ib-room-icon-bg {
    width: 165px;
    background: var(--title-color);
    text-align: center;
    opacity: 0.5;
    padding: 27px;
    border-radius: var(--customer-portal-border-radius);
}

.ib-room-icon-bg img {
    width: 60px;
}

.ib-room-info {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
    flex-grow: 2;
}

.ib-room-info > div:nth-child(1) {
    align-self: center;
}

.ib-room-info-name {
    font-size: 140%;
    font-weight: 700;
    margin-bottom: 10px;
}

.ib-room-info > div:nth-child(2) {
    margin-left: auto;
}

.ib-room-info-dates-cont{
    margin-top:15px;
}

.ib-room-info-dates-cont label{
    font-weight:400;
    color:#697681;
    margin-bottom:12px;
}

.ib-room-info-dates{
    display:flex;
    gap: 15px;
    flex-wrap:wrap;
}

.ib-room-date {
    padding: 15px 20px;
    border: 1px solid #d9e0e6;
    color:black;
    font-weight:600;
    border-radius: var(--customer-portal-border-radius);
    cursor:pointer;
    text-align:center;
}

.ib-room-date-select img{
    width:20px;
}

.ib-room-date-select:hover{
    background:var(--title-color);
    color:white;
    border-color:var(--title-color);
}

.ib-room-date-no-select{
    cursor:default;
    display:inline-block;
    margin-top:15px;
}

/*------------Items----------*/

.internal-booking-items {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    align-items: start;
}

.internal-booking-item {
    padding: 25px;
    border: 1px solid #d9e0e6;
    border-radius: var(--customer-portal-border-radius);
    width: 23%;
    max-width: 24%;
    flex-grow: 2;
    line-height: 1.3;
}

.internal-booking-item.internal-booking-item-selected {
    border: 2px solid var(--title-color);
}

.ib-item-image {
    margin-bottom: 15px;
}

.ib-item-image img {
    max-width: 165px;
    max-width: 100%;
    border-radius: var(--customer-portal-border-radius);
}

.ib-item-icon-bg {
    max-width: 165px;
    max-width: 100%;
    background: var(--title-color);
    text-align: center;
    opacity: 0.5;
    padding: 35px;
    border-radius: var(--customer-portal-border-radius);
}

.ib-item-icon-bg img {
    width: 60px;
}

.ib-item-info > div {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ib-item-info > div:last-child {
    margin-bottom: 0px;
}

.ib-item-info-name {
    font-size: 120%;
    font-weight: 700;
}

.ib-item-info label {
    margin-bottom: 0px;
}

.ib-item-qty {
    width: 100px;
    padding: 12px;
}


/*------------Buttons----------*/

.internal-booking-buttons {
    display: flex;
    gap: 20px;
}

.internal-booking-buttons > div {
    flex-grow: 0;
}

.internal-booking-buttons .ib-cancel-booking {
    flex-grow: 0;
}

.internal-booking-buttons .ib-save-booking {
    flex-grow: 10;
}


/*______________________Responsive_______________________*/

@media screen and (max-width: 1280px) {
    .internal-booking-inputs {
        flex-wrap: wrap;
    }

    html body .internal-booking-item {
        max-width: unset;
    }
}

@media screen and (max-width:800px) {
    .ib-room-info {
        flex-wrap: wrap;
    }

    html body .internal-booking-item {
        width: 45%;
    }

    html body .internal-booking-buttons {
        flex-wrap: wrap;
    }
}

@media screen and (max-width:600px) {
    .internal-booking {
        padding: 25px;
    }

    .internal-booking-room {
        flex-wrap: wrap;
    }

    .internal-booking-items {
        flex-wrap: wrap;
    }

    html body .internal-booking-item {
        width: 100%;
    }

    html body .internal-booking-buttons .internal-booking-button {
        width: 100%;
    }
}