File: /home/wwwprimemarka/public_html/wp-content/themes/Zephyr/framework/vendor/usof/css/usof.css
/*
----------------------------------------------------------------
UpSolution Options Framework basic styles
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.
----------------------------------------------------------------
*/
html {
background-color: #fff;
}
body {
overflow-y: scroll;
background-color: #fff;
}
body.us-popup {
overflow: hidden;
}
#wpcontent,
#wpbody-content {
padding: 0 !important;
}
#wpbody-content .wrap {
margin: 0;
}
.usof-container {
font-size: 14px;
line-height: 24px;
padding-top: 60px;
}
.usof-container * {
box-sizing: border-box;
}
.usof-container a {
color: #23ccaa;
box-shadow: none;
text-decoration: none;
}
.usof-container a:hover {
text-decoration: underline;
}
.usof-container.dragged {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#wpfooter,
#wpbody-content .wrap > *:not(.usof-container),
.usof-form-row.hidden {
display: none !important;
}
/* Basic Form Fields
========================================================================== */
/* Inputs */
.usof-form input[type="text"],
.usof-form input[type="password"],
.usof-form input[type="email"],
.usof-form input[type="url"],
.usof-form input[type="tel"],
.usof-form input[type="number"],
.usof-form input[type="date"],
.usof-form input[type="search"],
.usof-form textarea,
.usof-form select {
line-height: 40px;
height: 40px;
margin: 0;
padding: 0 14px;
width: 100%;
box-shadow: none;
border-radius: 3px;
border: 1px solid #eee;
border-top-color: #dedede;
background-color: #f1f1f1;
color: #444;
transition: border-color 0.3s;
-webkit-appearance: none;
}
.usof-form select option {
padding: 2px 14px;
}
.usof-form textarea {
resize: vertical;
line-height: inherit;
height: auto;
min-height: 150px;
direction: ltr;
text-align: left;
}
.usof-form input[type="text"]:focus,
.usof-form input[type="password"]:focus,
.usof-form input[type="email"]:focus,
.usof-form input[type="url"]:focus,
.usof-form input[type="tel"]:focus,
.usof-form input[type="number"]:focus,
.usof-form input[type="date"]:focus,
.usof-form input[type="search"]:focus,
.usof-form textarea:focus,
.usof-form select:focus {
border-color: #23ccaa;
}
/* Buttons */
button::-moz-focus-inner {
border: 0;
padding: 0;
}
.usof-button {
display: inline-block;
vertical-align: top;
font-size: 13px;
font-weight: 600;
line-height: 20px;
text-transform: uppercase;
margin: 0;
padding: 8px 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-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}
.usof-button span {
position: relative;
transition: opacity 0.3s;
}
.usof-button:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: background-color 0.3s;
}
.usof-button:hover:before {
background-color: rgba(0,0,0,0.08);
}
.usof-button.type_save {
box-shadow: none;
min-width: 200px;
background-color: #23ccaa;
color: #fff;
}
.usof-button.type_save:hover:before {
background-color: rgba(0,0,0,0.15);
}
.usof-upload .usof-button.type_change,
.usof-upload .usof-button.type_remove {
margin: 4px;
background-color: #aaa;
color: #fff;
}
.usof-button.type_change:hover:before,
.usof-button.type_remove:hover:before {
background-color: rgba(0,0,0,0.2);
}
/* 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.3s;
}
.usof-preloader:before,
.usof-preloader:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
border-width: 2px;
}
.usof-preloader:before {
border-style: solid;
opacity: 0.2;
}
.usof-preloader:after {
border-style: solid;
border-top-color: transparent;
-webkit-animation: rotation 1s infinite cubic-bezier(.6,.3,.3,.6);
animation: rotation 1s infinite cubic-bezier(.6,.3,.3,.6);
}
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 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-size: 13px;
text-align: center;
text-transform: uppercase;
padding: 6px 0;
color: #70cc70;
opacity: 0;
transform: scale(0.1);
transition: transform 0.3s, opacity 0.3s;
}
/* STATUS clear */
.usof-control.status_clear .usof-button.type_save {
opacity: 0.2;
pointer-events: none;
}
/* STATUS notsaved */
.usof-control.status_notsaved .usof-button {
opacity: 1;
pointer-events: auto;
}
/* STATUS loading */
.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 {
opacity: 0;
}
.usof-control.status_success .usof-control-message {
opacity: 1;
transform: scale(1);
}
/* STATUS error */
.usof-control.status_error .usof-button {
opacity: 0;
}
.usof-control.status_error .usof-control-message {
color: #ff5b4c;
opacity: 1;
transform: scale(1);
}
/* Header
========================================================================== */
.usof-header {
position: fixed;
z-index: 13;
top: 32px;
left: 160px;
right: 0;
overflow: hidden;
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 {
float: left;
padding: 15px 0;
font-size: 17px;
line-height: 30px;
font-weight: 300;
text-align: center;
width: 200px;
background-color: #464b50;
color: #ccc;
}
.usof-header-logo .version {
color: #23ccaa;
}
.usof-header-logo .dash {
display: none;
margin: 0 10px;
}
.usof-header-title {
float: left;
padding-top: 15px;
padding-left: 40px;
max-width: 480px;
}
.usof-header-title h2 {
font-size: 22px;
line-height: 28px;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
}
.usof-header .usof-control {
float: right;
margin: 12px;
}
/* Side Navigation
========================================================================== */
.usof-nav {
position: absolute;
z-index: 12;
top: 60px;
left: 0;
width: 200px;
}
.usof-nav-bg {
position: fixed;
top: 0;
left: 160px;
bottom: 0;
width: inherit;
background-color: #f1f1f1;
}
.sticky-menu.folded .usof-nav-bg {
left: 36px;
}
@media (max-width: 960px) {
.sticky-menu.auto-fold .usof-nav-bg {
left: 36px;
}
}
.usof-nav-list {
margin: 0;
}
.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: 20px;
position: relative;
text-decoration: none;
box-shadow: none !important;
color: inherit;
transition-duration: 0.1s;
}
.usof-nav-title {
display: block;
font-weight: 600;
margin-right: 20px;
}
.usof-nav-anchor.level_1 {
padding: 13px 0 13px 46px;
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: #23ccaa;
}
.usof-nav-anchor.level_1 .usof-nav-icon {
display: block;
position: absolute;
z-index: 1;
top: 13px;
left: 13px;
line-height: 20px;
height: 20px;
width: 20px;
background-position: center;
background-repeat: no-repeat;
}
.usof-nav-item.level_1.has_children .usof-nav-anchor.level_1:after {
content: '\f347';
position: absolute;
right: 15px;
font-family: dashicons;
}
.usof-nav-item.level_1.has_children.current .usof-nav-anchor.level_1:after {
display: none;
}
.usof-nav-list.level_2 {
padding: 15px 0;
}
.usof-nav-anchor.level_2 {
font-size: 13px;
font-weight: 400;
padding: 8px 20px 8px 46px;
color: #777;
}
.usof-nav-item.level_2:hover .usof-nav-anchor.level_2 {
color: #23ccaa;
}
.usof-nav-item.level_2.current .usof-nav-anchor.level_2 {
font-weight: 600;
color: #222;
}
/* Changes when Header Builder is enabled */
.usof-container.with_ushb .usof-header-logo {
padding-left: 25px;
width: auto;
background: none;
color: #999;
}
.usof-container.with_ushb .usof-header-logo .dash {
display: inline;
}
.usof-container.with_ushb .usof-header-title {
padding-left: 0;
}
.usof-container.with_ushb .usof-nav {
width: 46px;
}
@media (min-height: 736px) {
.usof-container.with_ushb .usof-nav-list {
position: fixed;
}
}
.usof-container.with_ushb .usof-content {
margin-left: 46px;
}
.usof-container.with_ushb .usof-nav-anchor {
height: 46px;
}
.usof-container.with_ushb .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.with_ushb .usof-nav-item:hover .usof-nav-title {
visibility: visible;
opacity: 1;
}
.usof-container.with_ushb .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: 200px;
}
.usof-section {
position: relative;
max-width: 900px;
}
.usof-section-header {
display: none;
font-size: 24px;
line-height: 30px;
text-align: center;
padding: 20px 40px;
cursor: pointer;
background-color: #f1f1f1;
transition: background 0.3s;
}
.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: #23ccaa;
}
.usof-section-content {
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: 32%;
line-height: 20px;
padding: 10px 20px 10px 0;
}
.usof-form-row-title span {
font-weight: 600;
}
.usof-form-row-field {
float: right;
width: 68%;
position: relative;
}
/* Form row description */
.usof-form-row-desc {
display: none;
}
/* type 1 */
.usof-form-row.desc_1 .usof-form-row-desc {
display: block;
}
.usof-form-row.desc_1 .usof-form-row-desc-text {
font-size: 13px;
font-style: italic;
line-height: 20px;
padding-top: 5px;
color: #999;
}
/* type 2 & 3 */
.usof-form-row.desc_2 .usof-form-row-desc {
display: block;
position: absolute;
top: 8px;
right: -36px;
}
.usof-form-row.desc_3 .usof-form-row-desc {
display: block;
position: absolute;
top: 8px;
left: -36px;
}
.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: dashicons;
text-align: center;
font-size: 20px;
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: '\f223';
}
.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: 50%;
z-index: 11;
font-size: 12px;
text-align: center;
line-height: 18px;
padding: 10px 16px 12px;
width: 240px;
border-radius: 2px;
background-color: #333;
color: #fff;
opacity: 0;
visibility: hidden;
transform: translate3d(-50%,0,0);
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: 50%;
top: -6px;
margin-left: -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: -8px;
height: 8px;
}
/* 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 for rows */
.usof-form-wrapper {
position: relative;
padding: 24px 20px;
margin: 0 40px;
border-radius: 3px;
border: 1px dashed #e5e5e5;
background-color: #fcfcfc;
}
.usof-form-wrapper.force_right {
float: right;
width: 62%;
margin-bottom: 20px;
}
.usof-form-wrapper-cont {
display: flex;
flex-wrap: wrap;
}
.usof-form-wrapper .usof-form-row {
padding: 12px 20px;
}
/* Form wrapper TYPE_toggle */
.usof-form-wrapper.type_toggle {
width: 50%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background: none;
}
.usof-form-wrapper.type_toggle .usof-form-wrapper-title {
font-size: 15px;
line-height: 20px;
font-weight: 600;
padding: 13px 50px 13px 20px;
cursor: pointer;
position: relative;
border-color: #e5e5e5;
border-style: solid;
border-width: 1px 1px 0 0;
background: #f1f1f1;
transition: background 0.3s, border-color 0.3s;
}
.usof-form-wrapper.type_toggle .usof-form-wrapper-title:after {
position: absolute;
top: 13px;
right: 15px;
content: '\f347';
font-family: dashicons;
font-weight: normal;
vertical-align: top;
font-size: 20px;
margin-left: 8px;
transition: transform 0.3s;
}
.usof-form-wrapper.type_toggle.active .usof-form-wrapper-title {
border-right-color: transparent;
background: #fff;
}
.usof-form-wrapper.type_toggle .usof-form-wrapper-title:hover {
background: #e5e5e5;
}
.usof-form-wrapper.type_toggle.active .usof-form-wrapper-title:after {
transform: rotate(180deg);
}
.usof-form-wrapper.type_toggle .usof-form-wrapper-cont {
display: block;
padding: 10px 20px 30px;
}
.usof-form-wrapper.type_toggle .usof-form-row.type_color {
padding: 0 !important;
}
.usof-form-wrapper.type_toggle .usof-form-row.type_color .usof-form-row-field {
float: none;
width: auto;
}
/* Form wrapper TYPE_simple */
.usof-form-wrapper.type_simple {
width: 50%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background: none;
}
.usof-form-wrapper.type_simple .usof-form-wrapper-cont {
display: block;
padding: 30px 20px;
}
.usof-form-wrapper.type_simple .usof-form-row.type_heading {
padding: 0 0 20px !important;
}
.usof-form-wrapper.type_simple .usof-form-row.type_color {
padding: 0 !important;
}
.usof-form-wrapper.type_simple .usof-form-row.type_color .usof-form-row-field {
float: none;
width: auto;
}
/* Change wrapper layout like regular field */
.usof-form-wrapper.title_left {
background: none;
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: 32%;
}
.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 {
width: auto;
}
/* Change wrappers for Image sizes group */
.usof-form-group.compact .usof-form-wrapper {
padding: 20px 0 10px;
margin-bottom: 0;
background: none;
border-radius: 0;
border-width: 1px 0 0;
}
.usof-form-group.compact .usof-form-wrapper:first-child {
border-width: 0;
}
.usof-form-group.compact .usof-form-group-delete {
top: 22px;
}
/* Form Group
========================================================================== */
.usof-form-group .usof-form-wrapper {
margin-bottom: 5px;
}
.usof-form-group-add {
position: relative;
text-align: center;
height: 50px;
margin: 0 40px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
background-color: #f1f1f1;
color: #999;
}
.usof-form-group-add:hover {
background-color: #e5e5e5;
color: #666;
}
.usof-form-group-add:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
height: 16px;
width: 0;
margin: -10px 0 0 -2px;
border: 2px solid;
}
.usof-form-group-add:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
height: 0;
width: 16px;
margin: -2px 0 0 -10px;
border: 2px solid;
}
.usof-form-group-add.adding:before,
.usof-form-group-add.adding:after {
opacity: 0;
}
.usof-form-group-add .usof-preloader {
transition: none;
}
.usof-form-group-add.adding .usof-preloader {
opacity: 1;
}
.usof-form-group-delete {
position: absolute;
top: 0;
right: 0;
height: 36px;
width: 36px;
text-align: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s, color 0.3s;
}
.usof-form-wrapper:hover .usof-form-group-delete {
opacity: 0.5;
}
.usof-form-group-delete:hover {
opacity: 1 !important;
color: red;
}
.usof-form-group-delete:before {
vertical-align: top;
content: '\f335';
font: 26px/36px dashicons;
}
/* Form Row Types
========================================================================== */
/* TYPE Heading */
.usof-form-row.type_heading .usof-form-row-title {
float: none;
width: auto;
font-size: 22px;
line-height: 1.3;
padding: 0 !important;
margin-top: 30px;
position: relative;
}
.usof-form-row.type_heading:first-child .usof-form-row-title {
margin-top: 0 !important;
}
.usof-form-row.type_heading.with_separator .usof-form-row-title:before {
content: '';
display: block;
position: absolute;
top: 50%;
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: 20px;
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 {
display: none;
}
/* 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.for_above {
padding-top: 0;
}
.usof-form-row.type_message .usof-form-row-desc {
display: block;
padding: 20px 25px;
border-radius: 3px;
background-color: #e5e5e5;
}
.usof-form-row.type_message.color_blue .usof-form-row-desc {
background-color: #dbf3ff;
}
.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;
}
/* TYPE Select */
.usof-select {
position: relative;
}
.usof-select:after {
display: block;
content: '\f347';
font-family: dashicons;
font-size: 18px;
text-align: center;
position: absolute;
top: 1px;
right: 1px;
line-height: 38px;
height: 38px;
width: 42px;
border-radius: 2px;
background-color: #f1f1f1;
pointer-events: none;
}
/* TYPE Select 2 */
.select2-hidden-accessible {
display: none;
}
.select2-container {
display: block;
}
.select2-hidden-accessible ~ .select2-container {
width: 100% !important;
}
.select2-selection--single {
display: block;
position: relative;
line-height: 40px;
padding: 0 40px 0 14px;
border-radius: 3px;
border: 1px solid #eee;
border-top-color: #dedede;
background-color: #f1f1f1;
color: #444;
}
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
border-color: #23ccaa;
}
.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;
font-family: dashicons;
font-size: 18px;
line-height: 40px;
width: 42px;
}
.select2-selection__arrow:after {
content: '\f347';
}
.select2-dropdown {
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
box-sizing: border-box;
border-radius: 3px;
background-color: #f1f1f1;
border: 1px solid #23ccaa;
}
.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 14px;
}
.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;
}
.select2-results__options {
margin: 0;
}
.select2-results > .select2-results__options {
overflow-y: auto;
max-height: 224px;
}
.select2-results__option:not([role="group"]),
.select2-results__group {
display: block;
padding: 6px 14px;
line-height: 20px;
margin: 0;
}
.select2-results__option .select2-results__option {
padding-left: 28px;
}
.select2-results__option--highlighted {
background-color: #23ccaa;
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 {
margin: 0 !important;
}
.usof-checkbox {
display: inline-block;
vertical-align: top;
position: relative;
padding: 4px 0;
margin: 0 20px 0 0;
}
.usof-form-row.type_checkboxes.layout_ver .usof-checkbox {
display: block;
margin: 0;
}
.usof-checkbox.hidden,
.usof-checkbox > input {
display: none;
}
.usof-checkbox > label {
display: block;
cursor: pointer;
}
.usof-checkbox-icon {
position: absolute;
top: 6px;
left: 0;
font-family: dashicons;
font-size: 22px;
line-height: 20px;
height: 20px;
width: 20px;
border-radius: 3px;
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: #eee;
color: #fff;
transition: background-color 0.15s;
}
.usof-checkbox > input:checked + label .usof-checkbox-icon {
background-color: #23ccaa;
}
.usof-checkbox-icon:before {
content: '\f147';
position: relative;
left: -2px;
opacity: 0;
transition: opacity 0.15s;
}
.usof-checkbox > input:checked + label .usof-checkbox-icon:before {
opacity: 1;
}
.usof-checkbox-text {
display: inline-block;
vertical-align: top;
padding-left: 26px;
color: #888;
transition: color 0.15s;
}
.usof-checkbox > input:checked + label .usof-checkbox-text {
color: inherit
}
/* TYPE Style Scheme */
.usof-form-row.type_style_scheme .usof-form-row-title,
.usof-form-row.type_style_scheme .usof-form-row-field {
float: none;
width: auto;
padding-top: 0;
}
.usof-schemes {
display: flex;
}
.usof-schemes-controls {
flex-shrink: 0;
width: 220px;
padding: 4px 0 4px 20px;
}
.usof-schemes-controls .usof-button {
width: 100%;
margin: 8px 0 0;
}
.usof-schemes-list {
display: flex;
flex-wrap: wrap;
align-self: flex-start;
margin: 0 -8px 2px;
}
.usof-schemes-item {
width: 200px;
padding: 5px;
margin: 0;
position: relative;
cursor: pointer;
border-radius: 3px;
border: 3px solid transparent;
transition: background-color 0.3s, border-color 0.3s;
}
.usof-schemes-item.active,
.usof-schemes-item:hover {
background-color: #ddd;
}
.usof-schemes-item.active {
border-color: #32373c;
}
.usof-schemes-item-preview {
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1);
}
.usof-schemes-item-preview .preview_header {
display: block;
height: 12px;
width: 100%;
box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.usof-schemes-item-preview .preview_primary,
.usof-schemes-item-preview .preview_secondary {
float: left;
height: 24px;
width: 24px;
}
.usof-schemes-item-preview .preview_text {
float: left;
font-size: 12px;
font-weight: 600;
line-height: 24px;
width: 136px;
padding: 0 5px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.usof-schemes-item-delete {
position: absolute;
text-align: center;
top: 5px;
right: 5px;
width: 36px;
cursor: pointer;
transition: opacity 0.3s;
opacity: 0;
background-color: rgba(0,0,0,0.8);
color: #fff;
}
.usof-schemes-item:hover .usof-schemes-item-delete {
opacity: 0.5;
}
.usof-schemes-item-delete:hover {
opacity: 1 !important;
}
.usof-schemes-item-delete:before {
vertical-align: top;
content: '\f335';
font: 26px/36px dashicons;
}
/* TYPE Color */
.usof-form-row.type_color .usof-form-row-control {
white-space: nowrap;
}
.usof-color {
display: inline-block;
vertical-align: top;
position: relative;
width: 216px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==");
}
.usof-color-preview {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.usof-color input.usof-color-value {
display: block;
position: relative;
font-family: monospace;
text-align: center;
padding: 0;
text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
background: none !important;
border: none !important;
border-radius: 0;
}
.usof-color-clear {
position: absolute;
top: 0;
left: -30px;
text-align: center;
font-size: 18px;
line-height: 40px;
width: 30px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
}
.usof-color:hover .usof-color-clear {
opacity: 0.5;
}
.usof-color-clear:hover {
opacity: 1 !important;
}
.usof-color-clear:before {
content: '\f05e';
font-family: fontawesome;
vertical-align: top;
}
.usof-color-text {
display: inline-block;
vertical-align: top;
font-size: 13px;
margin: 8px 0 0 15px;
}
/* TYPE Link */
.usof-form-row.type_link .usof-checkbox {
margin-top: 6px;
}
/* TYPE Css / Html */
.usof-form-row.type_css .usof-form-row-control,
.usof-form-row.type_html .usof-form-row-control {
position: relative;
height: calc(100vh - 194px);
}
.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: #dedede #eee #eee;
}
.usof-form-row.type_css textarea,
.usof-form-row.type_html textarea {
position: absolute;
left: -10000px;
}
.usof-form-row-resize {
position: relative;
height: 11px;
}
.usof-form-row-resize-knob {
position: absolute;
top: 0;
left: 0;
right: 0;
height: inherit;
margin: -1px;
}
.usof-form-row-resize-knob:before {
display: none;
content: '';
border-top: 1px dashed #ccc;
position: relative;
z-index: 5;
}
.usof-form-row-resize.dragged .usof-form-row-resize-knob:before {
display: block;
}
.usof-form-row-resize-knob span {
position: absolute;
top: 0;
left: 50%;
height: inherit;
margin-left: -25px;
width: 50px;
background-color: #f5f5f5;
border: 1px solid #eee;
cursor: ns-resize;
z-index: 6;
}
.usof-form-row-resize.dragged .usof-form-row-resize-knob span {
background-color: #eee;
border: 1px solid #ccc;
}
.usof-form-row-resize-knob span:before {
content: '';
display: block;
height: 3px;
width: 30px;
margin: 3px 10px;
border-top: 3px double #ccc;
}
/* TYPE Font */
.usof-form-row.type_font {
padding-top: 0;
padding-bottom: 10px;
}
.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: 16px;
line-height: 1.4;
padding: 0 25px;
margin-bottom: 20px;
overflow: hidden;
background-color: #faf6e1;
}
.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-form-row[data-name="menu_font_family"] .usof-font-preview {
word-spacing: 40px;
}
.usof-font .usof-checkbox-list {
margin-top: 14px !important;
}
/* TYPE Radio */
.usof-form-row.type_radio .usof-form-row-title {
padding-top: 6px;
padding-bottom: 6px;
}
.usof-form-row.type_radio.desc_2 .usof-form-row-desc,
.usof-form-row.type_radio.desc_3 .usof-form-row-desc {
top: 4px;
}
.usof-radio-list {
margin: 0 !important;
}
.usof-radio {
display: inline-block;
vertical-align: top;
position: relative;
padding: 4px 0;
margin: 0 20px 0 0;
}
.usof-form-row.type_radio.layout_ver .usof-radio {
display: block;
margin: 0;
}
.usof-radio > input {
display: none;
}
.usof-radio > label {
display: block;
cursor: pointer;
color: #888;
transition: background-color 0.2s, color 0.2s;
}
.usof-radio > input:checked + label {
color: inherit;
}
.usof-radio-icon {
position: absolute;
top: 6px;
left: 0;
height: 20px;
width: 20px;
border-radius: 50%;
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: #eee;
}
.usof-radio-icon:before {
display: block;
content: '';
position: relative;
top: 5px;
left: 5px;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #23ccaa;
opacity: 0;
transition: opacity 0.15s;
}
.usof-radio > input:checked + label .usof-radio-icon:before {
opacity: 1;
}
.usof-radio-text {
display: inline-block;
vertical-align: top;
padding-left: 26px;
}
/* TYPE Radio like Switchers */
.usof-form-row.type_radio.layout_switch .usof-radio-list {
display: flex;
flex-wrap: wrap;
}
.rtl .usof-form-row.type_radio.layout_switch .usof-radio-list {
flex-direction: row-reverse;
}
.usof-form-row.type_radio.layout_switch .usof-radio {
flex-grow: 1;
margin: 0;
padding: 0;
}
.usof-form-row.type_radio.layout_switch .usof-radio > label {
font-weight: 600;
text-align: center;
padding: 6px 15px;
border-style: solid;
border-width: 0 0 1px;
border-color: #dedede;
background-color: #f1f1f1;
}
.usof-form-row.type_radio.layout_switch .usof-radio > input:checked + label {
position: relative;
z-index: 1;
box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1);
background-color: #fff;
border-color: #fff;
color: #23ccaa;
}
.usof-form-row.type_radio.layout_switch .usof-radio + .usof-radio > label {
border-left-width: 1px;
}
.usof-form-row.type_radio.layout_switch .usof-radio:first-child > label {
border-radius: 3px 0 0 3px;
}
.usof-form-row.type_radio.layout_switch .usof-radio:last-child > label {
border-radius: 0 3px 3px 0;
}
.usof-form-row.type_radio.layout_switch .usof-radio-icon {
display: none;
}
.usof-form-row.type_radio.layout_switch .usof-radio-text {
padding: 0;
}
/* Custom appearance for BG position control */
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio-list {
width: 150px;
}
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio {
width: 33.3333%;
}
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio > label {
padding: 12px 10px;
}
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio:nth-child(4) > label,
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio:nth-child(7) > label {
border-left-width: 0;
}
.usof-form-row.type_radio.layout_switch.bgpos .dashicons {
line-height: inherit;
}
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio:nth-child(1) .dashicons,
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio:nth-child(9) .dashicons {
transform: rotate(45deg);
}
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio:nth-child(3) .dashicons,
.usof-form-row.type_radio.layout_switch.bgpos .usof-radio:nth-child(7) .dashicons {
transform: rotate(-45deg);
}
/* TYPE Imgradio */
.usof-imgradio {
font-size: 0;
margin: 0 !important;
}
.usof-imgradio-item {
display: inline-block;
vertical-align: top;
margin: 0;
}
.usof-imgradio-item input {
display: none;
}
.usof-imgradio-item label {
display: block;
font-size: 12px;
border: 4px solid transparent;
border-radius: 3px;
padding: 1px;
transition: border-color 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.usof-imgradio-item input:checked + label {
border-color: #23ccaa;
}
.usof-imgradio-item label img {
display: block;
pointer-events: none;
transition: opacity 0.2s;
}
.usof-imgradio-item label:hover img {
opacity: 0.75;
}
/* 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 {
position: relative;
margin: 4px 0;
}
.usof-switcher > input {
display: none;
}
.usof-switcher > label {
display: block;
white-space: nowrap;
width: 100%;
}
.usof-switcher-box {
display: inline-block;
vertical-align: top;
overflow: hidden;
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.015) inset;
background-color: #eee;
transition: background-color 0.3s;
}
.usof-switcher > input:checked + label .usof-switcher-box {
background-color: #23ccaa;
}
.usof-form-row.color_yellow .usof-switcher > input:checked + label .usof-switcher-box {
background-color: #f90;
}
.usof-switcher-button {
display: block;
position: absolute;
top: 4px;
left: 4px;
height: 24px;
width: 24px;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1);
background-color: #fff;
transition: left 0.3s, right 0.3s;
}
.usof-switcher > input:checked + label .usof-switcher-button {
left: 28px;
}
.usof-switcher-text {
display: inline-block;
vertical-align: top;
margin: 4px 0;
white-space: normal;
}
/* TYPE Slider */
.usof-slider > input[type="text"] {
float: left;
text-align: center;
width: 80px;
padding: 0;
}
.usof-slider-box {
margin: 0 8px 0 98px;
padding: 18px 0;
cursor: w-resize;
}
.usof-slider-box-h {
height: 4px;
width: 100%;
border-radius: 2px;
position: relative;
box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset;
background-color: #23ccaa;
}
.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;
left: -8px;
height: 16px;
width: 16px;
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;
}
/* doubled */
.usof-slider > input[type="text"] + input[type="text"] {
float: right;
}
.usof-slider.doubled .usof-slider-box {
margin: 0 92px;
}
.usof-slider.doubled .usof-slider-box-h {
background-color: #eee;
}
.usof-slider.doubled .usof-slider-range:first-child {
background-color: #23ccaa;
right: 0;
}
/* compact */
.usof-form-row.compact .usof-slider-box {
position: absolute;
z-index: 11;
top: 100%;
left: 0;
margin: 0;
padding: 10px 0;
width: 300px;
visibility: hidden;
}
.usof-form-row.compact .usof-slider:hover .usof-slider-box,
.usof-form-row.compact .usof-slider-box.dragged {
visibility: visible;
}
.usof-container.dragged .usof-form-row.compact .usof-slider:hover .usof-slider-box:not(.dragged) {
visibility: hidden;
}
/* TYPE Upload */
.usof-upload .usof-button.type_set {
margin: 2px 0;
}
.usof-upload-container {
position: relative;
padding: 10px;
min-height: 60px;
border-radius: 3px;
border: 1px solid #eee;
border-top-color: #dedede;
background-color: #f1f1f1;
}
.usof-upload img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 200px;
margin: 0 auto;
}
.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;
opacity: 0;
transition: opacity 0.3s;
}
.usof-upload-container:hover .usof-upload-controls {
opacity: 1;
}
/* 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 10px !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%;
}
}
/* FOR social */
.usof-form-row.for_social .usof-form-row-field {
float: none;
width: 100%;
padding: 0 !important;
}
.usof-form-row.for_social .usof-form-row-control {
position: relative;
}
.usof-form-row.for_social .usof-form-row-control input {
padding-left: 50px;
}
.usof-form-row.for_social .usof-form-row-control:before {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
font-family: fontawesome;
font-size: 18px;
text-align: center;
line-height: 40px;
height: 40px;
width: 40px;
border-radius: 3px 0 0 3px;
color: #fff;
}
.usof-form-row.for_social[data-id*='facebook'] .usof-form-row-control:before {
content: '\f09a';
background-color: #42599e;
}
.usof-form-row.for_social[data-id*='twitter'] .usof-form-row-control:before {
content: '\f099';
background-color: #55acee;
}
.usof-form-row.for_social[data-id*='google'] .usof-form-row-control:before {
content: '\f0d5';
background-color: #db4437;
}
.usof-form-row.for_social[data-id*='linkedin'] .usof-form-row-control:before {
content: '\f0e1';
background-color: #117eb9;
}
.usof-form-row.for_social[data-id*='youtube'] .usof-form-row-control:before {
content: '\f16a';
background-color: #cd201f;
}
.usof-form-row.for_social[data-id*='vimeo'] .usof-form-row-control:before {
content: '\f27d';
background-color: #1ab7ea;
}
.usof-form-row.for_social[data-id*='skype'] .usof-form-row-control:before {
content: '\f17e';
background-color: #00aff0;
}
.usof-form-row.for_social[data-id*='flickr'] .usof-form-row-control:before {
content: '\f16e';
background-color: #ff0084;
}
.usof-form-row.for_social[data-id*='pinterest'] .usof-form-row-control:before {
content: '\f0d2';
background-color: #cb2027;
}
.usof-form-row.for_social[data-id*='tumblr'] .usof-form-row-control:before {
content: '\f173';
background-color: #37465d;
}
.usof-form-row.for_social[data-id*='dribbble'] .usof-form-row-control:before {
content: '\f17d';
background-color: #ea4c89;
}
.usof-form-row.for_social[data-id*='vk'] .usof-form-row-control:before {
content: '\f189';
background-color: #4c75a3;
}
.usof-form-row.for_social[data-id*='instagram'] .usof-form-row-control:before {
content: '\f16d';
font-size: 22px;
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%);
}
.usof-form-row.for_social[data-id*='behance'] .usof-form-row-control:before {
content: '\f1b4';
background-color: #1769ff;
}
.usof-form-row.for_social[data-id*='xing'] .usof-form-row-control:before {
content: '\f168';
background-color: #006464;
}
.usof-form-row.for_social[data-id*='yelp'] .usof-form-row-control:before {
content: '\f1e9';
background-color: #c41200;
}
.usof-form-row.for_social[data-id*='twitch'] .usof-form-row-control:before {
content: '\f1e8';
background-color: #6441a5;
}
.usof-form-row.for_social[data-id*='soundcloud'] .usof-form-row-control:before {
content: '\f1be';
background-color: #ff5600;
}
.usof-form-row.for_social[data-id*='deviantart'] .usof-form-row-control:before {
content: '\f1bd';
background-color: #637768;
}
.usof-form-row.for_social[data-id*='foursquare'] .usof-form-row-control:before {
content: '\f180';
background-color: #fa4b7a;
}
.usof-form-row.for_social[data-id*='github'] .usof-form-row-control:before {
content: '\f09b';
background-color: #333;
}
.usof-form-row.for_social[data-id*='odnoklassniki'] .usof-form-row-control:before {
content: '\f263';
background-color: #f58220;
}
.usof-form-row.for_social[data-id*='s500px'] .usof-form-row-control:before {
content: '\f26e';
background-color: #222;
}
.usof-form-row.for_social[data-id*='houzz'] .usof-form-row-control:before {
content: '\f27c';
background-color: #7ac142;
}
.usof-form-row.for_social[data-id*='medium'] .usof-form-row-control:before {
content: '\f23a';
background-color: #00ab6c;
}
.usof-form-row.for_social[data-id*='tripadvisor'] .usof-form-row-control:before {
content: '\f262';
background-color: #579542;
}
.usof-form-row.for_social[data-id*='rss'] .usof-form-row-control:before {
content: '\f09e';
background-color: #ff9702;
}
/* Inline Appearance */
@media ( min-width: 481px ) {
.usof-form-row.inline {
display: inline-block !important;
vertical-align: top;
padding: 0 25px 10px 0;
}
.usof-form-row.inline:not(.cols_2) {
width: auto;
}
.usof-form-row.inline.type_checkboxes {
padding: 4px 0 10px !important;
}
.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-control input {
text-align: center;
}
}
.usof-form-row.inline .usof-form-row-desc {
display: inline-block;
vertical-align: top;
position: static;
}
.usof-form-row.inline .usof-form-row-desc-icon {
display: none;
}
.usof-form-row.inline .usof-form-row-desc-text {
font-size: inherit;
text-align: left;
position: static;
visibility: visible;
width: auto;
padding-right: 0;
padding-left: 10px;
opacity: 1;
background: none;
color: inherit;
transform: none !important;
}
.usof-form-row.inline .usof-form-row-desc-text:before {
display: none;
}
/* For Buttons Preview */
.usof-button-preview {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
border: 1px dotted #ccc;
}
.usof-button-example {
position: relative;
white-space: nowrap;
margin: 10px;
cursor: pointer;
box-shadow: 0 0 0 rgba(0,0,0,0.18);
transition: box-shadow 0.3s, color 0.3s;
}
.usof-button-example span {
position: relative;
}
.usof-button-example.style_solid {
color: #fff !important;
}
.usof-button-example.style_outlined {
background-color: transparent !important;
}
.usof-button-example.style_outlined:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
border-width: 2px;
border-style: solid;
border-color: inherit;
}
.usof-button-preview.hov_slide .usof-button-example {
overflow: hidden;
}
.usof-button-preview.hov_slide .usof-button-example.style_outlined:hover {
color: #fff !important;
}
.usof-button-preview.hov_slide .usof-button-example-before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0;
background-color: rgba(0,0,0,0.1);
transition: height 0.3s;
}
.usof-button-preview.hov_slide .usof-button-example:hover .usof-button-example-before {
height: 100%;
}
.usof-button-preview.hov_shadow .usof-button-example:hover {
box-shadow: 0 0.5em 1em rgba(0,0,0,0.2) !important;
}
/* Improvements for Colors tab */
.usof-section[data-id="styling"] {
max-width: none;
}
.usof-form-wrapper.change_colors_start {
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-radius: 0;
border: none;
background: none;
}
/* Improvements for Typography tab */
.usof-section[data-id="typography"] .usof-form-wrapper {
background: none;
border: none;
padding: 15px 0 0;
}
.usof-section[data-id="typography"] .usof-form-wrapper-title {
font-size: 16px;
font-weight: 600;
padding-bottom: 10px;
}
/* Improvements for Custom Code tab */
.usof-section[data-id="code"] {
max-width: none;
}
.usof-section[data-id="code"] .usof-section-content {
overflow: hidden;
padding: 20px 20px 0;
}
.usof-section[data-id="code"] .usof-form-row {
float: left;
clear: none;
padding: 15px 20px;
width: 50%;
}
/* RTL styles
========================================================================== */
.rtl .usof-header {
left: 0;
right: 160px;
}
.rtl .usof-nav-bg {
left: auto !important;
right: 160px;
}
@media (max-width: 960px) {
.rtl.sticky-menu.auto-fold .usof-nav-bg {
left: 36px;
}
}
.rtl.sticky-menu.folded .usof-nav-bg {
right: 36px;
}
.rtl .usof-header-logo {
float: right;
}
.rtl .usof-container.with_ushb .usof-header-logo {
padding-left: 0;
padding-right: 25px;
}
.rtl .usof-header-title {
float: right;
padding-left: 0;
padding-right: 40px;
}
.rtl .usof-container.with_ushb .usof-header-title {
padding-right: 0;
}
.rtl .usof-header .usof-control {
float: left;
}
.rtl .usof-nav {
right: 0;
left: auto;
}
.rtl .usof-nav-anchor.level_1 {
padding: 13px 46px 13px 0;
}
.rtl .usof-nav-title {
margin-left: 20px;
margin-right: 0;
}
.rtl .usof-nav-anchor.level_1 .usof-nav-icon {
left: auto;
right: 15px;
}
.rtl .usof-nav-item.level_1.has_children .usof-nav-anchor.level_1:after {
left: 15px;
right: auto;
}
.rtl .usof-container.with_ushb .usof-nav-title {
padding: 13px 0 13px 13px;
}
.rtl .usof-nav-anchor.level_2 {
padding: 8px 46px 8px 20px;
}
.rtl .usof-content {
margin-left: 0;
margin-right: 200px;
}
.rtl .usof-container.with_ushb .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: -36px;
right: auto;
}
.rtl .usof-form-row.desc_3 .usof-form-row-desc {
left: auto;
right: -36px;
}
.rtl .usof-form-row.desc_3 .usof-form-row-title {
padding-left: 40px;
padding-right: 0;
}
.rtl .usof-form-row.inline .usof-form-row-title {
padding-left: 10px;
}
.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:after {
left: 1px;
right: auto;
}
.rtl .select2-selection--single {
padding: 0 14px 0 40px;
}
.rtl .select2-selection__arrow {
left: 0;
right: auto;
}
.rtl .select2-results__option .select2-results__option {
padding-left: 14px;
padding-right: 28px;
}
.rtl .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-color-text {
margin: 8px 15px 0 0;
}
.rtl .usof-radio {
margin: 0 0 0 20px;
}
.rtl .usof-radio-icon {
left: auto;
right: 0;
}
.rtl .usof-radio-icon:before {
left: auto;
right: 5px;
}
.rtl .usof-radio-text {
padding-left: 0;
padding-right: 26px;
}
.rtl .usof-form-row.type_switch.desc_2 .usof-form-row-desc {
left: auto !important;
margin: 8px 8px 0 0;
}
.rtl .usof-switcher-button {
left: auto;
right: 4px;
}
.rtl .usof-switcher > input:checked + label .usof-switcher-button {
left: auto;
right: 28px;
}
.rtl .usof-switcher-box {
margin-left: 10px;
margin-right: 0;
}
.rtl .usof-slider > input[type="text"] {
float: right;
}
.rtl .usof-slider-box {
margin: 0 104px 0 8px;
}
.rtl .usof-form-row.compact .usof-slider-box {
left: auto;
right: 0;
}
.rtl .usof-slider-runner {
left: auto;
right: -8px;
}
.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 10px 20px;
}
.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: 14px;
padding-right: 50px;
}
.rtl .usof-schemes-controls {
padding: 4px 20px 4px 0;
}
.rtl .usof-schemes-item-delete {
left: 0;
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-right: 0;
}
.rtl .usof-form-wrapper.type_toggle .usof-form-wrapper-title {
padding: 13px 20px 13px 50px;
}
.rtl .usof-form-wrapper.type_toggle .usof-form-wrapper-title:after {
left: 5px;
right: auto;
}
.rtl .usof-form-wrapper.force_right {
float: left;
}
.rtl .usof-form-group-delete {
left: 0;
right: auto;
}
/* Responsive Styles
========================================================================== */
@media ( max-width: 1440px ) {
.usof-section[data-id="code"] .usof-form-row {
width: 100%;
}
}
@media ( max-width: 1280px ) {
.usof-form-wrapper.change_colors_start > .usof-form-wrapper-cont {
display: block;
}
.usof-form-wrapper.type_toggle,
.usof-form-wrapper.type_simple {
width: 100%;
}
}
@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-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.compact .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;
}
}
@media ( max-width: 782px ) {
.usof-container {
padding: 0 0 56px;
}
.usof-header {
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
padding: 10px;
}
.usof-header-logo,
.usof-header-title,
.usof-nav {
display: none;
}
.usof-header .usof-control {
float: none;
margin: 0;
}
.usof-header .usof-control .usof-button {
width: 100%;
}
.usof-content {
margin: 0 !important;
}
.usof-section-header {
display: block;
}
.usof-section-content {
padding: 0 0 20px;
}
.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;
}
}
@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.type_toggle .usof-form-wrapper-cont,
.usof-form-wrapper.type_simple .usof-form-wrapper-cont {
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;
font-style: italic;
margin: 0 0 12px !important;
}
.usof-form-row.type_heading.inline {
display: none !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-switcher > label {
white-space: normal;
}
.usof-form-group-add {
margin: 0 20px;
}
}
@media ( max-width: 480px ) {
.usof-radio,
.usof-checkbox {
display: block;
margin: 0;
}
.usof-form-wrapper .usof-form-row.inline {
padding-left: 0 !important;
padding-right: 0 !important;
}
}