﻿.inputArea {
    width: calc( 100% - 2px );
    max-width: 600px;
    margin: 50px auto 0px auto;
    background-color:#DDDDDD;
    padding-bottom:30px
}
    .inputArea .header {
        background-color:#43647A;
        min-height: 90px;
        padding:20px 80px 0px 80px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        line-height: 30px;
        margin-bottom: 30px;
    }
    .inputArea .item {
        overflow: auto;
        padding: 0px 25px 0px 25px;
        min-height: 30px;
        line-height: 30px;
        margin-bottom: 15px;
    }
        .inputArea .item .title {
            float: right;
            font-size: 14px;
        }
            .inputArea .item .title span {
                margin-right: 5px;
                color: red;
            }

        .inputArea .item input[type=text] {
            float: left;
            width: 200px;
        }

        .inputArea .item .fileUpload {
            position: relative;
            max-width: 200px;
            float: left;
            width: 200px;
            min-height: 30px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
        }
            .inputArea .item .fileUpload input[type=file] {
                width: 200px;
                position: absolute;
                top: 0px;
                left: 0px;
                opacity: 0;
            }
            .inputArea .item .fileUpload input[type=button] {
                width: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                height: 30px;
                font-family: IRANSans, Tahoma;
                font-size: 14px;
            }
            .inputArea .item .fileUpload .loading {
                display: none;
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                margin: 4px auto 0px auto;
            }
            .inputArea .item .fileUpload .delete {
                display: none;
                float: left;
                margin-top: 5px;
                width:20px;
                height:20px;
                background: url('/Images/Delete.png') center center no-repeat;
            }
            .inputArea .item .fileUpload .fileName {
                display: none;
                float: left;
                width: 180px;
                direction: ltr;
                color: black;
                margin: 0px;
                overflow: hidden;
            }
            .inputArea .item input[type=text] {
                margin: 0px 0px 0px 0px;
                height: 30px;
            }
        .inputArea .item select {
            float: left;
            margin: 0px 0px 0px 0px;
            width: 200px;
            height: 30px;
        }
        .inputArea .item .fileUpload input[type=file] {
            margin: 4px 0px 0px 0px;
        }
        .inputArea .item #txtStayDuration {
            width: 40px;
            margin-left:160px;
        }
        .inputArea .item .estimatedArrivalDate {
            float: left;
            position: relative;
            width: 200px;
            height: 30px;
            border: 1px solid #AAAAAA;
            background-color: white;
        }
            .inputArea .item .estimatedArrivalDate input[type=text] {
                margin: 0px 0px 0px 2px;
                height: 28px;
                width: calc( 100% - 2px );
                border: 0px;
            }
            
        .inputArea .item .estimatedArrivalDate img {
            position: absolute;
            top:1px;
            right:1px;
            width:25px;
            height:25px;
        }
    .inputArea .recaptchaArea {
        text-align: center;
        line-height: 10px;
        margin-top: 25px;
    }
    .inputArea .recaptchaArea .wrapper {
        width:302px;
        margin: 0px auto
    }

    .inputArea .buttonsArea {
        margin-top: 45px;
        text-align: center;
    }
        .inputArea .buttonsArea input {
            opacity: 0.5;
        }

#txtMobileNo, #txtStayDuration, .inputArea .item input[type=file], #txtEstimatedArrivalDate {
    direction: ltr
}

.message {
    color: #FF8080;
    width: 100%;
    max-width: 400px;
    margin: 0px auto 0px auto;
    line-height:40px;
}

.saving {
    display: none;
    position: fixed;
    top:100px;
    left:0px;
    right: 0px;
    color: black;
    border: 1px solid white;    
    max-width: 250px;
    height: 80px;
    line-height: 40px;
    margin: 0px auto 0px auto;
    background-color: white;
    text-align: center;
    padding: 20px;
    z-index: 201;
    border-radius: 5px;
}
    .saving .loading {
        display: inline-block;
        float: right;
    }
    .saving .text {
        display: inline-block;
        float: right;
        margin-right: 10px;
        color: black;
    }


@media (max-width: 820px) {
    .inputArea {
        margin: 20px auto 0px auto;
        padding-bottom: 20px;
    }
        .inputArea .header {
            padding: 0px 10px 0px 10px;
            font-weight: normal;
            font-size: 14px;
            min-height: 70px;
            line-height: 70px;
            margin-bottom: 20px;
        }
        .inputArea .item {
            margin-bottom: 10px;
            line-height: unset;
            min-height: 60px;
        }
        .inputArea .buttonsArea {
            margin-top: 40px;
        }
    .footer {
        margin: 0px;
    }
}
@media (max-width: 648px) {
    .inputArea .header {
        line-height: 35px;
    }
}
@media (max-width: 530px) {
    .inputArea .item {
        padding: 0px;
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        line-height: unset
    }
        .inputArea .item .title {
            font-size: 12px;
        }
}
