/*GLOBAL CSS STARTS*/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; font-size: 14px; } .h4, .h5, .h6, h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; } /*GLOBAL CSS ENDS*/ .modal { display: none; opacity: 0; } .windowModal { display: block; opacity: 1; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; } .windowModal .modal-dialog { position: relative; width: auto; margin: 10px; } .modal-frame-ui .windowModal.modal .modal-dialog { -webkit-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } @media (min-width: 576px) { .modal-frame-ui .modal-dialog { min-height: calc(100% - 3.5rem); display: flex; align-items: center; max-width: 500px; margin: 1.75rem auto; } } .modal-frame-ui .modal-content { border: none; box-shadow: 0px 0px 20px rgb(0 0 0 / 5%); width: 100%; position: relative; background-color: #fff; background-clip: padding-box; border-radius: 6px; outline: 0; } .modal-frame-ui .modal-header { padding: 15px 20px; display: flex; align-items: center; text-align: left; border: none; box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.05); } .modal-frame-ui .modal-header .modal-title { font-size: 22px; color: #222; font-weight: 600; margin: 0; margin-left: 25px; } .modal-frame-ui .modal-body { min-height: 250px; color: #b8b8b8; text-align: center; position: relative; padding: 15px; } .modal-frame-ui .modal-body .body-title { font-size: 24px; color: #6F36FF; margin-top: 25px; font-weight: bold; } .modal-frame-ui .modal-body .body-desc { margin: 0 0 10px; } .modal-frame-ui .modal-btns-right { margin-left: auto; color: #ccc; font-size: 20px; } .btn { cursor: pointer; } .modal-frame-ui .modal-header-btns .btn { width: 12px; height: 12px; background: #111; border-radius: 3px; opacity: 1; margin-left: 10px; text-align: center; display: flex; align-items: center; justify-content: center; float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; padding: 0; border: 1px solid transparent; text-shadow: 0 1px 0 #fff; } .modal-frame-ui .modal-header-btns .btn:hover, .modal-frame-ui .modal-header-btns .btn:focus { outline: none; } .modal-frame-ui .modal-header-btns .btn i { color: #00a682; margin: 0; font-size: 14px; } .modal-frame-ui .modal-header-btns .btn.red { background: #fc5753; } .modal-frame-ui .modal-header-btns .btn.yellow { background: #fdbc40; } .modal-frame-ui .modal-header-btns .btn.green { background: #33c748; } .modal-frame-ui .modal-frame-ui .btn-open { display: flex; align-items: center; justify-content: center; height: 100vh; } .modal-frame-ui .btn-primary { background: #6F36FF; border: none; } .modal-frame-ui .modal-header .btnGrp{ position: absolute; top: 8px; right: 10px; } .modal-frame-ui .minimize{ width: auto; height: 35px; overflow: hidden !important; padding: 0px !important; margin: 0px; float: left; bottom: 20px !important; left: 20px; top: auto; box-shadow: 0px 0px 20px rgb(0 0 0 / 5%); } .modal-frame-ui .minimize .modal-dialog, .modal-frame-ui .minimize .modal-content{ height: 100%; width: 100%; margin: 0px !important; padding: 0px !important; } .modal-frame-ui .minimize .modal-header{ height: 100%; width: 100%; margin: 0px !important; padding: 3px 5px !important; } .modal-frame-ui .minmaxCon{ height: 35px; bottom: 1px; left: 1px; position: fixed; right: 1px; z-index: 9999; } @media screen and (max-width: 767px) { .windowModal { display: flex; align-items: center; } }