/* app-form */
.app-form {
    /* max-width:600px; */
    margin:0 auto;
}
.app-form-item {
    margin-bottom:15px;
}
.app-form-item>* {
    vertical-align: middle;
}
.app-form-item div[data-name="option"]>div{
    margin-bottom:10px;
}
.app-form .qp-line{
    margin-bottom : 0px;
    height:15px;
}
.app-form .qp-input, .app-form label{
    width:100%;
}
.app-form-item input:not([type='file']),
.app-form-item select,
.app-form-item textarea {
    display: inline-block;
    padding: 7px 11px;
    vertical-align: middle;
    border: 2px solid #c9cbcc;
    border-radius: var(--default-radius);
}
.app-form-item input[type='text']:focus,
.app-form-item input[type='email']:focus,
.app-form-item input[type='password']:focus,
.app-form-item select:focus,
.app-form-item textarea:focus {
    outline: none;
    border-color:rgb(26, 140, 255);
    box-shadow: 0 0 0 3px rgba(26, 140, 255, 0.25);
    z-index:99999999999!important;
}
.app-form-item input:not([type='file']),
.app-form-item textarea {
    width:100%;
}
.app-form-item.app-form-phone input{
    width:70px;
}
.app-form-item.app-form-address>input{
    margin-top: 5px;
}
.app-form-item[qp='date'] input{
    width:110px;
}
.app-form-item input[type="radio"],
.app-form-item input[type="checkbox"]
 {
    width:17px;
    height:17px;
    vertical-align: middle;
    cursor:pointer;
}
.app-form-item input[type="email"] {
    width:300px;
}
.app-form-item .comment {
    vertical-align: -2px;
    margin-left: 8px;
    margin-right:12px;
}
.app-form-item .app-form-option{
    line-height:35px;
}
.app-form-item .app-form-option span
 {
    margin-right:10px;
}

.app-form-item p {
    color:gray;
    font-size:14px;
}
.app-form-item.app-form-date>span {
    position:relative;
    display:inline-block;
    width:200px;
}
.app-form-item.app-form-date>span>span{
    position:absolute;
    top:10px;
    right:15px;
}
.app-form-item input.input-warning{
    border-color:#FF5722!important;
}
.app-form-item .msg-warning{
    color:#FF5722!important;
    margin-top:5px;
}

.app-form input.cell-phone1 {
    width:50px;
}
.app-form input.cell-phone2,
.app-form input.cell-phone3 {
    width:60px;
}
.app-form .cell-phone3 {
    width:60px;
}

.app-form .app-form-item.address * {
    margin-bottom:5px;
}
.app-form .app-form-item.address .post-code {
    width:7em;
}

.app-form-simple>*{
    margin-bottom:10px;
}
.app-form-simple .qp-wrap-input{
    width:100%;
    display:block;
    position:relative;
}
.app-form-simple .qp-wrap-input .qp-input{
    display:block;
    width:100%;
    padding:20px 10px 10px 10px;
}
.app-form-simple .qp-wrap-input label{
    position: absolute;
    top: 50%;
    left: 10px;
    color: #8c8c8c;
    font-size: 14px;
    -webkit-transition: font .1s ease,top .1s ease,-webkit-transform .1s ease;
    transition: font .1s ease,top .1s ease,-webkit-transform .1s ease;
    -o-transition: font .1s ease,top .1s ease,-o-transform .1s ease;
    -moz-transition: font .1s ease,top .1s ease,transform .1s ease,-moz-transform .1s ease;
    transition: font .1s ease,top .1s ease,transform .1s ease;
    transition: font .1s ease,top .1s ease,transform .1s ease,-webkit-transform .1s ease,-moz-transform .1s ease,-o-transform .1s ease;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.app-form-simple .qp-wrap-input input:focus + label,
.app-form-simple .qp-wrap-input input.has-value + label{
    font-size:10px;
    top:12px;
}
.app-form-simple>.qp-line{
    height:0px;
}
/* .app-form-simple .warning-msg{
    position:absolute;
    top:40px;
} */
.qp-md-menu{display:none}
.qp-nav{
    /* height:50px; */
    /* z-index:3 */
}
.qp-nav-menu,.qp-nav-bars{
    display:inline-block;
}
.qp-nav .qp-dropdown{
    display:inline-block;
    margin-right:-4px;
}
.qp-nav .qp-dropdown:hover{
    box-shadow:1px 1px 50px 50px rgba(0,0,0,0.4) inset;
    color:#fff
}
.qp-nav .qp-nav-bars{
    display:none;
}

.qp-nav .qp-dropdown-content .qp-btn{
    width:100%;
    text-align:left;
}
.qp-nav-md .qp-dropdown-content{
    /* display: block; */
    /* position:relative; */
    border:0;
    margin-left:20px;
}
.qp-nav-md .qp-dropdown:hover .qp-dropdown-content{
    position:relative;
}
.qp-nav-md .qp-btn{
    background-color:#fff;
    display:block;
    text-align:left;
}
.qp-nav .qp-dropdown-content{
    min-width:200px;
    animation-name: dropdownmv;
    animation-duration: .1s;
}
@keyframes dropdownmv {
    from{opacity:0}
    to{opacity:1}
}
@media (max-width:768px) {
    .qp-nav.as-responsive .qp-nav-bars{
        display:block;
    }
    .qp-nav.as-responsive .qp-nav-menu{
        display:none;
    }
}