assets/css/imagekit copy.css in appscms-tools-theme-4.0.3 vs assets/css/imagekit copy.css in appscms-tools-theme-4.0.4

- old
+ new

@@ -1,849 +1,849 @@ -#img-svg { - margin: auto; - margin-top: 16px; - height: 67px; - width: 98px; -} - -#file-loader { - display: flex; - align-items: center; - flex-direction: column; -} - -#file-loader img { - height: 60px; -} - -#file-loader p { - text-align: center; - color: #fff; - font-size: 17px; -} - -#loading-img { - height: 27px; - width: 27px; - margin-right: 21px; -} - -#dropbox svg, -#filepicker svg, -.boxes svg { - height: 24px !important; - width: 24px !important; -} - -.file-picker-dropdown a, -.file-picker-dropdown button { - border: none; - width: 100%; - border-radius: 4px; - text-align: left; - background: #fff; - font-weight: 400; - font-size: 16px; - line-height: 24px; - padding: 15px 24px; - list-style: none; - height: 54px; -} - -.file-picker-dropdown { - width: 213px; - position: absolute; - background: #fff; - top: 111%; - right: 0; - display: none; - box-shadow: rgb(26 26 26 / 20%) 0 0 12px; - border-radius: 4px; -} - -.file-pick-dropdown i { - margin: 0; -} - -.boxes { - background: #fff; - border-radius: 0; - cursor: pointer; - display: flex; - align-items: center; - padding: 15px 24px; - height: 54px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - justify-content: center; - font-size: 15px; - font-weight: 800; - color: #000; -} - -.file-pick-dropdown { - color: #000; - cursor: pointer; - display: inline-flex; - background: #fff; - height: 54px; - border-left: 1px solid rgba(95, 88, 88, 0.75); - padding: 13px 20px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - align-items: center; - position: relative; -} - -.crop-img-box { - background-color: #fff; - width: 100%; - border-radius: 0.75em; - border: 1px solid #f2f2f2; - box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%); - font-size: 16px; - height: auto; - display: none; -} - -.custom-box { - padding: 15px; -} - -.inner-box { - border: 1px dashed rgba(0, 0, 0, 0.15); - background: rgba(0, 0, 0, 0.1); - padding: 40px; - min-height: 300px; - width: 100%; -} - -#dropfile { - font-size: 16px; - margin-top: 15px; - text-align: center; - color: #fff; -} - -.options-panel { - box-shadow: 0 2px 4px rgb(0 0 0 / 20%); - border-radius: 4px; - padding: 30px; - width: 100%; -} - -.options-panel .title { - width: 100%; - font-size: 28px; - line-height: 36px; - color: #000; - font-weight: 700; - text-align: left; -} - -.options-panel .description { - width: 100%; - font-size: 17px; - color: #666; - font-weight: 400; - text-align: left; -} - -.options-title { - width: 100%; - font-size: 17px; - color: #666; - font-weight: 400; - text-align: left; -} - -.cropper-center { - position: absolute; - top: 0 !important; - left: 0 !important; - display: grid !important; - flex-wrap: wrap; - width: 100% !important; - height: 100% !important; - /* height: 0; */ - opacity: 0.75; -} - -.cropper-center .cell { - background-color: transparent; - border-right: 2px dashed #0050e5; - z-index: 9999; -} - -.cropper-center .row-item { - border-bottom: 2px dashed #0050e5; - display: grid; - grid-auto-flow: column; -} - -.last-child { - border: none !important; -} - -.row-col-show { - display: inline-block; - padding: 4px 18px; - min-width: 70px; - text-align: center; - margin-right: 6px; - border-radius: 50px; - font-size: 21px; - color: #fff; - font-weight: 900; - text-decoration: none; - transition: all 0.3s; - box-shadow: inset 0 2px 3px rgb(0 0 0 / 30%); - background-color: #0050e5; -} - -.buttons-box { - margin: 12px 0 18px 0; - display: flex; - align-items: center; -} - -.action-buttons { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - width: 34px; - height: 34px; - padding: 1px 8px; - margin-right: 4px; - border-radius: 50px; - background: #ccc; - font-size: 21px; - transition: all 0.3s; -} - -#image-format { - padding: 6px 33px 6px 16px; - border-radius: 4px; - width: 123px; - border: 1px solid #ccc; - outline: none; - margin-left: 7px; - /* border: none; */ - font-weight: bold; - font-size: 15px; - color: #555; - text-transform: uppercase; - margin-left: 6px; -} - -.download-format { - display: flex; - align-items: center; - /* border-bottom: 1px solid #ddd; */ - padding: 0px 24px; -} - -.download-wrapper { - display: flex; - justify-content: space-between; - margin-bottom: 24px; -} - -.select-format-title { - position: relative; - display: inline-block; - /* padding: 0 24px; */ - font-size: 16px; - padding: 0px 24px 0px 0px; - color: #066; - border-right: 1px solid #eee; - text-decoration: none; - filter: grayscale(100%); - display: flex; - justify-content: left; - text-transform: capitalize; - font-size: 16px; - font-weight: 600; -} - -#download-button { - cursor: pointer; - display: inline-block; - width: 130px; - justify-content: center; - display: flex; - align-items: center; - padding: 10px 0; - text-align: center; - border-radius: 4px; - font-size: 16px; - color: #fff; - font-weight: 700; - text-decoration: none; - transition: all 0.3s; - border: none; -} - -#download-button svg { - fill: #fff; - margin-right: 4px; - height: 20px; -} - -#saving-data { - margin-top: 48px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -#saving-data img { - height: 100px; - width: 100px; -} - -#saving-data span { - color: #0f0c0c; - font-size: 20px; - font-weight: 600; -} - -#download-zip { - padding: 10px 16px; - background: #fff; -} - -.saving-file-download-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.trust-img { - height: 80px; - width: 80px; -} - -/* new */ - -.pixel-input-title { - position: relative; - display: inline-block; - width: 100%; - color: #0f0c0c; - font-weight: 600; - margin: 4px 0px; - font-size: 15px; - text-align: left; -} - -#maxwidth, -#maxheight { - position: relative; - display: inline-block; - width: 100%; - color: #0f0c0c; - border: 1px solid #ccc; - margin: 0px; - font-size: 18px; - padding: 5px 8px; - height: 34px; - box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.pixel-input { - display: flex; -} - -.pixel-input span { - padding: 6px 12px; - font-size: 16px; - font-weight: 400; - line-height: 1; - color: #555; - text-align: center; - background-color: #eee; - border: 1px solid #ccc; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -#dropdownMenuButton { - width: 100%; - text-align: left; - background: #fff; - height: 34px; - display: flex; - border-radius: 4px; - align-items: center; - justify-content: space-between; - box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); - color: #0f0c0c; - border: 1px solid #ccc; -} - -.media-choose { - height: 88px; - width: 80px; - width: 100%; - border: 2px solid #e8e8e8; - background: 2px solid #e8e8e8; - border-radius: 5px; - display: flex; - align-items: center; - justify-content: center; -} - -.media-choose .show-aspect { - background: #444; - border-radius: 5px; -} - -#media-dimensions .type { - font-weight: 700; - font-size: 0.8rem; - margin-top: 0.25rem; - line-height: 1.6; - text-transform: capitalize; -} - -#media-dimensions .value { - font-size: 0.75rem; - color: #909090; -} - -.dropdown-item i { - margin-right: 4px; -} - -#pixel-box-panel canvas { - max-width: 100%; -} - -.colorpalette { - text-transform: uppercase; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.colorpalette .text { - margin-right: 15px; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - width: 100%; -} - -.colorpalette .text button { - margin-right: 16px; - margin-bottom: 0px; -} - -.colorpalette .icons { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.colorpalette .colorblock { - margin-right: 2px; - margin-bottom: 0px; - margin-top: 6px; - height: 25px; - width: 25px !important; - border: solid 0px white; -} - -.colorpalette .ss-main { - width: calc(100%); - margin-top: 8px; - max-width: 480px; -} - -.colorpalette .ss-main .ss-single-selected { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - width: calc(100%); - background-color: #ececec; -} - -.colorpalette .ss-main .ss-option { - margin-bottom: 6px; -} - -.colorpalette .ss-main .ss-option:hover { - background-color: rgba(0, 0, 0, 0.1) !important; -} - -.colorpalette .ss-content { - width: 100%; -} - -.colorpalette .ss-content .ss-list .ss-option { - padding: 0px 10px; -} - -.infoselects { - width: 100%; -} - -.filter-wrapper { - display: flex; - width: 100%; - flex-direction: column; - justify-content: left; - padding: 12px 0px; - gap: 6px; - padding-bottom: 0px; -} - -.block-wrapper { - display: flex; - padding: 12px 0px; -} - -#blockvalue { - background: #ccc; - padding: 2px 4px; - border-radius: 5px; - margin-left: 4px; -} - -.filter-wrapper label { - display: block; - position: relative; - cursor: pointer; - font-size: 22px; - margin-right: auto; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: 15px; -} - -/* Hide the browser's default checkbox */ -.filter-wrapper input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} - -/* Create a custom checkbox */ -.checkbox-checkmark { - position: absolute; - height: 22px; - width: 22px; - border-radius: 4px; - background-color: #ccc; -} - -/* On mouse-over, add a grey background color */ -.filter-wrapper label:hover input~.checkbox-checkmark { - background-color: #ccc; -} - -/* When the checkbox is checked, add a blue background */ -.filter-wrapper label input:checked~.checkbox-checkmark { - background-color: #ff5975; -} - -/* Create the checkbox-checkmark/indicator (hidden when not checked) */ -.checkbox-checkmark:after { - content: ''; - position: absolute; - display: none; -} - -/* Show the checkbox-checkmark when checked */ -.filter-wrapper label input:checked~.checkbox-checkmark:after { - display: block; -} - -/* Style the checkbox-checkmark/indicator */ -.filter-wrapper label .checkbox-checkmark:after { - left: 8px; - top: 4px; - width: 6px; - height: 11px; - border: solid #fff; - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -input[type='range'] { - width: 100%; - -webkit-appearance: none; -} - -input[type='range']:focus { - outline: none; -} - -input[type='range']::-webkit-slider-thumb:focus { - background-color: #ff5975; -} - -input[type='range']::-webkit-slider-runnable-track { - width: 100%; - height: 3px; - cursor: pointer; - box-shadow: none; - background: #ccc; - border-radius: 0px; - border: 0px solid #ff5975; -} - -input[type='range']::-moz-range-track { - width: 100%; - height: 3px; - cursor: pointer; - box-shadow: none; - background: #ccc; - border-radius: 0px; - border: 0px solid #ff5975; -} - -input[type='range']::-webkit-slider-thumb { - box-shadow: none; - border: 0px solid #fff; - height: 15px; - width: 15px; - border-radius: 22px; - background: #ff5975; - cursor: pointer; - -webkit-appearance: none; - margin-top: -5px; -} - -input[type='range']::-moz-range-thumb { - box-shadow: none; - border: 0px solid #fff; - height: 42px; - width: 22px; - border-radius: 22px; - background: #ff5975; - cursor: pointer; - -webkit-appearance: none; - margin-top: -20px; -} - -input[type='range']::-moz-focus-outer { - border: 0; -} - -.divider { - padding-top: 12px; - padding-bottom: 12px; - border-bottom: 1px solid #ddd; -} - -#reset { - border: none; - color: #0f0c0c; - font-size: 15px; - background: #fff; - padding: 0px; - padding: 4px 14px; - border-radius: 5px; -} - -#reset:hover { - background: #ff597556; -} - -#reset i { - color: #ff5975; - font-size: 15px; - margin-right: 3px; - margin-bottom: 0px; -} - -#palettes { - display: none; -} - -.active-btn { - background-color: #6666ff; - color: #fff; -} - -.radio-label { - display: flex; - position: relative; - cursor: pointer; - align-items: center; - margin-right: 15px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: 13px; - margin-bottom: 20px; - text-transform: capitalize; -} - -.radio-label input[type='radio'] { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} - -.radio-label { - position: relative; -} - -.checkmark { - position: absolute; - top: 0; - left: 0; - height: 30px; - width: 30px; - background-color: #eee; - border-radius: 50%; - margin-top: 3px; -} - -.radio-label:hover input~.checkmark { - background-color: #ccc; -} - -.radio-label input:checked~.checkmark { - background-color: #6666ff; -} - -.checkmark:after { - content: ''; - position: absolute; - display: none; -} - -.radio-label input:checked~.checkmark:after { - display: block; -} - -.radio-label .checkmark:after { - top: 8px; - left: 8px; - width: 14px; - height: 14px; - border-radius: 50%; - background: #fff; -} - -.label-span { - margin-left: 37px; - font-size: 16px; - margin-top: 4px; - color: #666666; -} - -.custom-control-input:checked~.custom-control-label::before { - background: #6666ff; -} - -.custom-switch .custom-control-label::before { - left: -2.25rem; - width: 2.3rem; - height: 22px; - pointer-events: all; - border-radius: 21px; -} - -.custom-switch { - display: flex; -} - -.download-wrapper .rowclass { - width: -webkit-fill-available; -} - -.custom-switch .custom-control-label::after { - top: calc(0.25rem + 5px); - left: -16px; -} - -.custom-switch .custom-control-label::after { - left: -30px; -} - -.custom-switch .custom-control-label::after { - width: calc(1.2rem - 4px); - height: calc(1.2rem - 4px); -} - -.custom-switch .custom-control-label::after { - top: calc(0.25rem + 3px); -} - -.custom-control-label { - padding-left: 6px; - color: #666666; -} - -#canvas-box-panel canvas, -.canvas-box-panel img { - max-width: 100%; -} - -.select-img-panel { - border: 1px solid #ccc; - padding: 30px; -} - -@media (max-width: 768px) { - #Inputbox { - font-size: 13px !important; - } - - .inner-box { - padding: 40px 0px !important; - } - - #image-format { - width: auto; - } - - .download-format { - padding: 0px 5px; - } - - #download-button { - margin-left: auto; - } +#img-svg { + margin: auto; + margin-top: 16px; + height: 67px; + width: 98px; +} + +#file-loader { + display: flex; + align-items: center; + flex-direction: column; +} + +#file-loader img { + height: 60px; +} + +#file-loader p { + text-align: center; + color: #fff; + font-size: 17px; +} + +#loading-img { + height: 27px; + width: 27px; + margin-right: 21px; +} + +#dropbox svg, +#filepicker svg, +.boxes svg { + height: 24px !important; + width: 24px !important; +} + +.file-picker-dropdown a, +.file-picker-dropdown button { + border: none; + width: 100%; + border-radius: 4px; + text-align: left; + background: #fff; + font-weight: 400; + font-size: 16px; + line-height: 24px; + padding: 15px 24px; + list-style: none; + height: 54px; +} + +.file-picker-dropdown { + width: 213px; + position: absolute; + background: #fff; + top: 111%; + right: 0; + display: none; + box-shadow: rgb(26 26 26 / 20%) 0 0 12px; + border-radius: 4px; +} + +.file-pick-dropdown i { + margin: 0; +} + +.boxes { + background: #fff; + border-radius: 0; + cursor: pointer; + display: flex; + align-items: center; + padding: 15px 24px; + height: 54px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + justify-content: center; + font-size: 15px; + font-weight: 800; + color: #000; +} + +.file-pick-dropdown { + color: #000; + cursor: pointer; + display: inline-flex; + background: #fff; + height: 54px; + border-left: 1px solid rgba(95, 88, 88, 0.75); + padding: 13px 20px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + align-items: center; + position: relative; +} + +.crop-img-box { + background-color: #fff; + width: 100%; + border-radius: 0.75em; + border: 1px solid #f2f2f2; + box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%); + font-size: 16px; + height: auto; + display: none; +} + +.custom-box { + padding: 15px; +} + +.inner-box { + border: 1px dashed rgba(0, 0, 0, 0.15); + background: rgba(0, 0, 0, 0.1); + padding: 40px; + min-height: 300px; + width: 100%; +} + +#dropfile { + font-size: 16px; + margin-top: 15px; + text-align: center; + color: #fff; +} + +.options-panel { + box-shadow: 0 2px 4px rgb(0 0 0 / 20%); + border-radius: 4px; + padding: 30px; + width: 100%; +} + +.options-panel .title { + width: 100%; + font-size: 28px; + line-height: 36px; + color: #000; + font-weight: 700; + text-align: left; +} + +.options-panel .description { + width: 100%; + font-size: 17px; + color: #666; + font-weight: 400; + text-align: left; +} + +.options-title { + width: 100%; + font-size: 17px; + color: #666; + font-weight: 400; + text-align: left; +} + +.cropper-center { + position: absolute; + top: 0 !important; + left: 0 !important; + display: grid !important; + flex-wrap: wrap; + width: 100% !important; + height: 100% !important; + /* height: 0; */ + opacity: 0.75; +} + +.cropper-center .cell { + background-color: transparent; + border-right: 2px dashed #0050e5; + z-index: 9999; +} + +.cropper-center .row-item { + border-bottom: 2px dashed #0050e5; + display: grid; + grid-auto-flow: column; +} + +.last-child { + border: none !important; +} + +.row-col-show { + display: inline-block; + padding: 4px 18px; + min-width: 70px; + text-align: center; + margin-right: 6px; + border-radius: 50px; + font-size: 21px; + color: #fff; + font-weight: 900; + text-decoration: none; + transition: all 0.3s; + box-shadow: inset 0 2px 3px rgb(0 0 0 / 30%); + background-color: #0050e5; +} + +.buttons-box { + margin: 12px 0 18px 0; + display: flex; + align-items: center; +} + +.action-buttons { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + width: 34px; + height: 34px; + padding: 1px 8px; + margin-right: 4px; + border-radius: 50px; + background: #ccc; + font-size: 21px; + transition: all 0.3s; +} + +#image-format { + padding: 6px 33px 6px 16px; + border-radius: 4px; + width: 123px; + border: 1px solid #ccc; + outline: none; + margin-left: 7px; + /* border: none; */ + font-weight: bold; + font-size: 15px; + color: #555; + text-transform: uppercase; + margin-left: 6px; +} + +.download-format { + display: flex; + align-items: center; + /* border-bottom: 1px solid #ddd; */ + padding: 0px 24px; +} + +.download-wrapper { + display: flex; + justify-content: space-between; + margin-bottom: 24px; +} + +.select-format-title { + position: relative; + display: inline-block; + /* padding: 0 24px; */ + font-size: 16px; + padding: 0px 24px 0px 0px; + color: #066; + border-right: 1px solid #eee; + text-decoration: none; + filter: grayscale(100%); + display: flex; + justify-content: left; + text-transform: capitalize; + font-size: 16px; + font-weight: 600; +} + +#download-button { + cursor: pointer; + display: inline-block; + width: 130px; + justify-content: center; + display: flex; + align-items: center; + padding: 10px 0; + text-align: center; + border-radius: 4px; + font-size: 16px; + color: #fff; + font-weight: 700; + text-decoration: none; + transition: all 0.3s; + border: none; +} + +#download-button svg { + fill: #fff; + margin-right: 4px; + height: 20px; +} + +#saving-data { + margin-top: 48px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#saving-data img { + height: 100px; + width: 100px; +} + +#saving-data span { + color: #0f0c0c; + font-size: 20px; + font-weight: 600; +} + +#download-zip { + padding: 10px 16px; + background: #fff; +} + +.saving-file-download-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.trust-img { + height: 80px; + width: 80px; +} + +/* new */ + +.pixel-input-title { + position: relative; + display: inline-block; + width: 100%; + color: #0f0c0c; + font-weight: 600; + margin: 4px 0px; + font-size: 15px; + text-align: left; +} + +#maxwidth, +#maxheight { + position: relative; + display: inline-block; + width: 100%; + color: #0f0c0c; + border: 1px solid #ccc; + margin: 0px; + font-size: 18px; + padding: 5px 8px; + height: 34px; + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.pixel-input { + display: flex; +} + +.pixel-input span { + padding: 6px 12px; + font-size: 16px; + font-weight: 400; + line-height: 1; + color: #555; + text-align: center; + background-color: #eee; + border: 1px solid #ccc; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +#dropdownMenuButton { + width: 100%; + text-align: left; + background: #fff; + height: 34px; + display: flex; + border-radius: 4px; + align-items: center; + justify-content: space-between; + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + color: #0f0c0c; + border: 1px solid #ccc; +} + +.media-choose { + height: 88px; + width: 80px; + width: 100%; + border: 2px solid #e8e8e8; + background: 2px solid #e8e8e8; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; +} + +.media-choose .show-aspect { + background: #444; + border-radius: 5px; +} + +#media-dimensions .type { + font-weight: 700; + font-size: 0.8rem; + margin-top: 0.25rem; + line-height: 1.6; + text-transform: capitalize; +} + +#media-dimensions .value { + font-size: 0.75rem; + color: #909090; +} + +.dropdown-item i { + margin-right: 4px; +} + +#pixel-box-panel canvas { + max-width: 100%; +} + +.colorpalette { + text-transform: uppercase; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.colorpalette .text { + margin-right: 15px; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 100%; +} + +.colorpalette .text button { + margin-right: 16px; + margin-bottom: 0px; +} + +.colorpalette .icons { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.colorpalette .colorblock { + margin-right: 2px; + margin-bottom: 0px; + margin-top: 6px; + height: 25px; + width: 25px !important; + border: solid 0px white; +} + +.colorpalette .ss-main { + width: calc(100%); + margin-top: 8px; + max-width: 480px; +} + +.colorpalette .ss-main .ss-single-selected { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + width: calc(100%); + background-color: #ececec; +} + +.colorpalette .ss-main .ss-option { + margin-bottom: 6px; +} + +.colorpalette .ss-main .ss-option:hover { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +.colorpalette .ss-content { + width: 100%; +} + +.colorpalette .ss-content .ss-list .ss-option { + padding: 0px 10px; +} + +.infoselects { + width: 100%; +} + +.filter-wrapper { + display: flex; + width: 100%; + flex-direction: column; + justify-content: left; + padding: 12px 0px; + gap: 6px; + padding-bottom: 0px; +} + +.block-wrapper { + display: flex; + padding: 12px 0px; +} + +#blockvalue { + background: #ccc; + padding: 2px 4px; + border-radius: 5px; + margin-left: 4px; +} + +.filter-wrapper label { + display: block; + position: relative; + cursor: pointer; + font-size: 22px; + margin-right: auto; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 15px; +} + +/* Hide the browser's default checkbox */ +.filter-wrapper input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +/* Create a custom checkbox */ +.checkbox-checkmark { + position: absolute; + height: 22px; + width: 22px; + border-radius: 4px; + background-color: #ccc; +} + +/* On mouse-over, add a grey background color */ +.filter-wrapper label:hover input~.checkbox-checkmark { + background-color: #ccc; +} + +/* When the checkbox is checked, add a blue background */ +.filter-wrapper label input:checked~.checkbox-checkmark { + background-color: #ff5975; +} + +/* Create the checkbox-checkmark/indicator (hidden when not checked) */ +.checkbox-checkmark:after { + content: ''; + position: absolute; + display: none; +} + +/* Show the checkbox-checkmark when checked */ +.filter-wrapper label input:checked~.checkbox-checkmark:after { + display: block; +} + +/* Style the checkbox-checkmark/indicator */ +.filter-wrapper label .checkbox-checkmark:after { + left: 8px; + top: 4px; + width: 6px; + height: 11px; + border: solid #fff; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +input[type='range'] { + width: 100%; + -webkit-appearance: none; +} + +input[type='range']:focus { + outline: none; +} + +input[type='range']::-webkit-slider-thumb:focus { + background-color: #ff5975; +} + +input[type='range']::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + cursor: pointer; + box-shadow: none; + background: #ccc; + border-radius: 0px; + border: 0px solid #ff5975; +} + +input[type='range']::-moz-range-track { + width: 100%; + height: 3px; + cursor: pointer; + box-shadow: none; + background: #ccc; + border-radius: 0px; + border: 0px solid #ff5975; +} + +input[type='range']::-webkit-slider-thumb { + box-shadow: none; + border: 0px solid #fff; + height: 15px; + width: 15px; + border-radius: 22px; + background: #ff5975; + cursor: pointer; + -webkit-appearance: none; + margin-top: -5px; +} + +input[type='range']::-moz-range-thumb { + box-shadow: none; + border: 0px solid #fff; + height: 42px; + width: 22px; + border-radius: 22px; + background: #ff5975; + cursor: pointer; + -webkit-appearance: none; + margin-top: -20px; +} + +input[type='range']::-moz-focus-outer { + border: 0; +} + +.divider { + padding-top: 12px; + padding-bottom: 12px; + border-bottom: 1px solid #ddd; +} + +#reset { + border: none; + color: #0f0c0c; + font-size: 15px; + background: #fff; + padding: 0px; + padding: 4px 14px; + border-radius: 5px; +} + +#reset:hover { + background: #ff597556; +} + +#reset i { + color: #ff5975; + font-size: 15px; + margin-right: 3px; + margin-bottom: 0px; +} + +#palettes { + display: none; +} + +.active-btn { + background-color: #6666ff; + color: #fff; +} + +.radio-label { + display: flex; + position: relative; + cursor: pointer; + align-items: center; + margin-right: 15px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 13px; + margin-bottom: 20px; + text-transform: capitalize; +} + +.radio-label input[type='radio'] { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +.radio-label { + position: relative; +} + +.checkmark { + position: absolute; + top: 0; + left: 0; + height: 30px; + width: 30px; + background-color: #eee; + border-radius: 50%; + margin-top: 3px; +} + +.radio-label:hover input~.checkmark { + background-color: #ccc; +} + +.radio-label input:checked~.checkmark { + background-color: #6666ff; +} + +.checkmark:after { + content: ''; + position: absolute; + display: none; +} + +.radio-label input:checked~.checkmark:after { + display: block; +} + +.radio-label .checkmark:after { + top: 8px; + left: 8px; + width: 14px; + height: 14px; + border-radius: 50%; + background: #fff; +} + +.label-span { + margin-left: 37px; + font-size: 16px; + margin-top: 4px; + color: #666666; +} + +.custom-control-input:checked~.custom-control-label::before { + background: #6666ff; +} + +.custom-switch .custom-control-label::before { + left: -2.25rem; + width: 2.3rem; + height: 22px; + pointer-events: all; + border-radius: 21px; +} + +.custom-switch { + display: flex; +} + +.download-wrapper .rowclass { + width: -webkit-fill-available; +} + +.custom-switch .custom-control-label::after { + top: calc(0.25rem + 5px); + left: -16px; +} + +.custom-switch .custom-control-label::after { + left: -30px; +} + +.custom-switch .custom-control-label::after { + width: calc(1.2rem - 4px); + height: calc(1.2rem - 4px); +} + +.custom-switch .custom-control-label::after { + top: calc(0.25rem + 3px); +} + +.custom-control-label { + padding-left: 6px; + color: #666666; +} + +#canvas-box-panel canvas, +.canvas-box-panel img { + max-width: 100%; +} + +.select-img-panel { + border: 1px solid #ccc; + padding: 30px; +} + +@media (max-width: 768px) { + #Inputbox { + font-size: 13px !important; + } + + .inner-box { + padding: 40px 0px !important; + } + + #image-format { + width: auto; + } + + .download-format { + padding: 0px 5px; + } + + #download-button { + margin-left: auto; + } } \ No newline at end of file