/*! * froala_editor v2.3.2 (https://www.froala.com/wysiwyg-editor) * License https://froala.com/wysiwyg-editor/terms/ * Copyright 2014-2016 Froala Labs */ .clearfix::after { clear: both; display: block; content: ""; } body.prevent-scroll { overflow: hidden; } body.prevent-scroll.fr-mobile { position: fixed; -webkit-overflow-scrolling: touch; } .fr-modal { position: fixed; overflow-x: auto; overflow-y: scroll; top: 0; left: 0; bottom: 0; right: 0; text-align: center; width: 100%; z-index: 9999; } .fr-modal .fr-modal-wrapper { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin: 20px auto; display: inline-block; background: #ffffff; min-width: 300px; text-align: center; -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 6px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 5px 8px rgba(0, 0, 0, 0.19), 0 4px 6px rgba(0, 0, 0, 0.23); border: 0px; border-top: 5px solid #222222; overflow: hidden; width: 90%; padding-bottom: 10px; position: relative; } @media (min-width: 768px) and (max-width: 991px) { .fr-modal .fr-modal-wrapper { margin: 30px auto; width: 70%; } } @media (min-width: 992px) { .fr-modal .fr-modal-wrapper { margin: 50px auto; width: 600px; } } .fr-modal .fr-modal-wrapper .fr-preloader { display: block; margin: 50px auto; } .fr-modal .fr-modal-wrapper .fr-modal-title { background: #ffffff; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23); border-bottom: 0px; overflow: hidden; position: absolute; width: 100%; z-index: 3; -webkit-transition: height 0.2s ease 0s; -moz-transition: height 0.2s ease 0s; -ms-transition: height 0.2s ease 0s; -o-transition: height 0.2s ease 0s; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-title-line::after { clear: both; display: block; content: ""; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-title-line h4 { font-size: 18px; color: #222222; padding: 12px 10px; margin: 0; font-weight: 400; line-height: 18px; display: inline-block; float: left; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-title-line i { padding: 12px; width: 20px; font-size: 16px; cursor: pointer; line-height: 18px; color: #222222; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-title-line i.fr-modal-more { float: left; opacity: 1; -webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s; -moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s; -ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s; -o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-title-line i.fr-modal-more.fr-not-available { opacity: 0; width: 0; padding: 12px 0; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-title-line i.fr-modal-close { position: absolute; top: 0; right: 0; -webkit-transition: color 0.2s ease 0s; -moz-transition: color 0.2s ease 0s; -ms-transition: color 0.2s ease 0s; -o-transition: color 0.2s ease 0s; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-tags { text-align: left; display: none; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-tags a { display: inline-block; opacity: 0; padding: 6px 8px; margin: 8px 0 8px 8px; text-decoration: none; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; color: #1e88e5; -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; cursor: pointer; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-tags a:focus { outline: none; } .fr-modal .fr-modal-wrapper .fr-modal-title .fr-modal-tags a.fr-selected-tag { background: #d6d6d6; } .fr-modal .fr-modal-wrapper div.fr-scroller { height: 100%; min-height: 150px; overflow-y: scroll; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list { margin: 0 10px; padding: 0; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list::after { clear: both; display: block; content: ""; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list .fr-list-column { float: left; width: calc((100% - 10px) / 2); } @media (min-width: 768px) and (max-width: 1199px) { .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list .fr-list-column { width: calc((100% - 20px) / 3); } } @media (min-width: 1200px) { .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list .fr-list-column { width: calc((100% - 30px) / 4); } } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list .fr-list-column + .fr-list-column { margin-left: 10px; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container { position: relative; width: 100%; display: block; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; overflow: hidden; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container:first-child { margin-top: 10px; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container + div { margin-top: 10px; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container.fr-image-deleting::after { position: absolute; -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s; background: #000000; content: ""; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container.fr-image-deleting::before { content: attr(data-deleting); color: #ffffff; top: 0; left: 0; bottom: 0; right: 0; margin: auto; position: absolute; z-index: 3; font-size: 15px; height: 20px; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container.fr-empty { height: 95px; background: #cccccc; z-index: 1; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container.fr-empty::after { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; content: attr(data-loading); display: inline-block; height: 20px; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container img { width: 100%; vertical-align: middle; position: relative; z-index: 2; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container.fr-mobile-selected img { -webkit-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-delete-img, .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-insert-img { display: inline-block; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container .fr-delete-img, .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container .fr-insert-img { display: none; top: 50%; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s; -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s; -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s; -o-transition: background 0.2s ease 0s, color 0.2s ease 0s; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); position: absolute; cursor: pointer; margin: 0; width: 36px; height: 36px; line-height: 36px; text-decoration: none; z-index: 3; } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container .fr-delete-img { background: #b8312f; color: #ffffff; left: 50%; -webkit-transform: translateY(-50%) translateX(25%); -moz-transform: translateY(-50%) translateX(25%); -ms-transform: translateY(-50%) translateX(25%); -o-transform: translateY(-50%) translateX(25%); } .fr-modal .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container .fr-insert-img { background: #ffffff; color: #1e88e5; left: 50%; -webkit-transform: translateY(-50%) translateX(-125%); -moz-transform: translateY(-50%) translateX(-125%); -ms-transform: translateY(-50%) translateX(-125%); -o-transform: translateY(-50%) translateX(-125%); } .fr-modal.fr-desktop .fr-modal-wrapper .fr-modal-title .fr-modal-title-line i:hover { background: #ebebeb; } .fr-modal.fr-desktop .fr-modal-wrapper .fr-modal-title .fr-modal-tags a:hover { background: #ebebeb; } .fr-modal.fr-desktop .fr-modal-wrapper .fr-modal-title .fr-modal-tags a.fr-selected-tag { background: #d6d6d6; } .fr-modal.fr-desktop .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container:hover img { -webkit-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-modal.fr-desktop .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container:hover .fr-delete-img, .fr-modal.fr-desktop .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container:hover .fr-insert-img { display: inline-block; } .fr-modal.fr-desktop .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container .fr-delete-img:hover { background: #bf4644; color: #ffffff; } .fr-modal.fr-desktop .fr-modal-wrapper div.fr-scroller div.fr-image-list div.fr-image-container .fr-insert-img:hover { background: #ebebeb; } .fr-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #000000; -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 9998; }