/* modal */
.modal-ar-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); visibility: hidden; opacity: 0; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1000; }
.modal-ar { position: fixed; top: 50%; left: 50%; width: 90vw; height: 95vh; max-width: 400px; max-height: 700px; background: #fff; visibility: hidden; opacity: 0; overflow-y: auto; -weblit-transition: 0.4s ease-out; transition: 0.4s ease-out; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); border-radius: 10px; z-index: 1001; }
.active-modal-ar { visibility: visible; opacity: 1; }
.show-modal-ar { visibility: visible; opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.modal-ar-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 20px; box-sizing: border-box; color: #000; overflow-y: auto; }

#login_standard .blk-txt p a:link, #login_standard .blk-txt p a:visited { font-weight: bold; color: #d8000c; }
#login_standard .blk-txt p a:hover { color: #000 !important; }


.modal-ar-content h3 { margin: 0 0 5px 0; padding: 0; font-size: 22px; font-weight: 700; line-height: 30px; color: #000; }
.modal-ar-content h4 { margin: 0 0 15px 0; font-size: 18px; font-weight: 600; line-height: 24px; color: #333; }
.modal-ar-content hr { display: block; width: 100%; height: 1px; margin: 15px 0 15px 0; background-color: #ccc; border: 0; }
.modal-ar-content p.recupera-password { float: right; display: inline-block; padding: 15px 0; font-size: 14px; line-height: 22px; color: #000; }
.modal-ar-content p.recupera-password a:link, .modal-ar-content p.recupera-password a:visited { color: #d8000c; }
.modal-ar-content p.recupera-password a:hover { color: #000 !important; }

.container-close-modal-ar { width: 100%; text-align: right; }
a.close-modal-ar:link, a.close-modal-ar:visited { display: inline-block; padding: 10px 30px; font-size: 14px; font-weight: 700; line-height: 22px; text-align: center; color: #fff; background-color: #d8000c; border: #d8000c 2px solid; border-radius: 0; }
a.close-modal-ar:hover { background-color: #fff; color: #d8000c; }

p.opt-txt { display: block; width: 100%; margin: 30px 0 15px 0; font-size: 14px; line-height: 22px; text-align: center; color: #000; }

/* form in modal */
.modal-ar-content .form-ar label { display: block; padding: 0 0 8px 5px; font-size: 12px; font-weight: 600; line-height: 20px; }
.modal-ar-content .form-ar input { display: block; width: 100%; height: 40px; padding: 0 10px; margin-bottom: 30px; box-sizing: border-box; font-size: 14px; line-height: 40px; color: #000; background-color: #fff; -webkit-appearance: none; -moz-appearance: none; border: #ccc 1px solid; border-radius: 10px; }
.modal-ar-content .form-ar textarea { display: block; width: 100%; height: 138px; padding: 10px; margin-bottom: 52px; box-sizing: border-box; font-size: 14px; line-height: 20px; color: #000; background-color: #fff; -webkit-appearance: none; -moz-appearance: none; border: #ccc 1px solid; border-radius: 10px; resize: vertical; }

.modal-ar-content .form-ar .check-ar { float: left; position: relative; display: inline-block; height: 22px; margin: 15px 0; }
.modal-ar-content .form-ar .check-ar input { display: none; height: initial; width: initial; margin-bottom: 0; padding: 0; cursor: pointer; }
.modal-ar-content .form-ar .check-ar label { position: relative; padding: 0 0 0 32px !important; font-size: 14px; line-height: 22px; cursor: pointer; }
.modal-ar-content .form-ar .check-ar label:before { content: ''; position: absolute; left: 0; top: 0; display: inline-block; width: 22px; height: 22px; box-sizing: border-box; -webkit-appearance: none; appearance: none; background-color: transparent; border: 1px solid #ccc; border-radius: 5px; vertical-align: middle; cursor: pointer; }
.modal-ar-content .form-ar .check-ar input:checked + label:after { content: ''; display: block; position: absolute; top: 2px; left: 8px; width: 7px; height: 14px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.modal-ar-content .blk-txt { display: block; margin-bottom: 20px; }
.modal-ar-content .blk-txt p { padding: 0; font-size: 13px; line-height: 22px; }

/* show/hide password */
.modal-ar-content .form-ar .password-wrapper { position: relative; width: 100%; margin-bottom: 30px; }
.modal-ar-content .form-ar .password-wrapper input { position: relative; width: 100%; padding-right: 40px; box-sizing: border-box; z-index: 1; }
.modal-ar-content .form-ar .password-wrapper .field-icon { position: absolute; top: 28px; right: 0; width: 40px; height: 40px; font-size: 14px; line-height: 40px; text-align: center; color: #000; cursor: pointer; z-index: 2; }

.modal-ar-content .form-ar .container-btn-box { position: relative; display: block; width: 100%; height: 50px; }
.modal-ar-content .form-ar .container-btn-box.disabled .btn-box { font-size: 0; background-color: #d8000c !important; }
.modal-ar-content .form-ar .container-btn-box.disabled:after { content: '\f1ce'; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; font-family: 'fontAwesome'; font-weight: normal; font-size: 20px; text-align: center; line-height: 30px; color: #fff; animation: rotate-btnbox 1s linear infinite; z-index: 2; transform-origin: center; }

.modal-ar-content .form-ar .btn-box { position: relative; display: block; width: 100%; height: auto !important; padding: 10px 20px; font-size: 16px; font-weight: 700; line-height: 26px; text-transform: uppercase; text-align: center; color: #fff; background-color: #d8000c; border: #d8000c 2px solid; border-radius: 0; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index: 1; }
.modal-ar-content .form-ar .btn-box:hover { color: #d8000c; background-color: #fff; }

@keyframes rotate-btnbox {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}