.modal_back{position: fixed; top:0px; left:0px; z-index:1055; width:100%; height: 100%; overflow-x: hidden; overflow-y: hidden; background-color:rgba(0,0,0,0.5); opacity: 0; transition:all 0.3s ease-in; display: block;}
.modal-on .modal_back{opacity: 1;}

.modal_back .modal{max-width:500px; width:auto; position: relative; margin:1.75rem auto; transform: translateY(-50px); opacity: 0; transition:all 0.3s ease-in; transition-delay: 0s; background-color:#fff; border-radius: 3px; border:1px solid rgba(0,0,0,0.3); display: block;}
.modal-on .modal{opacity: 1; transform:translateY(0)}

.modal-header{padding:1em; border-bottom: 1px solid #dedede; font-weight: 700; font-size: 1.2em; position: relative; display: flex; align-items: center; justify-content: space-between;}
.modal-title{margin-bottom: 0; margin-top:0; line-height: 1.5em;}
.modal-body{padding:24px;}
.modal-footer{padding:1em; border-top:1px solid #dedede; display: flex; justify-content:  flex-end; flex-wrap: wrap; align-items: center;}
.modal-footer .button{margin-left: 2px; border-radius: 4px; padding:8px 14px;}
.modal-header .hide_modal{ box-sizing: content-box; width:1em; height: 1em; color:#000; background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border:0; border-radius: 0.25rem; opacity: 0.5; cursor: pointer; padding:0.5rem; margin:-0.5rem -0.5rem -0.5rem auto; transition: all 0.3s ease-in-out;}
.modal-header .hide_modal:hover{ color:#000; text-decoration: none; opacity: 0.75;}

.error .modal-header{background-color:#be0d0d; color:#fff;}
.error .modal-header .hide_modal{color:#fff; background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; opacity: 1;}

.success .modal-header{background-color:#1f9425; color:#fff;}
.success .modal-header .hide_modal{color:#fff; background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; opacity: 1;}
.notice.modal{color:#000;}


.warning.modal{font-style:inherit; color:inherit; font-weight: inherit; font-size: inherit;}
.warning.modal .modal-header{background-color:#db881b; color:#fff;}
.warning.modal .modal-header .hide_modal{color:#fff; background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; opacity: 1;}

.notice.modal .modal-header{background-color:#307ce0; color:#fff;}
.notice.modal .modal-header .hide_modal{color:#fff; background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; opacity: 1;}