/*
popModal - 1.26 [27.10.17]
Author: vadimsva
Github: https://github.com/vadimsva/popModal
*/
/* popModal */
.popModal {position:absolute;background:#fff;padding:15px;border:1px solid #c5d0db;box-shadow:0 2px 8px rgba(0,0,0,0.12);text-align:left;max-width:300px;min-width:180px;z-index:9997;box-sizing:border-box;border-radius:3px}
.popModal.expand {max-width:500px}
.popModal .close {line-height:16px;font-size:28px;width:16px;font-weight:bold;font-family:serif;position:absolute;right:8px;top:8px;color:#000;opacity:0.2;padding:0;cursor:pointer;background:transparent;border:0;outline:0}
.popModal .close:hover {opacity:1}
.popModal .popModal_content {margin:15px auto;word-wrap:break-word;font-family:sans-serif;font-size:14px;font-weight:initial;font-style:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial}
.popModal .popModal_content.popModal_contentOverflow {max-height:300px;overflow-y:auto;overflow-x:hidden;margin:15px -8px;padding:0 7px}
.popModal .popModal_content:before {content:'';position:absolute;left:0;right:0;height:20px;bottom:-20px}
.popModal .popModal_content.popModal_asMenu {margin:-5px -15px}
.popModal .popModal_content.popModal_asMenu ul {list-style:none;padding:0}
.popModal.bottomRight .popModal_content.popModal_asMenu ul {text-align:right}
.popModal .popModal_content.popModal_asMenu ul > li {line-height:40px}
.popModal .popModal_content.popModal_asMenu ul > li:empty {border-top:1px solid #ddd}
.popModal .popModal_content.popModal_asMenu ul > li > a {display:block;padding:0 15px;text-decoration:none}
.popModal .popModal_content.popModal_asMenu ul > li > a:hover {background-color:#eee}
.popModal .popModal_footer {background:#fafafa;padding:15px;border-top:1px solid #ddd;text-align:right;position:absolute;bottom:0;left:0;right:0;border-radius:0 0 3px 3px}
.popModal .popModal_footer button {margin:0 0 0 5px}
.popModal:before,
.popModal:after {content:'';position:absolute;border:10px solid transparent}
.popModal:after {z-index:1}
.popModal.bottomLeft:before,
.popModal.bottomRight:before,
.popModal.bottomCenter:before {border-top-width:0;border-bottom-color:#c5d0db;top:-10px;left:10px}
.popModal.bottomLeft:after,
.popModal.bottomRight:after,
.popModal.bottomCenter:after {border-top-width:0;border-bottom-color:#fff;top:-9px;left:10px}
.popModal.bottomRight:before,
.popModal.bottomRight:after {left:auto;right:10px}
.popModal.bottomCenter:before,
.popModal.bottomCenter:after {left:50%;margin-left:-10px}
.popModal.leftTop:before,
.popModal.leftCenter:before {border-right-width:0;border-left-color:#c5d0db;top:10px;right:-10px}
.popModal.leftTop:after,
.popModal.leftCenter:after {border-right-width:0;border-left-color:#fff;top:10px;right:-9px}
.popModal.rightTop:before,
.popModal.rightCenter:before {border-left-width:0;border-right-color:#c5d0db;top:10px;left:-10px}
.popModal.rightTop:after,
.popModal.rightCenter:after {border-left-width:0;border-right-color:#fff;top:10px;left:-9px}
.popModal.leftCenter:before,
.popModal.rightCenter:before {top:50%;margin-top:-10px}
.popModal.leftCenter:after, 
.popModal.rightCenter:after {top:50%;margin-top:-10px}
@media (max-width: 100%){
.popModal {position:absolute;max-width:100%!important;right:20px}
}


/* notifyModal */
.notifyModal {position:fixed;z-index:999999;background:rgba(255,255,255,0.5);opacity:0;cursor:pointer;transition:all 200ms ease}
.notifyModal.overlay {top:0;bottom:0;left:0;right:0}
.notifyModal.overlay.center {top:0;bottom:0}
.notifyModal.open {opacity:1}
.notifyModal.open .notifyModal_content {transform:scale(1)}
.notifyModal .notifyModal_content {position:absolute;background:#F9EDBE;width:380px;min-width:200px;padding:25px;margin:auto;text-align:justify;box-shadow:0 2px 6px rgba(0,0,0,0.3);transition:all 200ms ease;transform:scale(0.95);font-size:14px;font-weight:initial;font-style:initial;color:initial;text-decoration:initial;text-transform:initial;line-height:18px;box-sizing:border-box;border-radius:3px}
.notifyModal.alert .notifyModal_content {background:#922626;color:#eab1b1}
.notifyModal.simple .notifyModal_content {background:#fff;color:#333}
.notifyModal.dark .notifyModal_content {background:#333;color:#ccc}
.notifyModal.dark .notifyModal_content .close {color:#ccc}
.notifyModal.leftTop,
.notifyModal.leftTopSlide {top:0;left:0}
.notifyModal.centerTop,
.notifyModal.centerTopSlide {top:0;left:0;right:0}
.notifyModal.rightTop,
.notifyModal.rightTopSlide {top:0;right:0}
.notifyModal.center {top:35%;bottom:auto;left:0;right:0}
.notifyModal.leftBottom,
.notifyModal.leftBottomSlide {bottom:0;left:0}
.notifyModal.centerBottom,
.notifyModal.centerBottomSlide {bottom:0;left:0;right:0}
.notifyModal.rightBottom,
.notifyModal.rightBottomSlide {bottom:0;right:0}
.notifyModal.center .notifyModal_content {left:0;right:0;top:35%}
.notifyModal.leftTop .notifyModal_content {left:20px;top:20px}
.notifyModal.centerTop .notifyModal_content {left:0;right:0;top:20px}
.notifyModal.rightTop .notifyModal_content {right:20px;top:20px}
.notifyModal.leftBottom .notifyModal_content {left:20px;bottom:20px}
.notifyModal.centerBottom .notifyModal_content {left:0;right:0;bottom:20px}
.notifyModal.rightBottom .notifyModal_content {right:20px;bottom:20px}
.notifyModal.centerTopSlide.open .notifyModal_content,
.notifyModal.centerBottomSlide.open .notifyModal_content {transform:scale(1) translateY(0)}
.notifyModal.leftTopSlide.open .notifyModal_content,
.notifyModal.leftBottomSlide.open .notifyModal_content,
.notifyModal.rightTopSlide.open .notifyModal_content,
.notifyModal.rightBottomSlide.open .notifyModal_content {transform:scale(1) translateX(0)}
.notifyModal.centerTopSlide .notifyModal_content {top:0;left:0;right:0;transform:scale(1) translateY(-100%);border-radius:0 0 3px 3px}
.notifyModal.centerBottomSlide .notifyModal_content {bottom:0;left:0;right:0;transform:scale(1) translateY(100%);border-radius:3px 3px 0 0}
.notifyModal.leftTopSlide .notifyModal_content {left:0;top:20px;transform:scale(1) translateX(-100%);border-radius:0 3px 3px 0}
.notifyModal.leftBottomSlide .notifyModal_content {left:0;bottom:20px;transform:scale(1) translateX(-100%);border-radius:0 3px 3px 0}
.notifyModal.rightTopSlide .notifyModal_content {right:0;top:20px;transform:scale(1) translateX(100%);border-radius:3px 0 0 3px}
.notifyModal.rightBottomSlide .notifyModal_content {right:0;bottom:20px;transform:scale(1) translateX(100%);border-radius:3px 0 0 3px}
.notifyModal .notifyModal_content .close {line-height:16px;font-size:28px;width:16px;font-weight:bold;font-family:serif;position:absolute;right:8px;top:8px;color:#000;opacity:0.2;padding:0;cursor:pointer;background:transparent;border:0;outline:0}
.notifyModal .notifyModal_content .close:hover {opacity:1}
.notifyModal.icon .notifyModal_content:after {position:absolute;top:50%;bottom:0;left:20px;font-size:60px;line-height:0}
.notifyModal.icon .notifyModal_content {padding-left:90px}
.notifyModal.icon.notify .notifyModal_content:after,
.notifyModal.icon.simple .notifyModal_content:after,
.notifyModal.icon.dark .notifyModal_content:after {content:'i';font-family:monospace;font-weight:bold;width:40px;text-align:center;font-size:35px;border-radius:50%;color:#c5b68e;height:40px;line-height:40px;top:calc(50% - 20px);border:4px solid}
.notifyModal.icon.simple .notifyModal_content:after {color:#ccc}
.notifyModal.icon.dark .notifyModal_content:after {color:#666}
.notifyModal.icon.alert .notifyModal_content:after {content:'\26A0'}
@media (max-width: 400px){
.notifyModal .notifyModal_content {width:auto}
.notifyModal.center .notifyModal_content {top:15%}
.notifyModal.center .notifyModal_content,
.notifyModal.centerTop .notifyModal_content,
.notifyModal.centerBottom .notifyModal_content {margin:auto 20px}
}


/* hintModal */
.hintModal {position:relative;overflow:visible;transform:translateZ(0);backface-visibility:hidden;z-index:1}
.hintModal .hintModal_container {display:none;left:0;margin:0;position:absolute;background:#F8F4E1;padding:15px;border:1px solid #c7c5b8;box-shadow:0 2px 8px rgba(0,0,0,0.12);opacity:0;text-align:justify;max-width:260px;min-width:260px;z-index:1;line-height:16px;border-radius:3px;font-size:13px;font-weight:normal;font-style:initial;margin-top:6px;color:#333;top:100%;box-sizing:border-box;text-decoration:initial;text-transform:initial}
.hintModal .hintModal_container:before,
.hintModal .hintModal_container:after {content:'';position:absolute;border:6px solid transparent;border-top-width:0;border-bottom-color:#F8F4E1;top:-5px;left:10px}
.hintModal .hintModal_container:before {border-bottom-color:#c7c5b8;top:-6px}
.hintModal .hintModal_container:after {z-index:1}
.hintModal.bottomRight .hintModal_container {left:auto;right:0}
.hintModal.bottomRight .hintModal_container:before,
.hintModal.bottomRight .hintModal_container:after {left:auto;right:10px}
.hintModal.bottomCenter .hintModal_container {left:-120px;right:-120px;margin-left:auto;margin-right:auto}
.hintModal.bottomCenter .hintModal_container:before,
.hintModal.bottomCenter .hintModal_container:after {left:50%;margin-left:-6px}
.hintModal:hover .hintModal_container {display:block}


/* dialogModal */
.dialogModal {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:888888;opacity:0;transition:all 200ms ease;backface-visibility:hidden}
.dialogModal.open {opacity:1}
.dialogModal * {box-sizing:border-box}
.dialogModal_container {position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:scroll}
.dialogModal .dialogModal_top {position:fixed;left:0;right:0;z-index:2;opacity:0}
.dialogModal .dialogModal_top .dialogModal_header {padding:15px 25px;line-height:30px;height:60px;font-size:120%;margin:auto;width:650px;background:#fff;border-bottom:1px solid #f5f5f5;position:relative}
.dialogModal .dialogModal_top .dialogModal_header .close {line-height:30px;font-size:40px;font-family:serif;color:#000;opacity:0.2;padding:0;cursor:pointer;background:transparent;border:0;outline:0;width:30px;float:right}
.dialogModal .dialogModal_top .dialogModal_header .close:hover {opacity:1}
.dialogModal .dialogModal_top .dialogModal_header .dialogPrev.notactive,
.dialogModal .dialogModal_top .dialogModal_header .dialogNext.notactive {opacity:0.1!important;cursor:default}
.dialogModal .dialogModal_top .dialogModal_header .dialogPrev,
.dialogModal .dialogModal_top .dialogModal_header .dialogNext {line-height:23px;font-size:30px;color:#000;opacity:0.2;cursor:pointer;background:transparent;border:0;outline:0;float:right;width:30px;height:30px;text-align:center}
.dialogModal .dialogModal_top .dialogModal_header .dialogPrev:hover,
.dialogModal .dialogModal_top .dialogModal_header .dialogNext:hover {opacity:1} 
.dialogModal .dialogModal_top .dialogModal_header span {display:inline-block;overflow:hidden;white-space:nowrap;width:calc(100% - 90px);text-overflow:ellipsis}
.dialogModal .dialogModal_top .dialogModal_header:after {content:'';position:absolute;bottom:-11px;left:0;right:0;background:rgba(255,255,255,0.5);height:10px}
.dialogModal .dialogModal_body {position:absolute;width:650px;left:0;right:0;margin:60px auto 40px;background:#fff;font-family:sans-serif;font-size:14px;font-weight:initial;font-style:initial;color:initial;text-decoration:initial;text-transform:initial;opacity:0;border-radius:0 0 3px 3px}
.dialogModal .dialogModal_body .dialogModal_header {display:none}
.dialogModal .dialogModal_content {padding:15px 25px 25px;line-height:20px;min-height:200px}
.dialogModal .dialogModal_footer {background:#fafafa;padding:15px 25px;border-top:1px solid #ddd;text-align:right;border-radius:0 0 3px 3px}
.dialogModal .dialogModal_footer button {margin:0 0 0 5px}
.dialogModal.modal .dialogModal_container {opacity:0;transition:all 200ms ease}
.dialogModal.modal {overflow-y:hidden}
.dialogModal.modal .dialogModal_container {position:absolute;overflow-y:auto;margin:auto;width:650px;left:0;right:0;bottom:40px}
.dialogModal.modal .dialogModal_top .dialogModal_header {border-radius:3px 3px 0 0}
.dialogModal.modal .dialogModal_top {margin-top:-60px}
.dialogModal.modal .dialogModal_body {margin:auto;width:auto}
body.dialogModalOpen {overflow:hidden}
@media (max-width: 680px){
.dialogModal .dialogModal_container, .dialogModal .dialogModal_top .dialogModal_header, .dialogModal .dialogModal_body {width:auto!important}
}
@media (max-width: 400px){
.dialogModal .dialogModal_body,
.dialogModal .dialogModal_footer {border-radius:0}
}


/* titleModal */
.titleModal {}
.titleModal_container {position:absolute;z-index:99999;background:#000;color:#fff;padding:5px 10px;line-height:16px;margin-top:12px;border-radius:3px;font-size:13px;text-align:center;max-width:260px;opacity:0;white-space:normal;font-weight:initial;font-style:initial;text-decoration:initial;text-transform:initial}
.titleModal_container:after {content:'';position:absolute;border:6px solid transparent;border-top-width:0;border-bottom-color:#000;top:-6px;left:50%;margin-left:-6px}
.titleModal_container.top {margin-top:-6px}
.titleModal_container.top:after {border:6px solid transparent;border-bottom-width:0;border-top-color:#000;top:auto;bottom:-6px;left:50%;margin-left:-6px}
.titleModal_container.left {margin-top:auto;margin-left:3px}
.titleModal_container.left:after {border:6px solid transparent;border-right-width:0;border-left-color:#000;top:50%;left:auto;right:-6px;margin-left:0;margin-top:-6px}
.titleModal_container.right {margin-top:auto;margin-left:-3px}
.titleModal_container.right:after {border:6px solid transparent;border-left-width:0;border-right-color:#000;top:50%;left:0;margin-top:-6px}
.titleModal.light + .titleModal_container {background:#fff;color:#000;border:1px solid #ccc}
.titleModal.light + .titleModal_container:after {border-bottom-color:#fff}
.titleModal.light + .titleModal_container:before {content:'';position:absolute;border:7px solid transparent;border-top-width:0;border-bottom-color:#ccc;top:-7px;left:50%;margin-left:-7px}
.titleModal.light + .titleModal_container.top:after {border:6px solid transparent;border-bottom-width:0;border-top-color:#fff}
.titleModal.light + .titleModal_container.top:before {border:6px solid transparent;border-bottom-width:0;border-top-color:#ccc;top:auto;bottom:-7px;left:50%;margin-left:-6px}
.titleModal.light + .titleModal_container.left:after {border:6px solid transparent;border-right-width:0;border-left-color:#fff}
.titleModal.light + .titleModal_container.left:before {border:7px solid transparent;border-right-width:0;border-left-color:#ccc;top:50%;left:auto;right:-7px;margin-left:0;margin-top:-7px}
.titleModal.light + .titleModal_container.right:after {border:6px solid transparent;border-left-width:0;border-right-color:#fff}
.titleModal.light + .titleModal_container.right:before {border:7px solid transparent;border-left-width:0;border-right-color:#ccc;top:50%;left:0;margin-top:-7px}


/* confirmModal */
.confirmModal {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:888888;overflow:auto;opacity:0;transition:all 200ms ease;backface-visibility:hidden}
.confirmModal.open {opacity:1}
.confirmModal * {box-sizing:border-box}
.confirmModal .confirmModal_body {position:absolute;width:400px;left:0;right:0;margin:0 auto 40px;background:#fff;font-size:14px;font-weight:initial;font-style:initial;color:initial;text-decoration:initial;text-transform:initial;opacity:0;border-radius:0 0 3px 3px}
.confirmModal .confirmModal_body.modal {border-radius:3px}
.confirmModal .confirmModal_body.open {opacity:1}
.confirmModal .confirmModal_content {padding:60px 40px;line-height:20px}
.confirmModal .confirmModal_footer {background:#fafafa;padding:15px 25px;border-top:1px solid #ddd;text-align:right;border-radius:0 0 3px 3px}
.confirmModal .confirmModal_footer button {margin:0 0 0 5px}
.confirmModal .confirmModal_body.needConfirm {animation-name:needConfirm;animation-timing-function:ease;animation-iteration-count:3}
@keyframes needConfirm {
  0%, 100% {transform:scale(1)}
	50% {transform:scale(1.1)}
}
body.confirmModalOpen {overflow:hidden}
@media (max-width: 430px){
.confirmModal .confirmModal_body {width:100%}
.confirmModal .confirmModal_body,
.confirmModal .confirmModal_footer {border-radius:0}
}


/* animation */
.animated {animation-duration:0.2s;animation-fill-mode:both;transform:translateZ(0);backface-visibility:hidden}
.fadeInLeft {animation-name:fadeInLeft}
.fadeOutLeft {animation-name:fadeOutLeft}
.fadeInRight {animation-name:fadeInRight}
.fadeOutRight {animation-name:fadeOutRight}
.fadeInTop {animation-name:fadeInTop}
.fadeInTopBig {animation-name:fadeInTopBig}
.fadeOutTop {animation-name:fadeOutTop}
.fadeInBottom {animation-name:fadeInBottom}
.fadeOutBottom {animation-name:fadeOutBottom}

@keyframes fadeInLeft {
  0% {opacity:0;transform:translateX(-10px)}
  100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeOutLeft {
  0% {opacity:1;transform:translateX(0)}
	100% {opacity:0;transform:translateX(-10px)}
}

@keyframes fadeInRight {
  0% {opacity:0;transform:translateX(10px)}
  100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeOutRight {
  0% {opacity:1;transform:translateX(0)}
	100% {opacity:0;transform:translateX(10px)}
}

@keyframes fadeInTop {
  0% {opacity:0;transform:translateY(-10px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeOutTop {
  0% {opacity:1;transform: translateY(0)}
	100% {opacity:0;transform:translateY(-10px)}
}

@keyframes fadeInTopBig {
  0% {opacity:0;transform:translateY(-100%)}
  100% {opacity:1;transform:translateY(0)}
}

@keyframes fadeInBottom {
  0% {opacity:0;transform:translateY(10px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeOutBottom {
  0% {opacity:1;transform:translateY(0)}
	100% {opacity:0;transform:translateY(10px)}
}