body.csc-modal-open{ pointer-events: none; overflow: hidden; } /* kendo components used in modals are placed in the body.*/ body.csc-modal-open > [class^='k-'], body.csc-modal-open > [class*=' k-'] { pointer-events: auto !important; } .csc-modal { width: auto; z-index: 1050 !important; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; display: none; } /* Only enable pointer events and background effect on the last .modal Note: must use :nth-child to target a specific css class */ body.csc-modal-open > .csc-modal:nth-child(n), body.csc-modal-open > .csc-modal:nth-child(n) ~ div { pointer-events: auto !important; } body.csc-modal-open > .csc-modal:nth-child(n)::before { content: ""; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(50,50,50,0.65); z-index: 1000 !important; pointer-events: none; overflow: hidden; } .csc-modal-dialog { height: auto; min-height: 550px; margin: auto; margin-top: 25px; background: #fff; z-index: 1300; position: relative; height: 90vh; } .csc-modal-content { position: relative; } .csc-modal-close { position: absolute; right: 20px; top: 12px; border: none; background: none; } .csc-modal-close span { font-size: 32px !important; line-height: 32px; vertical-align: middle; padding: 0; margin: 0; color: #222 !important; } .csc-modal-close:hover span { color: #d00 !important; } .csc-modal-header { vertical-align: middle; background: #f0f0f0 !important; border-bottom: 1px #ddd solid; padding: 15px; } .csc-modal-title { line-height: 26px; font-size: 20px; } .csc-modal-title > div{ display: inline-block; } .csc-modal-title i.fa { font-size: inherit; margin-right: 10px; } .csc-modal-title .csc-helplink i.fa { font-size: 20px; line-height: 26px; } .csc-modal-menu { position: absolute; top: 60px; left: 0px; bottom: 0px; width: 300px; background: #f7f7f7; overflow: auto; } .csc-modal-body { background: #fff !important; overflow-x: hidden; overflow-y: auto; padding: 15px !important; max-height: 80vh; } .csc-modal-header + .csc-modal-body { max-height: 85vh; top: 60px; height: 100%; width: 100%; } .csc-modal-menu + .csc-modal-body { position: absolute; top: 60px; left: 300px; bottom: 0px; width: calc(100% - 300px); } .csc-modal-footer { padding: 15px; border-top: 1px #ddd solid; } /* Modal Popup */ .csc-popup { display: block !important; } .csc-popup > .csc-modal-dialog { margin: auto; margin-top: 80px; width: 400px !important; min-height: auto !important; } .csc-popup .csc-modal-content { position: relative; min-height: 300px; border: 1px #aaa solid; box-shadow: 0px 5px 15px rgba(0,0,0,0.4); } .csc-popup-lg > .csc-modal-dialog { width: 800px !important; } .csc-popup-lg .csc-modal-content { min-height: 90vh; } .csc-popup .csc-modal-dialog { height: unset; } .csc-popup .csc-modal-content { min-height: 325px; } .csc-popup-message { font-size: 18px; padding-bottom: 20px; } .csc-popup-input { font-weight: normal } .csc-popup-input li { padding-left: 20px; } .csc-popup-input label { font-weight: normal } .csc-popup-notes { padding: 10px 0; color: #aaa; font-size: 16px; } .csc-popup-buttons { position: absolute; height: 50px; text-align: right; bottom: 0px; left: 0px; right: 0px; padding: 5px 20px; border-top: 1px #f0f0f0 solid; } .csc-popup-buttons > a { color: #222 !important; display: inline-block; font-size: 20px; line-height: 1; padding: 10px; vertical-align: middle; margin-left: 10px; padding: 8px 15px; } .csc-popup-buttons a > i { padding-right: 5px; } .csc-popup-buttons a:hover { color: #23527c !important; background: #f3f3f3; } .csc-popup-title { height: 50px; font-size: 24px; line-height: 1; padding: 12px 25px 12px 20px; background: #f7f7f7; } .csc-popup-title > i { margin-right: 10px; } .csc-popup-body { top: 50px; left: 0px; right: 0px; bottom: 50px; padding: 25px; overflow-x: hidden; overflow-y: auto; } .csc-popup .csc-popup-body { position: absolute; } .csc-popup-checkbox { height: 16px; width: 16px; vertical-align: text-bottom; } .widget-form-modal { height: 90vh; } /* Responsive Sizing */ /*xs*/ @media (min-width: 1px) and (max-width: 500px) { .csc-popup > .csc-modal-dialog { width: 100% !important; margin: 0 !important; } .csc-modal-header .csc-modal-title > div { display: block; } } /*sm*/ @media (min-width: 501px) and (max-width: 991px) { .csc-popup > .csc-modal-dialog { margin-top: 25px; } } /*lg*/ @media (min-width: 992px) and (max-width: 1199px) { /* no changes needed*/ } /*xl*/ @media (min-width: 1200px) { /* no changes needed */ } /* Responsive Sizing */ /* phones */ @media (min-width: 1px) and (max-width: 599px) { .csc-modal-dialog { width: 100% !important; } .csc-modal-dialog-sm { width: 100% !important; } .csc-modal-dialog-xs { width: 480px !important; } } /* tablets */ @media (min-width: 600px) and (max-width: 959px) { .csc-modal-dialog { width: 88% !important; } .csc-modal-dialog-sm { width: 600px !important; } .csc-modal-dialog-xs { width: 480px !important; } } /* desktops */ @media (min-width: 960px) { .csc-modal-dialog { width: 960px !important; } .csc-modal-dialog-sm { width: 600px !important; } .csc-modal-dialog-xs { width: 480px !important; } } /* Designer - for Building Blocks */ .csc-modal-designer { height: 600px; }