/* WForm Skin V1 */

body
{
    background-color: #89a99a9e;
    background-image: linear-gradient(160deg, rgba(189, 217, 204, 0.62) 0%, #e8e8e8 100%);
}

#pageContents
{
    max-width: 500px;
    margin: auto;
    padding: 10px 3px 0px 10px;
    background-color: transparent !important;
}

table.tabContainer td.fieldHolder
{
    display: block;
}

.clForm table.tabContainer
{
    box-shadow: none;
}

.wFormActions
{
    margin:auto;
    text-align: right;
    margin-top: 15px;
    margin-right: 10px;
}

.wFormActions a
{
    background-color: #b3e4f8;
    text-decoration: none;
    padding: 10px;
}

.wFormActions a:hover
{
    background-color: #8bd0ec;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
}

#clf_contents
{
    height: inherit;
    display: table; /* Essential for Widget Displaying */
    margin: auto;
    background-color: transparent;
}

#clf_dialog
{
    width: 100%;
}

.targetDiv1, .targetDiv2
{
    width: inherit;
}

.clForm table.tabContainer td.fieldHolder:first-child
{
    width: 100%;
}

.containRight
{
    height: 100vh;
}

#clf_dialog input[type='text'], #clf_dialog textarea, #clf_dialog input[type='phone'],
#clf_dialog input[type='number'], #clf_dialog input[type='email']
{
    /*width: 97% !important;*/
}

#clf_dialog .txt_w1
{
    max-width: inherit;
}

.swal-overlay--show-modal .swal-modal
{
    min-width: inherit;
    width: 85%;
}

/* Wrapper for Thank you */
.wForm_wrapper
{
    width: 100%;
    height: 100vh;
    transform: translate(0, 30%);
}

#page
{
    /*background-color: rgb(78 70 70 / 54%) !important;*/
    /*padding: 10px;*/
}

#clf_contents
{
    width: 100%;
}

#clf_contents input::placeholder, #clf_contents textarea::placeholder
{
    font-family: 'Outfit',sans-serif;
    color: rgba(1, 31, 1, 0.65);
    font-size: 13pt !important;
}

#clf_contents textarea
{
    resize: none;
}

#clf_contents input:not([type='checkbox']), #clf_contents textarea, #clf_contents select
{
    padding: 15px 0px 2px 16px !important;
    margin: auto !important;
    font-size: 13pt !important;
    font-family: 'Outfit',sans-serif;
    color: #504e4e;
    width: calc(100% - 20px);
    height: 20px;
}

#clf_contents textarea[id='COMMENTS'] /* I don't like this but... got no choice here.. yet */
{
    height: 50px;
}

#clf_contents input:not([type='checkbox'])
{
    padding: 6px 0px 2px 16px !important;
}

.krmAva_completeField b
{
    color: white;
}

#clf_contents select
{
    padding: 4px 0px 2px 16px !important;
    width: calc(100%);
    height: 43px;
}

#page .containRight
{
    background-color: transparent !important;
}

.clForm table.tabContainer td:first-child
{
    background-color: transparent !important;
}

.clForm table.tabFields tr td:nth-child(2)
{
    padding: 1px;
}

.fieldHolder
{
    padding: 0px !important;
}

#wForm_save
{
    background-color: #0c5460;
    color: white;
}

#wForm_resend
{
    background-color: #c1c1c1;
}

.krmFormTdData
{
    font-family: 'Outfit',sans-serif;
    color: #686464;
    font-size: 13pt;
}

.clForm table.tabContainer td.fieldHolder
{
    border: 0px !important;
}

.tabFields
{
    padding-right: 5px;
}

.tabFields td
{
    padding: 5px 0px !important;
}

.swal-content span table caption
{
    margin-bottom: 2px;
}

.swal-footer
{
    text-align: center;
}

#krmCalendar
{
    font-size: 80%;
}

/* AVA OVERRIDES for display in iFrame / WForm */
.avaExisting
{
    background-color: #f0f0f0;
    padding: 0px;
    border: 0px solid transparent;
    margin-bottom:1px;
    text-align: center;
    font-size: 90%;
    margin-right: 0px;
    min-width: 50%;
    flex:1;
}

.avaExisting:hover
{
    color: rgba(16, 111, 180, 0.82);
}

.avaExistingContainerTitle
{
    border-top: 2px dot-dash white;
    padding-top: 5px;
}

#krmCalendarHolder__avaBtn
{
    border: 2px solid #0c5460;
    background-color: #0c5460;
    color: white;
    float: inherit !important;
    margin: auto;
    width: 97%;
}

#krmCalendarHolder__avaBtn:hover
{
    background-color: #063d48;
}

.krm_inlineCal
{
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.avaHalfed
{
    margin-top: 5px;
    margin-bottom: 0px;
    margin-right: 2px;
    flex: 43%;
}

/* No highlights in wForm */
.HighlightOnFieldChange
{
    background-color: #fcfcfc !important;
}

/* Followup of selection repositioning */
.__krmAuto
{
    display: block;
    width: 100%;
    margin: 5px 0px 0px 0px;
    text-align: center;
}

.__krmAuto a
{
    color: black;
}

/* slot height increase */
.fc-v-event
{
    transition: all 0.2s ease-in-out;
}

.fc-v-event:hover
{
    min-height: 54px;
    height: auto;
    opacity: 0.8;
    overflow: visible;
}

.krmFormTdData select, input[type='text'], textarea
{
    width: 100%;
    max-width: inherit !important;
    /*box-sizing: border-box;*/
}

#addNew__reservation
{
    font-size: 85%;
}

.fc-v-event:hover
{
    min-height: inherit !important;
    overflow: inherit !important;
}

.fc-today-button
{
    padding: 2px 4px !important;
}


.owned_by_me_slot, .disabled_slot, .reserved_slot, .unconfirmed_slot
{
    text-align: center;
    font-size: 20px;
    background-color: transparent;
    color: #27c427;
    border: 0px !important;
    align-items: center;
    justify-content: center;
}

.disabled_slot
{
    /*color: darkred;*/
}

.reserved_slot
{
    font-size: 27px;
}

.unconfirmed_slot
{
    color: #d70d0d;
    font-size: 27px;
}

.disabled_slot, .disabled_slot:hover
{
    background-color: black !important;
    color: black !important;
    opacity: 0.10 !important;
}

.owned_by_me_slot .krmAgItem, .disabled_slot .krmAgItem, .reserved_slot .krmAgItem, .unconfirmed_slot .krmAgItem
{
    margin-right: 0px !important;
}

.tabFields textarea, .tabFields input[type=text], .tabFields select
{
    /*box-sizing: border-box;*/
    padding: 10px 5px;
}


/* RESPONSIVE PART */
@media screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 1)
{
    .avaExisting {
        width: 100%;
    }

    .tabFields textarea, .tabFields input[type=text], .tabFields select
    {
        /*width: 95% !important;*/
    }

    .wrapper .container
    {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 1)
{
    .tabFields textarea, .tabFields input[type=text], .tabFields select
    {
        /*width: 95% !important;*/
    }
}