popModal.min.css

/*
popModal - 1.26 [27.10.17]
Author: vadimsva
Github: https://github.com/vadimsva/popModal
*/
.confirmModal *,.dialogModal *,.hintModal .hintModal_container,.popModal{box-sizing:border-box}.animated,.confirmModal,.dialogModal,.hintModal{backface-visibility:hidden}.popModal{position:absolute;background:#fff;padding:15px;border:1px solid #c5d0db;box-shadow:0 2px 8px rgba(0,0,0,.12);text-align:left;max-width:300px;min-width:180px;z-index:9997;border-radius:3px}.popModal.expand{max-width:500px}.popModal .close{line-height:16px;font-size:28px;width:16px;font-weight:700;font-family:serif;position:absolute;right:8px;top:8px;color:#000;opacity:.2;padding:0;cursor:pointer;background:0 0;border:0;outline:0}.notifyModal .notifyModal_content,.popModal .popModal_content{font-size:14px;font-weight:initial;font-style:initial;color:initial;text-transform:initial}.popModal .close:hover{opacity:1}.popModal .popModal_content{margin:15px auto;word-wrap:break-word;font-family:sans-serif;text-decoration: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:after,.popModal:before{content:'';position:absolute;border:10px solid transparent}.popModal:after{z-index:1}.popModal.bottomCenter:before,.popModal.bottomLeft:before,.popModal.bottomRight:before{border-top-width:0;border-bottom-color:#c5d0db;top:-10px;left:10px}.popModal.bottomCenter:after,.popModal.bottomLeft:after,.popModal.bottomRight:after{border-top-width:0;border-bottom-color:#fff;top:-9px;left:10px}.popModal.bottomRight:after,.popModal.bottomRight:before{left:auto;right:10px}.popModal.bottomCenter:after,.popModal.bottomCenter:before{left:50%;margin-left:-10px}.popModal.leftCenter:before,.popModal.leftTop:before{border-right-width:0;border-left-color:#c5d0db;top:10px;right:-10px}.popModal.leftCenter:after,.popModal.leftTop:after{border-right-width:0;border-left-color:#fff;top:10px;right:-9px}.popModal.rightCenter:before,.popModal.rightTop:before{border-left-width:0;border-right-color:#c5d0db;top:10px;left:-10px}.popModal.rightCenter:after,.popModal.rightTop:after{border-left-width:0;border-right-color:#fff;top:10px;left:-9px}.popModal.leftCenter:after,.popModal.leftCenter:before,.popModal.rightCenter:after,.popModal.rightCenter:before{top:50%;margin-top:-10px}@media (max-width:400px){.popModal{position:absolute;max-width:100%!important;right:20px}}.notifyModal.centerTop,.notifyModal.centerTopSlide,.notifyModal.overlay{left:0;right:0;top:0}.notifyModal{position:fixed;z-index:999999;background:rgba(255,255,255,.5);opacity:0;cursor:pointer;transition:all .2s ease}.notifyModal.overlay{bottom: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,.3);transition:all .2s ease;transform:scale(.95);text-decoration: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.rightTop,.notifyModal.rightTopSlide{top:0;right:0}.notifyModal.center,.notifyModal.center .notifyModal_content{left:0;top:35%;right:0}.notifyModal.center{bottom:auto}.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.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.centerBottomSlide.open .notifyModal_content,.notifyModal.centerTopSlide.open .notifyModal_content{transform:scale(1) translateY(0)}.notifyModal.leftBottomSlide.open .notifyModal_content,.notifyModal.leftTopSlide.open .notifyModal_content,.notifyModal.rightBottomSlide.open .notifyModal_content,.notifyModal.rightTopSlide.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:700;font-family:serif;position:absolute;right:8px;top:8px;color:#000;opacity:.2;padding:0;cursor:pointer;background:0 0;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.dark .notifyModal_content:after,.notifyModal.icon.notify .notifyModal_content:after,.notifyModal.icon.simple .notifyModal_content:after{content:'i';font-family:monospace;font-weight:700;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.centerBottom .notifyModal_content,.notifyModal.centerTop .notifyModal_content{margin:auto 20px}}.hintModal{position:relative;overflow:visible;transform:translateZ(0);z-index:1}.hintModal .hintModal_container{display:none;left:0;margin:6px 0 0;position:absolute;background:#F8F4E1;padding:15px;border:1px solid #c7c5b8;box-shadow:0 2px 8px rgba(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:400;font-style:initial;color:#333;top:100%;text-decoration:initial;text-transform:initial}.confirmModal .confirmModal_body,.dialogModal .dialogModal_body,.titleModal_container{font-weight:initial;font-style:initial;text-decoration:initial;text-transform:initial}.hintModal .hintModal_container:after,.hintModal .hintModal_container:before{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:after,.hintModal.bottomRight .hintModal_container:before{left:auto;right:10px}.hintModal.bottomCenter .hintModal_container{left:-120px;right:-120px;margin-left:auto;margin-right:auto}.hintModal.bottomCenter .hintModal_container:after,.hintModal.bottomCenter .hintModal_container:before{left:50%;margin-left:-6px}.hintModal:hover .hintModal_container{display:block}.dialogModal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:888888;opacity:0;transition:all .2s ease}.dialogModal.open{opacity:1}.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:.2;padding:0;cursor:pointer;background:0 0;border:0;outline:0;width:30px;float:right}.dialogModal .dialogModal_top .dialogModal_header .close:hover{opacity:1}.dialogModal .dialogModal_top .dialogModal_header .dialogNext.notactive,.dialogModal .dialogModal_top .dialogModal_header .dialogPrev.notactive{opacity:.1!important;cursor:default}.dialogModal .dialogModal_top .dialogModal_header .dialogNext,.dialogModal .dialogModal_top .dialogModal_header .dialogPrev{line-height:23px;font-size:30px;color:#000;opacity:.2;cursor:pointer;background:0 0;border:0;outline:0;float:right;width:30px;height:30px;text-align:center}.dialogModal .dialogModal_top .dialogModal_header .dialogNext:hover,.dialogModal .dialogModal_top .dialogModal_header .dialogPrev: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,.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;color: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{overflow-y:hidden}.dialogModal.modal .dialogModal_container{opacity:0;transition:all .2s ease;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_body,.dialogModal .dialogModal_container,.dialogModal .dialogModal_top .dialogModal_header{width:auto!important}}@media (max-width:400px){.dialogModal .dialogModal_body,.dialogModal .dialogModal_footer{border-radius:0}}.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}.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{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:888888;overflow:auto;opacity:0;transition:all .2s ease}.confirmModal.open{opacity:1}.confirmModal .confirmModal_body{position:absolute;width:400px;left:0;right:0;margin:0 auto 40px;background:#fff;font-size:14px;color: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}}.animated{animation-duration:.2s;animation-fill-mode:both;transform:translateZ(0)}.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)}}