/* Table of Contents ================================================== #Modal #Media Queries */ /* #Modal ================================================== */ .modal-backdrop { background: rgba(71,74,84,1); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 1040; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop, .modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); } .modal { background-clip: padding-box; background: rgba(255,255,255,1); border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,0.25); left: 50%; margin-left: -280px; outline: none; position: fixed; top: 0; width: 560px; z-index: 1050; } .modal.fade { -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; transition: opacity 0.3s linear, top 0.3s ease-out; top: -100%; } .modal.fade.in { top: 15%; } .modal-header { border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 21px 15px 18px 15px; } .modal-header h3 { font-size: 17px; letter-spacing: 1px; line-height: 17px; margin: 0; text-align: center; text-transform: uppercase; } .modal-body { border-bottom: 1px solid rgba(225,232,237,1); border-top: 1px solid rgba(225,232,237,1); max-height: 300px; overflow-y: scroll; padding: 15px 18px; position: relative; } .modal-body p:last-child { margin-bottom: 0; } .modal-footer { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-bottom: 0; padding: 0; } .modal-footer:after { clear: both; } .modal-footer-btn, input[type="submit"].modal-footer-btn { -webkit-appearance: none; -moz-appearance: none; background: transparent; border: none; -moz-box-sizing: border-box; box-sizing: border-box; color: rgba(15,135,226,1); cursor: pointer; float: left; font-size: 13px; -webkit-font-smoothing: antialiased; font-weight: 500; line-height: 13px; margin: 0; padding: 20px 0 18px 0; text-align: center; text-indent: 0; text-rendering: geometricPrecision; text-transform: uppercase; vertical-align: middle; width: 100%; } .modal-footer-btn:first-child, input[type="submit"].modal-footer-btn:first-child { border-bottom-left-radius: 5px; } .modal-footer-btn:last-child, input[type="submit"].modal-footer-btn:last-child { border-bottom-right-radius: 5px; } .modal-footer-btn[disabled], input[type="submit"].modal-footer-btn[disabled] { color: rgba(136,153,166,1); cursor: not-allowed; } .modal-footer-dual > .modal-footer-btn, .modal-footer-dual > input[type="submit"].modal-footer-btn { border-right: 1px solid rgba(225,232,237,1); width: 50%; } .modal-footer-dual > .modal-footer-btn:last-child, .modal-footer-dual > input[type="submit"].modal-footer-btn:last-child { border-right: none; } /* #Media Queries ================================================== */ @media only screen and (max-width: 767px) { .modal { margin-left: -150px; width: 300px; } .modal-body { max-height: 180px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .modal { margin-left: -210px; width: 420px; } }