.responsive-switchers-cssboxfields .groupcssbox-device-wrap, .responsive-switchers-cssboxfields .tabscssbox-device-wrap, .customize-control-appzend-cssbox .responsive-switchers-fields .cssbox-device-wrap { visibility: hidden; opacity: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: 0; } .responsive-switchers-cssboxfields .groupcssbox-device-wrap li, .responsive-switchers-cssboxfields .tabscssbox-device-wrap li, .customize-control-appzend-cssbox .responsive-switchers-fields .cssbox-device-wrap li { padding: 2px; } .responsive-switchers-cssboxfields .groupcssbox-device-wrap li label > span, .responsive-switchers-cssboxfields .tabscssbox-device-wrap li label > span, .customize-control-appzend-cssbox .responsive-switchers-fields .cssbox-device-wrap li label > span { display: block; margin-bottom: 5px; } .responsive-switchers-cssboxfields .active.groupcssbox-device-wrap, .responsive-switchers-cssboxfields .active.tabscssbox-device-wrap, .customize-control-appzend-cssbox .responsive-switchers-fields .active.cssbox-device-wrap { visibility: visible; opacity: 1; height: auto; -webkit-transition: opacity 0.7s ease-in-out 0.2s, height 0.9s ease-in-out 0.3s; -moz-transition: opacity 0.7s ease-in-out 0.2s, height 0.9s ease-in-out 0.3s; -o-transition: opacity 0.7s ease-in-out 0.2s, height 0.9s ease-in-out 0.3s; transition: opacity 0.7s ease-in-out 0.2s, height 0.9s ease-in-out 0.3s; } #customize-theme-controls .customize-pane-child.current-panel-parent, .in-sub-panel #customize-theme-controls .customize-pane-child.current-panel-parent { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .customize-control-appzend-cssbox { margin-top: 10px; } .customize-control-appzend-cssbox .responsive-switchers-fields { clear: both; margin-top: 10px; } .customize-control-appzend-cssbox .cssbox-field-control-wrap .cssbox-field-control { position: relative; } .customize-control-appzend-cssbox .cssbox-field-control-wrap .cssbox-field-control .responsive-switchers { position: absolute; right: 8px; top: -5px; } /* Custom Checkbox */ .field-link { display: block; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); position: relative; width: 22px; margin: 0 auto; } .field-link .cssbox_link, .field-link .groupcssbox_link, .field-link .tabscssbox_link { opacity: 0; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; } .field-link .cssbox_link, .field-link .cssbox_link:after, .field-link .cssbox_link:before, .field-link .cssbox_link *, .field-link .cssbox_link *:after, .field-link .cssbox_link *:before, .field-link .cssbox_link + .tgl-btn, .field-link .groupcssbox_link, .field-link .groupcssbox_link:after, .field-link .groupcssbox_link:before, .field-link .groupcssbox_link *, .field-link .groupcssbox_link *:after, .field-link .groupcssbox_link *:before, .field-link .groupcssbox_link + .tgl-btn, .field-link .tabscssbox_link, .field-link .tabscssbox_link:after, .field-link .tabscssbox_link:before, .field-link .tabscssbox_link *, .field-link .tabscssbox_link *:after, .field-link .tabscssbox_link *:before, .field-link .tabscssbox_link + .tgl-btn { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .field-link .cssbox_link::selection, .field-link .cssbox_link:after::selection, .field-link .cssbox_link:before::selection, .field-link .cssbox_link *::selection, .field-link .cssbox_link *:after::selection, .field-link .cssbox_link *:before::selection, .field-link .cssbox_link + .tgl-btn::selection, .field-link .groupcssbox_link::selection, .field-link .groupcssbox_link:after::selection, .field-link .groupcssbox_link:before::selection, .field-link .groupcssbox_link *::selection, .field-link .groupcssbox_link *:after::selection, .field-link .groupcssbox_link *:before::selection, .field-link .groupcssbox_link + .tgl-btn::selection, .field-link .tabscssbox_link::selection, .field-link .tabscssbox_link:after::selection, .field-link .tabscssbox_link:before::selection, .field-link .tabscssbox_link *::selection, .field-link .tabscssbox_link *:after::selection, .field-link .tabscssbox_link *:before::selection, .field-link .tabscssbox_link + .tgl-btn::selection { background: none; } .field-link .cssbox_link + .tgl-btn, .field-link .groupcssbox_link + .tgl-btn, .field-link .tabscssbox_link + .tgl-btn { outline: 0; display: block; width: auto; height: 14px; position: relative; cursor: pointer; user-select: none; margin-top: 3px; } .field-link .cssbox_link + .tgl-btn:after, .field-link .cssbox_link + .tgl-btn:before, .field-link .groupcssbox_link + .tgl-btn:after, .field-link .groupcssbox_link + .tgl-btn:before, .field-link .tabscssbox_link + .tgl-btn:after, .field-link .tabscssbox_link + .tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%; } .field-link .cssbox_link + .tgl-btn:after, .field-link .groupcssbox_link + .tgl-btn:after, .field-link .tabscssbox_link + .tgl-btn:after { left: 0; } .field-link .cssbox_link + .tgl-btn:before, .field-link .groupcssbox_link + .tgl-btn:before, .field-link .tabscssbox_link + .tgl-btn:before { display: none; } .field-link .cssbox_link:checked + .tgl-btn:after, .field-link .groupcssbox_link:checked + .tgl-btn:after, .field-link .tabscssbox_link:checked + .tgl-btn:after { left: 50%; } .field-link .cssbox_link + .tgl-btn, .field-link .groupcssbox_link + .tgl-btn, .field-link .tabscssbox_link + .tgl-btn { padding: 2px; transition: all 0.2s ease; background: #fff; border: 1px solid #c4cfd7; border-radius: 2em; } .field-link .cssbox_link + .tgl-btn:after, .field-link .groupcssbox_link + .tgl-btn:after, .field-link .tabscssbox_link + .tgl-btn:after { transition: all 0.2s ease; background: #c4cfd7; content: ""; border-radius: 1em; } .field-link .cssbox_link:checked + .tgl-btn, .field-link .groupcssbox_link:checked + .tgl-btn, .field-link .tabscssbox_link:checked + .tgl-btn { border: 1px solid #275cf6; } .field-link .cssbox_link:checked + .tgl-btn:after, .field-link .groupcssbox_link:checked + .tgl-btn:after, .field-link .tabscssbox_link:checked + .tgl-btn:after { left: 50%; background: #275cf6; } /*Dimension Control*/ .customize-control-dimensions>ul { display: inline-block; width: 100%; } .customize-control-dimensions .dimension-wrap { float: left; width: 20%; margin: 0; } .customize-control-dimensions .dimension-wrap input, .customize-control-dimensions .dimension-wrap button { display: block; font-size: 12px; padding: 4px 0; width: 100%; height: 28px; border: 1px solid; border-color: #a4afb7; border-left-width: 0; border-radius: 0; text-align: center; } .customize-control-dimensions .dimension-wrap:first-child input { border-left-width: 1px; border-radius: 3px 0 0 3px; } .customize-control-dimensions .dimension-wrap .dimension-label { display: block; color: #949698; font-size: 10px; padding-top: 5px; font-style: normal; text-transform: uppercase; text-align: center; } .customize-control-dimensions .dimension-wrap input:focus+.dimension-label { color: #42474a; } .customize-control-dimensions .dimension-wrap .link-dimensions { background-color: #fff; border: 1px solid #a4afb7; border-left-width: 0; padding: 0; outline: none; border-radius: 0 3px 3px 0; cursor: pointer; } .customize-control-dimensions .dimension-wrap .link-dimensions span { display: block; width: 100%; height: 28px; line-height: 28px; font-size: 16px; } .customize-control-dimensions .dimension-wrap .link-dimensions .appzend-linked { background-color: #a4afb7; color: #fff; } .customize-control-dimensions .dimension-wrap .link-dimensions.unlinked .appzend-unlinked { display: none; } .customize-control-dimensions .dimension-wrap .link-dimensions.unlinked .appzend-linked { display: block; } .customize-control-dimensions .dimension-wrap .link-dimensions .appzend-linked { display: none; } .customize-control.has-switchers .customize-control-title { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; margin-bottom: 10px; justify-content: space-between; } .customize-control.has-switchers .customize-control-title span { line-height: 20px; width: 70%; } .customize-control .responsive-switchers { margin-left: 5px; width: auto } .customize-control .responsive-switchers li:not(.desktop) { display: none } .customize-control.responsive-switchers-open .responsive-switchers li { display: block } .customize-control .responsive-switchers li { float: left; margin: 0 } .customize-control .responsive-switchers li button { display: inline-block; height: 20px; width: 20px; background-color: #a4afb7; position: relative; margin-left: 5px; color: #fff; font-size: 10px; text-align: center; border-radius: 50%; padding: 0; border: 0; outline: 0; -webkit-transition: background-color .5s; transition: background-color .5s; cursor: pointer } .customize-control .responsive-switchers li button:hover { background-color: #c2cbd2 } .customize-control .responsive-switchers li:not(.desktop) button.active { background-color: #13aff0 } .customize-control .responsive-switchers li button i { width: auto; height: auto; font-size: inherit; line-height: 18px } .customize-control.has-switchers>.control-wrap:not(.active) { display: none; width: 100% }