/* ==UserStyle==
@name           EA registration form overrides
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    PANEL theme
@author         Warren Prasek
==/UserStyle== */




    /* ******************************************************
    *********************************************************
    General layout
    *********************************************************
    ****************************************************** */
    .body-content {
        padding: 0
    }
    #main-form {
        margin: 0 0 -50px 0 !important;
        max-width: 100% !important;
        box-shadow: none;
        padding: 0
    }
    .main-form {
        background: none !important
    }

    /* Hide annoying lines between radio/checkbox rows */
    input + hr,
    .row + hr {
        display: none
    }
    .row {
        box-shadow: none
    }

    /* ********** INTRO HEADER ********* */
    .brand-header-bg {
        margin: 0 !Important
    }
    .brand-header-bg img {
        width: 100%;
    }
    .progress {
        margin: 24px 20%;
        border-radius: 32px
    }

    *[disabled="disabled"] {
        opacity: 0.25 !important
    }




    /* ******** SPLASH PAGE INTRO TEXT FOR AIRTIME 2023 ******* */
    .alert-container + .component > form.dynamic-target .container {
        background: #fff;
        width: 90%;
        border-radius: 16px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        padding: 0 24px;
    }





    /* ******************************************************
    *********************************************************
    Form section panels
    *********************************************************
    ****************************************************** */
    .theme-panel,
    .alert-container {
        background: #fff;
        width: 90%;
        margin: 16px auto;
        border-radius: 16px;
        border: none !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2)
    }

    /* Column headings for pricing */
    .text-muted {
        opacity: 0.5
    }


    /* ********** REGISTRATION TYPE PANEL ********* */
    .theme-component-registration {
        padding: 0
    }


    /* Hide redundant "amount" labels */
    .theme-component-registration .text-muted.small {
        display: none
    }

    /* Hide redundant "total" column */
    .theme-component-registration .col-sm-6 + .col-sm-6 {
        display: none
    }
    .theme-component-registration .col-sm-6 {
        margin-top: 24px
    }

    .row.discount-code > .form-group {
        margin-top: -16px
    }



    /* ********** FUNCTION PANEL ********* */
    .function-date-time > span {
        font-style: normal/* Not italic, ugh */
    }

    /* Hide redundant "Amount" and "Total" labels */
    .function-date-time + .row.checkbox .text-muted.small {
        display: none
    }

    /* Hide redundant "total" column */
    .function-date-time + .theme-feetype-box .col-sm-6 + .col-sm-6 {
        display: none !important
    }

    /* Fix width of Amount column  */
    .function-date-time + .theme-feetype-box .theme-box.col-xs-4 {
        width: 50%;
        margin-left: 50%
    }
    .function-date-time + .theme-feetype-box .theme-box.col-xs-4 .col-sm-6 {
        width: 100%;
        margin-top: 0;
    }





    /* ********** GUEST DETAILS INSET ********* */
    .well-sm {
        border: none;
        box-shadow: none;
        background: none
    }

    .well-sm div[data-templateplaceholder="guestNames"] > div {
        background: #f4f4f4;
        border: none;
        box-shadow: none;
        border-radius: 12px;
        padding: 16px 16px 0 16px;
        margin-bottom: 16px
    }

    .well-sm h4 {
        font-weight: bold;
    }



    /* MULTI-CLICKER */
    button[aria-label="Decrease"] .fa,
    button[aria-label="Increase Ticket"] .fa {
        opacity: 0.7
    }

    button[aria-label="Decrease"]:hover .fa,
    button[aria-label="Increase Ticket"]:hover .fa {
        opacity: 1
    }

    button[aria-label="Decrease"]:active .fa,
    button[aria-label="Increase Ticket"]:active .fa {
        opacity: 0.5
    }


    .theme-feetype-box .col-sm-2 {
        min-width: 130px;
        padding-right: 0;
        padding-top: 16px
    }

    /* Label under multi-clicker (and radio buttons) */
    .theme-feetype-box .col-sm-2 + .col-xs-6 {
        padding: 0;
        line-height: 1.2em
    }





    /* ******** MOBILE ONLY ******** */
    @media screen and (max-width:767px) {
        /* Pad left for labels below multi-clickers */
        .theme-feetype-box .col-sm-2[style="padding-left: 0px;margin-top: -6px;"] + .col-xs-6 {
            padding-left: 32px
        }
    }
    /* ******** END MOBILE ONLY ******** */
    /* ******** IPAD ******** */
    @media screen and (min-width:768px) {

        .radio.theme-feetype-box .col-sm-2 {
            min-width: 48px;
            width: 48px !Important;
        }

        
        .radio.theme-feetype-box .col-sm-2 + .col-xs-6 {padding-top:2px !important}
        .radio.theme-feetype-box .col-sm-2 + .col-xs-6 + .col-xs-4 {padding-top:8px !important}

        /* Multi-clicker labels and pricing columns */        
        .theme-feetype-box .col-sm-2[style="padding-left: 0px;margin-top: -6px;"] {
            min-width: 0;
            width: 130px !Important
        }
        
        .theme-feetype-box .col-sm-2[style="padding-left: 0px;margin-top: -6px;"] + .col-xs-6 {
            padding-top:18px !Important
        }
        
        .theme-feetype-box .col-sm-2[style="padding-left: 0px;margin-top: -6px;"] + .col-xs-6 + .col-xs-4 {
            padding-top:14px !important
        }
        
        
    }
    /* ******** END IPAD ******** */
    /* Move up amount/total columns to RHS Of multi-clicker */
    .theme-feetype-box .col-sm-2[style="padding-left: 0px;margin-top: -6px;"] + .col-xs-6 + .theme-box.col-xs-4 {
        width: 66%;
        margin-left: 33%;
        padding-right: 24px;
        margin-top: -72px;
    }


    input[data-inv-type="DiscountCode"] {
        max-width: 250px
    }

    /* Amount column */
    .theme-feetype-box .col-sm-2 + .col-xs-6 + .theme-box.col-xs-4 .col-xs-12 {
        width: 60%
    }

    /* Total column */
    .theme-feetype-box .col-sm-2 + .col-xs-6 + .theme-box.col-xs-4 .col-xs-12 + .col-xs-12 {
        width: 40%
    }


    /* SINGLE CHECKBOX ROW -- NOT MULTICLICKER */
    /* Reduce gap between function date and first checkbox row */
    .function-date-time + .checkbox.theme-feetype-box {
        padding-top: 0
    }

    .theme-feetype-box.checkbox .col-sm-2 + .col-xs-6 + .theme-box.col-xs-4 {
        margin-top: -20px;
    }

    /* Checkbox Label */
    .theme-feetype-box.checkbox .col-sm-2 + .col-xs-6 {
        text-align: left !important;
    }


    /* Amount */
    .theme-feetype-box.checkbox .col-sm-2 + .col-xs-6 + .theme-box.col-xs-4 .col-sm-6 {
        width: 100% !Important;
    }

    /* Reduce vertical gap between selections */
    .theme-feetype-box + input + .theme-feetype-box {
        border-top: 1px solid #eee;
        margin-top: 8px
    }


    /* Tweak spacing for lines inbetween ticket types */
    .theme-feetype-box {
        margin-bottom: 0 !important
    }






    /* ********** ACCOMMODATION ********* */
    #check-in-out .col-xs-12 {
        margin-bottom: 16px !important
    }

    /* Up to 5 different Hotel info panels */
    #check-in-out + .theme-panel, 
    #check-in-out + .theme-panel + .theme-panel,
    #check-in-out + .theme-panel + .theme-panel + .theme-panel,
    #check-in-out + .theme-panel + .theme-panel + .theme-panel + .theme-panel,
     #check-in-out + .theme-panel + .theme-panel + .theme-panel + .theme-panel + .theme- panel 
    {
        box-shadow: none;
        background: none;
        width: 100% !important;
        padding: 16px;
        padding-right: 0;
        border-top:1px dashed #ddd !important;
        border-radius:0;
        padding-bottom:0;
    }

    

    
    .theme-panel.top-bottom-padding-10 .row.hotel {
        width: 100% !important
    }

    /* Star rating */
    .theme-panel.top-bottom-padding-10 .row.hotel .hotel-star::before, #check-in-out + .theme-panel+ .theme-panel .hotel-star::before {
        font-size: 2em;
        text-shadow: 0 2px 0 #fff
    }

    /* Number of nights */
    .theme-panel.top-bottom-padding-10 .row.hotel .star-rating + em .text-muted {
        font-style: normal;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 0.8em;
        background: #666;
        border-radius: 4px;
        padding: 4px 8px;
        color: #fff !important;
        opacity: 1;
        float: right;
        margin-top: 4px
    }

    /* Hotel name */
    .theme-panel.top-bottom-padding-10 .row.hotel h4 {
        font-size: 1.5em;
        margin: 24px 0 16px 0
    }


    /* Map and photo links */
   .theme-panel.top-bottom-padding-10 .row.hotel a.hotel-action-link {
        font-size: 1em;
        font-weight: bold;
        text-decoration: none;
        padding: 8px 16px;
        border: 1px solid #aaa;
        border-radius: 8px;
        margin: 8px 0 0 0 !important;
        display: inline-block !important;
    }

    .theme-panel.top-bottom-padding-10 .row.hotel a.hotel-action-link:hover {
        background: #fff;
        border-color: #fff;
        box-shadow: 0 2px 5px #ccc;
    }

    .theme-panel.top-bottom-padding-10 .row.hotel a.hotel-action-link:active {
        opacity: 0.7;
        box-shadow: none;
        background: #ddd;
        border-color: #ddd;
    }




    /* Room panels */
    li.room-type-list {
        padding: 16px !important;
        padding-top: 8px !important;
        border-radius: 8px !important;
        background: #f4f4f4;
        border: none;
        margin-bottom: 8px;
        margin-right: -8px
    }

    /* Room name */
    li.room-type-list label {
        font-size: 1.2em
    }


    li.room-type-list .room-type {
        padding-bottom: 0;
        margin-bottom: 0
    }

    /* USD or AUD etc label */
    li.room-type-list .room-type .currency-code {
        opacity: 0.6
    }

    /* Price per night */
    li.room-type-list .room-type .room-row-amount {
        padding-right: 0
    }
    
    
      /* More info chevron */
    li.room-type-list .room-type .col-sm-1 {
        margin-top:-40px !important;
        float:left;
    }


    /* Expand/collapse more info */
    li.room-type-list .room-type #roomDescription .theme-accordion-toggle::before {
        content: 'Less info '
    }

    li.room-type-list .room-type .collapsed #roomDescription .theme-accordion-toggle::before {
        content: 'More info '
    }


    li.room-type-list .room-type #roomDescription {
        background: none;
        border-radius: 6px;
        padding: 4px 8px 4px 0;
    }


    li.room-type-list .room-type .room-description * {
        background: none !important
    }

    /* Room Description subheader */
    li.room-type-list .room-type .room-description dt {
        opacity: 0.5
    }


    /* HOTEL IMAGES */
    .row.hotel .carousel {
        padding: 0 16px 16px 24px
    }
    .row.hotel .carousel .img-responsive {
        border: 8px solid #fff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.33);
    }

    .row.hotel .carousel #slider-thumbs {
        margin-left: 16px
    }
    .row.hotel .carousel #slider-thumbs .img-responsive {
        border-width: 4px;
    }

    .row.hotel .left.carousel-control {
        left: -16px !important;
        top: -110px
    }
    .row.hotel .right.carousel-control {
        top: -110px
    }


    /* Booked! */
    .btn.booked-inventory {
        background: #0c0;
        color: #fff;
        font-weight: bold;
        letter-spacing: 1px
    }


    /* Booking details panel */
    div[data-templateplaceholder="roomBookingDetails"] .theme-panel {
        width: 100% !important;
        padding: 16px;
        margin: 32px 0;
        box-shadow: none;
        border: 1px solid #ccc !important;
    }

    .theme-panel .booking-details h4 {
        font-size: 1.8em;
        font-weight: bold
    }

    .theme-panel .booking-details button[name="remove-cancel"] {
        color: #c00;
        background: none;
        border: 2px solid #c00;
        font-weight: bold
    }

    .theme-panel .booking-details .accom-logic h3 {
        font-size: 1.5em
    }



    /* FIX NESTING OF MULTIPLE BOOKINGS */
    div[data-templateplaceholder="roomBookingDetails"] .theme-panel .theme-panel {

        padding: 48px 0 0 0;
        border-radius: 0;
        margin-top: 48px;
        border: none !important;
        border-top: 4px dashed #666 !important;
    }





    /* ********** PAYMENT STEP ********** */
    .theme-panel.payment-content {
        box-shadow: none;
        padding: 0;
        margin: 0;
        width: 100%
    }

    .theme-panel.payment-content .payment-panel {
        box-shadow: none;
        border: 1px solid #ccc;
        border-radius: 16px;
        padding: 24px
    }


    .payment-method > .col-sm-12 > label {
        font-size: 1.5em;
        font-weight: normal !important;
        margin-top: 16px
    }


    .processor-target .theme-panel-mini {
        margin: 24px -16px 0 -16px;
        box-shadow: none;
        background: #f4f4f4;
        border-radius: 16px;
        padding: 16px !important
    }


    .processor-target .credit-card-detail-row + .credit-card-detail-row {
        margin-bottom: 24px
    }
    .processor-target h4 {
        font-size: 1.5em
    }





    /* ******************************************************
    *********************************************************
    Form elements
    *********************************************************
    ****************************************************** */
    .theme-panel p {
        opacity: 0.9
    }

    input[type="radio"],
    input[type="checkbox"] {
        scale: 1.5;
        margin-right: 16px
    }
    input[type="radio"]:focus,
    input[type="checkbox"]:focus {
        box-shadow: none;
    }

    .form-control,
    .theme-panel input,
    .theme-select,
    .theme-photo-preview,
    .select2-container,
    .select2-selection {
        border-radius: 8px !important;
    }

    .select2-selection--single {
        height: 54px !important;
    }



    
    .theme-label-floating {
        font-weight: normal !important;
        opacity: 0.6
    }
    .form-control.field--not-empty {
        font-weight: bold !important;
    }

    .field--not-empty:focus + label.theme-label-floating {
        opacity: 1 !Important
    }

    /* Move required asterisk from start to end of label */
    .field-required-theme:before {
        float: right;
        margin-left: 5px;
        color: #a00
    }

    /* Multi-select pills eg Dietary */
    .select2-container {
        border: none !important
    }
    .select2-selection__choice {
        background: #333 !important;
        color: #fff !important;
        border: none !important;
        padding: 2px 8px !important
    }
    .select2-selection__choice__remove {
        float: right;
        margin: 0 0 0 4px
    }

    /* Checkbox column too wide causing big gap to label */
    .checkbox.form-group .col-sm-2 {
        margin-left: -32px
    }
    .checkbox.form-group .col-xs-6 {
        text-align: left
    }

    /* Provide visual feedback when tapping radio/checkbox label */
    input + label:active {
        opacity: 0.5
    }

    /* Radio group */
    .row.radio.form-group .col-sm-2 {
        padding: 0
    }
    .row.radio.form-group .col-sm-2 + .col-xs-6 {
        width: 35% !important;
        max-width: none;
    }

    .row.radio.form-group .theme-radiobutton {
        margin-left: 0 !important
    }

    /* Pricing to rhs of radio option */
    .row.radio.form-group .col-sm-2 + .col-xs-6 + .col-xs-4.theme-box {
        width: 45%;
        min-width: 160px;
        padding: 0;
    }

    /* Buttons (duh) */
    .btn {
        background-image: none;
        border: none;
        padding: 8px 16px;
        border-radius: 8px !important;
        margin-left: 4px;
        box-shadow: none
    }

    .btn:focus {
        outline: none
    }



    /* Upload photo btn & preview thumb */
    .btn.add-replace-photo {
        margin-left: 0 !important
    }

    /* Upload photo modal */
    div[data-form-name="capture-photo"] .btn.take-photo {
        width: 100%;
        margin-top: -24px
    }

    div[data-form-name="capture-photo"] .btn.browse-photo {
        width: 100%;
        margin-top: 8px
    }


    .theme-photo-preview {
        background: #f4f4f4;
        padding: 12px;
        border: 1px dashed #ccc;
        margin-bottom: 16px
    }
    .theme-photo-btn-box {
        border: none;
    }

    .theme-photo-thumbnail {
        background: #fff;
        padding: 8px 8px 16px 8px;
        border: none;
        box-shadow: 0 5px 11px rgba(0, 0, 0, 0.2)
    }

    .btn.theme-btn-file-remove {
        background: none;
        color: #a00
    }
    .btn.theme-btn-file-remove:hover {
        background: #a00;
        color: #fff
    }


    /* Date picker inputs */
    input[type="date"] {
        font-size: 1.2em;
        font-weight: normal !Important
    }

    /* Datepicker calendar icon */
    .datepicker-button {
        background: #fff !important;
        opacity: 0.8
    }
    .datepicker-button:hover {
        opacity: 1
    }
    .datepicker-button:active {
        opacity: 0.5
    }




    /* ************** CALENDAR POPOVER ************** */
    .datepicker-calendar.bootstrap {
        border-radius: 16px !important;
        padding: 16px !important;
        border: none !important;
        box-shadow: 0 4px 48px rgba(0, 0, 0, 0.3) !Important
    }

    .datepicker-month-wrap {
        margin-bottom: 16px !important
    }

    .datepicker-weekdays {
        text-transform: uppercase;
        font-size: 0.8em;
        padding-bottom: 20px !important
    }

    .datepicker-weekdays .datepicker-day {
        padding-bottom: 4px !important
    }

    .datepicker-calendar .unselectable {
        opacity: 0.33
    }

    .datepicker-calendar .day {
        border-radius: 8px;
    }
    .datepicker-calendar .day.selectable:active {
        background: #aaa !important;
        color: #666 !important
    }

    .datepicker-calendar .curDay {
        background: #333 !important;
        color: #fff !Important;
        font-weight: bold
    }

    /* Hide pointer arrow because problematic to re-position around rounded corners */
    .datepicker-calendar::before,
    .datepicker-calendar::after {
        display: none !important;
    }






    /* ******************************************************
    *********************************************************
    Nav controls (screen btm)
    *********************************************************
    ****************************************************** */
    .navbar {
        background: rgba(255, 255, 255, 0.8);
        padding: 24px 8px !important;
        margin: 32px 0 0 0 !important;
        box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.2);
        border-top: 2px solid #fff !important
    }

    .navbar-btn {
        background-image: none;
        border: none;
        padding: 16px 32px;
        font-size: 1.25em;
        border-radius: 12px !important;
        margin-top: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
    }

    .navbar-btn.page-forward::after {
        content: '⏵';
        margin-left: 8px
    }
    .navbar-btn.page-backward::before {
        content: '⏴';
        margin-right: 8px
    }



    .navbar-btn.page-summary {
        margin-top: 12px;
        background: none;
        box-shadow: none;
        font-weight: bold;
        color: #333;
        text-align: center;
        width: 100%
    }

    .navbar-btn.page-summary::after {
        content: '⏵⏵';
        margin-left: 8px
    }






    /* ******************************************************
    *********************************************************
    Error handling
    *********************************************************
    ****************************************************** */
    /* Fade out disabled items */
    input[disabled="disabled"] + label strong {
        opacity: 0.33
    }


    /* Error summary at top */
    .alert-container .alert {
        border: none;
        box-shadow: none;
        color: #a00;
        background: #fff;
        border-radius: 16px;
    }


    .alert-container .alert span::before {
        content: '⚠️';
        padding-right: 8px;
        display: inline-block
    }

    .alert-container .alert button.close {
        opacity: 1;
        margin-right: 8px
    }


    /* "Hide" fake bullet point un-targetable via CSS */
    .alert-container .alert .close + div * {
        color: #fff;
    }

    /* Then make text visible */
    .alert-container .alert .close + div span {
        color: #c00;
        line-height: 1.2em !important;
        display: inline-block;
        margin: -24px 0 8px 8px
    }

    .alert-container .alert button span::before {
        content: '';
        padding: 0
    }



    /* Clearly identify inline issues */
    .has-error.has-feedback input {
        border-color: #a00;
        box-shadow: none !important
    }
    label.has-error.has-feedback {
        font-weight: normal !important;
    }

    /* Hide superfluous red exclamation icons */
    .fa-exclamation.form-control-feedback.has-error {
        display: none !important
    }

    /* Error icon in navbar at bottom of screen */
    .navbar .alerts-watcher {
        background: #a00;
        color: #fff;
        padding: 8px 12px;
        border-radius: 16px;
        border: 2px solid #fff
    }

    .navbar .alerts-watcher::after {
        content: ' Check for errors';
        margin-left: 8px;
        font-weight: bold;
        font-family: 'Arial', sans-serif;
    }



    /* No more tickets? Make "FULL" label more prominent */
    .exhausted_label {
        background: #a00
    }
    .exhausted_label::before {
        content: "😢 SORRY THIS EVENT IS "
    }

    /* Info pill : eg. invalid discount code */
    .label.theme-text-info-input {
        border-radius: 4px;
        padding: 8px 12px
    }
    .label.theme-text-info-input::before {
        content: "Sorry: "
    }

    /* Photo upload error */
    .popup .alert-danger {
        background: none;
        border-radius: 8px;
        border: 2px dashed;
    }
    .popup .alert-danger::before {
        content: '⚠️ '
    }



    .cookieMessage {
        padding: 24px;
        font-size: 0.9em;
        border-radius: 24px
    }






    /* ******************************************************
    *********************************************************
    Upload photo modal
    *********************************************************
    ****************************************************** */
    .popup {
        border-radius: 24px !important;
        padding: 16px;
        width: 90%;
        border: none !important
    }

    .popup h4 {
        font-size: 1.5em
    }

    .popup button.mfp-close {
        margin-right: -16px
    }

    .popup .btn {
        background-image: none;
        padding: 16px;
        border-radius: 8px;
        border: none;
        font-size: 1.25em;
        margin-left: 4px
    }













    /* ******************************************************
    *********************************************************
    SUMMARY
    *********************************************************
    ****************************************************** */
    /* Main panel */
    .alert-container + .component.no-auto-save > form.form-horizontal {
        background: #fff;
        width: 90%;
        margin: 16px auto;
        border-radius: 16px;
        border: none !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        padding: 16px 24px
    }

    /* Panel header */
    .alert-container + .component.no-auto-save > form.form-horizontal h3 {
        font-size: 1.5em;
        font-weight: bold
    }

    /* Summary section headers -AND- booking detail headers */
    .summary-heading h4,
    .alert-container + .component.no-auto-save > form.form-horizontal .col-sm-12 > h3 {
        font-size: 1.25em;
        border: none;
        background: #eee;
        border-radius: 8px;
        padding: 16px !important;
        margin: 24px 0 16px 0;
        height: auto;
        line-height: 1.2em
    }

    .summary-heading h4 .btn {
        margin: -8px -8px 0 0 !important;
        min-width: auto;
        padding: 8px 16px
    }


    /* Sub headers */
    .alert-container + .component.no-auto-save > form.form-horizontal .row > .col-sm-7.col-xs-12 {
        border-top: 1px dashed #ccc;
        padding: 8px 0 0 0;
        margin-left: 16px;
        width: 90%
    }


    /* Terms and conditions */
    script[data-templatename="groupSummary"] + .theme-panel {
        box-shadow: none;
        width: 100% !important;
        padding: 24px !important;
        border: 2px dashed #aaa !important
    }

    script[data-templatename="groupSummary"] + .theme-panel > .row {
        margin: 0;
        padding: 0
    }

    script[data-templatename="groupSummary"] + .theme-panel h5 {
        font-size: 1.5em;
        margin-top: 0
    }

    script[data-templatename="groupSummary"] + .theme-panel .form-group {
        margin: 16px 0 0 0;
        line-height: 1.1em
    }






    /* ******************************************************
    *********************************************************
    iPad TALL
    *********************************************************
    ****************************************************** */
    @media screen and (min-width: 768px) {

        .theme-panel h3 {
            font-size:1.5em
        }

        /* ******** SPLASH PAGE INTRO TEXT FOR AIRTIME 2023 ******* */
        .alert-container + .component > form.dynamic-target .container {
            padding: 32px 5%
        }



        .popup {
            width: 60%
        }

        /* Checkbox column too wide causing big gap to label */
        .checkbox.form-group .col-xs-6 {
            margin-left: -8%
        }

        /* Width of amount (price) column */
        .theme-component-registration .col-xs-4 .col-sm-6 {
            width: 100%;
        }


        /* ********** GUEST DETAILS INSET ********* */
        .well-sm {
            padding: 0 !Important
        }


        .well-sm div[data-templateplaceholder="guestNames"] > div {
            border-radius: 12px;
            padding: 24px 16px 16px 24px !important
        }

        .well-sm h4 {
            font-size: 1.25em;
        }

        /* Space between inputs in same column */
        .well .form-group {
            margin-bottom: 8px !Important
        }

        .well .row + .row {
            margin-top: 16px;
        }




        /* MULTI-CLICKER LABEL */
        .theme-feetype-box .col-sm-2 + .col-xs-6 {
            max-width: 32%;
            text-align: left !important;
            padding-top: 16px
        }

        .theme-feetype-box .col-sm-2 + .col-xs-6 + .theme-box.col-xs-4 {
            width: 50%;
            margin-left: 50%;
            margin-top: -48px
        }

        .theme-feetype-box .col-sm-2 + .col-xs-6 + .theme-box.col-xs-4 .col-xs-12 {
            width: 50% !important;
            padding-right: 0
        }




        /* Upload photo modal */
        div[data-form-name="capture-photo"] .btn.take-photo {
            width: 48%;
            float: left
        }

        div[data-form-name="capture-photo"] .btn.browse-photo {
            width: 48%;
            float: right;
            margin-top: -24px
        }





        /* Up to 5 different Hotel info panels */
         #check-in-out + .theme-panel, 
    #check-in-out + .theme-panel + .theme-panel,
    #check-in-out + .theme-panel + .theme-panel + .theme-panel,
    #check-in-out + .theme-panel + .theme-panel + .theme-panel + .theme-panel,
     #check-in-out + .theme-panel + .theme-panel + .theme-panel + .theme-panel + .theme- panel {
            background: #f4f4f4;
            padding: 16px 16px 0 16px !important;
            border:none !important;
            border-radius:16px;
       
        }


        /* Hide hotel "view photo" link as thumbs shown inline above mobile */
        .theme-panel.top-bottom-padding-10 .row.hotel a.hotel-action-link[data-popup="hotel-photos"] {
            display: none !important;
        }



        /* Room panels */
        li.room-type-list {
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .05)
        }

        /* Room name */
        li.room-type-list label {
            font-size: 1em;
            line-height: 1.1em
        }


        li.room-type-list .room-type {
            padding-bottom: 0;
            margin-bottom: 0
        }



        li.room-type-list .room-type-photos .img-responsive {
            height: 48px;
            width: 48px !important;
            max-width: none
        }


        /* Hide empty div pushing room name towards RHS */
        li.room-type-list .room-type .col-sm-2.hidden-xs {display:none}




        /* More width for room name */
        li.room-type-list .room-type .col-sm-4 {
            width: 80%;
            padding-left: 16px
        }

        
        /* PRICE */
        li.room-type-list .room-type .col-sm-2.col-xs-4 {padding:0;}
        
        
        /* Show info on same line */
        li.room-type-list .room-type .room-row-amount,
        .currency-code {
            display: inline-block !important;
        }

        li.room-type-list .room-type .col-sm-4 + .col-sm-2 {
            width: auto
        }

        /* Move "book" button to RHS */
        li.room-type-list .room-type .col-sm-2 + .col-sm-3 {
            width: 100% !important;
    
            margin-top: 10px !important;
     
        }


        /* More info chevron */
        li.room-type-list .room-type .col-sm-1 {
            width: 80%;
            margin-top: 8px;
            padding-left: 16px;
        }


        li.room-type-list .room-type .room-description * {
            padding-left: 10%
        }


        /* Booking details panel */
        div[data-templateplaceholder="roomBookingDetails"] .theme-panel {

            padding: 32px;
        }




        /* Summary step main panel */
        .brand-header + .theme-progress + .alert-container + .component.no-auto-save > form.form-horizontal {
            padding-left: 5%;
            padding-right: 5%;
        }








        .navbar {
            padding: 24px !important
        }
    }
    /* ************* END IPAD PORTRAIT ************* */





    /* ******************************************************
    *********************************************************
    iPad WIDE
    *********************************************************
    ****************************************************** */
    @media screen and (min-width: 1024px) {


        /* Main panels incl summary step (form) */
        .theme-panel, .alert-container, .brand-header + .theme-progress +.alert-container +.component.no-auto-save > form.form-horizontal {
            width:70% !important;
            max-width: 1200px;
            border-radius: 32px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3)
        }


        /* ******** SPLASH PAGE INTRO TEXT FOR AIRTIME 2023 ******* */
        .alert-container + .component > form.dynamic-target .container {
            width: 70% !important;
            max-width: 1200px;
            border-radius: 32px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
        }




        .progress {
            margin: 32px 30%;
        }

        .theme-panel h3,
        .brand-header + .theme-progress + .alert-container + .component.no-auto-save > form.form-horizontal h3 {
            font-size: 1.8em;
            margin-bottom: 1em
        }




        .payment-content.theme-panel {
            width: 95% !important;
            margin-left: 2.5%;
            max-width: 1024px
        }
    }
    /* ************* END IPAD LANDSCAPE ************* */