/* Table of Contents ================================================== #Modal #Media Queries */ /* #Modal ================================================== */ .modal-backdrop { background-color: 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-color: 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-column { display: block; float: left; margin-right: 2.5%; margin-left: 2.5%; } .modal-column.alpha { margin-left: 0; } .modal-column.omega { margin-right: 0; } .modal-one-quarter-column { width: 22.5%; } .modal-half-column { width: 47.5%; } .modal-three-quarters-column { width: 72.5%; } .modal-header { border-top-left-radius: 5px; border-top-right-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-top: 1px solid rgba(217,222,225,1); border-bottom: 1px solid rgba(227,232,235,1); max-height: 300px; overflow-y: scroll; padding: 15px 18px; position: relative; } .modal-body p:last-child { margin-bottom: 0; } .modal-footer { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 0; padding: 0; } .modal-footer:before, .modal-footer:after { content: ""; display: table; line-height: 0; } .modal-footer:after { clear: both; } .modal-footer-btn, input[type="submit"].modal-footer-btn { -webkit-appearance: none; -moz-appearance: none; border: none; background: transparent; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-box-sizing: border-box; box-sizing: border-box; color: rgba(0,153,255,1); cursor: pointer; float: left; font-size: 13px; -webkit-font-smoothing: antialiased; font-weight: 500; line-height: 13px; margin: 0; padding: 18px 0 16px 0; text-align: center; text-indent: 0; text-rendering: geometricPrecision; text-transform: uppercase; vertical-align: middle; width: 100%; } .modal-footer-btn[disabled], input[type="submit"].modal-footer-btn[disabled] { color: rgba(158,171,179,1); } .modal-footer-btn-left, input[type="submit"].modal-footer-btn-left { border-right: 1px solid rgba(217,222,225,1); border-bottom-right-radius: 0; width: 280px; } .modal-footer-btn-right, input[type="submit"].modal-footer-btn-right { border-bottom-left-radius: 0; width: 280px; } /* #Media Queries ================================================== */ @media only screen and (max-width: 767px) { .modal { margin-left: -150px; width: 300px; } .modal-column-responsive { clear: both; float: none; } .modal-body { max-height: 180px; } .modal-footer-btn-left, input[type="submit"].modal-footer-btn-left { width: 150px; } .modal-footer-btn-right, input[type="submit"].modal-footer-btn-right { width: 150px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .modal { margin-left: -210px; width: 420px; } .modal-footer-btn-left, input[type="submit"].modal-footer-btn-left { width: 210px; } .modal-footer-btn-right, input[type="submit"].modal-footer-btn-right { width: 210px; } }