/* Table of Contents ================================================== # Modal # Media Queries */ /* # Modal ================================================== */ .modal-backdrop { background: rgba(56,67,81,0.8); bottom: 0; height: 100%; left: 0; min-height: 100%; position: fixed; right: 0; top: 0; z-index: 1040; } .modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0; } .modal-backdrop.fade.in { filter: alpha(opacity=100); opacity: 1; } .modal { background-clip: padding-box; background: rgba(255,255,255,1); border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,0.5); display: none; left: 50%; margin-left: -280px; outline: 0; 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: 19px 15px 20px 15px; } .modal-header h3 { font-size: 17px; letter-spacing: 1px; line-height: 17px; margin: 0; text-transform: uppercase; text-align: center; } .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, button.modal-footer-btn, input.modal-footer-btn { -webkit-appearance: none; -moz-appearance: none; background: rgba(255,255,255,1); border: 0; -moz-box-sizing: border-box; box-sizing: border-box; color: rgba(0,132,255,1) !important; cursor: pointer; float: left; -webkit-font-smoothing: antialiased; font-weight: 500; font-size: 13px; line-height: 13px; margin: 0; padding: 20px 0 18px 0; text-rendering: geometricPrecision; text-transform: uppercase; text-indent: 0; text-align: center; vertical-align: middle; width: 100%; } .modal-footer-btn:first-child, button.modal-footer-btn:first-child, input.modal-footer-btn:first-child { border-bottom-left-radius: 5px; } .modal-footer-btn:last-child, button.modal-footer-btn:last-child, input.modal-footer-btn:last-child { border-bottom-right-radius: 5px; } .modal-footer-btn[disabled], button.modal-footer-btn[disabled], input.modal-footer-btn[disabled] { color: rgba(136,153,166,1) !important; cursor: not-allowed; } .modal-footer-btn-group > .modal-footer-btn, .modal-footer-btn-group > button.modal-footer-btn, .modal-footer-btn-group > input.modal-footer-btn { border-right: 1px solid rgba(225,232,237,1); width: 50%; } .modal-footer-btn-group > .modal-footer-btn:last-child, .modal-footer-btn-group > button.modal-footer-btn:last-child, .modal-footer-btn-group > input.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; } }