﻿#InputFieldMaterializeID input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]) {
/*    border-bottom: 1px solid #26a69a !important;
    box-shadow: 0 1px 0 0 #26a69a !important;*/
}

#InputFieldMaterializeID input:not([type]):focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label {
    color: #222d64 !important;
}

#InputFieldMaterializeID input:not([type]).valid, input:not([type]):focus.valid, input[type=text].valid, input[type=text]:focus.valid {
    /*border-bottom: 1px solid #4CAF50 !important;*/
    /*box-shadow: 0 1px 0 0 #4CAF50 !important;*/
}

#InputFieldMaterializeID input:not([type]).valid + label:after, input:not([type]):focus.valid + label:after, input[type=text].valid + label:after, input[type=text]:focus.valid + label:after {
    content: attr(data-success) !important;
    color: #4CAF50 !important;
    opacity: 1 !important;
 }

#InputFieldMaterializeID input:not([type]).invalid, input:not([type]):focus.invalid, input[type=text].invalid, input[type=text]:focus.invalid {
    border-bottom: 1px solid #F44336;
    box-shadow: 0 1px 0 0 #F44336
}

#InputFieldMaterializeID input:not([type]).invalid + label:after, input:not([type]):focus.invalid + label:after, input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after {
    content: attr(data-error);
    color: #F44336;
    opacity: 1
}

#InputFieldMaterializeID input:not([type]).validate + label, input[type=text].validate + label {
    width: 100%;
    pointer-events: none
 }

#InputFieldMaterializeID input:not([type]) + label:after, input[type=text] + label:after {
    display: block;
    content: "";
    position: absolute;
    top: 60px;
    opacity: 0;
    transition: .2s opacity ease-out, .2s color ease-out
 }

/*Floating Labels*/
.input-field-MZ {
    position: relative;
    margin-top: 1rem
}

.input-field-MZ.inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px
}

.input-field-MZ.inline input, .input-field-MZ.inline .select-dropdown {
    margin-bottom: 1rem
}

.input-field-MZ.col .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
    width: calc(100% - 3rem - 1.5rem)
}

.input-field-MZ label 
{
    color: #9e9e9e;
    position: absolute;
    top: 6px;
    left: 0;
    font-size: 1rem;
    cursor: text;
    transition: .2s ease-out
}

.input-field-MZ label.active {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%)
}

.input-field-MZ.col label {
    left: 29px;
    background-color: white;
    margin-top: 8px;
    color: black;
}

#InputFieldMaterializeID input:not([type]):focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label {
    color: #000000;
}

#InputFieldMaterializeID input[type=text]:focus:not([readonly]) {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255/25%) !important;
}


#InputFieldMaterializeID input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]) {
/*        border-bottom: 1px solid #9e9e9e !important;
    box-shadow: 0 1px 0 0 #9e9e9e !important;*/
}

.form-control:focus {
    border-color: #80bdff !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255/25%) !important;
}


/*Static Labels*/
.static-input-field-MZ {
    position: relative;
    margin-top: 1rem
}

.static-input-field-MZ.inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px
}

.static-input-field-MZ.inline input, .input-field-MZ.inline .select-dropdown {
    margin-bottom: 1rem
}

.static-input-field-MZ.col .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
    width: calc(100% - 3rem - 1.5rem)
 }

.static-input-field-MZ label {
    color: #9e9e9e;
    position: absolute;
    top: 11px;
    left: 0px;
    font-size: 1rem;
    cursor: text;
    transition: .2s ease-out font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%)
 }

.static-input-field-MZ label.active {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
     transform: translateY(-140%)
}

    .static-input-field-MZ.col label {
        left: 32px !important;
        background-color: white;
        margin-top: 8px;
        color: #222d64;
        font-weight: 500 !important;
        padding-left: 5px;
        padding-right: 5px;
    }

.static-font-weight {
    font-weight: 500 !important;
}


/*Static labels for disabled Input*/
.static-input-field-disabled {
    position: relative;
    margin-top: 1rem
}

.static-input-field-disabled.inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px
}

.static-input-field-disabled.inline input, .input-field-MZ.inline .select-dropdown {
    margin-bottom: 1rem
}

.static-input-field-disabled.col .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
    width: calc(100% - 3rem - 1.5rem)
}

.static-input-field-disabled label {
    color: #9e9e9e;
    position: absolute;
    top: 11px;
    left: 0px;
    font-size: 1rem;
    cursor: text;
    transition: .2s ease-out font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%)
 }

 .static-input-field-disabled label.active {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%)
}


    .static-input-field-disabled input[type=text] {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        border-top: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
        border-right: 1px solid #9e9e9e;
        border-radius: 5px;
        outline: none;
        /*height: 2.65rem;
        width: 100%;*/
        height: 40.5px !important;
        width: 100% !important;
        /*font-size: 1rem;*/
        /*margin: 0 0 20px 0;*/
        font-size: 14px;
        margin: 0 0 0px 0;
        padding: 0;
        padding-left: 8px;
        box-shadow: none;
        box-sizing: content-box;
        transition: all 0.3s
    }

.static-input-field-MZ input[type=text] {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-top: 1px solid #9e9e9e;
    border-left: 1px solid #9e9e9e;
    border-right: 1px solid #9e9e9e;
    border-radius: 5px;
    outline: none;
    /*height: 46.5px !important;*/
    height: 40.5px !important;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 20px 0;
    padding: 0;
    padding-left: 8px;
    box-shadow: none;
    box-sizing: content-box;
    transition: all 0.3s
}


.static-input-field-disabled.col label {
    left: 32px !important;
    /*background-color: #fff;*/
    /*background: linear-gradient(180deg, #ffffff 50%, #e7e7eb 50%) !important;*/
    background: linear-gradient(180deg, #ffffff 50%, transparent 50%);
    margin-top: 9px;
    color: #222d64;
    font-weight: 500 !important;
    padding-left: 5px;
    padding-right: 5px;
    /*padding-left: 10px;
        padding-right: 10px;*/
    /* border-bottom: 1px dashed white; */
    /* border-left: 1px dashed white; */
    /* border-right: 1px dashed white; */
    /* border-top: 1px dashed white; */
    border-radius: 10px;
}

.static-input-field-disabled-table-text.col label {
       left: 32px !important;
        background-color: #F0F0F0;
        margin-top: 8px;
        color: black;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 10px;
}







/*Static labels for enabled grid Input*/
.static-input-field-disabledgrid {
    position: relative;
    margin-top: 1rem
}

    .static-input-field-disabledgrid.inline {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px
    }

        .static-input-field-disabledgrid.inline input, .input-field-MZ.inline .select-dropdown {
            margin-bottom: 1rem
        }

    .static-input-field-disabled.colgrid .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
        width: calc(100% - 3rem - 1.5rem)
    }

    .static-input-field-disabledgrid label {
        color: #9e9e9e;
        position: absolute;
        top: 11px;
        left: 0px;
        font-size: 1rem;
        cursor: text;
        transition: .2s ease-out font-size: 0.8rem;
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%)
    }

        .static-input-field-disabledgrid label.active {
            font-size: 0.8rem;
            -webkit-transform: translateY(-140%);
            transform: translateY(-140%)
        }


    .static-input-field-disabledgrid input[type=text] {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        border-top: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
        border-right: 1px solid #9e9e9e;
        border-radius: 5px;
        outline: none;
        height: 3rem;
        width: 100%;
        font-size: 1rem;
        margin: 0 0 20px 0;
        padding: 0;
        padding-left: 8px;
        box-shadow: none;
        box-sizing: content-box;
        transition: all 0.3s
    }

.static-input-field-disabledgrid.col label {
    left: 32px !important;
    /*background-color: #fff;*/
    background: linear-gradient(180deg, #F0F0F0 50%, #e7e7eb 50%);
    margin-top: 8px;
    color: #222d64;
    font-weight: 500;
    padding-left: 5px;
    padding-right: 5px;
    /*padding-left: 10px;
        padding-right: 10px;*/
    /* border-bottom: 1px dashed white; */
    /* border-left: 1px dashed white; */
    /* border-right: 1px dashed white; */
    /* border-top: 1px dashed white; */
    border-radius: 10px;
}



/*Static labels for disabled grid Input*/
.static-input-field-enabledgrid {
    position: relative;
    margin-top: 1rem
}

    .static-input-field-enabledgrid.inline {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px
    }

        .static-input-field-enabledgrid.inline input, .input-field-MZ.inline .select-dropdown {
            margin-bottom: 1rem
        }

    .static-input-field-enabledgrid.colgrid .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
        width: calc(100% - 3rem - 1.5rem)
    }

    .static-input-field-enabledgrid label {
        color: #9e9e9e;
        position: absolute;
        top: 11px;
        left: 0px;
        font-size: 1rem;
        cursor: text;
        transition: .2s ease-out font-size: 0.8rem;
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%)
    }

        .static-input-field-enabledgrid label.active {
            font-size: 0.8rem;
            -webkit-transform: translateY(-140%);
            transform: translateY(-140%)
        }


    .static-input-field-enabledgrid input[type=text] {
        /*background-color: transparent;*/
        background-color: white;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        border-top: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
        border-right: 1px solid #9e9e9e;
        border-radius: 5px;
        outline: none;
        height: 3rem;
        width: 100%;
        font-size: 1rem;
        margin: 0 0 20px 0;
        padding: 0;
        padding-left: 8px;
        box-shadow: none;
        box-sizing: content-box;
        transition: all 0.3s
    }

    .static-input-field-enabledgrid.col label {
        left: 32px !important;
        /*background-color: #fff;*/
        background: linear-gradient(180deg, #F0F0F0 50%, #FFFFFF 50%);
        margin-top: 8px;
        color: #222d64;
        font-weight: 500;
        padding-left: 5px;
        padding-right: 5px;
        /*padding-left: 10px;
        padding-right: 10px;*/
        /* border-bottom: 1px dashed white; */
        /* border-left: 1px dashed white; */
        /* border-right: 1px dashed white; */
        /* border-top: 1px dashed white; */
        border-radius: 10px;
    }

#InputFieldMaterializeID select {
    word-wrap: normal;
    height: 41.5px !important;
    width: 103%;
    font-size: 14px;
}







/*Static Labels BookingRef*/
.static-input-field-BR {
    position: relative;
    margin-top: 1rem
}

.static-input-field-BR.inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px
}

    .static-input-field-BR.inline input, .input-field-MZ.inline .select-dropdown {
        margin-bottom: 1rem
    }

.static-input-field-BR.col .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
    width: calc(100% - 3rem - 1.5rem)
}

.static-input-field-BR label {
    color: #9e9e9e;
    position: absolute;
    top: 11px;
    left: 0px;
    font-size: 1rem;
    cursor: text;
    transition: .2s ease-out font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%)
}

    .static-input-field-BR label.active {
        font-size: 0.8rem;
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%)
    }

    .static-input-field-BR.col label {
        /*   left: 32px !important;
        background-color: white;
        margin-top: 8px;
        color: black;
        padding-left: 10px;
        padding-right: 10px;*/
        left: 32px !important;
        background-color: white;
        margin-top: 19px;
        color: #222d64;
        font-weight: 500 !important;
        padding-left: 5px;
        padding-right: 5px;
    }

    .static-input-field-BR input[type=text] {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        border-top: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
        border-right: 1px solid #9e9e9e;
        border-radius: 5px;
        outline: none;
        height: 2.65rem;
        width: 100%;
        font-size: 1rem;
        margin: 0 0 20px 0;
        padding: 0;
        padding-left: 8px;
        box-shadow: none;
        box-sizing: content-box;
        transition: all 0.3s
    }

    /*Static input field white smoke*/
.static-input-field-BRR {
    position: relative;
    margin-top: 1rem
}

    .static-input-field-BRR.inline {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px
    }

        .static-input-field-BRR.inline input, .input-field-MZ.inline .select-dropdown {
            margin-bottom: 1rem
        }

    .static-input-field-BRR.col .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
        width: calc(100% - 3rem - 1.5rem)
    }

    .static-input-field-BRR label {
        color: #9e9e9e;
        position: absolute;
        top: 11px;
        left: 0px;
        font-size: 1rem;
        cursor: text;
        transition: .2s ease-out font-size: 0.8rem;
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%)
    }

        .static-input-field-BRR label.active {
            font-size: 0.8rem;
            -webkit-transform: translateY(-140%);
            transform: translateY(-140%)
        }

    .static-input-field-BRR.col label {
        /*   left: 32px !important;
        background-color: white;
        margin-top: 8px;
        color: black;
        padding-left: 10px;
        padding-right: 10px;*/
        left: 32px !important;
        /*background: linear-gradient(180deg, #F0F0F0 50%, #FFF 50%);*/
        background: linear-gradient(180deg, #f5f5f5 50%, #FFF 50%);
        margin-top: 19px;
        color: #222d64;
        font-weight: 500 !important;
        padding-left: 5px;
        padding-right: 5px;
    }

    .static-input-field-BRR input[type=text] {
        background-color: white;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        border-top: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
        border-right: 1px solid #9e9e9e;
        border-radius: 5px;
        outline: none;
        height: 2.65rem;
        width: 100%;
        font-size: 1rem;
        margin: 0 0 20px 0;
        padding: 0;
        padding-left: 8px;
        box-shadow: none;
        box-sizing: content-box;
        transition: all 0.3s
    }


/*Static input field disabled white smoke*/
.static-input-field-BRRR {
    position: relative;
    margin-top: 1rem
}

    .static-input-field-BRRR.inline {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px
    }

        .static-input-field-BRRR.inline input, .input-field-MZ.inline .select-dropdown {
            margin-bottom: 1rem
        }

    .static-input-field-BRRR.col .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
        width: calc(100% - 3rem - 1.5rem)
    }

    .static-input-field-BRRR label {
        color: #9e9e9e;
        position: absolute;
        top: 11px;
        left: 0px;
        font-size: 1rem;
        cursor: text;
        transition: .2s ease-out font-size: 0.8rem;
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%)
    }

        .static-input-field-BRRR label.active {
            font-size: 0.8rem;
            -webkit-transform: translateY(-140%);
            transform: translateY(-140%)
        }

    .static-input-field-BRRR.col label {
        /*   left: 32px !important;
        background-color: white;
        margin-top: 8px;
        color: black;
        padding-left: 10px;
        padding-right: 10px;*/
        left: 32px !important;
        background: linear-gradient(180deg, #f5f5f5 50%, transparent 50%);
        margin-top: 21px;
        color: #222d64;
        font-weight: 500 !important;
        padding-left: 5px;
        padding-right: 5px;
    }

    .static-input-field-BRRR input[type=text] {
        background-color: white;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        border-top: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
        border-right: 1px solid #9e9e9e;
        border-radius: 5px;
        outline: none;
        height: 2.65rem;
        width: 100%;
        font-size: 1rem;
        margin: 0 0 20px 0;
        padding: 0;
        padding-left: 8px;
        box-shadow: none;
        box-sizing: content-box;
        transition: all 0.3s
    }



/*Static labels for disabled Input*/
.static-input-field-disabledXS {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

    .static-input-field-disabledXS.inline {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px
    }

        .static-input-field-disabledXS.inline input, .input-field-MZ.inline .select-dropdown {
            margin-bottom: 1rem
        }

    .static-input-field-disabledXS.col .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
        width: calc(100% - 3rem - 1.5rem)
    }

    .static-input-field-disabledXS label {
        color: #9e9e9e;
        position: absolute;
        top: 11px;
        left: 0px;
        font-size: 1rem;
        cursor: text;
        transition: .2s ease-out font-size: 0.8rem;
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%)
    }

        .static-input-field-disabledXS label.active {
            font-size: 0.8rem;
            -webkit-transform: translateY(-140%);
            transform: translateY(-140%)
        }


    .static-input-field-disabledXS input[type=text] {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        border-top: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
        border-right: 1px solid #9e9e9e;
        border-radius: 5px;
        outline: none;
        height: 40.5px !important;
        width: 100% !important;
        font-size: 14px;
        margin: 0 0 0px 0;
        padding: 0;
        padding-left: 8px;
        box-shadow: none;
        box-sizing: content-box;
        transition: all 0.3s
    }

/*Browser Support*/
    .static-input-field-disabledXS.col label {
        left: 32px !important;
        /*background-color: #fff;*/
        /*background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%);*/ /* FF3.6+ */
        /*background: linear-gradient(180deg, #ffffff 50%, #e7e7eb 50%) !important;*/
        background: linear-gradient(180deg, #ffffff 50%, transparent 50%);
        /*background: linear-gradient(180deg, #fff 20px, rgba(255,0,0,0) 20px);*/
        background: linear-gradient(180deg, #fff 14.9px, rgba(255,0,0,0) 20px) ;
        color: #222d64;
        font-weight: 500 !important;
        padding-left: 5px;
        padding-right: 5px;
        /*padding-left: 10px;
        padding-right: 10px;*/
        /* border-bottom: 1px dashed white; */
        /* border-left: 1px dashed white; */
        /* border-right: 1px dashed white; */
        /* border-top: 1px dashed white; */
        border-radius: 10px;
    }

.static-input-field-disabledXS-table-text.col label {
    left: 32px !important;
    background-color: #F0F0F0;
    margin-top: 8px;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
}



/*Grey Background*/
.static-input-field-disabledGB {
    position: relative;
    margin-top: 1rem
}

    .static-input-field-disabledGB.inline {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px
    }

        .static-input-field-disabledGB.inline input, .input-field-MZ.inline .select-dropdown {
            margin-bottom: 1rem
        }

    .static-input-field-disabledGB.col .prefix ~ label, .input-field-MZ.col .prefix ~ .validate ~ label {
        width: calc(100% - 3rem - 1.5rem)
    }

    .static-input-field-disabledGB label {
        color: #9e9e9e;
        position: absolute;
        top: 11px;
        left: 0px;
        font-size: 1rem;
        cursor: text;
        transition: .2s ease-out font-size: 0.8rem;
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%)
    }

        .static-input-field-disabledGB label.active {
            font-size: 0.8rem;
            -webkit-transform: translateY(-140%);
            transform: translateY(-140%)
        }


    .static-input-field-disabledGB input[type=text] {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        border-top: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
        border-right: 1px solid #9e9e9e;
        border-radius: 5px;
        outline: none;
        /*height: 2.65rem;
        width: 100%;*/
        height: 46.5px !important;
        width: 100% !important;
        /*font-size: 1rem;*/
        /*margin: 0 0 20px 0;*/
        font-size: 14px;
        margin: 0 0 0px 0;
        padding: 0;
        padding-left: 8px;
        box-shadow: none;
        box-sizing: content-box;
        transition: all 0.3s
    }


    .static-input-field-disabledGB.col label {
        left: 32px !important;
        /*background-color: #fff;*/
        /*background: linear-gradient(180deg, #ffffff 50%, #e7e7eb 50%) !important;*/
        background: linear-gradient(180deg, #f5f6f6 50%, transparent 50%);
        margin-top: 9px;
        color: #222d64;
        font-weight: 500;
        padding-left: 5px;
        padding-right: 5px;
        /*padding-left: 10px;
        padding-right: 10px;*/
        /* border-bottom: 1px dashed white; */
        /* border-left: 1px dashed white; */
        /* border-right: 1px dashed white; */
        /* border-top: 1px dashed white; */
        border-radius: 10px;
    }

.static-input-field-disabled-table-text.col label {
    left: 32px !important;
    background-color: #F0F0F0;
    margin-top: 8px;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
}