File: //var/www/mussarq_bak2/wp-content/themes/wpnull24/framework/vendor/usof/css/usof.css
/*
----------------------------------------------------------------
UpSolution Options Framework
Copyright 2017 UpSolution
http://us-themes.com/
NOTE: DO NOT EDIT THIS FILE!
THIS FILE IS REPLACED DURING AUTO-UPDATES
AND ANY CHANGES MADE HERE WILL BE OVERWRITTEN.
----------------------------------------------------------------
*/
/* Customize WordPress admin pages
========================================================================== */
body.post-type-us_grid_layout,
body.post-type-us_header,
body.toplevel_page_us-theme-options {
overflow-y: scroll;
background-color: #fff;
}
body.post-type-us_grid_layout.us-popup,
body.post-type-us_header.us-popup,
body.toplevel_page_us-theme-options.us-popup {
overflow: hidden;
}
.post-type-us_grid_layout #wpcontent,
.post-type-us_grid_layout #wpbody-content,
.post-type-us_header #wpcontent,
.post-type-us_header #wpbody-content,
.toplevel_page_us-theme-options #wpcontent,
.toplevel_page_us-theme-options #wpbody-content {
padding: 0 !important;
}
.post-type-us_grid_layout #wpbody-content .wrap,
.post-type-us_header #wpbody-content .wrap,
.toplevel_page_us-theme-options #wpbody-content .wrap {
margin: 0;
}
.post-type-us_grid_layout .wrap > *:not(form),
.post-type-us_grid_layout #screen-meta-links,
.post-type-us_grid_layout #post-body-content,
.post-type-us_grid_layout #poststuff,
.post-type-us_grid_layout #wpfooter,
.post-type-us_header .wrap > *:not(form),
.post-type-us_header #screen-meta-links,
.post-type-us_header #post-body-content,
.post-type-us_header #postbox-container-2,
.post-type-us_header .postbox,
.post-type-us_header #wpfooter,
.toplevel_page_us-theme-options #wpfooter,
.toplevel_page_us-theme-options .wrap > *:not(.usof-container),
.usof-container.theme_activated .us-screenlock,
.usof-form-row.hidden {
display: none !important;
}
.toplevel_page_us-theme-options .us-migration {
position: fixed;
left: 160px;
right: 0;
margin: 0;
z-index: 33;
}
/* Base
========================================================================== */
.usof-container {
font-size: 14px;
line-height: 24px;
padding-top: 60px;
}
.usof-container * {
box-sizing: border-box;
}
.usof-container a {
color: #008ec2;
box-shadow: none;
text-decoration: none;
}
.usof-container a:hover {
text-decoration: underline;
}
.us-bld-window.dragged,
.usof-container.dragged {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Basic Form Fields
========================================================================== */
/* Inputs */
.usof-container input[type="text"],
.usof-container input[type="password"],
.usof-container input[type="email"],
.usof-container input[type="url"],
.usof-container input[type="tel"],
.usof-container input[type="number"],
.usof-container input[type="date"],
.usof-container input[type="search"],
.usof-container textarea,
.usof-container select {
margin: 0;
padding: 0 10px;
font-size: 16px;
line-height: 40px;
height: 40px;
width: 100%;
box-shadow: none;
border-radius: 3px;
border: 1px solid #eee;
border-top-color: #ddd;
background-color: #f1f1f1;
color: #444;
-webkit-appearance: none;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #444;
}
.usof-container textarea {
padding: 6px 10px;
line-height: inherit;
height: auto;
min-height: 250px;
direction: ltr;
text-align: left;
}
.usof-container input[type="text"]:focus,
.usof-container input[type="password"]:focus,
.usof-container input[type="email"]:focus,
.usof-container input[type="url"]:focus,
.usof-container input[type="tel"]:focus,
.usof-container input[type="number"]:focus,
.usof-container input[type="date"]:focus,
.usof-container input[type="search"]:focus,
.usof-container textarea:focus,
.usof-container select:focus {
border-color: #008ec2;
}
/* Buttons */
button::-moz-focus-inner {
border: 0;
padding: 0;
}
.usof-button {
display: inline-block;
vertical-align: top;
font-weight: 600;
line-height: 40px;
margin: 0;
padding: 0 30px;
cursor: pointer;
position: relative;
overflow: hidden;
border: none;
border-radius: 50px;
box-shadow: 0 -1px 0 rgba(0,0,0,0.08) inset;
background-color: #f1f1f1;
color: inherit;
transition: background 0.1s, border-color 0.1s, color 0.1s, opacity 0.1s;
}
.usof-button:hover {
background-color: #e5e5e5;
}
.usof-button[disabled] {
opacity: 0.33;
cursor: default;
pointer-events: none;
}
.usof-button.type_save {
box-shadow: none;
min-width: 200px;
background-color: #008ec2;
color: #fff;
}
.usof-button.type_save:hover {
background-color: #00b9eb;
}
.usof-button span {
transition: opacity 0.2s;
}
/* Preloader */
.usof-preloader {
display: inline-block;
vertical-align: top;
position: absolute !important;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
opacity: 0;
transition: opacity 0.2s;
}
.usof-preloader:before,
.usof-preloader:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
border: 2px solid;
}
.usof-preloader:before {
opacity: 0.33;
}
.usof-preloader:after {
border-color: transparent;
border-top-color: inherit;
animation: rotation 1s infinite cubic-bezier(.6,.3,.3,.6);
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
/* Control element
========================================================================== */
.usof-control {
position: relative;
}
.usof-control .usof-button {
display: block;
text-align: center;
outline: none;
z-index: 3;
}
.usof-control-message {
position: absolute;
top: 0;
left: 0;
right: 0;
font-weight: 600;
line-height: 20px;
text-align: center;
padding: 10px 0;
color: #70cc70;
opacity: 0;
transition: opacity 0.2s;
}
/* STATUS clear */
.usof-control.status_clear .usof-button.type_save {
opacity: 0.33;
cursor: default;
pointer-events: none;
}
/* STATUS notsaved */
.usof-control.status_notsaved .usof-button {
opacity: 1;
pointer-events: auto;
}
/* STATUS loading */
.usof-button.loading,
.usof-control.status_loading .usof-button,
.usof-schemes-controls.loading .usof-button {
cursor: default;
}
.usof-button.loading span,
.usof-control.status_loading .usof-button span,
.usof-schemes-controls.loading .usof-button span {
opacity: 0;
}
.usof-button.loading .usof-preloader,
.usof-control.status_loading .usof-button .usof-preloader,
.usof-schemes-controls.loading .usof-button .usof-preloader {
opacity: 1;
}
/* STATUS success */
.usof-control.status_success .usof-button {
cursor: default;
pointer-events: none;
opacity: 0;
}
.usof-control.status_success .usof-control-message {
opacity: 1;
}
/* STATUS error */
.usof-control.status_error .usof-button {
cursor: default;
pointer-events: none;
opacity: 0;
}
.usof-control.status_error .usof-control-message {
color: #ff5b4c;
opacity: 1;
}
/* FOR color schemes */
.usof-header .usof-control.for_schemes {
margin-left: 0;
margin-right: 0;
}
.usof-control.for_schemes .usof-button {
background-color: #595d62;
color: #fff;
}
.usof-control.for_schemes .usof-button:hover {
background-color: #464b50;
}
/* Header
========================================================================== */
.usof-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
position: fixed;
z-index: 13;
top: 32px;
left: 160px;
right: 0;
background-color: #32373c;
color: #fff;
}
@media screen and ( min-width: 961px ) {
.wp-admin.folded .usof-header {
left: 36px;
}
.rtl.wp-admin.folded .usof-header {
left: 0;
right: 36px;
}
}
.usof-header-logo {
flex-shrink: 0;
font-weight: 600;
line-height: 60px;
padding: 0 40px;
width: 180px;
white-space: nowrap;
background-color: #464b50;
color: #b4b9be;
}
.usof-header-logo span {
color: #00b9eb;
}
.usof-header-title {
margin-left: 40px;
margin-right: auto;
max-width: calc(100vw - 620px);
}
.usof-header-title span {
float: left;
font-size: 20px;
line-height: 60px;
color: #b4b9be;
}
.usof-header-title h2 {
font-size: 20px;
line-height: 60px;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
}
.usof-header .usof-control {
flex-shrink: 0;
margin: 10px;
}
/* Side Navigation
========================================================================== */
.usof-nav {
position: absolute;
z-index: 12;
top: 60px;
left: 0;
width: 180px;
}
.usof-nav-bg {
position: fixed;
top: 0;
bottom: 0;
width: inherit;
background-color: #f1f1f1;
}
.usof-nav-list {
margin: 0;
}
@media (min-height: 612px) {
.usof-nav-list {
position: fixed;
width: inherit;
}
}
.usof-nav-item {
margin: 0;
position: relative;
}
.usof-nav-item.level_1.current {
box-shadow: 0 1px 0 rgba(0,0,0,0.06);
background-color: #fff;
}
.usof-nav-anchor {
display: block;
line-height: 18px;
position: relative;
text-decoration: none;
box-shadow: none !important;
color: inherit;
}
.usof-nav-title {
display: block;
font-weight: 600;
text-overflow: ellipsis;
overflow: hidden;
}
.usof-nav-anchor.level_1 {
padding: 11px 11px 11px 40px;
text-decoration: none !important;
color: inherit;
}
.usof-nav-item.level_1:hover .usof-nav-anchor.level_1 {
background-color: #e5e5e5;
}
.usof-nav-item.level_1.current .usof-nav-anchor.level_1 {
background-color: #fff;
color: #008ec2;
}
.usof-nav-anchor.level_1 .usof-nav-icon {
display: block;
position: absolute;
z-index: 1;
top: 12px;
left: 12px;
height: 16px;
width: 16px;
}
/* Compact Navigation */
.usof-container.nav_compact .usof-header-logo {
padding-left: 25px;
width: auto;
background: none;
color: #999;
}
.usof-container.nav_compact .usof-header-logo .dash {
display: inline;
}
.usof-container.nav_compact .usof-header-title {
padding-left: 0;
}
.usof-container.nav_compact .usof-nav {
width: 46px;
}
.usof-container.nav_compact .usof-content {
margin-left: 46px;
}
.usof-container.nav_compact .usof-nav-anchor {
height: 46px;
}
.usof-container.nav_compact .usof-nav-title {
visibility: hidden;
position: absolute;
top: 0;
overflow: hidden;
white-space: nowrap;
padding: 13px 13px 13px 0;
background-color: #e5e5e5;
opacity: 0;
transition: opacity 0.1s 0.3s;
}
.usof-container.nav_compact .usof-nav-item:hover .usof-nav-title {
visibility: visible;
opacity: 1;
}
.usof-container.nav_compact .usof-nav-item.current .usof-nav-title {
display: none;
}
/* "NEW" popup message */
.usof-nav-popup {
display: none !important;
position: absolute;
top: 10px;
left: 46px;
text-transform: uppercase;
padding: 2px 12px;
border-radius: 3px;
background-color: #e52600;
color: #fff;
animation: move 1s infinite;
}
.usof-nav-item:hover > .usof-nav-popup {
display: none;
}
.usof-nav-popup:after {
content: '';
position: absolute;
top: 5px;
left: -9px;
height: 18px;
width: 18px;
background-color: inherit;
transform: rotate(45deg);
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(12px); }
100% { transform: translateX(0); }
}
/* Content
========================================================================== */
.usof-content {
margin-left: 180px;
}
.usof-section {
position: relative;
max-width: 920px;
}
.usof-section-header {
display: none;
font-size: 24px;
line-height: 30px;
text-align: center;
padding: 20px 40px;
cursor: pointer;
background-color: #f1f1f1;
}
.usof-section-header.current {
background-color: #fff;
}
.usof-section + .usof-section .usof-section-header {
box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
.usof-section-header h3 {
font-size: inherit;
line-height: inherit;
margin: 0;
color: #008ec2;
}
.usof-section-content {
display: flex;
flex-wrap: wrap;
padding: 20px 0 40px;
}
.usof-form-row {
clear: both;
padding: 15px 40px;
width: 100%;
}
.usof-form-row:after {
display: block;
content: '';
clear: both;
}
.usof-form-row-title {
float: left;
width: 30%;
line-height: 20px;
padding: 10px 20px 10px 0;
}
.usof-form-row-title span {
font-weight: 600;
}
.usof-form-row-field {
float: right;
width: 70%;
position: relative;
}
/* Form row description */
.usof-form-row-desc {
display: none;
}
.usof-form-row-desc code {
font-size: inherit;
white-space: nowrap;
padding: 0;
color: #fe9;
}
/* type 1 */
.usof-form-row.desc_1 .usof-form-row-desc {
display: block;
}
.usof-form-row-hint-text,
.usof-form-row.desc_1 .usof-form-row-desc-text {
font-size: 13px;
line-height: 18px;
padding-top: 4px;
color: #999;
}
/* type 2 & 3 */
.usof-form-row.desc_2 .usof-form-row-desc {
display: block;
position: absolute;
top: 8px;
right: -35px;
}
.usof-form-row.desc_3 .usof-form-row-desc {
display: block;
position: absolute;
top: 8px;
left: -35px;
}
.usof-form-row.desc_3 .usof-form-row-title {
padding-right: 40px;
}
.usof-form-row.desc_4 .usof-form-row-desc {
display: inline-block;
vertical-align: top;
position: relative;
margin: -2px;
}
.usof-form-row.desc_2 .usof-form-row-desc-icon,
.usof-form-row.desc_3 .usof-form-row-desc-icon,
.usof-form-row.desc_4 .usof-form-row-desc-icon {
font-family: fontawesome;
font-weight: 900;
text-align: center;
line-height: 24px;
width: 36px;
cursor: help;
opacity: 0.2;
}
.usof-form-row.desc_2 .usof-form-row-desc-icon:before,
.usof-form-row.desc_3 .usof-form-row-desc-icon:before,
.usof-form-row.desc_4 .usof-form-row-desc-icon:before {
content: '\f059';
}
.usof-form-row.desc_2 .usof-form-row-desc-text,
.usof-form-row.desc_3 .usof-form-row-desc-text,
.usof-form-row.desc_4 .usof-form-row-desc-text {
position: absolute;
top: 32px;
left: 0;
z-index: 111;
font-size: 12px;
line-height: 18px;
padding: 12px 15px;
width: 270px;
background-color: #333;
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease 0.2s;
}
.usof-form-row.desc_2 .usof-form-row-desc:hover .usof-form-row-desc-text,
.usof-form-row.desc_3 .usof-form-row-desc:hover .usof-form-row-desc-text,
.usof-form-row.desc_4 .usof-form-row-desc:hover .usof-form-row-desc-text {
opacity: 1;
visibility: visible;
}
.usof-form-row.desc_2 .usof-form-row-desc-text:before,
.usof-form-row.desc_3 .usof-form-row-desc-text:before,
.usof-form-row.desc_4 .usof-form-row-desc-text:before {
content: '';
position: absolute;
left: 12px;
top: -6px;
height: 12px;
width: 12px;
background-color: #333;
transform: rotate(45deg);
}
.usof-form-row.desc_2 .usof-form-row-desc-text:after,
.usof-form-row.desc_3 .usof-form-row-desc-text:after,
.usof-form-row.desc_4 .usof-form-row-desc-text:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 20px;
}
.usof-form-row-desc-text img {
display: block;
max-width: 100px;
margin: 10px 0 3px;
}
.usof-form-row.desc_2 .usof-example:hover,
.usof-form-row.desc_3 .usof-example:hover,
.usof-form-row.desc_4 .usof-example:hover {
color: #008ec2;
}
.usof-form-row.desc_2 .usof-form-row-desc-text a,
.usof-form-row.desc_3 .usof-form-row-desc-text a,
.usof-form-row.desc_4 .usof-form-row-desc-text a {
color: #00b9eb;
}
/* Form row states */
.usof-form-row-state {
display: none;
font-size: 13px;
line-height: 20px;
padding-top: 5px;
}
/* error */
.usof-form-row.validate_error input[type="text"],
.usof-form-row.validate_error input[type="password"],
.usof-form-row.validate_error input[type="email"],
.usof-form-row.validate_error input[type="url"],
.usof-form-row.validate_error input[type="tel"],
.usof-form-row.validate_error input[type="number"],
.usof-form-row.validate_error input[type="date"],
.usof-form-row.validate_error input[type="search"],
.usof-form-row.validate_error textarea,
.usof-form-row.validate_error select {
border-color: red;
}
.usof-form-row.validate_error .usof-form-row-state {
display: block;
color: red;
}
/* Form Wrapper */
.usof-form-wrapper {
position: relative;
padding: 24px 20px;
margin: 0 40px;
border: 1px solid #e5e5e5;
width: 100%;
}
.usof-form-wrapper.force_right {
max-width: 588px; /* equals width of "usof-form-row-field" */
margin-bottom: 20px;
margin-left: auto;
}
.usof-form-wrapper-content {
display: flex;
flex-wrap: wrap;
}
.usof-form-wrapper .usof-form-row {
padding: 12px 20px;
}
/* Form wrapper FOR COLORS */
.usof-form-wrapper.for_colors {
width: 50%;
padding: 0;
margin: 0;
border: none;
}
.usof-form-wrapper.for_colors .usof-form-wrapper-content {
display: block;
padding: 0 20px 25px;
}
.usof-form-wrapper.for_colors .usof-form-row.type_heading {
padding-left: 0;
padding-right: 0;
}
.usof-form-wrapper.for_colors .usof-form-row.type_color {
padding: 0 !important;
}
.usof-form-wrapper.for_colors .usof-form-row.type_color .usof-form-row-field {
float: none;
width: auto;
}
/* Change Wrapper layout like regular field */
.usof-form-wrapper.title_left {
border: none;
padding: 15px 0 0;
}
.usof-form-wrapper.title_left .usof-form-wrapper-title {
float: left;
font-weight: 600;
padding: 8px 20px 8px 0;
width: 30%;
}
.usof-form-wrapper.title_left .usof-form-row.inline {
padding-right: 10px;
}
.usof-form-wrapper.title_left .usof-form-row.inline.type_select .usof-form-row-control {
min-width: 150px;
}
/* Form Group
========================================================================== */
.usof-form-group {
width: 100%;
}
.usof-form-group .us-bld-editor-dragshadow {
height: 41px;
margin: 0 40px;
}
.usof-form-group .us-bld-editor-dragshadow:before {
border-radius: 0;
}
.usof-form-group-add {
display: block;
position: relative;
text-align: center;
height: 50px;
margin: 0 40px;
padding: 13px;
cursor: pointer;
background-color: #f1f1f1;
}
.usof-form-group-add:hover {
background-color: #e5e5e5;
}
.usof-form-group-add-title {
display: inline-block;
vertical-align: top;
margin: 0 4px;
}
.usof-form-group-add-title {
font-size: 18px;
font-weight: 600;
}
.usof-form-group-add.adding .usof-form-group-add-title {
opacity: 0;
}
.usof-form-group-add .usof-preloader {
transition: none;
}
.usof-form-group-add.adding .usof-preloader {
opacity: 1;
}
.usof-form-group-item {
position: relative;
}
.usof-form-group-item-content {
display: flex;
flex-wrap: wrap;
}
.with_wrapper .usof-form-group-item + .usof-form-group-item .usof-form-wrapper {
border-top: none;
}
.usof-form-group-item.dragged {
height: 40px;
padding: 0;
border: 0;
background-color: #e5e5e5;
}
.usof-form-group-item-controls {
position: absolute;
z-index: 3;
top: 0;
right: 40px;
display: flex;
visibility: hidden;
}
.usof-form-group-item:hover .usof-form-group-item-controls {
visibility: visible;
}
.usof-form-group-item-controls > div {
flex-shrink: 0;
text-align: center;
font-weight: 900;
font-size: 16px;
font-family: fontawesome;
line-height: 40px;
width: 36px;
cursor: pointer;
color: #999;
}
.usof-form-group.type_simple .usof-form-group-item-controls > div {
background-color: #fff;
}
.usof-form-group-item-controls > div:hover {
color: #444;
}
.usof-form-group-item-controls > .usof-control-move {
cursor: move;
}
.usof-form-group-item:only-of-type .usof-control-move {
display: none;
}
.usof-control-move:before {
vertical-align: top;
content: '\f338';
}
.usof-form-group-item-controls > .usof-control-delete:hover {
color: red;
}
.usof-control-delete:before {
vertical-align: top;
content: '\f2ed';
}
/* With Wrapper */
.usof-form-group.with_wrapper .usof-form-group-item-controls {
margin: 1px;
}
/* Compact Group */
.usof-form-group.for_inline .usof-form-group-item {
padding: 5px 40px;
}
/* Accordion Group */
.usof-form-group.type_accordion .usof-form-group-item {
border-bottom: 1px solid #e5e5e5;
}
.usof-form-group.type_accordion .hidden + .usof-form-group-item {
border-top: 1px solid #e5e5e5;
}
.usof-form-group.type_accordion .usof-form-group-item-title {
position: relative;
line-height: 20px;
font-weight: 600;
padding: 10px 72px 10px 20px;
cursor: pointer;
background-color: #f1f1f1;
}
.usof-form-group.type_accordion .active .usof-form-group-item-title {
background-color: #fff;
}
.usof-form-group.type_accordion .usof-form-group-item-title:hover {
background-color: #e5e5e5;
}
.usof-form-group.type_accordion .usof-form-group-item-title:after {
display: inline-block;
vertical-align: top;
content: '\f0d7';
font-family: fontawesome;
font-weight: 900;
font-size: 16px;
margin-left: 8px;
transition: transform 0.3s;
}
.usof-form-group.type_accordion .usof-form-group-item.active .usof-form-group-item-title:after {
transform: rotate(180deg);
}
.usof-form-group.type_accordion .usof-form-group-item-content {
padding: 5px 5px 15px;
}
.usof-form-group.type_accordion .usof-form-group-item-controls > div:hover {
background-color: #e5e5e5;
}
/* Accordion Group for Buttons */
.usof-form-group.type_accordion.for_btns .usof-form-group-item {
margin: 0 40px;
}
.usof-form-group.type_accordion.for_btns .hidden + .usof-form-group-item {
border-top: none;
}
.usof-form-group.type_accordion.for_btns .usof-form-group-item-controls {
top: 22px;
right: 26px;
}
.usof-form-group.type_accordion.for_btns .usof-form-group-item-controls > div {
background: none;
}
.usof-form-group.type_accordion.for_btns .usof-form-group-item:nth-child(2) .usof-form-group-item-controls {
display: none;
}
.usof-form-group.type_accordion.for_btns .usof-form-group-item-title {
position: -webkit-sticky;
position: sticky;
z-index: 1;
top: 92px;
font-size: 20px;
line-height: 26px;
padding: 12px 0 !important;
background-color: #fff;
}
.usof-form-group.type_accordion.for_btns .usof-form-group-item-title:after {
position: absolute;
top: 30px;
right: 0;
font-size: 22px;
}
.usof-form-group.type_accordion.for_btns .usof-form-group-item-content {
margin: 0 -20px;
padding: 0 0 25px;
}
.usof-form-group.for_btns .usof-form-row {
padding-left: 20px;
padding-right: 20px;
}
.usof-form-group.for_btns .usof-form-row:not(.leave_padding) {
padding-top: 0;
}
.usof-form-group.for_btns .usof-form-row.type_color {
padding-bottom: 0;
}
.usof-form-group.for_btns .usof-form-row-title {
float: none;
width: 100%;
padding: 0 0 8px !important;
}
.usof-form-group.for_btns .usof-form-row-field {
float: none;
width: 100%;
padding: 0 !important;
}
/* Form Row Types
========================================================================== */
/* Blocked */
.usof-form-row.blocked .usof-form-row-control {
opacity: 0.5;
pointer-events: none;
}
/* Sticky */
.usof-form-row.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1;
top: 77px; /* 92px - 15px */
background: #fff;
}
/* FOR above */
.usof-form-row.for_above {
padding-top: 0 !important;
}
/* TYPE Heading */
.usof-form-row.type_heading {
padding-top: 10px;
padding-bottom: 10px;
}
.usof-form-row.type_heading.sticky {
top: 92px;
}
.usof-form-row + .usof-form-row.type_heading,
.usof-form-group + .usof-form-row.type_heading,
.usof-form-wrapper + .usof-form-row.type_heading {
margin-top: 30px;
}
.usof-form-row.type_heading .usof-form-row-title {
float: none;
width: auto;
font-size: 20px;
line-height: 26px;
padding: 0 !important;
position: relative;
}
.usof-form-row.type_heading.with_separator .usof-form-row-title:before {
content: '';
display: block;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
height: 1px;
background-color: #e5e5e5;
}
.usof-form-row.type_heading.with_separator .usof-form-row-title span {
display: inline-block;
vertical-align: top;
padding-right: 15px;
position: relative;
background-color: #fff;
}
.usof-form-row.type_heading.align_center .usof-form-row-title {
text-align: center;
}
.usof-form-row.type_heading.with_separator.align_center .usof-form-row-title span {
padding-left: 20px;
}
.usof-form-row.type_heading .usof-form-row-field {
float: none;
width: auto;
}
.usof-form-row.type_heading .usof-form-row-desc {
display: block;
padding-top: 6px;
}
.usof-form-row.type_heading.as_field_title {
margin-top: 0 !important;
padding-bottom: 8px !important;
}
.usof-form-row.type_heading.as_field_title .usof-form-row-title {
font-size: inherit !important;
line-height: 20px !important;
}
.usof-form-row.type_heading.as_field_title .usof-form-row-title span {
font-weight: 600 !important;
}
/* TYPE Separator */
.usof-form-row.type_separator {
position: relative;
}
.usof-form-row.type_separator.size_medium {
padding-top: 25px;
padding-bottom: 25px;
}
.usof-form-row.type_separator.size_large {
padding-top: 35px;
padding-bottom: 35px;
}
.usof-form-row.type_separator.size_huge {
padding-top: 50px;
padding-bottom: 50px;
}
.usof-form-row.type_separator:after {
content: '';
display: block;
height: 1px;
width: 100%;
background-color: #e5e5e5;
}
.usof-form-row.type_separator.invisible:after {
display: none;
}
/* TYPE Message */
.usof-form-row.type_message .usof-form-row-desc {
display: block;
font-size: 15px;
padding: 20px 25px;
background-color: #e5e5e5;
}
.usof-form-row.type_message a {
font-weight: 600;
}
.usof-form-row.type_message.color_blue .usof-form-row-desc {
background-color: #e1f5ff;
}
.usof-form-row.type_message.color_green .usof-form-row-desc {
background-color: #c9f7b2;
}
.usof-form-row.type_message.color_red .usof-form-row-desc {
background-color: #ffd9d9;
}
.usof-form-row.type_message.color_yellow .usof-form-row-desc {
background-color: #fff2b2;
}
.usof-form-row.type_message.string {
margin-top: -10px;
padding-top: 0;
padding-bottom: 0;
}
.usof-form-row.type_message.string .usof-form-row-desc {
padding: 0;
background: none;
color: #f90;
}
/* TYPE Select */
.usof-select {
position: relative;
}
.usof-select select {
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 30px;
}
.usof-select select::-ms-expand {
display: none; /* remove dropdown arrow in IE11 */
}
.usof-select:not(.type_advanced):after {
position: absolute;
top: 0;
right: 0;
content: '\f078';
font-family: fontawesome;
font-weight: 900;
line-height: 40px;
padding: 0 10px;
pointer-events: none;
}
/* TYPE Select 2 */
.select2-hidden-accessible {
display: none;
}
.select2-container {
display: block;
font-size: 16px;
}
.select2-hidden-accessible ~ .select2-container {
width: 100% !important;
}
.select2-selection--single {
display: block;
position: relative;
line-height: 38px;
padding: 0 30px 0 10px;
border-radius: 3px;
border: 1px solid #eee;
border-top-color: #ddd;
background-color: #f1f1f1;
color: #444;
}
.select2-selection__rendered {
display: block;
white-space: nowrap;
overflow: hidden;
}
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
border-color: #008ec2;
}
.select2-container--open.select2-container--below .select2-selection--single {
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open.select2-container--above .select2-selection--single {
border-top-color: transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-selection__arrow {
position: absolute;
top: 0;
right: 0;
text-align: center;
line-height: 38px;
padding: 0 10px;
}
.select2-selection__arrow:after {
content: '\f078';
font-family: fontawesome;
font-weight: 900;
}
.select2-dropdown {
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
box-sizing: border-box;
font-size: 16px;
border-radius: 3px;
background-color: #f1f1f1;
border: 1px solid #008ec2;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-container--open .select2-dropdown--above {
margin-bottom: -1px;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open .select2-dropdown--below {
margin-top: -1px;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-search {
display: block;
padding: 7px 10px;
}
.select2-search input {
line-height: 30px;
height: 30px;
padding: 0 5px;
width: 100%;
margin: 0;
box-shadow: none !important;
border-color: #ccc #ddd #ddd !important;
}
.select2-results {
display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: 40vh;
}
.select2-results__options {
margin: 0;
}
.select2-results__option:not([role="group"]),
.select2-results__group {
display: block;
padding: 5px 10px;
line-height: 20px;
margin: 0;
}
.select2-results__option .select2-results__option {
padding-left: 20px;
}
.select2-results__option--highlighted {
background-color: #008ec2;
color: #fff;
}
/* TYPE Checkboxes */
.usof-form-row.type_checkboxes .usof-form-row-title {
padding-top: 6px;
padding-bottom: 6px;
}
.usof-form-row.type_checkboxes.desc_2 .usof-form-row-desc,
.usof-form-row.type_checkboxes.desc_3 .usof-form-row-desc {
top: 4px;
}
.usof-checkbox-list,
.usof-checkbox-list:empty + .usof-checkbox-list {
margin: 0;
}
.usof-checkbox-list + .usof-checkbox-list {
margin-top: 25px;
}
.usof-checkbox {
display: inline-block;
vertical-align: top;
position: relative;
}
.type_checkboxes .usof-checkbox {
margin: 0 20px 0 0;
}
.type_checkboxes.vertical .usof-checkbox-list {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.type_checkboxes.vertical .usof-checkbox {
margin: 0;
}
.usof-checkbox.hidden,
.usof-checkbox > label input {
display: none;
}
.usof-checkbox > label {
display: block;
padding: 4px 0;
}
.usof-checkbox-icon {
position: absolute;
top: 6px;
left: 0;
font-size: 12px;
text-align: center;
line-height: 20px;
height: 20px;
width: 20px;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset, 0 0 0 1px rgba(0,0,0,0.015) inset;
background-color: #f1f1f1;
color: #fff;
}
.usof-checkbox > label input:hover + .usof-checkbox-icon {
background-color: #e5e5e5;
}
.usof-checkbox > label input:checked + .usof-checkbox-icon {
background-color: #008ec2;
}
.usof-checkbox-icon:before {
content: '\f00c';
font-family: fontawesome;
font-weight: 900;
opacity: 0;
}
.usof-checkbox > label input:checked + .usof-checkbox-icon:before {
opacity: 1;
}
.usof-checkbox-text {
display: inline-block;
vertical-align: top;
padding-left: 26px;
}
/* TYPE Check Table */
.usof-checkbox-list-title {
font-weight: 600;
margin-bottom: 0;
}
.usof-checkbox-list-title:only-child {
display: none;
}
.type_check_table .usof-checkbox {
width: 46%;
margin-bottom: 0;
}
.type_check_table .usof-checkbox:nth-child(2n) {
margin-right: 8%;
}
.type_check_table .usof-checkbox label {
display: flex;
}
.type_check_table .usof-checkbox-text {
flex-grow: 1;
position: relative;
line-height: 20px;
margin-top: 2px;
}
.type_check_table .usof-checkbox-size {
flex-shrink: 0;
direction: ltr;
text-align: right;
position: relative;
width: 50px;
color: #aaa;
}
.type_check_table input:checked ~ .usof-checkbox-size {
color: #444;
}
.type_check_table .usof-checkbox-size:before {
display: none;
content: 'JS';
font-weight: 600;
position: absolute;
right: 0;
top: -28px;
color: #444;
}
.type_check_table .usof-checkbox-size.for_css:before {
content: 'CSS';
}
.type_check_table .usof-checkbox:nth-child(2) .usof-checkbox-size:before,
.type_check_table .usof-checkbox:nth-child(3) .usof-checkbox-size:before {
display: block;
}
.type_check_table .usof-checkbox label:after {
content: '';
position: absolute;
bottom: 2px;
width: 100%;
border-bottom: 1px solid transparent;
}
.type_check_table .usof-checkbox label:hover:after {
border-color: #e5e5e5;
}
.usof-checkbox-description {
display: none;
position: absolute;
}
/* TYPE Color Scheme */
.usof-form-row.type_style_scheme {
display: none;
position: fixed;
z-index: 100000;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
background-color: #f1f1f1;
}
.usof-form-row.type_style_scheme .usof-form-row-field {
float: none;
width: auto;
}
.usof-form-row.type_style_scheme .us-bld-window-title {
font-weight: 600;
font-size: 30px;
padding: 15px 40px;
}
.usof-form-row.type_style_scheme .us-bld-window-closer {
font-size: 30px;
}
.usof-schemes {
overflow-y: auto;
height: calc(100vh - 60px);
-webkit-overflow-scrolling: touch;
}
.usof-schemes-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 40px;
}
.usof-schemes-text {
margin-right: 10px;
}
.usof-schemes-controls input[type="text"] {
width: auto;
margin-right: 10px;
background-color: #fff;
}
.usof-schemes-controls .usof-button {
background-color: #fff;
}
.usof-schemes-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 20px;
}
.usof-schemes-item {
flex-shrink: 0;
padding: 20px;
margin: 0;
position: relative;
cursor: pointer;
width: 20%;
transition: opacity 0.5s, transform 0.5s;
transform-origin: 90% 10%;
}
.usof-schemes-item-save,
.usof-schemes-item-delete {
position: absolute;
z-index: 2;
text-align: center;
top: 20px;
width: 40px;
cursor: pointer;
opacity: 0;
background-color: rgba(0,0,0,0.9);
color: #fff;
}
.usof-schemes-item:hover .usof-schemes-item-save,
.usof-schemes-item:hover .usof-schemes-item-delete {
opacity: 0.66;
}
.usof-schemes-item-save:hover,
.usof-schemes-item-delete:hover {
opacity: 1 !important;
}
.usof-schemes-item-delete {
right: 20px;
}
.usof-schemes-item-save:before {
display: block;
content: '\f56f';
font: 900 14px/40px fontawesome;
}
.usof-schemes-item-save {
right: 60px;
}
.usof-schemes-item-delete:before {
display: block;
content: '\f2ed';
font: 900 14px/40px fontawesome;
}
.usof-schemes-item:hover {
background-color: #ccc;
}
.usof-schemes-item.deleting {
opacity: 0.1;
transform: scale(0);
pointer-events: none;
}
.usof-schemes-item.saving .usof-schemes-item-save {
opacity: 1;
pointer-events: none;
}
.usof-schemes-item.saving .usof-schemes-item-save:before {
content: '\f1ce';
animation: rotation 1s infinite linear;
}
.usof-schemes-item.saved .usof-schemes-item-save {
opacity: 1;
background-color: #70cc70;
pointer-events: none;
}
.usof-schemes-item.saved .usof-schemes-item-save:before {
content: '\f00c';
}
.usof-scheme-preview {
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.usof-scheme-preview .preview_header {
position: relative;
z-index: 1;
height: 20px;
box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.usof-scheme-preview .preview_content {
position: relative;
padding: 10px;
box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.usof-scheme-preview .preview_heading {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.usof-scheme-preview .preview_text {
font-size: 12px;
line-height: 18px;
margin-bottom: 10px;
}
.usof-scheme-preview .preview_primary,
.usof-scheme-preview .preview_secondary {
display: inline-block;
vertical-align: top;
height: 20px;
width: 50px;
margin-right: 10px;
}
.usof-scheme-preview .preview_footer {
height: 20px;
}
/* TYPE Color */
.usof-color.active + .usof-color-text,
.usof-color:hover + .usof-color-text {
color: #008ec2;
}
/* TYPE Link */
.usof-form-row.type_link .usof-checkbox {
margin: 4px 0 -4px;
}
/* TYPE Icon */
.usof-form-row.type_icon .us-icon-preview {
line-height: 38px;
height: 40px;
border-bottom-color: #eee;
}
.usof-form-row.type_icon select {
border-radius: 3px 0 0 3px;
}
.usof-form-row.type_icon input {
border-radius: 0 3px 3px 0;
}
/* TYPE Css / Html */
.usof-form-row-control-ace {
position: absolute !important;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 5;
border-radius: 3px;
border-style: solid;
border-width: 1px;
border-color: #ddd #eee #eee;
}
/* TYPE Font */
.usof-form-row.type_font {
padding-bottom: 0;
}
.usof-form-wrapper + .usof-form-row.type_font {
margin-top: 15px;
}
.usof-form-group .usof-form-row.type_font {
padding-top: 0;
padding-bottom: 15px;
}
.usof-form-row.type_font .usof-form-row-field {
float: none;
width: 100%;
padding: 0 !important;
}
.usof-font-preview {
display: flex;
align-items: center;
height: 80px;
font-size: 24px;
line-height: 1.4;
padding: 0 25px;
overflow: hidden;
margin-bottom: -2px;
border: 2px dotted rgba(0,0,0,0.15);
}
.usof-form-row[data-name="body_font_family"] .usof-font-preview {
height: 140px;
}
.usof-form-row[data-name="heading_font_family"] .usof-font-preview {
white-space: nowrap;
}
.usof-font .select2-selection--single {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.usof-font .usof-checkbox-list {
margin-top: 6px !important;
}
.usof-font .usof-checkbox {
margin: 0 !important;
width: 25%;
}
.usof-font .usof-checkbox-text {
display: block;
padding-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* TYPE Radio like Switchers */
.usof-radio-list {
display: flex;
flex-wrap: wrap;
margin: 0 !important;
}
.usof-radio {
flex: 1 0 40px;
margin: 0;
padding: 0;
}
.usof-radio > input {
display: none;
}
.usof-radio > label {
display: block;
text-align: center;
line-height: 18px;
padding: 11px 12px 10px;
height: 100%;
border-style: solid;
border-width: 0 0 1px;
border-color: #ddd;
background-color: #f1f1f1;
}
.usof-radio:hover > label {
background-color: #e5e5e5;
}
.usof-radio > input:checked + label {
background-color: #008ec2;
border-color: transparent;
color: #fff !important;
cursor: default;
}
.usof-radio:first-child > label {
border-radius: 3px 0 0 3px;
}
.usof-radio:last-child > label {
border-radius: 0 3px 3px 0;
}
/* Custom appearance for BG position control */
.usof-form-row.type_radio.bgpos .usof-radio-list {
width: 140px;
}
.rtl .usof-form-row.type_radio.bgpos .usof-radio-list {
flex-direction: row-reverse;
}
.usof-form-row.type_radio.bgpos .usof-radio {
width: 33.3333%;
}
.usof-form-row.type_radio.bgpos .usof-radio > label {
border-bottom-width: 0;
border-radius: 0;
padding: 12px 10px;
color: #888;
}
.usof-form-row.type_radio.bgpos .usof-radio:nth-child(7) > label,
.usof-form-row.type_radio.bgpos .usof-radio:nth-child(8) > label,
.usof-form-row.type_radio.bgpos .usof-radio:nth-child(9) > label {
border-bottom-width: 1px;
}
.usof-form-row.type_radio.bgpos .dashicons {
line-height: inherit;
}
.usof-form-row.type_radio.bgpos .usof-radio:nth-child(1) .dashicons,
.usof-form-row.type_radio.bgpos .usof-radio:nth-child(9) .dashicons {
transform: rotate(45deg);
}
.usof-form-row.type_radio.bgpos .usof-radio:nth-child(3) .dashicons,
.usof-form-row.type_radio.bgpos .usof-radio:nth-child(7) .dashicons {
transform: rotate(-45deg);
}
/* TYPE Imgradio */
.usof-imgradio {
display: flex;
flex-wrap: wrap;
margin: 0 !important;
}
.usof-imgradio-item {
flex-shrink: 0;
margin: 0;
}
.usof-imgradio-item input {
display: none;
}
.usof-imgradio-item label {
display: block;
border: 3px solid transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.usof-imgradio-item input:checked + label {
border-color: #008ec2;
}
.usof-imgradio-item label img {
display: block;
width: 100px;
pointer-events: none;
}
.usof-imgradio-item label:hover img {
opacity: 0.75;
}
.usof-form-row[data-id="usof_header_layout"] .usof-imgradio-item label img {
width: 158px;
}
/* TYPE Switcher */
.usof-form-row.type_switch .usof-form-row-control {
display: inline-block;
vertical-align: top;
}
.usof-form-row.type_switch.desc_2 .usof-form-row-desc {
display: inline-block;
vertical-align: top;
position: relative;
top: auto !important;
right: auto !important;
margin-top: 9px;
}
.usof-switcher {
line-height: 20px;
margin: 4px 0;
}
.usof-switcher > input {
display: none;
}
.usof-switcher > label {
display: flex;
align-items: center;
}
.usof-switcher-box {
flex-shrink: 0;
position: relative;
width: 56px;
height: 32px;
margin-right: 10px;
border-radius: 18px;
box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset, 0 0 0 1px rgba(0,0,0,0.01) inset;
background-color: #eee;
transition: background 0.2s;
}
.usof-switcher > label:hover .usof-switcher-box {
background-color: #e5e5e5;
}
.usof-switcher > input:checked + label .usof-switcher-box {
background-color: #008ec2;
}
.usof-form-row.color_yellow .usof-switcher > input:checked + label .usof-switcher-box {
background-color: #f90;
}
.usof-switcher-box > i {
position: absolute;
top: 4px;
left: 4px;
height: 24px;
width: 24px;
border-radius: 50%;
box-shadow: 0 1px 0 rgba(0,0,0,0.1);
background-color: #fff;
transition: left 0.2s, right 0.2s;
}
.usof-switcher > input:checked + label .usof-switcher-box > i {
left: 28px;
}
.usof-form-row.beta .usof-switcher-text:after {
content: 'BETA';
font-size: 10px;
padding: 2px 5px;
margin: 0 5px;
background: #f90;
color: #fff;
}
/* TYPE Slider */
.usof-slider {
display: flex;
}
.usof-slider-selector {
flex-shrink: 0;
position: relative;
width: 90px;
}
.usof-slider-selector input[type="text"] {
padding-right: 20px;
width: 100%;
}
.usof-slider-selector-units {
display: none;
position: absolute;
z-index: 12;
top: 100%;
left: 0;
min-width: 100%;
margin-top: -1px;
background: #f1f1f1;
border: 1px solid #008ec2;
border-top-width: 0;
}
.usof-slider-selector-unit {
padding: 3px 10px;
cursor: pointer;
}
.usof-slider-selector-unit:hover {
background: #008ec2;
color: #fff;
}
/* with_units */
.usof-slider.with_units .usof-slider-selector:after {
position: absolute;
top: 0;
right: 0;
content: '\f078';
font-family: fontawesome;
font-weight: 900;
line-height: 40px;
padding: 0 10px;
pointer-events: none;
}
.usof-slider.with_units input[type="text"]:focus {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.usof-slider.with_units input[type="text"]:focus + .usof-slider-selector-units {
display: block;
}
.usof-slider-box {
flex-grow: 1;
padding: 17px 0;
margin-left: 15px;
cursor: w-resize;
}
.usof-slider-box-h {
height: 5px;
width: 100%;
border-radius: 5px;
position: relative;
box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset;
background-color: #008ec2;
}
.usof-slider-range {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset;
background-color: #eee;
}
.usof-slider-runner {
position: absolute;
top: -6px;
height: 16px;
width: 16px;
transform: translateX(-50%);
border-radius: 50%;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1);
-webkit-user-drag: none;
}
/* slider_below */
.usof-form-row.slider_below .usof-slider-box {
position: absolute;
z-index: 11;
top: 40px;
left: 0;
margin: 0;
padding: 6px 0;
width: 300px;
visibility: hidden;
}
.usof-form-row.slider_below:hover .usof-slider-box,
.usof-form-row.slider_below .usof-slider-box.dragged {
visibility: visible;
}
.usof-container.dragged .usof-form-row.slider_below:hover .usof-slider-box:not(.dragged) {
visibility: hidden;
}
/* TYPE Upload */
.usof-upload-preview {
position: relative;
padding: 7px 10px;
border-radius: 3px;
border: 1px solid #eee;
border-top-color: #ddd;
background-color: #f1f1f1;
}
.usof-upload.preview_image .usof-upload-preview {
min-height: 60px;
}
.usof-upload-preview > .usof-preloader {
opacity: 1;
}
.usof-upload img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 200px;
margin: 0 auto;
position: relative;
background-color: #f1f1f1;
}
.usof-upload.preview_image .usof-upload-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
visibility: hidden;
}
.usof-upload-preview:hover .usof-upload-controls {
visibility: visible !important;
}
.usof-upload.preview_image .usof-upload-controls .usof-button {
margin: 4px;
background-color: #999;
color: #fff;
}
.usof-upload.preview_image .usof-upload-controls .usof-button:hover {
background-color: #777;
text-decoration: none;
}
.usof-upload.preview_text .usof-upload-preview {
display: flex;
align-items: center;
}
.usof-upload-file {
margin-right: 15px;
}
.usof-upload-file > span {
display: block;
line-height: 18px;
padding: 3px 0;
}
.usof-upload-file > span:before {
content: '\f15b';
font-family: fontawesome;
font-weight: 900;
vertical-align: top;
margin-right: 5px;
color: #999;
}
.usof-upload.preview_text .usof-upload-controls {
visibility: hidden;
}
.usof-upload.preview_text .usof-upload-controls .usof-button {
line-height: inherit;
padding: 0 5px;
background: none;
}
/* TYPE Backup */
.usof-backup-status {
padding: 8px 0;
}
.usof-backup-status span {
font-weight: bold;
}
.usof-backup .usof-button.type_backup,
.usof-backup .usof-button.type_restore {
margin: 0 10px 10px 0;
}
/* TYPE Transfer */
.usof-transfer .usof-button.type_import {
margin: 10px 10px 10px 0;
}
/* Form Row Modifications
========================================================================== */
/* FULL width */
.usof-form-row.width_full .usof-form-row-title {
float: none;
width: 100%;
padding: 0 0 8px !important;
}
.usof-form-row.width_full .usof-form-row-field {
float: none;
width: 100%;
padding: 0 !important;
}
/* COLUMNS */
@media screen and ( min-width: 1025px ) {
.usof-form-row.cols_2 {
width: 50%;
}
.usof-form-row.cols_3 {
width: 33.3333%;
}
.usof-form-row.for_social {
width: 35%;
}
.us-bld-window .usof-form-row.for_social {
padding-right: 0;
}
.rtl .us-bld-window .usof-form-row.for_social {
padding-left: 0;
padding-right: 15px;
}
.us-bld-window .usof-form-row.for_social + .usof-form-row {
flex-grow: 1;
width: auto;
padding-left: 10px;
}
.rtl .us-bld-window .usof-form-row.for_social + .usof-form-row {
padding-left: 15px;
padding-right: 10px;
}
}
/* FOR social */
.usof-form-row.for_social .select2-selection--single {
padding-left: 50px;
}
.for_social .select2-selection__rendered:before {
content: '';
position: absolute;
top: -1px;
left: -1px;
font-family: 'Font Awesome 5 Brands';
font-size: 18px;
text-align: center;
line-height: 40px;
height: 40px;
width: 40px;
border-radius: 3px 0 0 3px;
background-color: #999;
color: #fff;
}
.select2-selection__rendered[title='500px']:before {
content: '\f26e';
background-color: #222;
}
.select2-selection__rendered[title='Behance']:before {
content: '\f1b4';
background-color: #1769ff;
}
.select2-selection__rendered[title='DeviantArt']:before {
content: '\f1bd';
background-color: #637768;
}
.select2-selection__rendered[title='Discord']:before {
content: '\f392';
background-color: #7289da;
}
.select2-selection__rendered[title='Dribbble']:before {
content: '\f17d';
background-color: #ea4c89;
}
.select2-selection__rendered[title='Email']:before {
content: '\f0e0';
background-color: #96a2a8;
font-family: fontawesome;
font-weight: 900;
}
.select2-selection__rendered[title='Facebook']:before {
content: '\f39e';
background-color: #42599e;
}
.select2-selection__rendered[title='Flickr']:before {
content: '\f16e';
background-color: #ff0084;
}
.select2-selection__rendered[title='Foursquare']:before {
content: '\f180';
background-color: #fa4b7a;
}
.select2-selection__rendered[title='GitHub']:before {
content: '\f09b';
background-color: #333;
}
.select2-selection__rendered[title='Google']:before {
content: '\f1a0';
background-color: #db4437;
}
.select2-selection__rendered[title='Houzz']:before {
content: '\f27c';
background-color: #4dbc15;
}
.select2-selection__rendered[title='IMDb']:before {
content: '\f2d8';
background-color: #f7c625;
}
.select2-selection__rendered[title='Instagram']:before {
content: '\f16d';
font-size: 20px;
background:
radial-gradient(circle farthest-corner at 35% 100%, #fec564, transparent 50%),
radial-gradient(circle farthest-corner at 10% 140%, #feda7e, transparent 50%),
radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
linear-gradient(#6559ca, #bc318f 30%, #e42e66 50%, #fa5332 70%, #ffdc80 100%);
}
.select2-selection__rendered[title='LinkedIn']:before {
content: '\f0e1';
background-color: #117eb9;
}
.select2-selection__rendered[title='Medium']:before {
content: '\f23a';
background-color: #1c1b1a;
}
.select2-selection__rendered[title='Odnoklassniki']:before {
content: '\f263';
background-color: #f58220;
}
.select2-selection__rendered[title='Pinterest']:before {
content: '\f0d2';
background-color: #cb2027;
}
.select2-selection__rendered[title='Reddit']:before {
content: '\f1a1';
background-color: #ff4500;
font-size: 20px;
}
.select2-selection__rendered[title='RSS']:before {
content: '\f09e';
background-color: #ff9702;
font-family: fontawesome;
font-weight: 900;
}
.select2-selection__rendered[title='Skype']:before {
content: '\f17e';
background-color: #00aff0;
}
.select2-selection__rendered[title='SoundCloud']:before {
content: '\f1be';
background-color: #ff5600;
}
.select2-selection__rendered[title='Telegram']:before {
content: '\f2c6';
background-color: #2ba2db;
font-size: 20px;
}
.select2-selection__rendered[title='Tripadvisor']:before {
content: '\f262';
background-color: #579542;
}
.select2-selection__rendered[title='Tumblr']:before {
content: '\f173';
background-color: #37465d;
}
.select2-selection__rendered[title='Twitch']:before {
content: '\f1e8';
background-color: #6441a5;
}
.select2-selection__rendered[title='Twitter']:before {
content: '\f099';
background-color: #55acee;
}
.select2-selection__rendered[title='Vimeo']:before {
content: '\f27d';
background-color: #1ab7ea;
}
.select2-selection__rendered[title='Vkontakte']:before {
content: '\f189';
background-color: #4c75a3;
}
.select2-selection__rendered[title='WeChat']:before {
content: '\f1d7';
background-color: #60c33a;
}
.select2-selection__rendered[title='WhatsApp']:before {
content: '\f232';
background-color: #25d366;
}
.select2-selection__rendered[title='Xing']:before {
content: '\f168';
background-color: #006464;
}
.select2-selection__rendered[title='Yelp']:before {
content: '\f1e9';
background-color: #c41200;
}
.select2-selection__rendered[title='YouTube']:before {
content: '\f167';
background-color: #f00;
}
/* Inline Appearance */
@media ( min-width: 481px ) {
.usof-form-row.inline {
padding: 0 25px 15px 0;
}
.usof-form-row.inline:not(.cols_2) {
width: auto;
}
.usof-form-row.inline.type_checkboxes {
padding-top: 4px;
}
.usof-form-row.inline .usof-checkbox-text {
white-space: nowrap;
}
.usof-form-row.inline .usof-form-row-title {
display: inline-block;
vertical-align: top;
float: none;
width: auto;
padding-right: 10px;
}
.usof-form-row.inline .usof-form-row-title span {
font-weight: normal;
}
.usof-form-row.inline .usof-form-row-field {
display: inline-block;
vertical-align: top;
float: none;
width: auto;
padding: 0;
}
.usof-form-row.inline .usof-form-row-control {
display: inline-block;
vertical-align: top;
}
}
.usof-form-row.inline .usof-form-row-desc {
display: inline-block;
vertical-align: top;
}
.usof-form-row.inline .usof-form-row-desc-text {
font-size: inherit;
padding: 10px 0 0 10px;
color: inherit;
}
/* For Buttons Preview */
.usof-btn-preview {
display: flex;
align-items: center;
height: 60px;
cursor: pointer;
}
.usof-btn {
text-align: center;
line-height: 1.2; /* fixed value for all buttons */
padding: 0.8em 1.8em; /* fallback value */
position: relative;
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.3s, color 0.3s;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.usof-btn-preview.hov_slide .usof-btn {
overflow: hidden;
}
.usof-btn-before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
border-width: 2px;
border-style: solid;
border-color: inherit;
}
.usof-btn-label {
position: relative;
z-index: 1;
}
.usof-btn-after {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0;
transition: height 0.3s;
}
.usof-btn-preview.hov_slide .usof-btn:hover .usof-btn-after {
height: 100%;
}
/* Improvements for Colors tab */
.usof-section[data-id="colors"] {
max-width: none;
}
.usof-form-wrapper.change_colors_start {
margin: 0;
padding-top: 0;
padding-bottom: 0;
border: none;
}
/* Improvements for Layouts selection */
.usof-form-row[data-id*="_id"] select {
font-weight: 700;
}
.usof-form-row[selected-value="__defaults__"] select {
font-weight: normal !important;
}
/* Improvements for Typography tab */
.usof-form-wrapper.for_font {
border: none;
margin: 0;
padding: 10px 0;
width: 50%;
}
.usof-form-wrapper.for_font.col_first {
padding-left: 40px;
}
.usof-form-wrapper.for_font.col_first + .usof-form-wrapper.for_font {
padding-right: 40px;
}
.rtl .usof-form-wrapper.for_font.col_first {
padding-left: 0;
padding-right: 40px;
}
.rtl .usof-form-wrapper.for_font.col_first + .usof-form-wrapper.for_font {
padding-left: 40px;
padding-right: 0;
}
.usof-form-wrapper.for_font .usof-form-wrapper-title {
font-size: 18px;
font-weight: 600;
padding-bottom: 10px;
}
.usof-form-wrapper.for_font .usof-form-row {
width: 100% !important;
padding-top: 0;
}
.usof-form-wrapper.for_font .usof-checkbox-list {
margin-top: -6px;
}
/* Improvements for Custom Code tab */
.usof-section[data-id="code"] {
max-width: none;
}
.usof-section[data-id="code"] .usof-section-content {
display: block;
overflow: hidden;
padding: 15px 20px 0;
}
.usof-section[data-id="code"] .usof-form-row {
float: left;
clear: none;
padding: 15px 20px;
width: 50%;
}
.usof-section[data-id="code"] .usof-form-row.type_css .usof-form-row-field {
height: calc(100vh - 32px - 60px - 15px - 15px - 40px - 15px);
}
.usof-section[data-id="code"] .usof-form-row.type_html .usof-form-row-field {
height: calc(50vh - 32px - 60px - 15px - 12px);
}
/* USOF Builder UI
======================================================================================================= */
.usof-container.type_builder > .usof-form-row {
padding: 0;
}
.usof-container.type_builder > .usof-form-row .usof-form-row-field {
float: none;
width: auto;
}
/* Top Panel */
.usof-container.type_builder .usof-header-title {
flex-shrink: 0;
font-size: 20px;
margin: 0 10px 0 20px;
color: #b4b9be;
}
.usof-header .usof-form-row {
padding: 0;
}
.usof-header .usof-form-row-field {
float: none !important;
width: auto;
overflow: hidden;
}
.usof-header .usof-form-row-field input[type="text"] {
font-size: 20px;
font-weight: 600;
padding: 0 10px;
border: none;
background: none;
color: #fff;
}
.usof-header .usof-form-row-control-icon {
position: absolute;
font-size: 20px;
font-weight: 600;
padding: 0 10px;
left: 0;
height: 40px;
line-height: 40px;
color: transparent;
pointer-events: none;
}
.usof-header .usof-form-row-control-icon:after {
display: inline-block;
vertical-align: top;
content: '\f303';
font-family: fontawesome;
margin: 0 12px;
font-size: 16px;
font-weight: 900;
color: #999;
}
.usof-header .usof-form-row-field input[type="text"]:hover {
background-color: #464b50;
}
.usof-header .usof-form-row-field input[type="text"]:focus {
background-color: #fff;
color: #333;
}
.usof-header .usof-form-row-field input[type="text"]:focus + .usof-form-row-control-icon {
opacity: 0;
}
.usof-control.for_help,
.usof-control.for_import,
.usof-control.for_templates {
margin-right: 0;
}
.usof-control > a {
display: block;
text-align: center;
font-size: 16px;
line-height: 40px;
height: 40px;
width: 40px;
text-decoration: none !important;
border-radius: 50%;
background-color: #464b50;
color: #999;
}
.usof-control > a:hover {
background-color: #595d62;
color: #fff;
}
.usof-control.for_help a:after {
content: '\f128';
font-family: fontawesome;
font-weight: 900;
vertical-align: top;
}
.usof-control.for_import a:after {
content: '\f093';
font-family: fontawesome;
font-weight: 900;
vertical-align: top;
}
.usof-control.for_templates a:after {
content: '\f022';
font-family: fontawesome;
font-weight: 900;
vertical-align: top;
}
.usof-control-desc {
position: absolute;
top: 50px;
left: 50%;
z-index: 111;
text-align: center;
font-weight: 600;
line-height: 18px;
padding: 10px 16px 12px;
width: 200px;
cursor: pointer;
background-color: #fe9;
color: #32373c;
box-shadow: 0 2px 15px rgba(0,0,0,0.2);
transform: translate3d(-50%,0,0);
transition: all 0.2s;
visibility: hidden;
opacity: 0;
}
.usof-control.start .usof-control-desc {
visibility: visible;
opacity: 1;
}
.usof-control-desc:before {
content: '';
position: absolute;
left: 50%;
top: -6px;
margin-left: -6px;
height: 12px;
width: 12px;
background-color: inherit;
transform: rotate(45deg);
}
/* States */
.us-bld-states {
display: flex;
background-color: #e5e5e5;
}
.us-bld-state {
flex-shrink: 0;
font-size: 16px;
font-weight: 600;
text-align: center;
padding: 10px 20px;
width: 33.3333%;
white-space: nowrap;
cursor: pointer;
}
.us-bld-state:hover {
background-color: rgba(0,0,0,0.06);
}
.us-bld-state.active {
background-color: #fff;
cursor: default;
}
.us-bld-state:before {
display: inline-block;
vertical-align: top;
font-family: fontawesome;
font-weight: 900;
margin-right: 10px;
}
.us-bld-state.for_default:before {
content: '\f108';
}
.us-bld-state.for_tablets:before {
content: '\f3fa';
}
.us-bld-state.for_mobiles:before {
content: '\f3cd';
}
/* Builder Workspace */
.us-bld-workspace {
display: flex;
padding: 30px;
}
.us-bld-editor {
flex-grow: 1;
padding-right: 30px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.us-bld-editor-row {
position: relative;
margin: 0 auto;
max-width: 666px;
border: 2px dotted #ccc;
}
.us-bld-editor-cell {
padding: 10px;
}
/* Hidden area */
.us-bld-editor-row.for_hidden {
margin-top: 20px;
border: none;
opacity: 0.33;
}
.us-bld-editor-row.for_hidden:hover {
opacity: 1;
}
.us-bld-editor-row-desc {
text-align: center;
color: #999;
}
.us-bld-editor-row.for_hidden .us-bld-editor-row-h {
display: flex;
flex-wrap: wrap;
min-height: 76px;
padding: 11px;
background: repeating-linear-gradient(-45deg, #e5e5e5, #e5e5e5 15px, #eee 15px, #eee 30px);
}
.us-bld-editor-add {
display: block;
flex-shrink: 0;
text-align: center;
line-height: 30px;
width: 30px;
margin: 4px auto;
text-decoration: none !important;
box-shadow: none !important;
color: inherit !important;
opacity: 0.5;
}
.us-bld-editor-add:hover {
opacity: 1;
}
.us-bld-editor-add:before {
vertical-align: top;
content: '\f067';
font-family: fontawesome;
font-weight: 900;
font-size: 16px;
}
.us-bld-editor-elm {
padding: 2px;
position: relative;
min-width: 74px;
cursor: move;
}
.us-bld-editor-elm-content {
font-size: 12px;
line-height: 30px;
text-align: center;
border-radius: 3px;
padding: 10px 15px;
min-height: 50px;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
background-color: #7d8895;
color: #fff;
}
.us-bld-editor-elm-content:before {
display: inline-block;
font-family: fontawesome;
font-weight: 900;
vertical-align: top;
font-size: 14px;
margin-right: 8px;
}
.us-bld-editor-elm-content i {
line-height: inherit;
vertical-align: top;
font-size: 14px;
margin-right: 8px;
}
.us-bld-editor-elm-content img {
display: block;
max-width: 100%;
max-height: 80px;
margin: 0 auto;
}
.us-bld-editor-elm-controls {
display: flex;
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0;
background-color: #32373c;
color: #fff;
}
.us-bld-editor-elm:hover .us-bld-editor-elm-controls {
opacity: 1;
}
.us-bld-editor-control {
flex-shrink: 0;
line-height: 32px;
height: 32px;
width: 32px;
text-align: center;
text-decoration: none !important;
color: inherit !important;
box-shadow: none !important;
}
.us-bld-editor-control:hover {
background-color: rgba(0,0,0,0.75);
}
.us-bld-editor-control.type_move {
cursor: move;
}
.us-bld-editor-control:before {
font-family: fontawesome;
font-weight: 900;
vertical-align: top;
}
.us-bld-editor-control.type_add:before {
content: '\f067';
}
.us-bld-editor-control.type_move:before {
content: '\f047';
}
.us-bld-editor-control.type_edit:before {
content: '\f303';
}
.us-bld-editor-control.type_clone:before {
content: '\f24d';
}
.us-bld-editor-control.type_hide:before {
content: '\f06e';
}
.us-bld-editor-control.type_delete:before {
content: '\f2ed';
}
/* Mark Position Absolute */
.pos_abs > .us-bld-editor-wrapper-content:after,
.pos_abs > .us-bld-editor-elm-content:after {
content: '';
position: absolute;
top: -2px;
left: -10px;
height: 0;
width: 0;
transform: rotate(-45deg);
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 16px solid red;
}
.pos_abs > .us-bld-editor-wrapper-content:after {
top: -5px;
left: -13px;
}
/* Post date */
.us-bld-window-item.type_post_date .us-bld-window-item-h,
.us-bld-editor-elm.type_post_date .us-bld-editor-elm-content {
background-color: #faba19;
}
/* Post author */
.us-bld-window-item.type_post_author .us-bld-window-item-h,
.us-bld-editor-elm.type_post_author .us-bld-editor-elm-content {
background-color: #1ccccc;
}
/* Post taxonomy */
.us-bld-window-item.type_post_taxonomy .us-bld-window-item-h,
.us-bld-editor-elm.type_post_taxonomy .us-bld-editor-elm-content {
background-color: #4697f3;
}
/* Post comments */
.us-bld-window-item.type_post_comments .us-bld-window-item-h,
.us-bld-editor-elm.type_post_comments .us-bld-editor-elm-content {
background-color: #8bc750;
}
/* Post custom field */
.us-bld-window-item.type_post_custom_field .us-bld-window-item-h,
.us-bld-editor-elm.type_post_custom_field .us-bld-editor-elm-content {
background-color: #42599e;
}
/* Post title */
.us-bld-window-item.type_post_title .us-bld-window-item-h,
.us-bld-editor-elm.type_post_title .us-bld-editor-elm-content {
background-color: #475462;
}
/* Image & Post image */
.us-bld-window-item.type_post_image .us-bld-window-item-h,
.us-bld-editor-elm.type_post_image .us-bld-editor-elm-content,
.us-bld-window-item.type_image .us-bld-window-item-h,
.us-bld-editor-elm.type_image .us-bld-editor-elm-content {
background-color: #aaa;
}
.us-bld-window-item.type_image .us-bld-window-item-icon:before,
.us-bld-editor-elm.type_image .us-bld-editor-elm-content:before {
content: '\f03e';
}
/* Menu */
.us-bld-window-item.type_menu .us-bld-window-item-h,
.us-bld-editor-elm.type_menu .us-bld-editor-elm-content {
background-color: #4697f3;
}
/* Search */
.us-bld-window-item.type_search .us-bld-window-item-h,
.us-bld-editor-elm.type_search .us-bld-editor-elm-content {
background-color: #faba19;
}
/* Additional menu */
.us-bld-window-item.type_additional_menu .us-bld-window-item-h,
.us-bld-editor-elm.type_additional_menu .us-bld-editor-elm-content {
background-color: #1ccccc;
}
/* Cart & Product field */
.us-bld-window-item.type_product_field .us-bld-window-item-h,
.us-bld-window-item.type_add_to_cart .us-bld-window-item-h,
.us-bld-window-item.type_cart .us-bld-window-item-h,
.us-bld-editor-elm.type_product_field .us-bld-editor-elm-content,
.us-bld-editor-elm.type_add_to_cart .us-bld-editor-elm-content,
.us-bld-editor-elm.type_cart .us-bld-editor-elm-content {
background-color: #a36597;
}
.us-bld-window-item.type_product_field .us-bld-window-item-icon:before,
.us-bld-window-item.type_add_to_cart .us-bld-window-item-icon:before {
content: '\e006';
font-family: WooCommerce !important;
}
/* Button */
.us-bld-window-item.type_btn .us-bld-window-item-h,
.us-bld-editor-elm.type_btn .us-bld-editor-elm-content {
background-color: #7e6cd9;
}
.us-bld-window-item.type_btn .us-bld-window-item-icon:before {
content: '\f005';
}
/* Dropdown */
.us-bld-window-item.type_dropdown .us-bld-window-item-h,
.us-bld-editor-elm.type_dropdown .us-bld-editor-elm-content {
background-color: #8bc750;
}
/* HTML */
.us-bld-window-item.type_html .us-bld-window-item-h,
.us-bld-editor-elm.type_html .us-bld-editor-elm-content {
background-color: #a67553;
}
/* Socials */
.us-bld-window-item.type_socials .us-bld-window-item-h,
.us-bld-editor-elm.type_socials .us-bld-editor-elm-content {
background-color: #42599e;
}
.us-bld-window-item.type_socials .us-bld-window-item-icon:before {
content: '\f082';
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
.us-bld-editor-elm.type_socials i {
margin: 0 6px !important;
}
.us-bld-editor-elm.type_socials i.fa-email:before {
content: '\f0e0';
font-family: fontawesome;
font-weight: 900;
}
.us-bld-editor-elm.type_socials i.fa-facebook:before {
content: '\f39e';
}
.us-bld-editor-elm.type_socials i.fa-s500px:before {
content: '\f26e';
}
.us-bld-editor-elm.type_socials i.fa-wechat:before {
content: '\f1d7';
}
.us-bld-editor-elm.type_socials i.fa-rss:before {
font-family: fontawesome;
font-weight: 900;
}
/* drag & drop */
.us-bld-editor-dragshadow {
position: relative;
}
.us-bld-editor-dragshadow:before {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
content: '';
border: 3px dashed rgba(0,0,0,0.2);
border-radius: 3px;
}
.us-bld-editor-elm.detached,
.us-bld-editor-wrapper.detached {
opacity: 0.5;
}
.us-bld-editor-elm.detached .us-bld-editor-elm-content,
.us-bld-editor-wrapper.detached .us-bld-editor-wrapper-content {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.us-bld-editor.dragstarted .us-bld-editor-elm-controls,
.us-bld-editor.dragstarted .us-bld-editor-wrapper-controls {
display: none;
}
.us-bld-editor-wrapper.type_horizontal > .us-bld-editor-wrapper-content > .us-bld-editor-dragshadow {
max-width: 120px;
}
.usof-form-row.type_grid_builder .us-bld-editor-cell > .us-bld-editor-dragshadow,
.us-bld-editor-wrapper.type_vertical > .us-bld-editor-wrapper-content > .us-bld-editor-dragshadow {
width: 100% !important;
}
/* Wrapper */
.us-bld-editor-wrapper {
min-width: 94px;
padding: 2px;
position: relative;
cursor: move;
}
.us-bld-editor-wrapper:hover {
z-index: 11;
}
.us-bld-editor-wrapper-content {
line-height: 54px;
padding: 10px;
min-height: 80px;
min-width: 116px;
text-align: center;
position: relative;
border-radius: 3px;
border: 3px solid #0fba2e;
background-color: #ebfaee;
}
.us-bld-editor-wrapper.empty .us-bld-editor-wrapper-content {
cursor: pointer;
}
.us-bld-editor-wrapper.empty .us-bld-editor-wrapper-content:before {
vertical-align: top;
content: '\f067';
font-family: fontawesome;
font-weight: 900;
font-size: 16px;
opacity: 0.5;
}
.us-bld-editor-wrapper.empty .us-bld-editor-wrapper-content:hover:before {
opacity: 1;
}
.us-bld-editor-wrapper-controls {
display: flex;
position: absolute;
z-index: 10;
left: 50%;
top: -27px;
color: #fff;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
background-color: #0fba2e;
}
.us-bld-editor-wrapper:hover > .us-bld-editor-wrapper-controls {
opacity: 1;
visibility: visible;
}
.us-bld-editor-wrapper.type_horizontal > .us-bld-editor-wrapper-content {
display: flex;
align-items: center;
justify-content: center;
border-color: #f70;
background-color: #faf0e6;
}
.us-bld-editor.type_ver .us-bld-editor-wrapper.type_horizontal > .us-bld-editor-wrapper-content > * {
flex-shrink: 0;
}
.us-bld-editor-wrapper.type_horizontal > .us-bld-editor-wrapper-controls {
top: auto;
bottom: -27px;
background-color: #f70;
}
.us-bld-window-item.type_hwrapper .us-bld-window-item-h {
background-color: #faf0e6;
border-color: #f70 !important;
color: #f70 !important;
}
.us-bld-window.orientation_hor.addto_cell .us-bld-window-item.type_hwrapper,
.us-bld-window.addto_hwrapper .us-bld-window-item.type_hwrapper {
display: none;
}
.us-bld-window-item.type_vwrapper .us-bld-window-item-h {
background-color: #ebfaee;
border-color: #0fba2e !important;
color: #0fba2e !important;
}
/* Sided Panel */
.us-bld-options {
flex: 0 0 302px; /* take into account max width of added image */
max-width: 500px;
}
.us-bld-options-section {
border: 1px solid #e5e5e5;
border-bottom-width: 0;
}
.us-bld-options-section:last-child {
border-bottom-width: 1px;
}
.us-bld-options-section-title {
font-size: 16px;
line-height: 20px;
padding: 13px 50px 13px 20px;
cursor: pointer;
position: relative;
background: #f1f1f1;
}
.us-bld-options-section-title:hover {
background: #e5e5e5;
}
.us-bld-options-section-title:after {
position: absolute;
top: 13px;
right: 15px;
content: '\f078';
font-family: fontawesome;
font-weight: 900;
transition: transform 0.3s;
}
.us-bld-options-section:only-child .us-bld-options-section-title:after {
display: none;
}
.us-bld-options-section.active .us-bld-options-section-title {
background: #fff;
cursor: default;
}
.us-bld-options-section.active .us-bld-options-section-title:after {
transform: rotate(180deg);
}
.us-bld-options-section-content {
padding: 0 20px 10px;
}
.us-bld-options .usof-subform-row,
.us-bld-options .usof-form-row {
padding: 10px 0;
}
.us-bld-options .usof-form-row-title {
float: none !important;
width: auto !important;
padding: 0 0 8px !important;
}
.us-bld-options .usof-upload img {
max-width: 238px;
}
.us-bld-options .usof-form-wrapper {
background: none;
border: none;
margin: 0;
padding: 0;
}
.us-bld-options .usof-form-row.desc_2 .usof-form-row-desc-text,
.us-bld-options .usof-form-row.desc_4 .usof-form-row-desc-text {
top: -8px;
left: auto;
right: 36px;
transform: none !important;
}
.us-bld-options .usof-form-row.desc_2 .usof-form-row-desc-text:before,
.us-bld-options .usof-form-row.desc_4 .usof-form-row-desc-text:before {
top: 14px;
left: auto;
right: -6px;
}
.us-bld-options .usof-form-row.desc_fix .usof-form-row-control {
margin-right: 10px;
}
.us-bld-options .usof-form-row.desc_fix .usof-form-row-desc {
right: -20px;
}
.us-bld-options .usof-form-row[data-name="ratio_width"] {
float: left;
width: 50%;
padding-top: 0;
padding-right: 5px;
}
.us-bld-options .usof-form-row[data-name="ratio_height"] {
float: left;
clear: none;
width: 50%;
padding-top: 0;
padding-left: 5px;
}
/* Popup UI */
.us-bld-window {
display: none;
position: fixed;
z-index: 13;
top: 5vh;
left: 50%;
width: 60%;
max-width: 666px;
max-height: 90vh;
transform: translateX(-50%);
font-size: 14px;
line-height: 24px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 5px 25px rgba(0,0,0,0.2);
}
.us-bld-window * {
box-sizing: border-box;
}
.us-bld-window-h {
display: flex;
max-height: inherit;
flex-direction: column;
align-content: stretch;
align-items: stretch;
}
.us-bld-window-header {
padding: 15px 20px;
background-color: #f5f5f5;
box-shadow: 0 -1px 0 #e5e5e5 inset;
flex-shrink: 0;
}
.us-bld-window-title {
font-size: 20px;
line-height: 30px;
}
.us-bld-window-closer {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 20px;
text-align: center;
cursor: pointer;
opacity: 0.5;
}
.us-bld-window-closer:before {
content: '\2716';
font-family: arial;
vertical-align: top;
}
.us-bld-window-closer:hover {
opacity: 1;
}
.us-bld-window.with_tabs .us-bld-window-header {
padding-bottom: 0;
}
.usof-tabs-list {
overflow: hidden;
padding-top: 15px;
}
.usof-tabs-item {
float: left;
padding: 8px 15px;
border-radius: 3px 3px 0 0;
cursor: pointer;
}
.usof-tabs-item:hover {
background-color: rgba(0,0,0,0.06);
}
.usof-tabs-item.active {
background-color: #fff;
cursor: default;
}
.usof-tabs-section {
display: flex;
flex-wrap: wrap;
}
.us-bld-window-body {
min-height: 100px;
padding: 20px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.us-bld-window-body > .usof-preloader {
height: 30px;
width: 30px;
margin: -15px 0 0 -15px;
color: #008ec2;
opacity: 1;
}
.us-bld-window.loaded .us-bld-window-body > .usof-preloader {
display: none;
}
.us-bld-window-footer {
padding: 15px 20px;
background-color: #f5f5f5;
border-top: 1px solid #e5e5e5;
flex-shrink: 0;
}
.us-bld-window-btn {
display: inline-block;
vertical-align: top;
font-size: 14px;
line-height: 40px;
font-weight: 600;
text-align: center;
padding: 0 30px;
margin-right: 5px;
border-radius: 50px;
position: relative;
overflow: hidden;
cursor: pointer;
color: #fff;
}
.us-bld-window-btn.for_save {
min-width: 200px;
background-color: #008ec2;
}
.us-bld-window-btn.for_close {
background-color: #bbb;
}
.us-bld-window-btn span {
position: relative;
}
.us-bld-window-btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.us-bld-window-btn:hover:before {
background-color: rgba(0,0,0,0.15);
}
/* Popup for adding */
.us-bld-window.for_adding .us-bld-window-list {
display: flex;
flex-wrap: wrap;
margin: -2px;
}
.us-bld-window.for_adding .us-bld-window-item {
display: table;
width: 50%;
height: 70px;
margin: 0;
padding: 2px;
cursor: pointer;
}
.us-bld-window.for_adding .us-bld-window-item-h {
display: table-cell;
vertical-align: middle;
padding: 0 20px 0 50px;
overflow: hidden;
position: relative;
border-radius: 3px;
border: 3px solid transparent;
box-shadow: 0 1px 1px rgba(0,0,0,0), 0 1px 1px rgba(0,0,0,0);
transition: box-shadow 0.2s;
}
.us-bld-window-item-h {
background-color: #7d8895;
color: #fff;
}
.us-bld-window.for_adding .us-bld-window-item:hover .us-bld-window-item-h {
z-index: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.35);
}
.us-bld-window.for_adding .us-bld-window-item-icon {
position: absolute;
top: 15px;
left: 15px;
text-align: center;
line-height: 30px;
width: 30px;
}
.us-bld-window-item-icon:before {
font-family: fontawesome;
font-weight: 900;
vertical-align: top;
font-size: 18px;
}
.us-bld-window.for_adding .us-bld-window-item-title {
font-size: 15px;
font-weight: 600;
}
.us-bld-window.for_adding .us-bld-window-item-description {
font-size: 13px;
line-height: 16px;
margin-top: 3px;
opacity: 0.66;
}
/* Popup for Templates */
.us-bld-window.for_templates {
z-index: 100000;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
max-width: none;
max-height: 100%;
transform: none;
background-color: #32373c;
color: #fff;
}
.us-bld-window.for_templates .us-bld-window-header {
background: none;
box-shadow: none;
padding: 15px 40px;
}
.us-bld-window.for_templates .us-bld-window-closer {
font-size: 30px;
}
.us-bld-window.for_templates .us-bld-window-body {
padding-top: 0;
padding-bottom: 0;
}
.us-bld-window.for_templates .us-bld-window-list {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.us-bld-window.for_templates .us-bld-window-item {
width: 16.6666%;
padding: 20px;
margin: 0;
cursor: pointer;
color: #b4b9be;
}
.us-bld-window.for_templates .us-bld-window-item:hover {
background-color: #191e23;
color: #fff;
}
.us-bld-window.for_templates .us-bld-window-item-h {
background: none;
color: inherit;
}
.us-bld-window.for_templates .us-bld-window-item-icon {
min-height: 50px;
margin-bottom: 5px;
}
.us-bld-window-item-icon img {
display: block;
max-width: 100%;
}
.us-bld-window.for_templates .type_gtemplate .us-bld-window-item-icon {
display: none;
}
.us-bld-window.for_templates .type_gtemplate .us-bld-window-item-title {
font-size: 18px;
}
/* Popup USOF controls */
.us-bld-window a {
color: #008ec2;
box-shadow: none;
text-decoration: none;
}
.us-bld-window a:hover {
text-decoration: underline;
}
.us-bld-window .usof-form-row {
padding: 10px 15px;
}
.us-bld-window .usof-form-row-title {
float: none;
padding: 0 0 8px !important;
width: 100%;
}
.us-bld-window .usof-form-row-field {
float: none;
width: 100%;
}
.us-bld-window .usof-form-row.desc_2 .usof-form-row-desc-text {
top: -8px;
left: auto;
right: 36px;
}
.us-bld-window .usof-form-row.desc_2 .usof-form-row-desc-text:before {
top: 14px;
left: auto;
right: -6px;
}
.us-bld-window .usof-form-row.type_html .usof-form-row-control {
height: calc(90vh - 236px);
}
.us-bld-window .usof-form-row.type_heading .usof-form-row-title {
font-size: 16px;
}
.us-bld-window .usof-form-row.type_heading .usof-form-row-title span {
font-weight: normal;
}
.us-bld-window .usof-form-row.type_transfer {
padding: 15px;
}
.us-bld-window .usof-form-wrapper {
padding: 15px 10px;
margin: 0 15px 10px;
}
/* Group Simple */
.us-bld-window .usof-form-group.type_simple .usof-form-group-item-controls {
top: 10px;
right: 0;
}
.us-bld-window .usof-form-group.type_simple .usof-form-group-add {
margin: 10px 15px;
}
.us-bld-window .usof-form-group.type_simple .us-bld-editor-dragshadow {
height: 60px;
margin: 0 13px;
width: auto !important;
}
/* Group Accordion */
.us-bld-window .usof-form-group.type_accordion {
margin: 0 15px 10px;
}
.us-bld-window .usof-form-group.type_accordion .usof-form-group-item-controls {
top: 0;
right: 0;
}
.us-bld-window .usof-form-group.type_accordion .usof-form-group-add {
margin: 0;
}
.us-bld-window .usof-form-group.type_accordion .us-bld-editor-dragshadow {
margin: 0;
width: auto !important;
}
/* Design Options Control */
.usof-design-control {
margin-bottom: 40px;
}
.usof-design-control:last-child {
margin-bottom: 0;
}
.usof-design-control-title {
font-size: 16px;
font-weight: 600;
text-align: center;
margin: 0 0 10px;
}
.usof-design-control-title:before {
font-family: fontawesome;
font-weight: 900;
margin-right: 10px;
}
.usof-design-control.for_default .usof-design-control-title:before {
content: '\f108';
}
.usof-design-control.for_tablets .usof-design-control-title:before {
content: '\f3fa';
}
.usof-design-control.for_mobiles .usof-design-control-title:before {
content: '\f3cd';
}
.usof-design-control:only-child .usof-design-control-title {
display: none;
}
.usof-design input[type="text"] {
position: absolute;
text-align: center;
font-size: 13px;
padding: 7px 0;
width: 55px;
background: #fff;
border-color: #ddd;
}
.usof-design input.top {
top: 5px;
left: 50%;
transform: translateX(-50%);
}
.usof-design input.right {
top: 50%;
right: 5px;
transform: translateY(-50%);
}
.usof-design input.bottom {
bottom: 5px;
left: 50%;
transform: translateX(-50%);
}
.usof-design input.left {
top: 50%;
left: 5px;
transform: translateY(-50%);
}
.usof-design-position,
.usof-design-margin,
.usof-design-border,
.usof-design-padding {
position: relative;
padding: 50px 65px;
}
.usof-design-position {
background-color: #ffdbdb;
}
.usof-design-margin {
background-color: #fffbad;
}
.usof-design-border {
background-color: #d4e6ff;
}
.usof-design-padding {
background-color: #d2ffc7;
}
.usof-design-padding:after {
content: '';
display: block;
height: 50px;
background-color: rgba(0,0,0,0.1);
}
.usof-design-attr {
position: absolute;
top: 0;
left: 0;
padding: 0 5px;
line-height: 20px;
font-weight: 600;
}
.usof-design-position.pos_off > *:not(.usof-design-margin),
.usof-design .linked > .left,
.usof-design .linked > .right,
.usof-design .linked > .bottom {
opacity: 0.33;
pointer-events: none;
}
.usof-design-control .usof-switcher {
display: inline-block;
vertical-align: top;
margin-bottom: 20px;
}
/* RTL styles
======================================================================================================= */
.rtl .usof-header {
left: 0;
right: 160px;
}
.rtl .usof-header-title {
margin-left: auto;
margin-right: 40px;
}
.rtl .usof-header-title span {
float: right;
}
.rtl .usof-nav {
right: 0;
left: auto;
}
.rtl .usof-nav-anchor.level_1 {
padding: 11px 40px 11px 11px;
}
.rtl .usof-nav-anchor.level_1 .usof-nav-icon {
left: auto;
right: 12px;
}
.rtl .usof-content {
margin-left: 0;
margin-right: 180px;
}
.rtl .usof-container.nav_compact .usof-content {
margin-right: 50px;
}
.rtl .usof-form-row-title {
float: right;
padding: 10px 0 10px 20px;
}
.rtl .usof-form-row-field {
float: left;
}
.rtl .usof-form-row.desc_2 .usof-form-row-desc {
left: -35px;
right: auto;
}
.rtl .usof-form-row.desc_3 .usof-form-row-desc {
left: auto;
right: -35px;
}
.rtl .usof-form-row.desc_3 .usof-form-row-title {
padding-left: 40px;
padding-right: 0;
}
.rtl .usof-form-row.desc_2 .usof-form-row-desc-text,
.rtl .usof-form-row.desc_3 .usof-form-row-desc-text,
.rtl .usof-form-row.desc_4 .usof-form-row-desc-text {
left: auto;
right: 0;
}
.rtl .usof-form-row.desc_2 .usof-form-row-desc-text:before,
.rtl .usof-form-row.desc_3 .usof-form-row-desc-text:before,
.rtl .usof-form-row.desc_4 .usof-form-row-desc-text:before {
left: auto;
right: 12px;
}
.rtl .us-bld-window .usof-form-row.desc_3 .usof-form-row-desc-text {
right: 36px;
}
.rtl .us-bld-window .usof-form-row.desc_3 .usof-form-row-desc-text:before {
right: -6px;
}
.rtl .usof-form-row.inline .usof-form-row-title {
padding-left: 10px;
padding-right: 0;
}
.rtl .usof-form-row.type_heading.with_separator .usof-form-row-title span {
padding-left: 15px;
padding-right: 0;
}
.rtl .usof-form-row.type_heading.with_separator.align_center .usof-form-row-title span {
padding-right: 15px;
}
.rtl .usof-select select {
padding-left: 30px;
padding-right: 10px;
}
.rtl .usof-select:after {
left: 0;
right: auto;
}
.rtl .select2-selection--single {
padding-left: 30px;
padding-right: 10px;
}
.rtl .usof-form-row.for_social .select2-selection--single {
padding-right: 50px;
}
.rtl .usof-form-row.for_social .select2-selection__rendered:before {
left: auto;
right: -1px;
border-radius: 0 3px 3px 0;
}
.rtl .select2-selection__arrow {
left: 0;
right: auto;
}
.rtl .select2-results__option .select2-results__option {
padding-left: 10px;
padding-right: 20px;
}
.rtl .type_checkboxes .usof-checkbox {
margin: 0 0 0 20px;
}
.rtl .usof-checkbox-icon {
left: auto;
right: 0;
}
.rtl .usof-checkbox-icon:before {
left: auto;
right: 0;
}
.rtl .usof-checkbox-text {
padding-left: 0;
padding-right: 26px;
}
.rtl .usof-color-clear {
left: auto;
right: -30px;
}
.rtl .usof-form-row.clear_right .usof-color-clear {
left: -30px;
right: auto;
}
.rtl .usof-form-row.type_icon input {
border-radius: 3px 0 0 3px;
}
.rtl .usof-form-row.type_icon select {
border-radius: 0 3px 3px 0;
}
.rtl .type_check_table .usof-checkbox:nth-child(2n) {
margin-left: 8%;
margin-right: 0;
}
.rtl .usof-radio:first-child > label {
border-radius: 0 3px 3px 0;
}
.rtl .usof-radio:last-child > label {
border-radius: 3px 0 0 3px;
}
.rtl .usof-form-row.type_switch.desc_2 .usof-form-row-desc {
left: auto !important;
}
.rtl .usof-switcher-box > i {
left: auto;
right: 4px;
}
.rtl .usof-switcher > input:checked + label .usof-switcher-box > i {
left: auto;
right: 28px;
}
.rtl .usof-switcher-box {
margin-left: 10px;
margin-right: 0;
}
.rtl .usof-slider-selector input[type="text"] {
padding-left: 20px;
padding-right: 10px;
}
.rtl .usof-slider.with_units .usof-slider-selector:after {
left: 0;
right: auto;
}
.rtl .usof-slider-box {
margin-left: 0;
margin-right: 15px;
}
.rtl .usof-slider-runner {
transform: translateX(50%);
}
.rtl .usof-form-row.slider_below .usof-slider-box {
left: auto;
right: 0;
}
.rtl .usof-backup .usof-button.type_backup,
.rtl .usof-backup .usof-button.type_restore {
margin: 0 0 10px 10px;
}
.rtl .usof-transfer .usof-button.type_import {
margin: 10px 0 10px 10px;
}
.rtl .usof-form-row.inline .usof-form-row-control {
float: right;
}
.rtl .usof-form-row.inline .usof-form-row-desc {
float: right;
}
.rtl .usof-form-row.inline .usof-form-row-desc-text {
text-align: right;
padding-left: 0;
padding-right: 10px;
}
.rtl .usof-form-row.inline {
padding: 0 0 15px 25px;
}
.rtl .usof-form-row.for_social .usof-form-row-control:before {
left: auto;
right: 0;
border-radius: 0 3px 3px 0;
}
.rtl .usof-form-row.for_social .usof-form-row-control input {
padding-left: 10px;
padding-right: 50px;
}
.rtl .usof-schemes-text,
.rtl .usof-schemes-controls input[type="text"] {
margin-left: 10px;
margin-right: 0;
}
.rtl .usof-schemes-item-delete {
left: 20px;
right: auto;
}
.rtl .usof-schemes-item-save {
left: 60px;
right: auto;
}
.rtl .usof-form-wrapper.title_left .usof-form-wrapper-title {
float: right;
padding: 8px 0 8px 20px;
}
.rtl .usof-form-wrapper.title_left .usof-form-row.inline {
padding-left: 10px;
padding-right: 0;
}
.rtl .usof-form-wrapper.force_right {
margin-left: 40px;
margin-right: auto;
}
.rtl .usof-form-group-item-controls {
left: 40px;
right: auto !important;
}
.rtl .us-bld-window .usof-form-group-item-controls {
left: 0;
}
.rtl .usof-form-group.type_accordion .usof-form-group-item-title {
padding-left: 72px;
padding-right: 20px;
}
.rtl .usof-form-group.type_accordion .usof-form-group-item-title:after {
margin-left: 0;
margin-right: 8px;
}
.rtl .usof-form-group.type_accordion.for_btns .usof-form-group-item-title:after {
left: 0;
right: auto;
}
.rtl .usof-form-group.type_accordion.for_btns .usof-form-group-item-controls {
left: 26px;
}
.rtl .usof-container.type_builder .usof-header-title {
margin: 0 20px 0 10px;
}
.rtl .usof-header .usof-form-row-control-icon {
left: auto;
right: 0;
}
.rtl .usof-control.for_help,
.rtl .usof-control.for_import,
.rtl .usof-control.for_templates {
margin-left: 0;
margin-right: 10px;
}
.rtl .us-bld-editor {
padding-left: 30px;
padding-right: 0;
}
.rtl .us-bld-editor-elm-content:before,
.rtl .us-bld-state:before,
.rtl .us-bld-editor-elm i {
margin-left: 10px;
margin-right: 0;
}
.rtl .us-bld-options .usof-form-row.desc_2 .usof-form-row-desc-text,
.rtl .us-bld-options .usof-form-row.desc_4 .usof-form-row-desc-text {
left: 36px;
right: auto;
}
.rtl .us-bld-options .usof-form-row.desc_2 .usof-form-row-desc-text:before,
.rtl .us-bld-options .usof-form-row.desc_4 .usof-form-row-desc-text:before,
.rtl .us-bld-window .usof-form-row.desc_2 .usof-form-row-desc-text:before {
left: -6px;
right: auto;
}
.rtl .us-bld-window .usof-form-row.desc_2 .usof-form-row-desc-text {
left: 36px;
right: auto;
}
.rtl .us-bld-options .usof-form-row.desc_fix .usof-form-row-control {
margin-left: 10px;
margin-right: 0;
}
.rtl .us-bld-options .usof-form-row.desc_fix .usof-form-row-desc {
left: -20px;
right: auto;
}
.rtl .us-bld-window-closer {
left: 0;
right: auto;
}
.rtl .usof-tabs-item {
float: right;
}
.rtl .us-bld-window.for_adding .us-bld-window-item-h {
padding: 0 50px 0 20px;
}
.rtl .us-bld-window.for_adding .us-bld-window-item-icon {
left: auto;
right: 15px;
}
/* Responsive Styles
======================================================================================================= */
@media ( max-width: 1440px ) {
.usof-form-wrapper.for_colors {
width: 100%;
}
.usof-schemes-item {
width: 25%;
}
.usof-section[data-id="code"] .usof-form-row {
width: 100%;
}
.usof-section[data-id="code"] .usof-form-row-field {
height: 66vh !important;
}
.us-bld-window.for_templates .us-bld-window-item {
width: 33.3333%;
}
}
@media ( max-width: 1200px ) {
.usof-form-wrapper.change_colors_start > .usof-form-wrapper-content {
display: block;
}
.usof-form-wrapper.force_right {
max-width: none;
width: auto;
}
.type_check_table .usof-checkbox {
margin: 0 !important;
width: 100% !important;
}
.type_check_table .usof-checkbox:nth-child(3) .usof-checkbox-size:before {
display: none;
}
}
@media ( max-width: 960px ) {
.usof-form-wrapper {
padding-top: 15px;
}
.wp-admin.auto-fold .usof-header {
left: 36px;
}
.rtl.wp-admin.auto-fold .usof-header {
left: 0;
right: 36px;
}
.usof-form-row {
padding-top: 10px;
padding-bottom: 10px;
}
.usof-form-row:not(.inline) .usof-form-row-title,
.usof-form-wrapper.title_left .usof-form-wrapper-title {
float: none !important;
padding-top: 0 !important;
width: 100%;
}
.usof-form-row-field {
float: none !important;
width: 100%;
}
.usof-form-row.slider_below .usof-slider-box,
.usof-form-row.desc_2 .usof-form-row-desc,
.usof-form-row.desc_3:not(.inline) .usof-form-row-desc,
.usof-form-row.desc_4 .usof-form-row-desc {
display: none !important;
}
.usof-upload-controls {
position: static;
margin-top: 8px;
opacity: 1;
}
.usof-font .usof-checkbox {
width: 50%;
}
.us-bld-window.for_templates .us-bld-window-item {
width: 50%;
}
}
@media ( max-width: 782px ) {
#wpbody .usof-container select {
height: 40px; /* override WP styles */
}
.usof-container {
padding: 0 0 60px;
}
.usof-header {
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
padding: 10px;
justify-content: flex-end;
}
.usof-header-logo,
.usof-header-title,
.usof-nav {
display: none;
}
.usof-header .usof-control {
margin: 0;
}
.usof-header .usof-control.for_schemes {
margin-left: 10px;
margin-right: 10px;
}
.usof-content {
margin: 0 !important;
}
.usof-section-header {
display: block;
}
.usof-section-content {
padding: 0 0 20px !important;
}
.usof-schemes {
display: block;
}
.usof-schemes-controls {
width: 100%;
padding: 20px 0 !important;
}
.usof-font-preview,
.usof-form-row.type_button_preview {
display: none !important;
}
.usof-form-row.sticky {
top: 46px !important;
}
.usof-control.for_help,
.usof-control.for_import,
.usof-control.for_templates {
display: none;
}
.us-bld-window {
left: 20px;
right: 20px;
width: auto;
max-width: none;
transform: none;
}
.us-bld-form-row {
width: 100% !important;
}
.us-bld-workspace {
padding: 20px;
}
.us-bld-workspace {
display: block;
}
.us-bld-editor {
padding: 0 0 20px !important;
}
}
@media ( max-width: 600px ) {
.usof-section-header {
font-size: 18px;
padding: 10px 20px;
}
.usof-form-wrapper {
margin: 0 20px;
padding: 0;
}
.usof-form-wrapper.change_colors_start {
padding: 0 20px !important;
}
.usof-form-wrapper.for_colors .usof-form-wrapper-content {
padding: 0;
}
.usof-form-row.type_color .usof-form-row-control {
white-space: normal;
}
.usof-color-text {
display: block;
font-size: 12px;
line-height: 18px;
margin: 0 0 12px !important;
}
.usof-form-row.type_heading.inline {
display: none !important;
}
.usof-form-row.sticky {
top: 0 !important;
}
.usof-form-row {
padding-left: 20px;
padding-right: 20px;
}
.rtl .usof-form-row {
padding-left: 40px;
padding-right: 20px;
}
.usof-form-row.type_heading {
padding-left: 20px !important;
padding-right: 20px !important;
}
.usof-form-row.type_heading .usof-form-row-title {
font-size: 20px;
}
.usof-form-row.type_message .usof-form-row-desc {
margin: 0;
padding: 15px 20px;
}
.usof-form-group-add {
margin: 0 20px;
}
}
@media ( max-width: 480px ) {
.usof-radio,
.usof-checkbox {
display: block;
margin: 0;
width: auto !important;
}
.usof-form-wrapper .usof-form-row.inline {
padding-left: 0 !important;
padding-right: 0 !important;
}
.usof-form-row-title {
float: none;
padding-top: 0;
width: auto;
}
.us-bld-window.for_templates .us-bld-window-item {
width: 100%;
}
}