/*! Mix-IT© 2015-2024 EMIAGIC, Corp. | All rights reserved | Tous droits réservés | Author: Jimmy Paquereau (jimmy.paquereau@emiagic.com)  | Contributors: Jimmy Paquereau, Anthony PORTALES | This file is part of Mix-IT© framework. For the full copyright and license information, please view the "license" file that was distributed with this source code and EMIAGIC general terms and conditions: https://www.emiagic.com/pdf/cgv.pdf. */

/* === Editor === */

.editor{ height: 100%; width: 100%; }
.editor-view{ height: 100%; width: 100%; position: relative; overflow: hidden; display: flex; }
.editor-body{ flex-grow: 1; display: flex; flex-direction: column; background: var(--rows-background); }
.editor-window{ position: relative; z-index: 1; }

.editor-tools{ background: var(--tools-background); box-shadow: var(--tools-shadow); position: relative; z-index: 30; }
.editor-tools-tabs{ display: flex; background: var(--row-background); }
.editor-tools-tab{ padding: .375em .75em; border-right: var(--input-border); cursor: pointer; user-select: none; }
.editor-tools-tab:hover{ background: var(--input-disabled-background); }
.editor-tools-tab.selected{ font-weight: bold; }
.editor-tools-rows{ overflow: hidden; border-top: var(--input-border); }
.off + .editor-tools-rows{ border-top: none; }
.editor-tools-row{ display: flex; overflow: auto hidden; padding: .25em; gap: .25em; }
.editor-tools-set{ display: flex; gap: .25em; }
.editor-tool{ height: var(--button-height); width: var(--button-height); flex: 0 0 var(--button-height); display: flex; }
.editor-tool{ align-items: center; justify-content: center; border: var(--input-border); border-style: dashed; }
.editor-tool{ background-repeat: no-repeat; background-size: 1.375em; background-position: center; cursor: pointer; }
.editor-tool:hover{ background-color: var(--input-disabled-background); border: var(--input-disabled-border); }
.editor-tool[checked]{ z-index: 1; background-color: var(--success-background); border: 1px solid var(--success-color); }
.editor-tool[disabled]{ filter: var(--icon-disabled-filter); background-color: transparent; cursor: not-allowed; }
.editor-tool-group{ width: calc(var(--button-height) + 1.5em); flex: 0 0 calc(var(--button-height) + 1.5em); background-position: .5em center; }
.editor-tool-group{ display: flex; align-items: center; justify-content: flex-end; }
.editor-tool-toggle{ height: 1.5em; width: 1.5em; border-left: var(--input-border); border-left-style: dashed; }
.editor-tool-toggle{ background: url(/core/img/action/down.png) no-repeat center center / .75em .75em; }
.editor-tool-actions{ padding: 0em; }
.editor-tool-action{ display: flex; align-items: center; gap: var(--row-padding); padding: var(--row-padding); cursor: pointer; }
.editor-tool-action:hover{ background-color: var(--input-disabled-background); }
.editor-tool-action[checked]{ background-color: var(--success-background); }
.editor-tool-action[disabled]{ filter: var(--icon-disabled-filter); background-color: transparent; cursor: not-allowed; }
.editor-tool-action:not(:first-child){ border-top: var(--input-border); }
.editor-tool-action-icon{ height: 1.375em; width: 1.375em; flex: 0 0 1.375em; }
.editor-tool-action-icon{ background-repeat: no-repeat; background-position: center; background-size: contain; }
.editor-tool-action-text{ white-space: nowrap; }
.editor-tool-icon{ height: 100%; width: 100%; flex: 0 0 100%; }
.editor-tool-icon{ background-repeat: no-repeat; background-position: center; background-size: 1.375em; }

.editor-size-tool{ width: auto; background: none !important; outline: none !important; border: none !important; }
.editor-size-input{ background: none !important; }
.editor-size-icon{ cursor: default; }
.editor-size-value{ flex: 0 0 4.25em; border-width: 1px 0px 1px 1px !important; }

.editor-height-tooltip{ width: 12em; }
.editor-width-tooltip{ width: 12em; }
.editor-gap-tooltip{ width: 12em; }
.editor-radius-tooltip{ width: 12em; }
.editor-padding-tooltip{ width: 20em; }
.editor-margin-tooltip{ width: 20em; }
.editor-border-tooltip{ width: 20em; }
.editor-shadow-tooltip{ width: 21em; }

.editor-shape-stroke-tool{ flex: 0 0 4.625em; outline: none !important; }
.editor-shape-stroke-input-text{ display: none; }
.editor-shape-fill-tool{ flex: 0 0 4.625em; outline: none !important; }
.editor-shape-fill-input-text{ display: none; }
.editor-shape-thick-tool{ flex: 0 0 4em; outline: none !important; }

.draw{ position: relative; height: 100vh; }
.draw>*{ position: absolute; }

.editor-arian{ display: flex; white-space: nowrap; gap: .25em; padding: .25em; font-size: .875em; }
.editor-arian{ border-top: var(--input-border); border-top-style: dashed; }
.editor-arian-widget{ cursor: pointer; }

.editor-gallery-actions{ display: grid; grid-template-columns: 1fr 1fr 1fr; padding: var(--row-padding); gap: var(--row-padding); }
.editor-gallery-action{ border: var(--input-border); border-style: dashed !important; }
.editor-content{ flex-grow: 1; height: 100%; overflow: auto; display: flex; flex-direction: column; }
.editor-content:focus{ outline: none; }
.editor-side{ flex: 0 0 30em; width: 30em; height: 100%; overflow: hidden; position: relative; z-index: 40; }
.editor-side{ display: flex; flex-direction: column; overflow: hidden; }
.editor-side{ background: var(--rows-background); box-shadow: var(--tools-shadow); border-left: var(--input-border); }
.editor-nav{ width: 100%; display: flex; align-items: center; --icon-size: 1.625em; position: relative; z-index: 1; }
.editor-nav{ background: var(--row-background); box-shadow: var(--row-shadow); }
.editor-nav>*{ display: flex; align-items: center; padding: var(--row-padding); gap: var(--row-padding); }
.editor-nav-left{ flex-grow: 1; justify-content: flex-start; }
.editor-nav-right{ justify-content: flex-end; }
.editor-nav-icon:focus{ filter: none; }
.editor-tabs{ width: 100%; flex-grow: 1; overflow: hidden; }
.editor-tabs>*{ width: 100%; height: 100%; position: relative; }
.editor-tabs .off{ display: none; }

.editor-view.full{ position: fixed; z-index: 1000; top: 0; left: 0; }
.editor-view.large .editor-content{ width: 100%; }
.editor-view.large .editor-side:not(.on) .editor-nav{ flex-direction: column-reverse; }
.editor-view.large .editor-side:not(.on) .editor-nav-left{ flex-direction: column; }
.editor-view.large .editor-side:not(.on) .editor-nav-right{ flex-direction: column; }
.editor-view.large .editor-side:not(.on){ width: fit-content; flex: 0 0 fit-content; }
.editor-view.large .editor-side:not(.on) .editor-tabs{ display: none; }

.editor-gallery-view{ display: flex; flex-direction: column; overflow: hidden; }
.editor-gallery-list{ width: 100%; flex-grow: 1; padding: .5em; overflow-y: scroll; }
.editor-gallery-submit{ width: 100%; padding: 1em; text-align: center; position: relative; z-index: 1; }
.editor-gallery-submit{ background: var(--row-background); box-shadow: var(--row-shadow); }
.editor-gallery-add{ width: 100%; }
.editor-gallery-type{ font-weight: bold; font-size: 1.25em; color: #333; padding-bottom: .4em; }
.editor-gallery-type{ margin-bottom: .8em; border-bottom: var(--input-border); }
.editor-gallery-type:first-child{ margin-top: 0em; }
.editor-gallery-buttons{ display: grid; grid-template-columns: repeat(3, 33.33%); }
.editor-gallery-buttons{ overflow: hidden; }
.editor-gallery-buttons>*{ margin: .5em; }
.editor-gallery-button{ cursor: pointer; padding: .625em; user-select: none; background: #ffff; text-align: center; }
.editor-gallery-button:hover{ box-shadow: var(--row-shadow); }
.editor-gallery-button-icon{ height: 2.25em; width: 2.25em; flex: 0 0 2.25em; margin: auto; }
.editor-gallery-button-text{ margin-top: .125em; display: block; flex-grow: 1; line-height: 1em; }
.editor-gallery-button-text{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.editor-gallery-button[checked]{ font-weight: bold; background: var(--success-background); color: var(--success-color); outline: 1px dashed var(--success-color); }
.editor-gallery-button[disabled]{ outline: var(--input-border); outline-style: dashed; box-shadow: none; filter: grayscale(1) opacity(.5); cursor: default; }

.editor-tree-view{ padding: .5em; overflow-y: scroll; --icon-size: 1.75em; }
.editor-tree-ul{ margin-top: .25em; padding-left: 1.5em; cursor: default; }
.off + .editor-tree-ul{ padding-left: 0em; }
.editor-tree-ul:first-child{ margin-top: 0em; }
.editor-tree-ul.on{ display: block !important; }
.editor-tree-root{ padding-left: 0em; }
.editor-tree-li{ margin-bottom: .5em; }
.editor-tree-li:last-child{ margin-bottom: 0em; }
.editor-tree-item{ display: flex; align-items: center; width: 100%; padding: .5em .75em; }
.editor-tree-item{ background: #fff; }
.editor-tree-item.selected{ background: rgba(46,175,240,.25); } /* #2eaff0 */
.editor-tree-item.into{ background: rgba(255,177,59,.25); } /* #ffb13b */
.editor-tree-item>*{ margin-left: .5em; }
.editor-tree-item>*:first-child{ margin-left: 0em; }
.editor-tree-text{ flex-grow: 1; line-height: 1em; font-weight: bold; }
.editor-tree-brief{ height: auto; min-height: auto; width: auto; border: none; padding: .25em; background: none; }
.editor-tree-actions{ display: flex; align-items: center; }
.editor-tree-action{ margin-left: .5em; }
.editor-tree-action>*:first-child{ margin-left: 0em; }

.editor-views-view{ display: flex; flex-direction: column; overflow: hidden; }
.editor-views-ul{ width: 100%; flex-grow: 1; padding: 1em; overflow-y: scroll; }
.editor-views-li{ margin-bottom: 1em; display: flex; align-items: center; padding: .5em .75em; }
.editor-views-li{ user-select: none; cursor: pointer; background: var(--row-background); }
.editor-views-li.selected{ background: rgba(46,175,240,.25); }
.editor-views-li:last-child{ margin-bottom: 0em; }
.editor-views-li>*{ margin-right: .5em; }
.editor-views-li>*:last-child{ margin-right: 0em; }
.editor-views-number{ font-weight: bold; }
.editor-views-brief{ flex-grow: 1; height: auto; min-height: auto; width: auto; border: none; padding: .25em; background: none; }

.editor-views-actions{ display: flex; align-items: center; }
.editor-views-action{ height: 1.5em; width: 1.5em; flex: 0 0 1.5em; margin-right: .5em; }
.editor-views-action:last-child{ margin-right: 0em; }
.editor-views-buttons{ width: 100%; padding: 1em; text-align: center; display: flex; }
.editor-views-buttons{ background: var(--row-background); box-shadow: var(--row-shadow); }
.editor-views-button{ flex: 1 1 0; }

.editor-summary-nav{ padding: 1em; line-height: 2em; }
.editor-summary-li>ul{ padding-left: 1em; }
.editor-summary-hn{ display: flex; width: 100%; gap: 1em; font-weight: bold; }
.editor-summary-hn{ cursor: pointer; border-bottom: var(--input-border); border-bottom-style: dashed; }
.editor-summary-text{ flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-summary-node{ opacity: .25; }

.editor-cursor-select{ position: absolute; top: 0; left: 0; width: 0; right: 0; z-index: 20 !important; }
.editor-cursor-select{ background: rgba(46,175,240,.25); } /* #2eaff0 */

.editor-cursor-anchor{ height: 9px; width: 9px; margin-left: -4px; margin-top: -4px; }
.editor-cursor-anchor{ position: absolute; cursor: pointer; background: #2eaff0; }
.editor-cursor-top-left{ left: 0; top: 0; }
.editor-cursor-top-center{ left: 50%; top: 0; }
.editor-cursor-top-right{ left: 100%; top: 0; }
.editor-cursor-center-left{ left: 0; top: 50%; }
.editor-cursor-center-center{ left: 50%; top: 50%; display: none; }
.editor-cursor-center-right{ left: 100%; top: 50%; }
.editor-cursor-bottom-left{ left: 0; top: 100%; }
.editor-cursor-bottom-center{ left: 50%; top: 100%; }
.editor-cursor-bottom-right{ left: 100%; top: 100%; }

.editor-cursor-line{ position: absolute; top: 0; left: 0; width: 0; right: 0; z-index: 10 !important; }
.editor-cursor-line{ background: rgba(255,177,59,.25); } /* #ffb13b */
.editor-cursor-left{ border-left: 3px solid var(--error-color); }
.editor-cursor-right{ border-right: 3px solid var(--error-color); }
.editor-cursor-top{ border-top: 3px solid var(--error-color); }
.editor-cursor-bottom{ border-bottom: 3px solid var(--error-color); }

/* === Widget (edit) === */

.widget-edit-center{ flex-direction: column; }
.widget-edit-preview{ padding: 1em; background: #dcdcdc; }
.widget-edit-notice{ margin-top: .5em; }

.widget-edit-buttons{ padding: 0em; flex: 0 0 fit-content; }
.widget-edit-button{ margin-left: 0em; margin-right: 0em; border-top: none !important; }
.widget-edit-button:first-child{ border-left: none; }

.widget-edit-styles-tab .edit-row:not(:first-child){ padding-top: .5em; border-top: var(--input-border); border-top-style: dashed; }
.widget-edit-styles-tab .edit-cols:not(:first-child){ padding-top: .5em; border-top: var(--input-border); border-top-style: dashed; }

.widget-edit-bold-option{ padding: 0em; flex: 0 0 var(--input-height); }
.widget-edit-bold-option[checked]{ background: var(--success-background); border-color: var(--success-border); }
.widget-edit-bold-check{ margin: 0; }
.widget-edit-bold-check + .widget-edit-bold-text{ display: none; }
.widget-edit-italic-option{ padding: 0em; flex: 0 0 var(--input-height); }
.widget-edit-italic-option[checked]{ background: var(--success-background); border-color: var(--success-border); }
.widget-edit-italic-check{ margin: 0; }
.widget-edit-italic-check + .widget-edit-italic-text{ display: none; }
.widget-edit-underline-option{ padding: 0em; flex: 0 0 var(--input-height); }
.widget-edit-underline-option[checked]{ background: var(--success-background); border-color: var(--success-border); }
.widget-edit-underline-check{ margin: 0; }
.widget-edit-underline-check + .widget-edit-underline-text{ display: none; }
.widget-edit-strike-option{ padding: 0em; flex: 0 0 var(--input-height); }
.widget-edit-strike-option[checked]{ background: var(--success-background); border-color: var(--success-border); }
.widget-edit-strike-check{ margin: 0; }
.widget-edit-strike-check + .widget-edit-strike-text{ display: none; }
.widget-edit-write-input .widget-edit-size-input{ flex: 0 0 4em; }
.widget-edit-write-input .widget-edit-color-input-icon{ border-right: var(--input-border); }
.widget-edit-write-input .widget-edit-color-input-text{ display: none; }

/* === Widgets (documents) === */

.page-editor-content{ padding: 1em; }
.page-editor-window:not(:empty){ background: #fff; box-shadow: var(--tools-shadow); }

.section-editor-content{ padding: 1em; }
.section-editor-window:not(:empty){ background: #fff; box-shadow: var(--tools-shadow); }

.richtext-editor-window{ flex-grow: 1; padding: 1em; background: var(--input-background); }
.richtext-editor-window[disabled]{ background: var(--input-disabled-background); }
.richtext-editor-arian{ display: none; }

/* === Widgets (contents) === */

.widget-alert-dialog-window{ height: 26em; width: min(100vw, 32em); }
.widget-alert-style{ display: flex; gap: var(--input-padding); }
.widget-alert-style-option{ flex: 1 1 0; }
.widget-alert-style-option[checked]{ background: var(--success-background); border-color: var(--success-border); }
.widget-alert-text-row{ flex: 1 1 0; }
.widget-alert-text-input{ flex: 1 1 0; }
.widget-alert-default-tab .widget-alert-rows{ padding: 0em; }

.widget-audio-dialog-window{ width: min(100vw, 40em); }
.widget-audio-src-value{ flex-grow: 1; }
.widget-audio-padding-input-input{ width: 100%; }
.widget-audio-margin-input-input{ width: 100%; }
.widget-audio-background-col{ flex: 0 1 0; }
.widget-audio-border-col{ flex: 0 1 0; }
.widget-audio-shadow-input{ width: 20em; }

.widget-barcode-dialog-window{ height: 35em; width: min(100%, 45em); }
.widget-barcode-center{ flex-direction: row; }
.widget-barcode-col{ flex: 1 1 0; }
.widget-barcode-input{ width: 100%; }
.widget-barcode-options{ display: flex; gap: var(--input-padding); }
.widget-barcode-option{ flex: 1 1 0; }
.widget-barcode-option-text{ margin-right: 0em !important; }
.widget-barcode-data-mode-col{ flex: 2 1 0; }
.widget-barcode-data-type-col{ flex: 1 1 0; }
.widget-barcode-preview{ text-align: center;  }
.widget-barcode-preview-image{ height: 100%; width: 8em; }
.widget-barcode-preview-image{ background-size: contain; background-repeat: no-repeat; background-position: center center; }
.widget-barcode-styles-tab{ min-width: auto; }
.widget-barcode-height-input-input{ width: 100%; }
.widget-barcode-height-input-value{ flex-grow: 1; }
.widget-barcode-margin-col{ flex: 2 1 0; }
.widget-barcode-shadow-input{ width: 20em; }

@media (max-width: 1200px) {
	.widget-barcode-center{ flex-direction: row; }
	.widget-barcode-preview{ height: 8em; width: 100%; }
}

.widget-box-dialog-window{ height: 35em; width: min(100%, 40em); }
.widget-box-shadow-col{ flex: 2 1 0; }

.widget-code-center{ flex-direction: row; }
.widget-code-preview{ padding: 0em; flex-grow: 1; border-right: 1px solid #dcdcdc; }
.widget-code-editor{ height: 100%; width: 100%; border: none !important; } 
.widget-code-form{ flex: 0 0 fit-content; }
.widget-code-modes{ flex-direction: column; }
.widget-code-editor-tabs{ display: flex; flex-direction: column; height: 100%; width: 100%; }
.widget-code-editor-tabs-buttons{ position: relative; display: flex; border-bottom: 1px solid #dcdcdc; background: var(--tools-background); }
.widget-code-editor-tabs-button{ cursor: pointer; padding: .5em .75em; display: flex; align-items: center; }
.widget-code-editor-tabs-button{ user-select: none; border-right: 1px solid #dcdcdc; }
.widget-code-editor-tabs-button.selected{ font-weight: bold; }
.widget-code-editor-tabs-icon{ margin-right: .5em; height: 1em; width: 1em; flex: 0 0 1em; }
.widget-code-editor-tabs-close{ margin-left: .5em; height: 1em; width: 1em; flex: 0 0 1em; }
.widget-code-editor-tabs-views{ flex-grow: 1; }
.widget-code-editor-tabs-view{ height: 100%; width: 100%; }
.widget-code-editor-tabs-preview{ position: relative; }
.widget-code-editor-preview-run{ position: absolute; top: .5em; right: .5em; }
.widget-code-editor-preview-poster{ height: 100%; width: 100%; }
.widget-code-editor-preview-poster{ display: flex; align-items: center; justify-content: center; flex-direction: column; }
.widget-code-editor-preview-title{ font-size: 1.5em; font-weight: bold; line-height: 1em; }
.widget-code-editor-preview-text{ font-size: 1.125em; margin: 1em 0em; line-height: 1em; }
.widget-code-editor-preview{ height: 100%; width: 100%; overflow-y: auto; padding: 2em; }
.widget-code-styles-tab{ max-height: 100%; width: 25em; }
.widget-code-dialog-window{ width: min(100%, 60em); height: min(100%, 40em); }

.widget-hbox-dialog-window{ height: 35em; width: min(100%, 40em); }
.widget-hbox-shadow-col{ flex: 2 1 0; }

.widget-image-dialog-window{ width: min(100vw, 40em); }
.widget-image-margin-input-input{ width: 100%; }
.widget-image-shadow-col{ flex: 1.5 1 0; }

.widget-li-dialog-window{ width: min(100%, 35em); }
.widget-li-padding-col{ flex: 2 1 0; }

.widget-link-dialog-window{ height: 30em; width: min(100vw, 38em); }
.widget-link-title-col{ flex-grow: 1; }
.widget-link-padding-input-input{ width: 100%; }
.widget-link-margin-input-input{ width: 100%; }
.widget-link-shadow-col{ flex: 2 1 0; }

.widget-section-dialog-window{ width: min(100%, 32em); }

.widget-draw-dialog-window{ width: min(100%, 40em); }

.widget-slide-dialog-window{ width: min(100%, 40em); }
.widget-slide-styles-tab{ min-width: auto; }
.widget-slide-gap-input-input{ width: 100%; }
.widget-slide-gap-input-value{ flex: 1 1 0; }
.widget-slide-color-col{ flex: 1 1 0; }
.widget-slide-color-input-input{ width: 100%; }
.widget-slide-color-input-text{ flex: 1 1 0; }

.widget-slides-dialog-window{ width: min(100%, 40em); }
.widget-slides-preview{ padding: 0em; }
.widget-slides-preview-slides{ height: 8em; }
.widget-slides-preview-slide{ padding: 1em; }
.widget-slides-preview-content{ height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
.widget-slides-preview-content{ border: 1px solid #ececec; font-size: 1.25em; font-weight: bold; }
.widget-slides-modulo-cols>*{ flex: 1 1 0; }
.widget-slides-prev-cols>*{ flex: 1 1 0; }
.widget-slides-click-cols>*{ flex: 1 1 0; }
.widget-slides-height-input-input{ width: 100%; }
.widget-slides-height-input-value{ flex: 1 1 0; }
.widget-slides-padding-input-input{ width: 100%; }
.widget-slides-margin-input-input{ width: 100%; }
.widget-slides-shadow-col{ flex: 2 1 0; }

.widget-tab-dialog-window{ width: min(100%, 40em); }
.widget-tab-shadow-col{ flex: 2 1 0; }

.widget-table-dialog-window{ width: min(100%, 33em); }
.widget-table-head-col{ flex: 0 1 0; }
.widget-table-shadow-col{ flex: 2 1 0; }

.widget-td-dialog-window{ width: min(100%, 32em); }
.widget-td-padding-input{ width: 20em; }
.widget-td-shadow-col{ width: min(100% 32em); }

.widget-text-dialog-window{ height: 35em; width: min(100%, 40em); }
.widget-text-default-tab .widget-text-rows{ padding: 0em; }
.widget-text-text-row{ flex-grow: 1; }
.widget-text-text-input{ height: 100%; border: none !important; }
.widget-text-write-input{ display: flex; gap: .25em; }
.widget-text-shadow-col{ flex: 2 1 0; }

.widget-title-dialog-window{ width: min(100vw, 40em); height: 35em; }
.widget-title-horizontal-col{ flex: 2 1 0; }
.widget-title-padding-input-input{ width: 100%; }
.widget-title-margin-input-input{ width: 100%; }
.widget-title-shadow-col{ flex: 2 1 0; }

.widget-ul-dialog-window{ width: min(100vw, 38em); }
.widget-ul-style-col{ flex: 1 1 0; }
.widget-ul-direction-col{ flex: 1 1 0; }
.widget-ul-same-col{ flex: 0 1 0; }
.widget-ul-padding-input-input{ width: 100%; }
.widget-ul-margin-input-input{ width: 100%; }
.widget-ul-shadow-col{ flex: 2 1 0; }

.widget-vbox-dialog-window{ height: 35em; width: min(100%, 40em); }
.widget-vbox-height-col{ flex: 0 0 10em; }
.widget-vbox-shadow-col{ flex: 2 1 0; }

.widget-video-dialog-window{ width: min(100vw, 40em); }
.widget-video-preview{ padding: 0em; }
.widget-video-video{ height: 10em; }
.widget-video-padding-input-input{ width: 100%; }
.widget-video-margin-input-input{ width: 100%; }

.widget-youtube-dialog-window{ width: min(100vw, 40em); }
.widget-youtube-preview{ padding: 0em; }
.widget-youtube-video{ height: 12em; }
.widget-youtube-height-input-input{ width: 100%; }
.widget-youtube-height-input-value{ flex: 1 1 0; }
.widget-youtube-padding-input-input{ width: 100%; }
.widget-youtube-margin-input-input{ width: 100%; }