/*
 * @autor: Bday
 * @version: 5.0.0
 *
 * Content
 * 1. General config
 * iFrame
 * 2. Preloader
 * 3. Left menu
 * 4. Control panel
 * 5. Add section items
 * 6. Message
 * 7. Modal popup
 * 8. Group buttons of control
 * 9. Main
 * 10. Constructor Form
 */

/**
 * 1. General config
 */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: 400;
    text-align: left;
    font-size: 14px;
}

strong {
    font-weight: bold;
}

a:focus,
button:focus {
    outline: 0;
}

.cursor-grab {
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
}

/*----------------------*/

i[class*=icon-blr] {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    height: 16px;
    width: 16px;
}

i[class*=icon-blr-sm] {
    height: 10px;
    width: 10px;
}

i[class*=icon-blr-lg] {
    height: 20px;
    width: 20px;
}

i[class*=icon-blr-mode] {
    height: 28px;
    width: 28px;
}

i.icon-blr-mode-plus {
    background-image: url(../images/builder-icons/mode-plus.svg);
}

i.icon-blr-mode-drop {
    background-image: url(../images/builder-icons/mode-drop.svg);
}

i.icon-blr-mode-pages {
    background-image: url(../images/builder-icons/mode-list.svg);
}

i.icon-blr-lg-mobile {
    background-image: url(../images/builder-icons/lg-mobile.svg);
}

i.icon-blr-lg-tablet {
    background-image: url(../images/builder-icons/lg-tablet.svg);
}

i.icon-blr-lg-desktop {
    background-image: url(../images/builder-icons/lg-desktop.svg);
}

i.icon-blr-lg-gallery {
    background-image: url(../images/builder-icons/lg-gallery.svg);
}

i.icon-blr-sm-mobile {
    background-image: url(../images/builder-icons/sm-mobile.svg);
}

i.icon-blr-sm-tablet {
    background-image: url(../images/builder-icons/sm-tablet.svg);
}

i.icon-blr-sm-desktop {
    background-image: url(../images/builder-icons/sm-desktop.svg);
}

i.icon-blr-lg-redo {
    background-image: url(../images/builder-icons/lg-redo.svg);
}

i.icon-blr-lg-undo {
    background-image: url(../images/builder-icons/lg-undo.svg);
}

i.icon-blr-plus {
    background-image: url(../images/builder-icons/plus.svg);
}

i.icon-blr-gallery {
    background-image: url(../images/builder-icons/gallery.svg);
}

i.icon-blr-cloud-upload {
    background-image: url(../images/builder-icons/cloud-upload.svg);
}

i.icon-blr-cross {
    background-image: url(../images/builder-icons/cross.svg);
}

i.icon-blr-mobile {
    background-image: url(../images/builder-icons/mobile.svg);
}

i.icon-blr-tablet {
    background-image: url(../images/builder-icons/tablet.svg);
}

i.icon-blr-desktop {
    background-image: url(../images/builder-icons/desktop.svg);
}

i.icon-blr-align-left {
    background-image: url(../images/builder-icons/align-left.svg);
}

i.icon-blr-align-right {
    background-image: url(../images/builder-icons/align-right.svg);
}

i.icon-blr-align-center {
    background-image: url(../images/builder-icons/align-center.svg);
}

i.icon-blr-align-justify {
    background-image: url(../images/builder-icons/align-justify.svg);
}

i.icon-blr-arrow-down {
    background-image: url(../images/builder-icons/arrow-down.svg);
}

i.icon-blr-arrow-up {
    background-image: url(../images/builder-icons/arrow-up.svg);
}

i.icon-blr-section-bg {
    background-image: url(../images/builder-icons/section-bg.svg);
}

i.icon-blr-settings {
    background-image: url(../images/builder-icons/settings.svg);
}

i.icon-blr-code {
    background-image: url(../images/builder-icons/code.svg);
}

i.icon-blr-clapboard {
    background-image: url(../images/builder-icons/clapboard.svg);
}

i.icon-blr-copy {
    background-image: url(../images/builder-icons/copy.svg);
}

i.icon-blr-trash {
    background-image: url(../images/builder-icons/trash.svg);
}

i.icon-blr-h1 {
    background-image: url(../images/builder-icons/h1.svg);
}

i.icon-blr-h2 {
    background-image: url(../images/builder-icons/h2.svg);
}

i.icon-blr-h3 {
    background-image: url(../images/builder-icons/h3.svg);
}

i.icon-blr-h4 {
    background-image: url(../images/builder-icons/h4.svg);
}

i.icon-blr-drop {
    background-image: url(../images/builder-icons/drop.svg);
}

i.icon-blr-link {
    background-image: url(../images/builder-icons/link.svg);
}

i.icon-blr-grid {
    background-image: url(../images/builder-icons/grid.svg);
}

i.icon-blr-picture {
    background-image: url(../images/builder-icons/pic.svg);
}

i.icon-blr-lock-open {
    background-image: url(../images/builder-icons/lock-open.svg);
}

i.icon-blr-lock {
    background-image: url(../images/builder-icons/lock.svg);
}

i.icon-blr-rtl {
    background-image: url(../images/builder-icons/rtl.svg);
}

i.icon-blr-highlight {
    background-image: url(../images/builder-icons/highlight.svg);
}

i.icon-blr-strikethrough {
    background-image: url(../images/builder-icons/strikethrough.svg);
}

i.icon-blr-underline {
    background-image: url(../images/builder-icons/underline.svg);
}

i.icon-blr-uppercase {
    background-image: url(../images/builder-icons/uppercase.svg);
}

i.icon-blr-italic {
    background-image: url(../images/builder-icons/italic.svg);
}

i.icon-blr-bold {
    background-image: url(../images/builder-icons/bold.svg);
}

i.icon-blr-popup {
    background-image: url(../images/builder-icons/popup.svg);
}

i.icon-blr-map-marker {
    background-image: url(../images/builder-icons/map-marker.svg);
}

i.icon-blr-form {
    background-image: url(../images/builder-icons/form.svg);
}

i.icon-blr-envelope-open {
    background-image: url(../images/builder-icons/envelope.svg);
}

i.icon-blr-timer {
    background-image: url(../images/builder-icons/timer.svg);
}


i.icon-blr-textfield {
    background-image: url(../images/builder-icons/textfield.svg);
}

i.icon-blr-emailfield {
    background-image: url(../images/builder-icons/emailfield.svg);
}

i.icon-blr-selectfield {
    background-image: url(../images/builder-icons/selectfield.svg);
}

i.icon-blr-textarea {
    background-image: url(../images/builder-icons/textarea.svg);
}

i.icon-blr-radiobtn {
    background-image: url(../images/builder-icons/radiobtn.svg);
}

i.icon-blr-checkbox {
    background-image: url(../images/builder-icons/checkbox.svg);
}


i.icon-blr-datefield {
    background-image: url(../images/builder-icons/datefield.svg);
}

i.icon-blr-simpletext {
    background-image: url(../images/builder-icons/simpletext.svg);
}

i.icon-blr-attachfield {
    background-image: url(../images/builder-icons/attachfield.svg);
}

i.icon-blr-add-page {
    background-image: url(../images/builder-icons/add-page.svg);
}

i.icon-blr-sm-check {
    background-image: url(../images/builder-icons/sm-check.svg);
}

i.icon-blr-sm-cross {
    background-image: url(../images/builder-icons/sm-cross.svg);
}

i.icon-blr-lg-download {
    background-image: url(../images/builder-icons/download.svg);
}

i.icon-blr-lg-search {
    background-image: url(../images/builder-icons/search.svg);
}

i.icon-blr-lg-publishing {
    background-image: url(../images/builder-icons/lg-publishing.svg);
}

i.icon-blr-lg-loader {
    background-image: url(../images/builder-icons/lg-loader.svg);
}

i.icon-blr-lg-ftp-publishing {
    background-image: url(../images/builder-icons/ftp.svg);
    background-size: 100%;
}

i.icon-blr-lg-ftp-uploading {
    background-image: url(../images/builder-icons/ftp-loading.svg);
    background-size: 100%;
}

i.icon-blr-show-pswd {
    background-image: url(../images/builder-icons/eye.svg);
}

i.icon-blr-hide-pswd {
    background-image: url(../images/builder-icons/eye-hide.svg);
}

.main p,
.main h1,
.main h2,
.main h3,
.main h4,
.main ul.edit-typography span {
    cursor: text;
    -webkit-appearance: none;
}

.supra.black,
.supra.black h1,
.supra.black h2,
.supra.black h3,
.supra.black h4,
.supra.black h5 {
    color: #ffffff;
}

.supra h1,
.supra h2,
.supra h3,
.supra h4,
.supra h5 {
    font-family: inherit;
    line-height: 1;
}

.supra label {
    font-weight: inherit;
}

.supra h2 {
    color: #555555;
}

.supra h3 {
    font-weight: 600;
    font-size: 24px;
    color: #555555;
}

.supra h4 {
    font-weight: 600;
    color: #888888;
}

.supra h5 {
    color: #ffffff;
}

p.desc {
    color: #888;
}

.close,
button.close {
    height: 30px;
    width: 30px;
    background-image: url(../images/builder-icons/cross.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #444;
    opacity: 0.5;
    cursor: pointer;
}

.close:hover,
button.close:hover {
    opacity: 1;
}


/*------------------------*/

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.inline-b {
    display: inline-block;
}

.nopadding {
    padding: 0 !important;
}

.nopadding-right-10 {
    padding: 0 10px 0 0 !important;
}

.nopadding-left-10 {
    padding: 0 0 0 10px !important;
}

.nomargintop {
    margin-top: 0 !important;
}

.padding-top-10 {
    padding: 10px 0 0 0;
}

.height-500 {
    width: 740px;
    height: 500px;
    overflow: auto;
}

.margin-bottom--20 {
    margin-bottom: -20px;
}

.margin-top--10 {
    margin-top: -10px;
}

.margin-top--20 {
    margin-top: -20px;
}

.margin-right-20 {
    margin-right: 20px;
}

.item-margin-top-0 .item {
    margin-top: 0 !important;
}


/*------------------------*/

.nofloat {
    float: none;
}


/*------------------------*/

/* Hover element */

.wrap-hover {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: #444;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAFJJREFUSA1jVFFRcWAgAdy5c+cACcoZmEhRTI7aUQsIhtpoEI0GEcEQIKiA5qmIkaAT0BSQWnbR3AejFqDFECZ3NIgwwwRNZDSI0AIEk0vzIAIAg00E2x35GeIAAAAASUVORK5CYII=');
    background-repeat: repeat;
    background-size: 12px 12px;
    border-radius: 1px 1px 0 0;
}

.wrap-hover i {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: auto;
    color: #ffffff;
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-align-items: center;
    z-index: 3;
    border-radius: 1px 1px 0 0;
}

.wrap-hover:hover i,
.wrap-hover:focus i,
.active:not(.custom-styling) .wrap-hover i {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    /*
    cursor: grab;
    cursor: -webkit-grab;
*/
    background-color: rgba(44, 44, 44, 0.75);
}

.wrap-hover i.before-square:before {
    height: 42px;
    width: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
}


/* choice element */

.choice-element {
    width: 23%;
    height: 90px;
    padding: 20px;
    border: 2px solid transparent;
    border-radius: 2px;
    position: relative;
    margin: 0 2% 20px 0;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.choice-element.dark {
    background-color: #a3a3a3;
}

.choice-element.ico {
    padding: 0;
}

.choice-element .icon-picture {
    font-size: 24px;
    color: #555555;
}

.choice-element:last-child {
    margin: 0 0 20px 0;
}

.choice-element .btn {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 48px;
}

.choice-element .btn span {
    line-height: 1.5;
}

.choice-element .wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.choice-element > i.ok {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 10px !important;
    line-height: 17px;
    padding-left: 3px;
    color: #ffffff;
    background-color: #00C0FF;
    border-radius: 8px;
    width: 16px;
    height: 16px;
    z-index: 10;
}

.choice-element.active,
.choice-element:hover,
.choice-element:focus,
.choice-element.choosen {
    border: 2px solid #00C1FF !important;
    cursor: pointer;
}

.choice-element.active > i.ok,
.choice-element:hover > i.ok,
.choice-element:focus > i.ok,
.choice-element.choosen > i.ok {
    display: block;
}

.choice-element:hover:before,
.choice-element.active:before,
.choice-element.choosen:before,
.choice-element:focus:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    height: 12px;
    width: 12px;
    top: -7px;
    right: -7px;
    bottom: auto;
    left: auto;
    border-radius: 1px;
    background-color: #555;
    border: 2px solid #fff;
    -webkit-transition: transform .1s linear;
    -webkit-transition: -webkit-transform .1s linear;
    transition: -webkit-transform .1s linear;
    transition: transform .1s linear;
    transition: transform .1s linear, -webkit-transform .1s linear;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0;
}

.choice-element.active:before,
.choice-element.choosen:before {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.choice-element.active:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    height: 16px;
    width: 16px;
    top: -9px;
    right: -9px;
    background-color: #555;
    border-radius: 1px;
}

.choice-element.active > .bg-white-circle,
.choice-element:hover > .bg-white-circle,
.choice-element:focus > .bg-white-circle,
.choice-element.choosen > .bg-white-circle {
    content: "";
    display: block;
    background-color: #ffffff;
    border-radius: 11px;
    position: absolute;
    top: -11px;
    right: -11px;
    height: 21px;
    width: 21px;
    z-index: 5;
}


/*------------------------*/

.btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.supra-btn {
    border-radius: 1px;
    display: inline-block;
    padding: 8px 10px;
    margin-bottom: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}

.supra-btn:focus {
    outline: none;
}

.supra-btn.btn-primary {
    background-color: #00C0FF;
    color: #ffffff;
    border: 1px solid transparent;
}

.supra-btn.btn-success {
    background-color: #66D349;
    color: #ffffff;
    border: 1px solid transparent;
}

.supra-btn.btn-danger {
    background-color: #F20D32;
    color: #ffffff;
    border: 1px solid transparent;
}

.supra-btn.btn-style-text {
    position: relative;
    height: 40px;
    width: 34px;
    background-color: rgba(0, 0, 0, 0.9);
}

.supra-btn.btn-default {
    background-color: #444;
    color: #888 !important;
}

.supra-btn.btn-default:hover,
.supra-btn.btn-default:focus {
    color: #fff !important;
    border: 1px solid transparent;
}

.supra-btn.btn-default-dark {
    color: #969696;
    background-color: #444444;
    border: none;
}

.supra-btn.btn-default-dark:hover,
.supra-btn.btn-default-dark:focus,
.supra-btn.btn-default-dark.active {
    background-color: #00C0FF;
    color: #ffffff;
    border: 1px solid transparent;
}

.supra-btn.btn-control-1,
.supra-btn.btn-control-2,
.supra-btn.btn-control-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    line-height: 22px !important;
    height: 38px;
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    border-radius: 0;
    position: relative;
    float: left;
}

label.label-section {
    margin: 0;
    height: 36px;
    font-size: 13px;
    min-width: 100%;
}

label.label-section:before {
    content: attr(data-section-id);
    display: block;
    padding: 0 20px;
    position: relative;
    top: 0;
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    white-space: nowrap;
    color: #444444;
    background-color: #ffffff;
}

.wrap-control-element.outside-top .supra-btn.btn-control-1,
.wrap-control-element.outside-top .supra-btn.btn-control-2,
.wrap-control-element.outside-top .supra-btn.btn-control-3 {
    position: relative;
    top: -36px;
}

.wrap-control-element.inside-top .supra-btn.btn-control-1,
.wrap-control-element.inside-top .supra-btn.btn-control-2,
.wrap-control-element.inside-top .supra-btn.btn-control-3 {
    position: relative;
}

.wrap-control-element.inside-top.ctrl-top-left {
    left: auto;
    right: 0;
}

.supra-btn.btn-control-1:hover,
.supra-btn.btn-control-1:focus,
.supra-btn.btn-control-1.active,
.supra-btn.btn-control-2:hover,
.supra-btn.btn-control-2:focus,
.supra-btn.btn-control-2.active,
.supra-btn.btn-control-3:hover,
.supra-btn.btn-control-3:focus,
.supra-btn.btn-control-3.active {
    background-color: rgba(0, 0, 0, 1);
    color: #ffffff;
}

.supra-btn.btn-control-1:hover:after,
.supra-btn.btn-control-1:focus:after,
.supra-btn.btn-control-1.active:after,
.supra-btn.btn-control-2:hover:after,
.supra-btn.btn-control-2:focus:after,
.supra-btn.btn-control-2.active:after,
.supra-btn.btn-style-text:hover:after,
.supra-btn.btn-style-text:focus:after,
.supra-btn.btn-style-text.active:after {
    color: #00C0FF;
    height: 3px;
    content: '';
    display: block;
    border-top: 3px solid;
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
}

.supra-btn.btn-control-2:hover:after,
.supra-btn.btn-control-2:focus:after,
.supra-btn.btn-control-2.active:after {
    color: #F20D32;
}

.supra-btn.btn-control-3 {
    cursor: grab;
    cursor: -webkit-grab;
}


/* ---------------- */

.dropdown-menu {
    max-height: 500px;
    font-size: inherit;
    border-radius: 1px 0 1px 1px;
    border: 0;
    margin-top: -1px;
    background-color: #3a3a3a;
    overflow-y: auto;
}

.dropdown-menu > li > a,
.dropdown-menu > li {
    padding: 0 8px;
    color: #888 !important;
    font-weight: inherit;
    white-space: nowrap;
    line-height: 2;
    display: block;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li:hover,
.dropdown-menu > li:focus {
    color: #fff !important;
    text-decoration: none;
}

.dropdown button {
    border-radius: 1px;
    border: 1px solid #444;
    background-color: #444 !important;
    color: #fff !important;
    position: relative;
    text-align: left;
}

.dropdown button::after,
.dropdown-toggle::after {
    content: "";
    display: block;
    position: relative;
    right: auto;
    height: 7px;
    width: 7px;
    margin: 0;
    margin-top: -2px;
    border-top: none;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    border-left: none;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.dropdown:hover button::after,
.dropdown.show button::after {
    border-color: #fff;
}

.dropdown.show button::after {
    margin-top: 3px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.dropdown::after {
    content: "";
    display: block;
    clear: both;
}

.dropdown button:hover,
.dropdown button:focus,
.dropdown.open button,
.dropdown.open button:hover,
.dropdown.open button:focus {
    background-color: #444 !important;
    border: 1px solid #444 !important;
}

.dropdown button.disabled,
.dropdown button.disabled:hover,
.dropdown button.disabled:focus {
    background-color: #F8F8F8 !important;
    border: 1px solid #EEEEEE !important;
    color: #CCCCCC !important;
    cursor: default;
}

.dropdown button > span {
    width: calc(100% - 15px);
    overflow: hidden;
    text-align: left;
}

.dropdown button i {
    font-size: 16px;
    line-height: 20px !important;
    position: absolute;
    right: 5px;
    top: 7px;
}

.dropdown.open > .dropdown-menu {
    border-radius: 0;
}

.dropdown ul > li:hover,
.dropdown ul > li:focus {
    cursor: pointer;
}


/*----------------------*/

.show {
    display: block;
}

[contenteditable]:focus,
[contenteditable] {
    outline: 0px solid transparent;
    outline: none;
}


/* -------------------- */

.wrap-control,
.wrap-control-element {
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1090;
    background-color: rgba(68, 68, 68, 0.6);
    opacity: 0;
    color: #ffffff;
    overflow: visible;
}

ul:not(.page-mode-edit-sections) .wrap-control {
    display: none !important;
}

.wrap-control .wrapper {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.nav .wrap-control .wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.nav .wrap-control .wrapper label.label-section {
    height: 40px;
}

.nav .wrap-control .wrapper label.label-section:before {
    height: 40px;
}

.edit-typography .wrap-control-element.anim {
    background-color: transparent;
    -webkit-animation: text-editor-anim 230ms ease-in-out;
    animation: text-editor-anim 230ms ease-in-out;
}

@-webkit-keyframes text-editor-anim {
    0% {
        -webkit-transform: matrix(.97, 0, 0, 1, 0, 12);
        transform: matrix(.97, 0, 0, 1, 0, 12);
        opacity: 0;
    }
    20% {
        -webkit-transform: matrix(.99, 0, 0, 1, 0, 2);
        transform: matrix(.99, 0, 0, 1, 0, 2);
        opacity: .7;
    }
    40% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
        transform: matrix(1, 0, 0, 1, 0, -1);
        opacity: 1;
    }
    70% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }
    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }
}

@keyframes text-editor-anim {
    0% {
        -webkit-transform: matrix(.97, 0, 0, 1, 0, 12);
        transform: matrix(.97, 0, 0, 1, 0, 12);
        opacity: 0;
    }
    20% {
        -webkit-transform: matrix(.99, 0, 0, 1, 0, 2);
        transform: matrix(.99, 0, 0, 1, 0, 2);
        opacity: .7;
    }
    40% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
        transform: matrix(1, 0, 0, 1, 0, -1);
        opacity: 1;
    }
    70% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }
    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }
}

.wrap-control-element {
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.wrap-control-element.outside-top,
.wrap-control-element.inside-top {
    height: 0;
    bottom: auto;
    /*left: -1px;*/
    right: auto;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}

.modal.in ~ .wrap-control-element,
.modal.in ~ .wrap-control-element-icons,
.modal.in ~ .wrap-control-element-typography {
    z-index: 2055;
}

.main > ul.page-mode-edit-sections li:hover .modal.in ~ .wrap-control,
.main > ul.page-mode-edit-sections li:focus .modal.in ~ .wrap-control {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2060;
}

.unactive:hover,
.unactive:focus,
.unactive {
    cursor: default !important;
    color: #444 !important;
}


/* ---------- */

.spr-outline-control,
.spr-oc-show {
    outline: 1px solid rgba(0, 0, 0, 0.9) !important;
    outline-offset: -1px !important;
    cursor: default !important;
    z-index: 10 !important;
}

.spr-outline-control.spr-layer {
    position: relative;
    z-index: 20 !important;
}

.spr-outline-control.spr-layer .spr-outline-control {
    z-index: 25 !important;
}

.spr-outline-control.spr-layer .spr-outline-control .spr-outline-control {
    z-index: 30 !important;
}

/* ---------- */

.btn {
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
}


/* drag sections */

.marker-section {
    height: 50px;
    border: 1px dotted #00C0FF;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAEdJREFUWAnt1rENACAIBEB1DPdhavZxDod4E5uj/4TcFzCrao9guvsE8bGS8IusBQgQIECAAIGZntT0n1ABAQIECBAg8F3gAtrSBShYvc+rAAAAAElFTkSuQmCC');
    background-repeat: repeat;
    background-size: 16px 16px;
}

.preview-section-on-drag {
    position: fixed;
    width: 210px;
    z-index: 5000;
    border: 1px dotted #00C0FF;
    -webkit-box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1);
}

.preview-section-on-drag.drop {
    transition: top 0.4s, width 0.4s, left 0.4s, opacity 0.2s;
    -webkit-transition: top 0.4s, width 0.4s, left 0.4s, opacity 0.2s;
}

/**
 * iFrame
 */

.wrap-iframe {
    padding: 0 0 0 50px;
    width: 100%;
    height: 100vh;
    background-color: #333;
    overflow: hidden;
}

.wrap-iframe .wrap {
    position: relative;
    -webkit-transition: width 0.4s, height 0.4s;
    transition: width 0.4s, height 0.4s;
    -webkit-overflow-scrolling: touch;
}

.wrap-iframe .wrap.viewing-desctop {
    width: 100%;
    height: 100vh;
}

.wrap-iframe .wrap.viewing-desctop label,
.wrap-iframe .wrap.viewing-desctop .rotate,
.wrap-iframe .wrap.viewing-tablet .rotate {
    display: none;
}

.wrap-iframe .wrap label {
    position: absolute;
    top: -35px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 300;
    color: #fff;
}

.wrap-iframe .wrap label span {
    cursor: text;
}

iframe#main {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}

.wrap-iframe .wrap .rotate {
    display: inline-block;
    position: absolute;
    right: -45px;
    bottom: -45px;
    width: 40px;
    height: 40px;
    color: #ffffff;
    cursor: pointer;
}

/**
 * 2. Preloader
 */

.supra-preloader {
    display: block;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    -webkit-transition: opacity 0.8s 0.8s;
    transition: opacity 0.8s 0.8s;
    overflow: hidden;
    background-color: #333;
    z-index: 1999;
}

.run .supra-preloader {
    opacity: 0;
}

.supra-preloader img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    -webkit-transition: all 1.4s ease-out;
    transition: all 1.4s ease-out;
}

.supra-preloader .progress-bar-s {
    padding: 0 30px 30px;
    height: 10px;
    width: 300px;
    color: #444;
    position: absolute;
    bottom: 50%;
    margin-bottom: -120px;
    left: 50%;
    margin-left: -150px;
    -webkit-transition: all 2.5s ease-out;
    transition: all 2.5s ease-out;
}

.supra-preloader .progress-bar-s .progress {
    height: 2px;
    background-color: #444;
    -webkit-transition: all 2.5s ease-out;
    transition: all 2.5s ease-out;
}

.supra-preloader .progress-bar-s .progress .load {
    height: 2px;
    width: 0%;
    background-color: #FFF;
    -webkit-transition: all 2.5s ease-out;
    -webkit-transition: all 1.4s ease-out;
    transition: all 1.4s ease-out;
}

.supra-preloader .rights {
    position: absolute;
    width: 150px;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto 45px;
}

.supra-preloader .rights p {
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: 400;
    font-size: 13px;
    margin: 0;
}

.supra-preloader .rights p,
.supra-preloader .rights p a {
    color: #666;
}

/*
.run .main .wrap-drag .point-to-drag .anim-icon {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
}

.run .main .wrap-drag .point-to-drag .anim-icon i:first-child {
    display: block;
    font-size: 40px;
    color: #444;
}

.run .main .wrap-drag .point-to-drag .anim-icon i:last-child {
    display: block;
    position: absolute;
    top: -9px;
    right: -8px;
    font-size: 20px;
    color: #aaa;
}
*/

.run aside.left {
    left: 0;
}

.run aside.control-panel.active {
    left: 50px;
}

.run:after {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 0;
}

.thin:after,
.pin:after {
    display: none;
}

/*@media all and (max-width: 1024px) {*/

/*.run:after {*/

/*display: none;*/

/*}*/

/*}*/

/*
 * Breadcrumbs
 */

.breadcrumbs {
    position: fixed;
    bottom: 0;
    right: 20px;
    z-index: 6000;
}

.breadcrumbs span {
    display: inline-block;
    margin-right: 32px;
    position: relative;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
    cursor: pointer;
}

.breadcrumbs span:nth-last-child(1) {
    z-index: 1;
}

.breadcrumbs span:nth-last-child(2) {
    margin-right: 31px;
    z-index: 2;
}

.breadcrumbs span:nth-last-child(3) {
    z-index: 3;
}

.breadcrumbs span:nth-last-child(4) {
    z-index: 4;
}

.breadcrumbs span:nth-last-child(5) {
    z-index: 5;
}

.breadcrumbs span:nth-last-child(6) {
    z-index: 6;
}

.breadcrumbs span:nth-last-child(7) {
    z-index: 7;
}

.breadcrumbs span:nth-last-child(8) {
    z-index: 8;
}

.breadcrumbs span:nth-last-child(1) {
    margin-right: 0;
}

.breadcrumbs span:after {
    content: "";
    display: inline-block;
    position: absolute;
    left: -15px;
    height: 30px;
    width: calc(100% + 30px);
    -webkit-transform: matrix(1, 0, -0.3, 1, 0, 0);
    transform: matrix(1, 0, -0.3, 1, 0, 0);
    background: rgba(0, 0, 0, 0.85);
    z-index: -1;
}

.breadcrumbs span:nth-last-child(1):after {
    left: -10px;
    -webkit-transform: none;
    transform: none;
}

.breadcrumbs span:nth-last-child(1):before {
    content: "";
    position: absolute;
    left: -40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 30px;
    border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent;
    z-index: -1;
}

.breadcrumbs span:nth-child(1):after {
    background: #00BFFF;
}

.breadcrumbs span:nth-child(1):before {
    border-color: transparent transparent #00BFFF transparent;
}


/*
 * 3. Left menu
 */

aside.left {
    width: 50px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -50px;
    background: #222222;
    z-index: 1103;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    transition: left 0.8s 0.8s;
    -webkit-transition: left 0.8s 0.8s;
    outline: none;
}

aside.left nav {
    height: 100%;
}

aside.left ul {
    width: 100%;
    padding: 0;
}

aside.left ul:last-child {
    margin-bottom: 0;
}

aside.left ul li {
    position: relative;
    height: 50px;
    width: 100%;
    cursor: pointer;
}

aside.left ul li.preview.no-click {
    cursor: default;
}

aside.left ul.checking li:hover,
aside.left ul.checking li:focus,
aside.left ul.checking li.active {
    background-color: #444;
}

aside.left ul.checking li#sections.active i[class*=icon-blr] {
    background-image: url(../images/builder-icons/mode-plus-on.svg);
}

aside.left ul.checking li#global-styles.active i[class*=icon-blr] {
    background-image: url(../images/builder-icons/mode-drop-on.svg);
}

aside.left ul.checking li#project-pages.active i[class*=icon-blr] {
    background-image: url(../images/builder-icons/mode-list-on.svg);
}

aside.left ul li.unactive,
aside.left ul li.unactive:hover,
aside.left ul li.unactive:focus {
    cursor: inherit;
    background-color: transparent;
    opacity: 0.15;
}

aside.left ul li.viewing:not(.active) {
    opacity: 0.5;
}

aside.left ul li.viewing.active {
    opacity: 1;
    background: #333;
}


/*
 * 4. Control panel
 */

aside.control-panel {
    padding: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50px;
    width: 220px;
    color: #ffffff;
    background-color: #444;
    z-index: 1100;
    overflow: auto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
}

aside.control-panel > * {
    padding: 0 10px;
}

aside.control-panel:not(.custom-styling) {
    left: -270px;
}

aside.control-panel.active:not(.custom-styling) {
    left: -270px;
}

.first-show aside.control-panel.active:not(.custom-styling) {
    transition: left 0.8s 0.8s;
    -webkit-transition: left 0.8s 0.8s;
}

.run aside.control-panel.active:not(.custom-styling) {
    left: 50px;
}

.thin aside.control-panel:not(.custom-styling) {
    margin-left: -270px;
    transition: left 0.8s, margin 0.8s;
    -webkit-transition: left 0.8s, margin 0.8s;
}

.slide-show-panel aside.control-panel:not(.custom-styling) {
    transition: left 0.8s, margin 0.8s;
    -webkit-transition: left 0.8s, margin 0.8s;
}

aside.control-panel.custom-styling {
    display: none;
}

aside.control-panel.custom-styling.active {
    display: block;
}

aside.control-panel.custom-styling.supra.active.wrap:after {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -3;
}

aside.control-panel .project-pages .wrapper {
    margin: 0 -10px;
}

aside.control-panel .project-pages .wrapper > ul {
    padding: 0 10px;
}

/*aside.control-panel > ul,*/

/*aside.control-panel .global-styles,*/

/*aside.control-panel .project-pages {*/

/*display: none;*/

/*transition: opacity 0.8s;*/

/*-webkit-transition: opacity 0.8s;*/

/*}*/

aside.control-panel .global-styles,
aside.control-panel .typography {
    margin-top: 5px;
}

/*.thin aside.control-panel > ul,*/

/*.thin aside.control-panel .global-styles,*/

/*.thin aside.control-panel .project-pages {*/

/*opacity: 0;*/

/*}*/

/*aside.control-panel ul#list-tag-gs,*/
/*aside.control-panel ul.sections {*/
    /*padding: 0;*/
/*}*/

aside.control-panel ul#list-tag-gs {
    margin: 0 -10px;
    padding: 0 10px;
}

aside.control-panel ul#list-tag-gs li,
aside.control-panel ul.sections li {
    display: block;
}

aside.control-panel .title i:hover,
aside.control-panel .title i:focus {
    cursor: pointer;
}

aside.control-panel .title h3 {
    color: #888;
    padding: 17px 0;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
}

aside.control-panel .title h3 {
    display: inline-block;
    font-size: 16px;
    margin: 0;
    transition: opacity 0.8s, width 0.8s, padding 0.8s;
    -webkit-transition: opacity 0.8s, width 0.8s, padding 0.8s;
}

.thin aside.control-panel:not(.custom-styling) .title h3 {
    opacity: 0;
    padding: 17px 0;
}

aside.control-panel .title i.bookmark {
    position: absolute;
    display: inline-block;
    right: 10px;
    top: 0;
    padding: 0;
    height: 20px;
    width: 20px;
    background-color: #888888;
    transition: height 0.4s;
    -webkit-transition: height 0.4s;
}

aside.control-panel .title .close {
    position: absolute;
    top: 0;
    right: 0;
}

aside.control-panel.pin .title i.bookmark {
    height: 25px;
    background-color: #00BFFF;
}

aside.control-panel .title i.bookmark:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #888888 transparent transparent transparent;
    position: absolute;
    bottom: -10px;
}

aside.control-panel.pin .title i.bookmark:before {
    border-color: #00BFFF transparent transparent transparent;
}

aside.control-panel .title i.bookmark:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #888888 transparent transparent;
    position: absolute;
    right: 0;
    bottom: -10px;
}

aside.control-panel.pin .title i.bookmark:after {
    border-color: transparent #00BFFF transparent transparent;
}


/*section*/

aside.control-panel ul.sections li {
    padding: 15px 10px;
    margin: 0 -10px;
    border-bottom: 1px solid #515151;
}

aside.control-panel ul.sections li:hover,
aside.control-panel ul.sections li:focus,
aside.control-panel ul.sections li.active {
    background-color: #515151;
    cursor: pointer;
}


/*styles*/

aside.control-panel .global-styles .btn-group,
aside.control-panel.custom-styling .btn-group {
    margin: 0 -10px;
}

aside.control-panel.custom-styling.bg-settings .btn-group {
    margin: 0;
    padding: 0;
}

aside.control-panel .global-styles .btn-group button,
aside.control-panel.custom-styling .btn-group button {
    width: 50%;
    background-color: transparent;
    color: #ffffff !important;
    border-bottom: 2px solid #555555;
    border-left: 0px;
    border-right: 0px;
    border-radius: 0;
}

aside.control-panel .global-styles .btn-group button span,
aside.control-panel .global-styles .btn-group button i.supra,
aside.control-panel.custom-styling .btn-group button span,
aside.control-panel.custom-styling .btn-group button i.supra {
    vertical-align: middle;
}

aside.control-panel .global-styles .btn-group button i.supra,
aside.control-panel.custom-styling .btn-group button i.supra {
    margin-right: 5px;
}

aside.control-panel .global-styles .btn-group button:last-child,
aside.control-panel.custom-styling .btn-group button:last-child {
    border-radius: 0 1px 1px 0;
}

aside.control-panel .global-styles .btn-group button.active,
aside.control-panel .global-styles .btn-group button:hover,
aside.control-panel.custom-styling .btn-group button.active,
aside.control-panel.custom-styling .btn-group button:hover {
    border-bottom: 2px solid #00BFFF;
}

aside.control-panel .global-styles > ul {
    display: none;
    margin: 15px 0;
}

aside.control-panel .global-styles > ul.active {
    display: block;
}

aside.control-panel .global-styles > ul li {
    padding: 15px 10px;
    margin: 0 -10px;
    border-bottom: 1px solid #515151;
}

aside.control-panel .global-styles > ul li:hover,
aside.control-panel .global-styles > ul li:focus,
aside.control-panel .global-styles > ul li.active {
    background-color: #515151;
    cursor: pointer;
}

aside.control-panel .global-styles > ul li label {
    margin-right: 10px;
    margin-bottom: 0;
    line-height: 1.3;
    width: 100px;
}

aside.control-panel.custom-styling {
    background-color: #515151;
}

/*aside.control-panel .global-styles > button {*/

/*width: 100%;*/

/*margin: 0 auto 15px;*/

/*display: block;*/

/*}*/

aside .sp-replacer {
    padding: 0;
    width: 50%;
    height: 35px;
    border: none;
    border-radius: 1px;
    background-color: transparent;
}

aside .sp-replacer .sp-preview {
    height: 100%;
    width: 100%;
    border: none;
}

/*global-style-controls*/

aside.global-style-controls {
    padding: 5px 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: #515151;
    z-index: 1099;
    opacity: 0.75;
    transition: width 0.8s, opacity 0.8s, padding 0.25s, left 0.8s;
    -webkit-transition: width 0.8s, opacity 0.8s, padding 0.25s, left 0.8s;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
    overflow: hidden;
}

aside.global-style-controls.show {
    padding: 5px 10px;
    width: 220px;
    left: 270px;
    opacity: 1;
}

aside.global-style-controls > div {
    width: 200px;
}

aside.global-style-controls .title h3 {
    display: inline-block;
    margin: 0;
    padding: 15px 0 20px;
    max-width: 120px;
    font-size: 16px;
    color: #888;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
    transition: opacity 0.8s, width 0.8s, padding 0.8s;
    -webkit-transition: opacity 0.8s, width 0.8s, padding 0.8s;
}

aside.global-style-controls .c-element {
    height: calc( 100vh - 65px );
}

.c-element .media-group {
    margin-bottom: -1px;
}

.media-group button {
    padding: 5px;
    border: none;
    background-color: #404040;
    outline: none;
    cursor: pointer;
}

.media-group button:hover,
.media-group button:focus,
.media-group button.active {
    border: none;
    outline: none;
    background-color: #00C0FF;
}

.media-group button i {
    display: block;
    opacity: 0.25;
}

.media-group button:hover i,
.media-group button.active i,
.media-group button.isset i {
    opacity: 1;
}

aside.custom-styling .c-element {
    margin: 15px 0 0;
    height: calc( 100vh - 65px );
}

aside.custom-styling.bg-settings .c-element {
    margin: 15px 0 0;
    height: calc( 100vh - 105px );
}

aside.custom-styling .c-element.check-buttons .image-mode,
aside.custom-styling .c-element.check-buttons .video-mode,
aside.custom-styling .c-element.check-buttons .none-mode,
aside.custom-styling .c-element .image-mode,
aside.custom-styling .c-element .video-mode,
aside.custom-styling .c-element .external-mode,
aside.custom-styling .c-element .section-mode,
aside.custom-styling .c-element .modal-mode,
aside.custom-styling .c-element .simple-mail-php-mode,
aside.custom-styling .c-element .smtp-mode,
aside.custom-styling .c-element .mailchimp-mode,
aside.custom-styling .c-element .mailerlite-mode,
aside.custom-styling .c-element .activecampaing-mode,
aside.custom-styling .c-element .getresponse-mode,
aside.custom-styling .c-element .aweber-mode,
aside.custom-styling .c-element .campaignmonitor-mode {
    display: none;
}

aside.custom-styling .image ~ .c-element.check-buttons .image-mode,
aside.custom-styling .video ~ .c-element.check-buttons .video-mode,
aside.custom-styling .none ~ .c-element.check-buttons .none-mode,
aside.custom-styling .c-element.image .image-mode,
aside.custom-styling .c-element.video-popup .video-mode,
aside.custom-styling .c-element.external .external-mode,
aside.custom-styling .c-element.section-page .section-mode,
aside.custom-styling .c-element.modal-element .modal-mode,
aside.custom-styling .c-element.simple-mail-php .simple-mail-php-mode,
aside.custom-styling .c-element.smtp .smtp-mode,
aside.custom-styling .c-element.mailchimp .mailchimp-mode,
aside.custom-styling .c-element.mailerlite .mailerlite-mode,
aside.custom-styling .c-element.activecampaing .activecampaing-mode,
aside.custom-styling .c-element.getresponse .getresponse-mode,
aside.custom-styling .c-element.aweber .aweber-mode,
aside.custom-styling .c-element.campaignmonitor .campaignmonitor-mode {
    display: block;
}

aside.custom-styling .c-element .cs-radio-control ~ .modal-popup-mode,
aside.custom-styling .c-element .cs-radio-control ~ .redirect-mode {
    display: none;
}

aside.custom-styling .c-element .cs-radio-control.modal-popup ~ .modal-popup-mode,
aside.custom-styling .c-element .cs-radio-control.redirect ~ .redirect-mode {
    display: block;
}

.c-element > .item:nth-last-child(1) {
    margin-bottom: 20px;
}

.cs-element {
    margin-top: 20px;
    font-size: 12px;
    color: #aaa;
}

.cs-element.not-isset {
    opacity: 0.3;
}

.cs-element.not-isset:hover,
.cs-element.not-isset:focus {
    opacity: 1;
}

.cs-element:nth-child(1) {
    margin-top: 0;
}

.cs-element label {
    margin: 0;
    padding-bottom: 4px;
}

.cs-element.d-flex label {
    padding-bottom: 0;
}

.cs-element.cs-colorpicker.d-flex label {
    max-width: 50%;
}

.cs-element input {
    padding: 10px;
    height: 35px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 1px;
    outline: none;
}

.cs-element input:focus {
    border: none;
    outline: none;
}

.cs-element.cs-base-input input {
    width: 100%;
}

.cs-element.cs-base-textarea textarea {
    padding: 10px;
    width: 100%;
    height: 105px;
    border: none;
    color: #ffffff;
    background-color: #363636;
    resize: none;
}

.cs-element.cs-base-textarea textarea:focus,
.cs-element.cs-base-textarea textarea.active,
.cs-element.cs-base-textarea textarea:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

.cs-element.input-img-preview .wrap-hover {
    overflow: hidden;
}

.cs-element.dropdown-el-full .dropdown button {
    width: 100%;
    color: #fff;
}

.cs-element.cs-half-input input {
    width: 50%;
}

.cs-element.dropdown-el-half label,
.cs-element.dropdown-el-half .dropdown {
    width: 50%;
}

.cs-element.dropdown-el-half .dropdown button {
    width: 100%;
}

.cs-element.dropdown-el-half .dropdown button i {
    right: 5px;
}

.cs-element.dropdown-el-half .dropdown .dropdown-menu {
    right: 0;
    left: auto !important;
}

.cs-element.fourth-input-cp label {
    display: block;
}

.cs-element.fourth-input-cp input {
    width: 25%;
    border-right: 1px solid #555;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.cs-element.fourth-input-cp .sp-replacer {
    position: relative;
    width: 25% !important;
}

.cs-element.fourth-input-cp input:nth-last-child(1) {
    border: none;
}

.cs-element.input-img-preview figure {
    margin: 0;
    height: 120px;
    border-radius: 1px 1px 0 0;
}

/*.cs-element.input-img-preview figure .img {*/

/*position: absolute;*/

/*top: 0;*/

/*bottom: 0;*/

/*left: 0;*/

/*right: 0;*/

/*z-index: 3;*/

/*}*/

/*.cs-element.input-img-preview figure img {*/

/*max-width: 100%;*/

/*height: auto;*/

/*position: relative;*/

/*z-index: 2;*/

/*}*/

/*.cs-element.input-img-preview .preview-bg figure img {*/

/*display: none;*/

/*}*/

/*.cs-element.input-img-preview figure .bg-test {*/

/*display: none;*/

/*position: absolute;*/

/*top: 0;*/

/*right: 0;*/

/*bottom: 0;*/

/*left: 0;*/

/*z-index: 1;*/

/*}*/

.cs-element.input-img-preview i {
    cursor: pointer;
}

.cs-element.input-img-preview figcaption {
    display: none;
}

.cs-element.input-img-preview .input-image,
.cs-element.input-img .input-image {
    position: relative;
}

.cs-element.input-img-preview .input-image input,
.cs-element.input-img .input-image input {
    padding: 10px 35px 10px 10px;
    width: 100%;
    height: 32px;
    background-color: #444;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 0 0 1px 1px;
}

.cs-element.input-img-preview .input-image i,
.cs-element.input-img .input-image i {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    opacity: 0.5;
}

.cs-element.input-img-preview .input-image i:hover,
.cs-element.input-img .input-image i:hover {
    opacity: 1;
}

.cs-element.cs-opacity .value {
    display: inline-block;
    margin: 0 0 0 5px;
}

.cs-element.bg-position .wrapper .item {
    position: relative;
    width: 33.33%;
    height: 40px;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    background-color: #444;
}

.cs-element.bg-position .wrapper .item:nth-child(3),
.cs-element.bg-position .wrapper .item:nth-child(6),
.cs-element.bg-position .wrapper .item:nth-child(9) {
    border-right: none;
}

.cs-element.bg-position .wrapper .item:nth-child(7),
.cs-element.bg-position .wrapper .item:nth-child(8),
.cs-element.bg-position .wrapper .item:nth-child(9) {
    border-bottom: none;
}

.cs-element.bg-position .wrapper .item:hover,
.cs-element.bg-position .wrapper .item.active {
    background-color: #00BFFF;
}

.cs-element.bg-position .wrapper .item:before {
    content: "";
    display: block;
    margin: 10px 0 0 10px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

/*

.cs-element.bg-position .wrapper .item.top-left:before {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}

.cs-element.bg-position .wrapper .item.top-center:before {
    margin: 10px 0 0 0;
    width: 100%;
    border-top: 1px solid #fff;

}

.cs-element.bg-position .wrapper .item.top-right:before {
    margin: 10px 10px 0 0;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

.cs-element.bg-position .wrapper .item.center-left:before {
    margin: 0 0 0 10px;
    height: 100%;
    border-left: 1px solid #fff;
}
*/

.cs-element.bg-position .wrapper .item.top-left {
    border-radius: 1px 0 0 0;
}

.cs-element.bg-position .wrapper .item.top-right {
    border-radius: 0 1px 0 0;
}

.cs-element.bg-position .wrapper .item.bottom-right {
    border-radius: 0 0 1px 0;
}

.cs-element.bg-position .wrapper .item.bottom-left {
    border-radius: 0 0 0 1px;
}

.cs-element.bg-position .wrapper .item.center-center:before {
    margin: 0 0 0 -1px;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 16px;
    width: 0;
    border-right: 2px solid #666;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cs-element.bg-position .wrapper .item.center-center:after {
    content: "";
    display: block;
    margin: -1px 0 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0;
    width: 16px;
    border-top: 2px solid #666;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/*
.cs-element.bg-position .wrapper .item.center-right:before {
    margin: 0 10px 0 0;
    height: 100%;
    border-right: 1px solid #fff;
}

.cs-element.bg-position .wrapper .item.bottom-left:before {
    margin: 0 0 10px 10px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
}

.cs-element.bg-position .wrapper .item.bottom-center:before {
    margin: 0 0 10px 0;
    width: 100%;
    border-bottom: 1px solid #fff;

}

.cs-element.bg-position .wrapper .item.bottom-right:before {
    margin: 0 10px 10px 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}
*/

.cs-element.bg-size .size-input {
    display: none !important;
}

.cs-element.bg-size.show-custom-size .size-input {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.cs-element.bg-size button,
.cs-element.bg-color button {
    width: 100%;
}

.cs-element.bg-size .size-input,
.cs-element.bg-color .color-input {
    margin-top: 4px;
}

.cs-element.bg-size .size-input input,
.cs-element.bg-color .color-input .sp-replacer {
    width: 49% !important;
}

.cs-element.bg-color.none .spectrum.first ~ .sp-replacer,
.cs-element.bg-color.none .spectrum.second ~ .sp-replacer {
    display: none;
}

.cs-element.bg-color.solid .spectrum.second ~ .sp-replacer {
    display: none;
}

.cs-element.cs-pm .wrapper,
.cs-element.cs-border .wrapper,
.cs-element.cs-radius .wrapper,
.cs-element.cs-coordinates .wrapper {
    height: 120px;
    padding: 5px 0;
    background-color: #444;
    border-radius: 1px;
}

.cs-element.cs-pm input.top,
.cs-element.cs-pm input.bottom,
.cs-element.cs-border input.top,
.cs-element.cs-border input.bottom,
.cs-element.cs-coordinates input.top,
.cs-element.cs-coordinates input.bottom,
.cs-element.cs-radius .center-center {
    margin: 0 33.33%;
}

.cs-element.cs-pm input,
.cs-element.cs-pm .item,
.cs-element.cs-border input,
.cs-element.cs-border .item,
.cs-element.cs-radius input,
.cs-element.cs-radius .item,
.cs-element.cs-coordinates input,
.cs-element.cs-coordinates .item {
    width: 33.33%;
}

.cs-element.cs-pm .center-center {
    height: 31px;
    margin-top: 2px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAHhJREFUOBGlzksKgDAMBNBGPIB0p0vvfyhXuvMKcWZREOknMQNDS2EeFVVdU0ob6s2NwSEiKlxGoRkAMLlw0vP+KHM0oXuBcD/56EwmsqAhiAgTggoSgt7Ib+iL/IJqiBtqIS6oh5ihEWKCLMgQsiJdyIM0IS9ShR6EP1g0y2RB+wAAAABJRU5ErkJggg==');
    background-size: 7px 7px;
    background-position: left bottom;
}

.cs-element.cs-border .center-center {
    height: 31px;
    margin-top: 2px;
    border: 2px solid #666;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cs-element.cs-radius .center-center {
    height: 35px;
}

.cs-element.cs-radius .center-center div {
    width: 20px;
    height: 10px;
}

.cs-element.cs-radius .center-center div:nth-child(1) {
    margin-right: 10px;
    border-left: 2px solid #666;
    border-top: 2px solid #666;
    border-radius: 5px 0 0 0;
}

.cs-element.cs-radius .center-center div:nth-child(2) {
    margin-left: 10px;
    border-right: 2px solid #666;
    border-top: 2px solid #666;
    border-radius: 0 5px 0 0;
}

.cs-element.cs-radius .center-center div:nth-child(3) {
    margin-right: 10px;
    border-left: 2px solid #666;
    border-bottom: 2px solid #666;
    border-radius: 0 0 0 5px;
}

.cs-element.cs-radius .center-center div:nth-child(4) {
    margin-left: 10px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    border-radius: 0 0 5px 0;
}

.cs-element.cs-coordinates .center-center {
    position: relative;
    height: 36px;
}

.cs-element.cs-coordinates .wrapper .item.center-center:before {
    content: "";
    display: block;
    margin: 0;
    margin-left: -1px;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 16px;
    width: 2px;
    background: #666;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cs-element.cs-coordinates .wrapper .item.center-center:after {
    content: "";
    display: block;
    margin: 0;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2px;
    width: 16px;
    background: #666;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.cs-element.cs-size input {
    width: 44%;
}

.cs-element.cs-size i {
    cursor: pointer;
}

/* buttons switch */

.cs-element.buttons-switch:not(.custom-buttons) .wrapper button {
    width: 50%;
    height: 36px;
    background-color: #363636;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 2px;
    color: #bbb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.cs-element.buttons-switch:not(.custom-buttons) .wrapper button.active {
    color: #fff;
}

.cs-element.buttons-switch .wrapper button i {
    display: block;
    margin: auto;
}

.cs-element.buttons-switch.three .wrapper button {
    width: 32%;
}

.cs-element.buttons-switch.four .wrapper button {
    width: 25%;
}

.cs-element.buttons-switch .wrapper button:first-child {
    border-radius: 1px 0 0 1px;
}

.cs-element.buttons-switch .wrapper button:last-child {
    border-radius: 0 1px 1px 0;
}

/*
.cs-element.buttons-switch .wrapper button:hover {
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
*/

/*
.cs-element.buttons-switch:not(.three) .wrapper button i {
    margin-right: 10px;
}
*/

.cs-element.buttons-switch:not(.buttons-type) .wrapper .active {
    background-color: #00C0FF;
}

.cs-element.buttons-switch .media-group button.active {
    background-color: #00C0FF;
}

.cs-element.buttons-switch.custom-buttons .item {
    margin: 5px 0 0;
    padding: 7px;
    width: 49%;
    background-color: #363636;
    border: 2px solid #363636;
    border-radius: 1px;
}

.cs-element.buttons-switch.custom-buttons .item:nth-child(1),
.cs-element.buttons-switch.custom-buttons .item:nth-child(2) {
    margin: 0;
}

.cs-element.buttons-switch.custom-buttons .item.active {
    background-color: #00C0FF;
}

.cs-element.buttons-switch.custom-buttons .item.active,
.cs-element.buttons-switch.custom-buttons .item:hover {
    border: 2px solid #00C0FF;
}

.cs-element.buttons-switch.custom-buttons .item *:nth-child(1) {
    width: 100%;
}

.cs-element.buttons-switch.custom-buttons .item label {
    font-size: 12px;
    color: #888;
    margin-top: 10px;
    padding: 0;
}

.cs-element.buttons-switch.custom-buttons .item.active label {
    color: #FFF;
}

.cs-element.buttons-switch.custom-buttons .item .preview-container {
    border-radius: 1px;
    min-height: 60px;
}

.light .cs-element.buttons-switch.custom-buttons .item .preview-container {
    background-color: #eee;
}

.dark .cs-element.buttons-switch.custom-buttons .item .preview-container {
    background-color: #444;
}

.cs-element.buttons-switch.custom-buttons .item .preview-container > * {
    margin: 0;
}

/* button type */

.cs-element.buttons-type .wrapper .item {
    cursor: pointer;
}

.cs-element.buttons-type .wrapper .item:hover {
    background-color: #00C0FF;
}

.cs-element.custom-buttons .wrapper .btn {
    padding: 0;
    text-align: center;
    height: 40px;
    font-weight: normal;
    font-size: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.cs-element.custom-buttons .wrapper .btn:hover {
    background-color: transparent;
    border-color: transparent;
}

.cs-element.custom-buttons .wrapper .btn-primary,
.cs-element.custom-buttons .wrapper .btn-primary:hover,
.cs-element.custom-buttons .wrapper .btn-primary:active,
.cs-element.custom-buttons .wrapper .btn-secondary,
.cs-element.custom-buttons .wrapper .btn-secondary:hover,
.cs-element.custom-buttons .wrapper .btn-secondary:active {
    background-origin: border-box !important;
}

.cs-element.custom-buttons .wrapper .btn-outline-primary,
.cs-element.custom-buttons .wrapper .btn-outline-primary:hover,
.cs-element.custom-buttons .wrapper .btn-outline-primary:active,
.cs-element.custom-buttons .wrapper .btn-outline-secondary,
.cs-element.custom-buttons .wrapper .btn-outline-secondary:hover,
.cs-element.custom-buttons .wrapper .btn-outline-secondary:active {
    background-color: transparent;
    background-image: none;
}


/*------------------ SUCCESS ----------------*/

.cs-element.custom-buttons .wrapper .btn-success {
    color: #fff;
    background-color: #48B54A;
    border-color: #48B54A;
}

.cs-element.custom-buttons .wrapper .btn-success:hover,
.cs-element.custom-buttons .wrapper .btn-success:active {
    color: #fff;
    background-color: #36A838;
    border-color: #36A838;
}

.cs-element.custom-buttons .wrapper .btn-outline-success {
    color: #48B54A;
    background-color: transparent;
    background-image: none;
    border-color: #48B54A;
}

.cs-element.custom-buttons .wrapper .btn-outline-success:hover,
.cs-element.custom-buttons .wrapper .btn-outline-success:active {
    border-color: #36A838;
}

/*------------------ INFO ----------------*/

.cs-element.custom-buttons .wrapper .btn-info {
    color: #fff;
    background-color: #44ADC7;
    border-color: #44ADC7;
}

.cs-element.custom-buttons .wrapper .btn-info:hover,
.cs-element.custom-buttons .wrapper .btn-info:active {
    color: #fff;
    background-color: #0FA2BA;
    border-color: #0FA2BA;
}

.cs-element.custom-buttons .wrapper .btn-outline-info {
    color: #44ADC7;
    background-color: transparent;
    background-image: none;
    border-color: #44ADC7;
}

.cs-element.custom-buttons .wrapper .btn-outline-info:hover,
.cs-element.custom-buttons .wrapper .btn-outline-info:active {
    border-color: #0FA2BA;
}

/*------------------ WARNING ----------------*/

.cs-element.custom-buttons .wrapper .btn-warning {
    color: #222;
    background-color: #FFDB46;
    border-color: #FFDB46;
}

.cs-element.custom-buttons .wrapper .btn-warning:hover,
.cs-element.custom-buttons .wrapper .btn-warning:active {
    color: #222;
    background-color: #FFEA50;
    border-color: #FFEA50;
}

.cs-element.custom-buttons .wrapper .btn-outline-warning {
    color: #222;
    background-color: transparent;
    background-image: none;
    border-color: #FFDB46;
}

.cs-element.custom-buttons .wrapper .btn-outline-warning:hover,
.cs-element.custom-buttons .wrapper .btn-outline-warning:active {
    border-color: #FFEA50;
}

/*------------------ DANGER ----------------*/

.cs-element.custom-buttons .wrapper .btn-danger {
    color: #fff;
    background-color: #D24136;
    border-color: #D24136;
}

.cs-element.custom-buttons .wrapper .btn-danger:hover,
.cs-element.custom-buttons .wrapper .btn-danger:active {
    color: #fff;
    background-color: #C4372C;
    border-color: #C4372C;
}

.cs-element.custom-buttons .wrapper .btn-outline-danger {
    color: #D24136;
    background-color: transparent;
    background-image: none;
    border-color: #D24136;
}

.cs-element.custom-buttons .wrapper .btn-outline-danger:hover,
.cs-element.custom-buttons .wrapper .btn-outline-danger:active {
    border-color: #C4372C;
}

/*------------------ LIGHT ----------------*/

.cs-element.custom-buttons .wrapper .btn-light {
    color: #222;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

.cs-element.custom-buttons .wrapper .btn-light:hover,
.cs-element.custom-buttons .wrapper .btn-light:active {
    color: #222;
    background-color: #F4F4F4;
    border-color: #F4F4F4;
}

.cs-element.custom-buttons .wrapper .btn-outline-light {
    color: #FFFFFF;
    background-color: transparent;
    background-image: none;
    border-color: #FFFFFF;
}

.cs-element.custom-buttons .wrapper .btn-outline-light:hover,
.cs-element.custom-buttons .wrapper .btn-outline-light:active {
    border-color: #F4F4F4;
}

/*------------------ DARK ----------------*/

.cs-element.custom-buttons .wrapper .btn-dark {
    color: #FFF;
    background-color: #232122;
    border-color: #232122;
}

.cs-element.custom-buttons .wrapper .btn-dark:hover,
.cs-element.custom-buttons .wrapper .btn-dark:active {
    color: #FFF;
    background-color: #111;
    border-color: #111;
}

.cs-element.custom-buttons .wrapper .btn-outline-dark {
    color: #232122;
    background-color: transparent;
    background-image: none;
    border-color: #232122;
}

.cs-element.custom-buttons .wrapper .btn-outline-dark:hover,
.cs-element.custom-buttons .wrapper .btn-outline-dark:active {
    border-color: #111;
}

/*------------------ FACEBOOK ----------------*/

.cs-element.custom-buttons .wrapper .btn-fb {
    color: #fff;
    background-color: #4460A0;
    border-color: #4460A0;
}

.cs-element.custom-buttons .wrapper .btn-fb:hover,
.cs-element.custom-buttons .wrapper .btn-fb:active {
    color: #fff;
    background-color: #3b5998;
    border-color: #3b5998;
}

.cs-element.custom-buttons .wrapper .btn-outline-fb {
    color: #4460A0;
    background-color: transparent;
    background-image: none;
    border-color: #4460A0;
}

.cs-element.custom-buttons .wrapper .btn-outline-fb:hover,
.cs-element.custom-buttons .wrapper .btn-outline-fb:active {
    border-color: #2e4c89;
}

/*------------------ TWITTER ----------------*/

.cs-element.custom-buttons .wrapper .btn-tw {
    color: #fff;
    background-color: #00aced;
    border-color: #00aced;
}

.cs-element.custom-buttons .wrapper .btn-tw:hover,
.cs-element.custom-buttons .wrapper .btn-tw:active {
    color: #fff;
    background-color: #009ed9;
    border-color: #009ed9;
}

.cs-element.custom-buttons .wrapper .btn-outline-tw {
    color: #00aced;
    background-color: transparent;
    background-image: none;
    border-color: #00aced;
}

.cs-element.custom-buttons .wrapper .btn-outline-tw:hover,
.cs-element.custom-buttons .wrapper .btn-outline-tw:active {
    border-color: #0394cb;
}


/*------------------ GOOGLE ----------------*/

.cs-element.custom-buttons .wrapper .btn-gp {
    color: #fff;
    background-color: #dd4b39;
    border-color: #dd4b39;
}

.cs-element.custom-buttons .wrapper .btn-gp:hover,
.cs-element.custom-buttons .wrapper .btn-gp:active {
    color: #fff;
    background-color: #d1412f;
    border-color: #d1412f;
}

.cs-element.custom-buttons .wrapper .btn-outline-gp {
    color: #dd4b39;
    background-color: transparent;
    background-image: none;
    border-color: #dd4b39;
}

.cs-element.custom-buttons .wrapper .btn-outline-gp:hover,
.cs-element.custom-buttons .wrapper .btn-outline-gp:active {
    border-color: #c33d2c;
}

/*------------------ LINKEDIN ----------------*/

.cs-element.custom-buttons .wrapper .btn-li {
    color: #fff;
    background-color: #007bb6;
    border-color: #007bb6;
}

.cs-element.custom-buttons .wrapper .btn-li:hover,
.cs-element.custom-buttons .wrapper .btn-li:active {
    color: #fff;
    background-color: #0673a7;
    border-color: #0673a7;
}

.cs-element.custom-buttons .wrapper .btn-outline-li {
    color: #007bb6;
    background-color: transparent;
    background-image: none;
    border-color: #007bb6;
}

.cs-element.custom-buttons .wrapper .btn-outline-li:hover,
.cs-element.custom-buttons .wrapper .btn-outline-li:active {
    border-color: #066d9f;
}

/*------------------ LINK ----------------*/

.btn-link {
    font-weight: inherit;
    color: inherit;
}

.btn-link,
.btn-link:active {
    background-color: transparent;
}

.btn-link,
.btn-link:focus,
.btn-link:active {
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-link:hover {
    border-color: transparent;
}

.btn-link:focus,
.btn-link:hover {
    color: inherit;
    text-decoration: underline;
    background-color: transparent;
}

.cs-element.buttons-type ~ .show-image-mode {
    display: none;
}

.cs-element.buttons-type.image ~ .show-image-mode {
    display: block;
}

.cs-element.media-padding .dropdown button {
    width: 100%;
    height: 55px;
    border: none;
    background-color: #363636 !important;
}

.cs-element.media-padding .dropdown button:hover,
.cs-element.media-padding .dropdown button:focus {
    border: none !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.cs-element.media-padding .dropdown.padding-top:after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAHhJREFUOBGlzksKgDAMBNBGPIB0p0vvfyhXuvMKcWZREOknMQNDS2EeFVVdU0ob6s2NwSEiKlxGoRkAMLlw0vP+KHM0oXuBcD/56EwmsqAhiAgTggoSgt7Ib+iL/IJqiBtqIS6oh5ihEWKCLMgQsiJdyIM0IS9ShR6EP1g0y2RB+wAAAABJRU5ErkJggg==');
    background-size: 7px 7px;
    background-color: #222;
    opacity: 0.65;
}

.cs-element.media-padding .dropdown.padding-top .dropdown-menu,
.cs-element.media-padding .dropdown.padding-bottom .dropdown-menu {
    text-align: center;
}

.cs-element.media-padding .dropdown button > span {
    width: auto;
    padding-right: 15px;
}

/*
.cs-element.media-padding .dropdown button i {
    position: static;
}
*/

.cs-element.media-padding .media-group button.active {
    background-color: #00C0FF;
}

.cs-element.cs-opacity .wrapper {
    position: relative;
}

.cs-element.cs-opacity .wrapper .run-way {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    width: 10%;
    height: 2px;
    background-color: #00C0FF;
    z-index: -1;
}

.cs-element.cs-opacity .wrapper:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    width: 100%;
    height: 2px;
    background-color: #444;
    z-index: -2;
}

.cs-element.cs-opacity .wrapper .runner {
    display: inline-block;
    position: relative;
    left: 10%;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    border: 2px solid #00C0FF;
    background-color: #444;
    cursor: pointer;
}

/* switch */

.cs-element.cs-switch-group .switch {
    height: 35px;
    width: 60px;
    overflow: hidden;
    border-radius: 1px;
}

.cs-element.cs-switch-group .switch:hover,
.cs-element.cs-switch-group .switch:focus {
    cursor: pointer;
}

.cs-element.cs-switch-group .switch input {
    display: none;
}

.cs-element.cs-switch-group .switch .wrap {
    width: 95px;
    position: relative;
    left: 0;
    transition: 0.5s background-color linear, 0.5s left;
    -webkit-transition: 0.5s background-color linear, 0.5s left;
}

.cs-element.cs-switch-group .switch .switch-label {
    display: inline-block;
    margin: 5px 30px 5px 30px;
    width: 25px;
    height: 25px;
    background-color: #666666;
}

.cs-element.cs-switch-group .switch.switch-on .wrap {
    background-color: #00C0FF;
}

.cs-element.cs-switch-group .switch.switch-on .wrap .switch-label {
    background-color: #ffffff;
}

.cs-element.cs-switch-group .switch.switch-off .wrap {
    background-color: #464646;
    left: -25px;
}

/* buttons size */

.cs-element.buttons-size button {
    width: 50px;
    height: 36px;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #4b4b4b;
    background-color: #363636;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.cs-element.buttons-size button:first-child {
    border-radius: 1px 0 0 1px;
}

.cs-element.buttons-size button:last-child {
    border-radius: 0 1px 1px 0;
}

.cs-element.buttons-size button:hover {
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.cs-element.buttons-size .active {
    color: #fff;
    background-color: #18c1fc;
}

.cs-element.buttons-size label {
    color: #a0a0a0;
    font-size: 12px;
}

/* buttons icon */

.cs-element.buttons-icon button {
    width: 50px;
    height: 36px;
    background-color: #363636;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #4b4b4b;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.cs-element.buttons-icon button:first-child {
    border-radius: 1px 0 0 1px;
}

.cs-element.buttons-icon button:last-child {
    border-radius: 0 1px 1px 0;
}

.cs-element.buttons-icon button:hover {
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.cs-element.buttons-icon .active {
    color: #fff;
    background-color: #18c1fc;
}

.cs-element.buttons-icon label {
    color: #a0a0a0;
    font-size: 12px;
}

/* button unlink */

.cs-element.button-unlink button {
    width: 100%;
    height: 36px;
    background-color: #F20D32;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #ffffff;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.cs-element.button-unlink.hide {
    display: none!important;
}

/*project-pages*/

aside.control-panel .project-pages .wrapper {
    height: calc(100vh - 300px);
}

aside.control-panel .project-pages li {
    padding: 20px 10px;
    margin: 0 -10px;
}

aside.control-panel .project-pages li:hover,
aside.control-panel .project-pages li:focus,
aside.control-panel .project-pages li.active {
    background-color: #515151;
    cursor: pointer;
}

aside.control-panel .project-pages li .control-wrap {
    float: right;
}

aside.control-panel .project-pages li span {
    display: inline-block;
    width: 115px;
    margin-right: 5px;
    word-wrap: break-word;
    -webkit-word-wrap: break-word;
}

aside.control-panel .project-pages li .control-wrap i,
aside.control-panel .project-pages li:nth-last-child(1) i {
    margin-right: 10px;
}

aside.control-panel .project-pages li .control-wrap i:last-child {
    margin-right: 0;
}

aside.control-panel .project-pages li .control-wrap i:hover,
aside.control-panel .project-pages li .control-wrap i:focus {
    color: #00c0ff;
}

aside.control-panel .project-pages li .control-wrap i:last-child:hover,
aside.control-panel .project-pages li .control-wrap i:last-child:focus {
    color: #F20D32;
}

aside.control-panel .project-pages li:first-child .control-wrap i:last-child {
    cursor: default;
    color: #5E5E5E;
}

aside.control-panel .project-pages li:first-child .control-wrap i:last-child:hover,
aside.control-panel .project-pages li:first-child .control-wrap i:last-child:focus {
    color: #5E5E5E;
}

aside.control-panel .project-pages li:nth-last-child(1):hover,
aside.control-panel .project-pages li:nth-last-child(1):focus {
    color: #00c0ff;
}

aside.control-panel .project-pages li:nth-last-child(1) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

aside.control-panel .project-pages li.pin-bottom:nth-last-child(1) {
    border-top: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.9);
    width: 220px;
}

aside.control-panel .project-pages .btn-ex-im-d {
    padding: 0;
    margin-left: -10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

aside.control-panel .project-pages .btn-ex-im-d .supra-btn {
    border-radius: 0;
    -webkit-appearance: none;
}

aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(1),
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(2),
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(3) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 33.33%;
    float: left;
    background-color: #515151;
    padding: 5px 10px;
    height: 66px;
}

aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(1),
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(2) {
    border-right: 1px solid #444;
}

aside.control-panel .project-pages .btn-ex-im-d .new-project i {
    font-size: 20px;
}

aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(1) span,
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(2) span,
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(3) span {
    vertical-align: top;
    line-height: 18px;
}

aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(1):hover,
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(2):hover,
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(3):hover,
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(1):focus,
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(1):focus,
aside.control-panel .project-pages .btn-ex-im-d .supra-btn:nth-child(3):focus {
    background-color: #555;
}

aside.control-panel .project-pages .btn-ex-im-d .download,
aside.control-panel .project-pages .btn-ex-im-d .ftp-publish {
    width: 50%;
    padding: 25px 10px;
}

aside.control-panel .project-pages .btn-ex-im-d .download.no-click,
aside.control-panel .project-pages .btn-ex-im-d .ftp-publish.no-click {
    cursor: default;
}

aside.control-panel .project-pages .btn-ex-im-d .download:hover,
aside.control-panel .project-pages .btn-ex-im-d .download:focus {
    /*    background-color: #6cdd42;*/
}

aside.control-panel .project-pages .btn-ex-im-d .download i,
aside.control-panel .project-pages .btn-ex-im-d .ftp-publish i {
    height: 40px;
    width: 40px;
    margin: 0 auto 10px auto;
    display: block;
}

aside.control-panel .project-pages .btn-ex-im-d .download span,
aside.control-panel .project-pages .btn-ex-im-d .ftp-publish span {
    font-weight: bold;
}

aside.control-panel .apply {
    padding: 12px 20px;
    font-size: inherit;
}

aside.control-panel .nice-scroll {
    height: calc( 100vh - 66px );
}

aside.control-panel #list-tag-gs {
    height: calc( 100vh - 125px );
}


/*
 * 5. Add section items
 */

aside.add-sections-items {
    position: fixed;
    width: 0;
    opacity: 0.75;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 5px 0 0;
    background-color: #515151;
    transition: width 0.8s, opacity 0.8s, padding 0.25s, left 0.8s;
    -webkit-transition: width 0.8s, opacity 0.8s, padding 0.25s, left 0.8s;
    z-index: 1099;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
}

aside.add-sections-items.show {
    padding: 5px;
    width: 230px;
    left: 270px;
    opacity: 1;
}

.add-s-i-hide aside.add-sections-items {
    left: 50px;
    opacity: 0;
}

aside.add-sections-items > ul {
    padding: 0;
    overflow: hidden;
    line-height: 0;
}

aside.add-sections-items > ul li {
    display: block;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
    min-height: 30px;
    width: 220px;
}

aside.add-sections-items > ul li:first-child {
    margin-top: 0;
}

aside.add-sections-items > ul li img {
    max-width: 230px;
    width: 100%;
}

aside.add-sections-items > ul li:first-child {
    margin-top: 0;
}

aside.add-sections-items > ul li .add-section {
    background-color: rgba(0, 192, 255, 0.9);
}

aside.add-sections-items > ul li.wrap-hover:hover,
aside.add-sections-items > ul li.wrap-hover:focus {
    cursor: grab;
    cursor: -webkit-grab;
}

aside.add-sections-items > ul li.wrap-hover {
    background: none;
}


/*
 * 6. Message
 */

.message {
    /*border-radius: 2px;*/
    border: 1px solid #969696;
    padding: 10px 30px 10px 10px;
    position: relative;
    width: 100%;
    margin: 20px auto 0;
    display: none;
}

.message i {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 15px;
    color: #ffffff;
}

.message i:hover,
.message i:focus {
    cursor: pointer;
}


/*
 * 7. Modal popup
 */

.modal {
    z-index: 1002050;
}

.modal .modal-dialog {
    margin: 0;
    max-width: 1200px;
}

.modal .modal-dialog.page-settings {
    width: 600px;
}

.modal .modal-dialog.ftp-settings {
    width: 500px;
}

.modal .modal-dialog.ftp-settings .radio-inline {
    width: 60px;
}

.modal .modal-dialog.ftp-settings .lbl {
    color: #888888;
}

#modal-form-container .modal {
    z-index: 1096;
}

.modal-open .modal {
    overflow: auto !important;
    /*    background: rgba(0, 0, 0, 0.5);*/
}

#modal-container .modal-header h5 {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

#modal-container .modal-content .dropdown button i {
    font-size: 16px;
}

/*

#modal-container .modal-header .upload i {
    font-size: 18px;
    position: relative;
    top: 3px;
}
*/

#modal-container .modal-header .modal-title h4 {
    margin: 0 20px 0 0;
    float: left;
    line-height: 32px;
    font-size: 16px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
}

#modal-container .modal-content {
    border-radius: 0 !important;
    color: #444;
    overflow: visible;
}

#modal-container .modal-header,
#modal-container .modal-body {
    padding: 30px;
    border: none;
}

#modal-container .modal-body {
    padding-top: 0;
}

#modal-container .modal-footer {
    padding: 0;
    border: none;
}

#modal-container .modal-footer button {
    display: block;
    width: 50%;
    margin: 0 !important;
    border-radius: 0;
    border: none;
    float: left;
    height: 50px;
    letter-spacing: 0.25px;
}

#modal-container .modal-footer.one-button button {
    width: 100%;
}

#modal-container .modal-content {
    border: 1px solid transparent;
    background-color: #555;
}

#modal-container .modal-content input {
    height: 38px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 1px;
    padding: 6px 40px 6px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

#modal-container .modal-content input[type="checkbox"] {
    height: 20px;
    width: 20px;
    padding: 0px;
    margin: 0;
}

#modal-container .modal-content label {
    line-height: 14px;
    text-align: left;
}

#modal-container .modal-content input.choice-text {
    padding: 6px 12px;
}

#modal-container .modal-content input[disabled] {
    color: #F20D32;
    background-color: #f8f8f8;
    border-color: #eee;
}

#modal-container .modal-content textarea {
    resize: none;
    width: 100%;
    height: 100px;
    color: #ffffff;
    background-color: #444444;
    border: none;
    padding: 12px 12px;
    border-radius: 1px;
}

#modal-container .modal-content textarea:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

#modal-container .modal-content .item {
    margin-top: 15px;
}

#modal-container .modal-content div:first-child .item:first-child {
    margin-top: 0;
}

/*
#modal-container .modal-content .btn-page-control ~ div .item:first-child {
    margin-top: 20px;
}
*/

#modal-container .modal-content .item.icons {
    margin-top: 10px;
}

#modal-container .modal-content label {
    display: block;
    height: 15px;
}

#modal-container .modal-content .item > div:not(.radio) label,
#modal-container .modal-content .item > label,
#modal-container .modal-content .item.lbl {
    color: #888888;
}

#modal-container .modal-content.checkbox-inline + .checkbox-inline,
#modal-container .modal-content.radio-inline + .radio-inline {
    margin-right: 40px;
}

#modal-container .choice-images,
#modal-container .choice-videos,
#modal-container .choice-text {
    width: 100%;
}

#modal-container .choice-images ~ i,
#modal-container .choice-videos ~ i,
#modal-container .choice-text ~ i {
    position: absolute;
    right: 10px;
    margin-top: 10px;
    color: #444;
    cursor: pointer;
}

#modal-container .modal-content .double-dropdown {
    margin-top: 0;
    width: 38%;
}

#modal-container .modal-content .double-dropdown button {
    width: 100%;
}

#modal-container .modal-content .colorpicker {
    height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: 0.8s height, 0.8s opacity, 0.8s margin-top;
    -webkit-transition: 0.8s height, 0.8s opacity, 0.8s margin-top;
}

#modal-container .modal-content .colorpicker.two-cp,
#modal-container .modal-content .colorpicker.one-cp {
    height: 40px;
    opacity: 1;
    margin-top: 20px;
}

#modal-container .modal-content .colorpicker .sp-replacer {
    width: 80px;
    height: 40px;
    padding: 0;
    background-color: transparent;
    border: 1px solid #e8e8e8;
    border-radius: 1px;
    margin-right: 20px;
    display: none;
}

#modal-container .modal-content .colorpicker .sp-preview {
    height: 100%;
    width: 100%;
    border: none;
}

#modal-container .modal-content .colorpicker .sp-replacer .sp-dd {
    padding: 20px 0;
    height: 100%;
    line-height: 0;
    margin-left: 1px;
}

#modal-container .modal-content .colorpicker.two-cp [name=colorpicker_main] + .sp-replacer,
#modal-container .modal-content .colorpicker.one-cp [name=colorpicker_main] + .sp-replacer {
    display: inline-block;
}

#modal-container .modal-content .colorpicker.two-cp [name=colorpicker_grnt] + .sp-replacer {
    display: inline-block;
}

#modal-container .modal-content figure {
    position: relative;
}

#modal-container .modal-content figure .img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

#modal-container .modal-content figure img {
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

#modal-container .modal-content .preview-bg figure img {
    display: none;
}

#modal-container .modal-content figure .bg-test {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

#modal-container .modal-content .preview-bg figure .bg-test {
    display: block;
}

#modal-container .modal-content .preview-bg figure .wrap-hover {
    height: 150px;
    -webkit-transition: height 0.4s;
    transition: height 0.4s;
}

#modal-container .modal-content .preview-bg figure .wrap-hover .img {
    background-position: center;
}

#modal-container .modal-content i.icon-folder-picture:hover,
#modal-container .modal-content i.icon-folder-picture:focus,
#modal-container .modal-content i.icon-folder-film:hover,
#modal-container .modal-content i.icon-folder-film:focus {
    cursor: pointer;
}

#modal-container .modal-content figure figcaption {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.4;
    color: #999;
}

#modal-container .modal-content figure:hover figcaption,
#modal-container .modal-content figure.active figcaption {
    color: #fff;
}

#modal-container .modal-content .aospreview {
    position: relative;
    height: 270px;
    background-color: #f8f8f8;
    border: 1px solid #e8e8e8;
}

#modal-container .modal-content .aospreview:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    height: 0;
    width: 100%;
    border-bottom: 1px dotted #ddd;
    z-index: 1;
}

#modal-container .modal-content .aospreview:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    height: 100%;
    width: 0;
    border-right: 1px dotted #ddd;
    z-index: 1;
}

#modal-container .modal-content .aospreview .aoselement-preview {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #888888;
    z-index: 2;
}

#modal-container .modal-content .custom-size {
    height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: 0.8s height, 0.8s opacity, 0.8s margin-top;
    -webkit-transition: 0.8s height, 0.8s opacity, 0.8s margin-top;
}

#modal-container .modal-content .show-custom-size .custom-size {
    height: 40px;
    opacity: 1;
    margin-top: 20px;
    width: 38%;
}

/* switch skin */

#modal-container .switch-skin > button {
    width: 50%;
    height: 40px;
    background-color: #444444;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #969696;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

#modal-container .switch-skin > button:first-child {
    border-radius: 1px 0 0 1px;
}

#modal-container .switch-skin > button:last-child {
    border-radius: 0 1px 1px 0;
}

#modal-container .switch-skin > button:hover {
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#modal-container .switch-skin > button i {
    margin-right: 10px;
}

#modal-container .switch-skin.light-skin > .light-skin {
    color: #fff;
    background-color: #00C0FF;
}

#modal-container .switch-skin.dark-skin > .dark-skin {
    color: #fff;
    background-color: #00C0FF;
}

/* switch custom */

#modal-container .switch-custom > button {
    width: 50%;
    height: 40px;
    background-color: #444444;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #969696;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

#modal-container .switch-custom > button:first-child {
    border-radius: 1px 0 0 1px;
}

#modal-container .switch-custom > button:last-child {
    border-radius: 0 1px 1px 0;
}

#modal-container .switch-custom > button:hover {
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#modal-container .switch-custom > button i {
    margin-right: 10px;
}

#modal-container .switch-custom > .active {
    color: #fff;
    background-color: #00C0FF;
}

/* switch visibility and align */

#modal-container .switch-visibility,
#modal-container .switch-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

#modal-container .switch-visibility button i,
#modal-container .switch-align button i,
#modal-container .switch-skin button i {
    position: relative;
    top: 2px;
}

#modal-container .modal-dialog:not(.page-settings) .switch-skin button span {
    position: relative;
    top: -2px;
}

#modal-container .switch-visibility > button,
#modal-container .switch-align > button {
    width: 32%;
    height: 40px;
    background-color: #efefef;
    border: none;
    border-radius: 1px;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #bbb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

#modal-container .switch-visibility > button:hover,
#modal-container .switch-align > button:hover {
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#modal-container .switch-visibility button.active,
#modal-container .switch-align button.active {
    color: #fff;
    background-color: #00C0FF;
}



/* button check */

#modal-container .modal-content .icon-check:before {
    position: relative;
    top: 1px;
    left: 1px;
}


/* section settings */

#modal-container .modal-content .section-set-dropdown {
    padding: 0;
}

#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) {
    margin: 0;
    padding: 22px 20px 18px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 1px;
}

#modal-container .modal-content .section-set-dropdown .item:not(.item-separator):nth-child(1) {
    border-bottom: none;
}

#modal-container .modal-content .section-set-dropdown .item:not(.item-separator):nth-child(1):after {
    content: "";
    display: block;
    position: relative;
    bottom: -18px;
    height: 0;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
}

#modal-container .modal-content .section-set-dropdown .item:not(.item-separator):nth-child(2) {
    border-top: none;
}

#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) label {
    width: 56%;
    height: 22px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 22px;
    float: left;
}

#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) .dropdown {
    height: 22px;
    float: left;
    width: 44%;
}

#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) .dropdown > button,
#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) .dropdown > button:hover,
#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) .dropdown > button:focus,
#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) .dropdown.open > button:hover,
#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) .dropdown.open > button:focus {
    /*padding-top: 0;*/
    /*padding-bottom: 0;*/
    padding: 0;
    background-color: #ffffff !important;
    outline: 0 !important;
    border: none !important;
}

#modal-container .modal-content .section-set-dropdown .item:not(.item-separator) .dropdown > button i {
    line-height: 20px;
    top: 0;
}

#modal-container .modal-content .section-settings .item {
    padding-left: 40px;
}

#modal-container .modal-content .section-settings .item:first-child {
    margin-top: 0;
}

#modal-container .modal-content .separator {
    width: 100%;
}

#modal-container .modal-content .close {
    position: absolute;
    top: 0;
    right: 0;
}



/* range style */

#modal-container input[type=range] {
    -webkit-appearance: none;
    margin: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 6px 0;
    border: none;
}

#modal-container input[type=range]:focus {
    outline: none;
}

#modal-container input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    animate: 0.2s;
    background: #EEEEEE;
}

#modal-container input[type=range]::-webkit-slider-thumb {
    border: 1px solid #00C0FF;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
}

#modal-container input[type=range]:focus::-webkit-slider-runnable-track {
    background: #CBCBCB;
    outline: none;
}

#modal-container input[type=range]::-moz-range-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    animate: 0.2s;
    background: #EEEEEE;
}

#modal-container input[type=range]::-moz-range-thumb {
    border: 1px solid #00C0FF;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

#modal-container input[type=range]::-ms-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    animate: 0.2s;
    background: #EEEEEE;
    border-color: transparent;
    color: transparent;
}

#modal-container input[type=range]::-ms-thumb {
    border: 1px solid #00C0FF;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}


/*separator*/

#modal-container .separator-or {
    position: relative;
    overflow: hidden;
}

#modal-container .separator-or .wrap {
    font-size: 13px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#modal-container .separator-or .wrap span {
    height: 26px;
    width: 26px;
    border-radius: 13px;
    background-color: #ffffff;
}


/* Group buttons greys*/

#modal-container .gray-buttons-group {
    border-radius: 0;
}

#modal-container .gray-buttons-group button {
    border-radius: 0;
    width: 33.33%;
}

#modal-container .gray-buttons-group button:first-child {
    border-right: none;
    border-radius: 1px 0 0 1px;
}

#modal-container .gray-buttons-group button:last-child {
    border-left: none;
    border-radius: 0 1px 1px 0;
}


/* switch */

#modal-container .switch-group label {
    height: 15px;
    margin-right: 15px;
}

#modal-container .switch {
    /*    height: 42px;*/
    width: 78px;
    overflow: hidden;
    border-radius: 1px;
}

#modal-container .switch:hover,
#modal-container .switch:focus {
    cursor: pointer;
}

#modal-container .switch input {
    display: none;
}

#modal-container .switch .wrap {
    width: 117px;
    position: relative;
    left: 0;
    transition: 0.5s background-color linear, 0.5s left;
    -webkit-transition: 0.5s background-color linear, 0.5s left;
}

#modal-container .switch-group .switch.switch-on .wrap {
    background-color: #00C0FF;
    color: #ffffff;
}

#modal-container .switch-group .switch.switch-off .wrap {
    background-color: #969696;
    color: #ffffff;
    left: -39px;
}

#modal-container .switch .wrap span {
    height: 30px;
    width: 29px;
    margin: 5px;
    float: left;
    font-size: 10px;
}

#modal-container .switch .wrap .switch-label {
    transition: 0.5s background-color linear;
    -webkit-transition: 0.5s background-color linear;
    font-size: 14px;
}

/*
#modal-container .switch .wrap .switch-label:after {
    content: "|||";
    display: block;
    position: relative;
    top: -1px;
    color: #ddd;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0px;
}
*/

#modal-container .switch .wrap .switch-label {
    background-color: #ffffff;
    color: #969696;
    border-radius: 1px;
}

/* switch visibility and align */

#modal-container .switch-visibility,
#modal-container .switch-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

#modal-container .switch-visibility > button,
#modal-container .switch-align > button {
    width: 32%;
    height: 40px;
    background-color: #efefef;
    border: none;
    border-radius: 1px;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #bbb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

#modal-container .switch-visibility > button:hover,
#modal-container .switch-align > button:hover {
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#modal-container .switch-visibility button.active,
#modal-container .switch-align button.active {
    color: #fff;
    background-color: #00C0FF;
}

/* gallery */

#modal-container .gallery figure,
#modal-container .gallery-video .video-item {
    width: 16.6666%;
    height: 128px !important;
    padding: 6px 6px;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0;
    cursor: pointer;
}

.modal.fade .modal-dialog {
    -webkit-perspective: 1000;
}

#modal-container .gallery-video .video-item {
    height: 145px !important;
}

#modal-container .gallery-video .video-item {
    height: auto;
}

#modal-container .gallery figure .wrap-hover,
#modal-container .gallery-video .video-item .wrap-hover {
    height: 83px;
    min-height: auto;
    border: 2px solid transparent;
    border-radius: 1px;
    background-color: #444;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAFJJREFUSA1jVFFRcWAgAdy5c+cACcoZmEhRTI7aUQsIhtpoEI0GEcEQIKiA5qmIkaAT0BSQWnbR3AejFqDFECZ3NIgwwwRNZDSI0AIEk0vzIAIAg00E2x35GeIAAAAASUVORK5CYII=');
    padding: 5px;
    cursor: pointer;
}

#modal-container .gallery figure:hover .wrap-hover,
#modal-container .gallery figure:focus .wrap-hover,
#modal-container .gallery figure.active .wrap-hover,
#modal-container .gallery-video .video-item:hover .wrap-hover,
#modal-container .gallery-video .video-item:focus .wrap-hover,
#modal-container .gallery-video .video-item.active .wrap-hover {
    border: 2px solid #00C1FF;
}

#modal-container .gallery figure:not(.active):hover .wrap-hover:before,
#modal-container .gallery figure:not(.active):focus .wrap-hover:before,
#modal-container .gallery-video .video-item:not(.active):hover .wrap-hover:before,
#modal-container .gallery-video .video-item:not(.active):focus .wrap-hover:before,
#modal-container .gallery figure.active .wrap-hover:before,
#modal-container .gallery-video .video-item.active .wrap-hover:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    height: 12px;
    width: 12px;
    top: -7px;
    right: -7px;
    bottom: auto;
    left: auto;
    border-radius: 1px;
    background-color: #555;
    border: 2px solid #fff;
    -webkit-transition: transform .1s linear;
    -webkit-transition: -webkit-transform .1s linear;
    transition: -webkit-transform .1s linear;
    transition: transform .1s linear;
    transition: transform .1s linear, -webkit-transform .1s linear;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0;
}

#modal-container .gallery figure.active .wrap-hover:before,
#modal-container .gallery-video .video-item.active .wrap-hover:before {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

#modal-container .gallery figure.active .wrap-hover:after,
#modal-container .gallery-video .video-item.active .wrap-hover:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    height: 16px;
    width: 16px;
    top: -9px;
    right: -9px;
    background-color: #555;
    border-radius: 1px;
}

/*
#modal-container .gallery figure .wrap-hover:hover,
#modal-container .gallery figure .wrap-hover:focus,
#modal-container .gallery figure.active .wrap-hover,
#modal-container .gallery-video .video-item .wrap-hover:hover,
#modal-container .gallery-video .video-item .wrap-hover:focus,
#modal-container .gallery-video .video-item.active .wrap-hover {
    background: rgb(0, 192, 255);
    border: 1px solid rgb(0, 192, 255);
}
*/

#modal-container .gallery figcaption p,
#modal-container .gallery-video .name-video {
    margin: 0;
    word-wrap: break-word;
    -webkit-word-wrap: break-word;
}

#modal-container .gallery-video .name-video {
    font-size: 11px;
    margin-top: 5px;
}

#modal-container .gallery-video .video-item .wrap-hover span {
    font-size: 40px;
}

#modal-container .dropdown-menu {
    border: 1px solid #e8e8e8;
}

.g-items .tab-pane .wrapper {
    overflow: hidden;
}

.modal-gallery {
    width: 740px;
    height: 500px;
}

.modal-gallery .preloader {
    border-color: #FFF;
}

.g-items .nav-tabs {
    position: relative;
    border-bottom: none;
    padding-left: 6px;
    margin: -10px 0 10px 0;
    z-index: 1;
}

.g-items .nav-tabs:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: -30px;
    right: -30px;
    border-bottom: 2px solid #444444;
    z-index: -1;
}

.g-items .nav-tabs .nav-link {
    color: #888888;
    border: none;
    border-radius: 0;
}

.g-items .nav-tabs .nav-item {
    margin-bottom: 0;
}

.g-items .nav-tabs .nav-item.show .nav-link,
.g-items .nav-tabs .nav-link.active,
.g-items .nav-tabs .nav-link:hover {
    color: #ffffff;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #00C0FF;
    position: relative;
}

#supra-modal-gallery .search {
    position: relative;
}

#supra-modal-gallery .search i {
    margin: auto;
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
}

#supra-modal-gallery .search input {
    margin: 0 0 0 20px;
    padding: 6px 20px 6px 38px;
    height: 34px;
}

/*.g-items .nav-tabs .nav-item.show .nav-link,*/

/*.g-items .nav-tabs .nav-link.active {*/

/*content: "";*/

/*display: block;*/

/*border-bottom: 3px solid #00C0FF;*/

/*position: absolute;*/

/*left: 0;*/

/*right: 0;*/

/*bottom: 0;*/

/*}*/

/* Magnific */

.mfp-bg {
    z-index: 1099;
}

.mfp-wrap {
    z-index: 1100;
}

.mfp-container {
    /*padding: 0 0 0 50px;*/
}

.mfp-arrow-left {
    left: 0;
}

.mfp-arrow-right {
    right: 0;
}


/* Upoad button */

#modal-container .upload input {
    display: none;
}

#modal-container .upload button {
    background-color: #00C0FF;
    color: #ffffff;
    border: 0;
    padding: 6px 12px;
    border-radius: 1px;
    letter-spacing: 0.25px;
    cursor: pointer;
}

#modal-container .upload button i {
    margin-right: 10px;
    vertical-align: middle;
}


/* icons */

#modal-container .icons .ico {
    width: 9%;
    height: 46px;
    float: left;
    border: none;
    margin: 0 1% 5px 0;
}

#modal-container .icons .ico:hover,
#modal-container .icons .ico:focus {
    cursor: pointer;
}


/* preloader input image */

#modal-container .modal-content .pre-input-img {
    height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: 0.8s height, 0.8s opacity, 0.8s margin-top;
    -webkit-transition: 0.8s height, 0.8s opacity, 0.8s margin-top;
}

#modal-container .modal-content .pre-input-img .item:first-child {
    margin: 0;
}

#modal-container .modal-content .show-input-img .pre-input-img {
    height: 65px;
    opacity: 1;
    margin-top: 20px;
}

#modal-container .modal-content .hide-setting-btn-html .item:nth-last-child(1),
#modal-container .modal-content .hide-setting-btn-html .item:nth-last-child(2) {
    width: 33.33%;
    float: left;
}

#modal-container .modal-content .hide-setting-btn-html {
    height: 85px;
    transition: 0.4s height, 0.8s margin-top;
    -webkit-transition: 0.4s height, 0.8s margin-top;
}

#modal-container .modal-content .show-input-img .hide-setting-btn-html {
    overflow: hidden;
    height: 0;
    margin-top: 0;
}

#modal-container .modal-content .show-input-img .pre-input-img.height-240 {
    height: 240px;
}


/* control buttons of settings page */

#modal-container .modal-content .btn-page-control .item {
    margin-top: -10px !important;
}

#modal-container .modal-content .btn-page-control ~ div {
    display: none;
}

#modal-container .modal-content .btn-page-control ~ div.seo {
    display: none !important;
}

#modal-container .modal-content .btn-page-control.general ~ .general {
    display: block;
}

#modal-container .modal-content .btn-page-control.seo ~ .seo {
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex !important;
}

#modal-container .modal-content .btn-page-control.s-preloader ~ .s-preloader {
    display: block;
}

#modal-container .modal-content .btn-page-control .btn-group.gray-buttons-group:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: -30px;
    right: -30px;
    border-bottom: 2px solid #444444;
    z-index: 0;
}

#modal-container .modal-content .btn-page-control .supra-btn.btn-default-dark {
    color: #ffffff;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #444444;
    position: relative;
    z-index: 1;
}

#modal-container .modal-content .btn-page-control .supra-btn.btn-default-dark:hover,
#modal-container .modal-content .btn-page-control .supra-btn.btn-default-dark:focus,
#modal-container .modal-content .btn-page-control .supra-btn.btn-default-dark.active {
    color: #ffffff;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #00C0FF;
    position: relative;
    z-index: 1;
}

#modal-container .modal-content .s-preloader .choice-element {
    margin-bottom: 10px;
    color: #ffffff;
    background-color: #444444;
}

#modal-container .modal-content .item-width-50 .item {
    width: 50%;
    float: left;
}

#modal-container .modal-content .radio-control,
#modal-container .modal-content .field-checkbox {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#modal-container .modal-content #prev-preload > div > div,
#modal-container .modal-content #prev-preload > div > div > *,
#modal-container .modal-content #prev-preload > div > div:before,
#modal-container .modal-content #prev-preload > div > div:after {
    background-color: #000;
    border-color: #000;
}

#modal-container .modal-content .radio-control ~ div {
    display: none;
}

#modal-container .modal-content .radio-control.simple-mail-php ~ .simple-mail-php {
    display: block;
}

#modal-container .modal-content .radio-control.smtp ~ .smtp {
    display: block;
}

#modal-container .modal-content .radio-control.mailchimp ~ .mailchimp {
    display: block;
}

#modal-container .modal-content .radio-control.mailerlite ~ .mailerlite {
    display: block;
}

#modal-container .modal-content .radio-control.activecampaing ~ .activecampaing {
    display: block;
}

#modal-container .modal-content .radio-control.getresponse ~ .getresponse {
    display: block;
}

#modal-container .modal-content .radio-control.aweber ~ .aweber {
    display: block;
}

#modal-container .modal-content .radio-control.campaignmonitor ~ .campaignmonitor {
    display: block;
}

#modal-container .modal-content .radio-control.external ~ .external {
    display: block;
}

#modal-container .modal-content .radio-control.section ~ .section {
    display: block;
}

#modal-container .modal-content .radio-control.section-page ~ .section-page {
    display: block;
}

#modal-container .modal-content .radio-control.image ~ .image {
    display: block;
}

#modal-container .modal-content .radio-control.video-popup ~ .video-popup {
    display: block;
}

#modal-container .modal-content .radio-control.modal-popup ~ .modal-popup {
    display: block;
}

#modal-container .modal-content .radio-control.redirect ~ .redirect {
    display: block;
}

#modal-container .modal-content .radio-control.image-background ~ .image-background {
    display: block;
}

#modal-container .modal-content .radio-control.video-background ~ .video-background {
    display: block;
}

#modal-container .modal-content .radio-control.none ~ .none {
    display: block;
}

#modal-container .modal-content .radio-control.ftp ~ .ftp {
    display: block;
}

#modal-container .modal-content .radio-control.ftps ~ .ftps {
    display: block;
}

#modal-container .modal-content .radio-control.sftp ~ .sftp {
    display: block;
}

#modal-container .modal-content .radio-control.form-settings-radio .radio {
    margin-bottom: 0 !important;
}

#modal-container .modal-content .radio-control.form-settings-radio .radio-inline {
    margin-bottom: 15px;
}

#modal-container .modal-content .radio-control.image-background ~ .preview-bg,
#modal-container .modal-content .radio-control.video-background ~ .preview-bg {
    min-height: 500px;
}

#modal-container .modal-content .radio-control.none ~ .preview-bg,
#modal-container .modal-content .nav-pr-bg {
    float: right;
}

#modal-container .modal-content .nav-pr-bg ~ .image-background,
#modal-container .modal-content .radio-control.none ~ .none .range,
#modal-container .modal-content .radio-control.none ~ .none figcaption,
#modal-container .modal-content .radio-control.none ~ .none .none,
#modal-container .modal-content .hide-switch .none,
#modal-container .modal-content .nav-pr-bg figcaption {
    display: none;
}

#modal-container .modal-content .radio-control.google-maps-embed-api ~ .google-maps-embed-api {
    display: block;
}

#modal-container .modal-content .radio-control.google-maps-javascript-api ~ .google-maps-javascript-api {
    display: block;
}

#modal-container .modal-content .video-popup p,
#modal-container .modal-content .modal-popup p {
    color: #888888;
}

#modal-form-container.page-mode-edit-sections .modal-content {
    position: relative !important;
}


/* element settings */

#modal-container .modal-content .duration {
    margin-left: 40px;
    margin-right: 10px;
    width: 22.8%;
}

#modal-container .modal-content .delay {
    margin-right: 10px;
    width: 22.8%;
}

#modal-container .modal-content .repeat-aos {
    padding: 0;
    width: 32%;
}

/* modal preloader */

#modal-container .modal-preloader {
    display: none;
}

#modal-container .modal-preloader.active {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9);
}

#modal-container .modal-preloader.active .wrapper {
    height: 30px;
    width: 30px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#modal-container .modal-preloader .timer {
    position: relative;
    width: 30px;
    height: 30px;
    border: 2px solid #aaa;
    background: #fff;
    border-radius: 50%;
}

#modal-container .modal-preloader .timer .arrow_sec {
    position: absolute;
    height: 10px;
    width: 1px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -1px;
    background: #aaa;
    -webkit-animation: rotation 1s linear 0s infinite;
    animation: rotation 1s linear 0s infinite;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

#modal-container .modal-preloader .timer .arrow_min {
    position: absolute;
    height: 5px;
    width: 1px;
    top: 50%;
    left: 50%;
    margin: -5px 0 0 -1px;
    background: #aaa;
    -webkit-animation: rotation 6s linear 0s infinite;
    animation: rotation 6s linear 0s infinite;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* code editor */

.html-code-editor {
    width: 70%;
}

.CodeMirror {
    height: 150px;
    border-radius: 1px;
}

.html-code-editor .CodeMirror {
    height: 60vh;
}

/*
#modal-container .modal-content .CodeMirror-scroll {
    background-color: #f4f4f4;
}
*/

#modal-container .btn {
    padding: 0px 10px;
}

#modal-thumb {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -70px;
    width: 70px;
    max-height: 100vh;
    background-color: #464646;
    -webkit-transition: right 0.3s;
    transition: right 0.3s;
    z-index: 1;
}

#modal-thumb.collapse-thumb {
    right: 0;
}

#modal-thumb.collapse-thumb + .wrap-iframe {
    padding: 0 70px 0 50px;
}

#modal-thumb .item {
    position: relative;
    width: 100%;
    height: 60px;
    background-size: 95%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#modal-thumb .item:after {
    content: "";
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #222;
    opacity: 0.9;
}

#modal-thumb .item:before {
    content: "";
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/builder-icons/eye.svg);
    background-position: center;
    background-repeat: no-repeat;
}

#modal-thumb .item:hover:after,
#modal-thumb .item.active:after,
#modal-thumb .item:hover:before,
#modal-thumb .item.active:before {
    display: block;
}

#modal-thumb.edit-project-page {
    display: none;
}

#modal-thumb .title {
    padding: 10px;
    color: #ffffff;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/*#modal-container .btn.btn-default {*/

/*border-color: #000000;*/

/*}*/

/*
 * 7.a. collapse modal thumb button
 */

#collapse-popup-thumb {
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    background-color: #222;
    cursor: pointer;
    -webkit-transition: right 0.3s;
    transition: right 0.3s;
}

#collapse-popup-thumb.show {
    display: block;
}

#modal-thumb.collapse-thumb + #collapse-popup-thumb {
    right: 100px;
}


#modal-thumb.edit-project-page + #collapse-popup-thumb {
    display: none !important;
}

/*
 * 8. Group buttons of control
 */

.control-buttons-group {
    display: block;
    position: absolute;
    top: -43px;
    left: 0;
    color: #ffffff;
}

.control-buttons-group > button {
    margin: 0 !important;
}


/*
 * 9. Main
 */

.run .main {
    min-height: 100vh;
    background-color: #333;
    opacity: 1;
}

.main > ul.loading {
    display: none;
    height: 100vh;
}

.main > ul.loading.blr-active-page {
    display: block;
}

.main .wrap-drag {
    background-color: #333;
    padding: 90px;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

.run .main .wrap-drag {
    opacity: 1;
}

.run .main .wrap-drag .point-to-drag {
    margin: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    border: 2px dotted #4c4c4c;
    border-radius: 4px;
    color: #aaa;
}

.run .main .wrap-drag .point-to-drag img {
    margin-bottom: 20px;
    opacity: 0.5;
}

.main {
    margin: 0;
    opacity: 0;
    transition: margin 0.8s 0.8s, opacity 1.6s 1.6s;
    -webkit-transition: margin 0.8s 0.8s, opacity 1.6s 1.6s;
}

.main > ul {
    padding: 0;
    margin: 0;
}

/*.main > ul.spr-active-page {*/

/*display: block;*/

/*z-index: 1;*/

/*}*/

.main > ul.load-page {
    display: block;
    visibility: hidden;
}

.main > ul > li {
    display: block;
    padding: 0;
    margin: 0;
    position: relative;
}

.main > ul > li.section-item.absolute-top,
.main > ul > li.section-item.fixed-top,
.main > ul > li.section-item.fixed-bottom,
.main > ul > li.section-item.sticky-top {
    position: initial;
}

.main > ul > li.section-item.absolute-top nav,
.main > ul > li.section-item.fixed-top nav,
.main > ul > li.section-item.fixed-bottom nav,
.main > ul > li.section-item.sticky-top nav {
    position: static;
}

.main > ul > li.section-item .wrap-control {
    cursor: grab;
    cursor: -webkit-grab;
}

.main > ul > li.section-item .modal ~ .wrap-control {
    cursor: default;
}

.main > ul > li.section-item .modal:not(.show) ~ .wrap-control {
    display: none !important;
}

.main > ul .buttons-control,
.main > ul .buttons-control-typography,
.main > ul .buttons-control-form,
.main > ul .buttons-control-icons,
#modal-form-container .buttons-control,
#modal-form-container .buttons-control-typography,
#modal-form-container .buttons-control-form,
#modal-form-container .buttons-control-icons {
    position: relative;
}

.main > ul .buttons-control-icons,
#modal-form-container .buttons-control-icons {
    line-height: 1;
}

.main > ul .buttons-control-typography > *,
#modal-form-container .buttons-control-typography > * {
    outline: 0px solid transparent;
    outline: none;
    word-wrap: normal;
}

.main > ul.edit-elements .buttons-control:hover,
.main > ul.edit-elements .buttons-control:focus,
.main > ul.edit-elements .buttons-control-form:hover,
.main > ul.edit-elements .buttons-control-form:focus,
.main > ul.edit-typography .buttons-control-typography:hover,
.main > ul.edit-typography .buttons-control-typography:focus,
.main > ul.edit-typography .buttons-control-icons:hover,
.main > ul.edit-typography .buttons-control-icons:focus,
#modal-form-container.edit-elements .buttons-control:hover,
#modal-form-container.edit-elements .buttons-control:focus,
#modal-form-container.edit-elements .buttons-control-form:hover,
#modal-form-container.edit-elements .buttons-control-form:focus,
#modal-form-container.edit-typography .buttons-control-typography:hover,
#modal-form-container.edit-typography .buttons-control-typography:focus,
#modal-form-container.edit-typography .buttons-control-icons:hover,
#modal-form-container.edit-typography .buttons-control-icons:focus {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    z-index: 1000 !important;
}

.main > ul.edit-elements .buttons-control:hover,
.main > ul.edit-elements .buttons-control:focus,
.main > ul.edit-elements .buttons-control-form:hover,
.main > ul.edit-elements .buttons-control-form:focus,
#modal-form-container.edit-elements .buttons-control:hover,
#modal-form-container.edit-elements .buttons-control:focus,
#modal-form-container.edit-elements .buttons-control-form:hover,
#modal-form-container.edit-elements .buttons-control-form:focus,
#modal-form-container.edit-typography .buttons-control-typography:hover,
#modal-form-container.edit-typography .buttons-control-typography:focus,
#modal-form-container.edit-typography .buttons-control-icons:hover,
#modal-form-container.edit-typography .buttons-control-icons:focus {
    outline: 1px solid rgba(0, 0, 0, 0.9);
    outline-offset: -1px;
}

.main > ul.edit-typography .buttons-control-typography:hover > *:first-child,
.main > ul.edit-typography .buttons-control-typography:focus > *:first-child,
.main > ul.edit-typography .buttons-control-icons:hover > *:first-child,
.main > ul.edit-typography .buttons-control-icons:focus > *:first-child {
    outline: 1px dotted rgba(0, 0, 0, 0.8);
    outline-offset: -1px;
}

.main > ul.edit-elements .spr-child-active:hover,
.main > ul.edit-elements .spr-child-active:focus,
.main > ul.edit-elements .spr-child-active:hover,
.main > ul.edit-elements .spr-child-active:focus,
.main > ul.edit-typography .buttons-control-typography.spr-child-active:hover,
.main > ul.edit-typography .buttons-control-typography.spr-child-active:focus,
.main > ul.edit-typography .buttons-control-icons.spr-child-active:hover,
.main > ul.edit-typography .buttons-control-icons.spr-child-active:focus,
#modal-form-container.edit-elements .spr-child-active:hover,
#modal-form-container.edit-elements .spr-child-active:focus,
#modal-form-container.edit-elements .spr-child-active:hover,
#modal-form-container.edit-elements .spr-child-active:focus,
#modal-form-container.edit-typography .buttons-control-typography.spr-child-active:hover,
#modal-form-container.edit-typography .buttons-control-typography.spr-child-active:focus,
#modal-form-container.edit-typography .buttons-control-icons.spr-child-active:hover,
#modal-form-container.edit-typography .buttons-control-icons.spr-child-active:focus {
    outline: 1px solid rgba(0, 0, 0, 0.25) !important;
    outline-offset: -1px !important;
}

.main > ul.edit-elements .buttons-control:hover > .g-map,
.main > ul.edit-elements .buttons-control:focus > .g-map {
    outline-offset: 0;
}

.main > ul.edit-elements .buttons-control:hover .buttons-control:hover,
.main > ul.edit-elements .buttons-control:focus .buttons-control:focus,
.main > ul.edit-elements .buttons-control-form:hover .buttons-control:hover,
.main > ul.edit-elements .buttons-control-form:focus .buttons-control:focus,
#modal-form-container.edit-elements .buttons-control:hover .buttons-control:hover,
#modal-form-container.edit-elements .buttons-control:focus .buttons-control:focus,
#modal-form-container.edit-elements .buttons-control-form:hover .buttons-control:hover,
#modal-form-container.edit-elements .buttons-control-form:focus .buttons-control:focus {
    z-index: 1091 !important;
}

.main > ul.edit-elements .buttons-control:hover .buttons-control:hover .buttons-control:hover,
.main > ul.edit-elements .buttons-control:focus .buttons-control:focus .buttons-control:focus,
.main > ul.edit-elements .buttons-control-form:hover .buttons-control:hover .buttons-control:hover,
.main > ul.edit-elements .buttons-control-form:focus .buttons-control:focus .buttons-control:focus,
#modal-form-container.edit-elements .buttons-control:hover .buttons-control:hover .buttons-control:hover,
#modal-form-container.edit-elements .buttons-control:focus .buttons-control:focus .buttons-control:focus,
#modal-form-container.edit-elements .buttons-control-form:hover .buttons-control:hover .buttons-control:hover,
#modal-form-container.edit-elements .buttons-control-form:focus .buttons-control:focus .buttons-control:focus {
    z-index: 1092 !important;
}

.main > ul.page-mode-edit-sections li:hover .wrap-control,
.main > ul.page-mode-edit-sections li:focus .wrap-control,
.main > ul.edit-elements .buttons-control:hover > .wrap-control-element,
.main > ul.edit-elements .buttons-control:focus > .wrap-control-element,
.main > ul.edit-elements .buttons-control-form:hover > .wrap-control-element,
.main > ul.edit-elements .buttons-control-form:focus > .wrap-control-element,
.main > ul.edit-typography .buttons-control-icons:hover > .wrap-control-element,
.main > ul.edit-typography .buttons-control-icons:focus > .wrap-control-element,
#modal-form-container.page-mode-edit-sections .buttons-control:hover > .wrap-control-element,
#modal-form-container.page-mode-edit-sections .buttons-control:focus > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control:hover > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control:focus > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control-form:hover > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control-form:focus > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-icons:hover > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-icons:focus > .wrap-control-element {
    opacity: 1;
}

.main > ul.page-mode-edit-sections li:hover .nav-start-hide,
.main > ul.page-mode-edit-sections li:focus .nav-start-hide {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

.main > ul.page-mode-edit-sections li:hover .wrap-control,
.main > ul.page-mode-edit-sections li:focus .wrap-control,
.main > ul.edit-elements .buttons-control:hover > .wrap-control-element,
.main > ul.edit-elements .buttons-control:focus > .wrap-control-element,
.main > ul.edit-elements .buttons-control-form:hover > .wrap-control-element,
.main > ul.edit-elements .buttons-control-form:focus > .wrap-control-element,
.main > ul.edit-typography .buttons-control-typography:hover > .wrap-control-element,
.main > ul.edit-typography .buttons-control-typography:focus > .wrap-control-element,
.main > ul.edit-typography .buttons-control-icons:hover > .wrap-control-element,
.main > ul.edit-typography .buttons-control-icons:focus > .wrap-control-element,
#modal-form-container.page-mode-edit-sections .buttons-control:hover > .wrap-control-element,
#modal-form-container.page-mode-edit-sections .buttons-control:focus > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control:hover > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control:focus > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control-form:hover > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control-form:focus > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-typography:hover > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-typography:focus > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-icons:hover > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-icons:focus > .wrap-control-element {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
}

.main > ul.edit-elements .buttons-control.spr-child-active > .wrap-control-element,
.main > ul.edit-elements .buttons-control.spr-child-active > .wrap-control-element,
.main > ul.edit-elements .buttons-control-form.spr-child-active > .wrap-control-element,
.main > ul.edit-elements .buttons-control-form.spr-child-active > .wrap-control-element,
.main > ul.edit-typography .buttons-control-typography.spr-child-active > .wrap-control-element,
.main > ul.edit-typography .buttons-control-typography.spr-child-active > .wrap-control-element,
.main > ul.edit-typography .buttons-control-icons.spr-child-active > .wrap-control-element,
.main > ul.edit-typography .buttons-control-icons.spr-child-active > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control.spr-child-active > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control.spr-child-active > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control-form.spr-child-active > .wrap-control-element,
#modal-form-container.edit-elements .buttons-control-form.spr-child-active > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-typography.spr-child-active > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-typography.spr-child-active > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-icons.spr-child-active > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-icons.spr-child-active > .wrap-control-element {
    display: none;
}

.main > ul.edit-typography .buttons-control-typography > .wrap-control-element,
#modal-form-container .buttons-control-typography > .wrap-control-element {
    visibility: hidden;
}

.main > ul.edit-typography .buttons-control-typography:hover > .wrap-control-element,
.main > ul.edit-typography .buttons-control-typography:focus > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-typography:hover > .wrap-control-element,
#modal-form-container.edit-typography .buttons-control-typography:focus > .wrap-control-element {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.main .wrap-control-element .arrow,
.main > ul.edit-typography .buttons-control-typography > .wrap-control-element .arrow,
#modal-form-container.edit-typography .buttons-control-typography > .wrap-control-element .arrow {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.main > ul.edit-elements .buttons-control:hover > .g-map + .wrap-control-element,
.main > ul.edit-elements .buttons-control:focus > .g-map + .wrap-control-element {
    left: -1px;
}

.main > ul.edit-typography .buttons-control-typography:hover > a,
.main > ul.edit-typography .buttons-control-typography:focus > a,
#modal-form-container.edit-typography .buttons-control-typography:hover > a,
#modal-form-container.edit-typography .buttons-control-typography:focus > a {
    cursor: text;
}


/* radio control */

/* Hiding default checkbox and Radio button design */

input[type=checkbox],
input[type=radio] {
    opacity: 0;
    position: absolute;
    z-index: 12;
    width: 20px;
    height: 20px;
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    margin-left: 0;
}


/* Disable outline when clicked*/

input[type=checkbox]:checked,
input[type=radio]:checked,
input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: none !important;
}

input[type=checkbox] + .lbl,
input[type=radio] + .lbl {
    position: relative;
    z-index: 10;
    display: inline-block;
    margin: 0;
    padding-left: 24px;
    line-height: 20px;
    min-height: 20px;
    min-width: 24px;
}


/* Basic Checkbox styles */

input[type=checkbox] + .lbl::before,
input[type=radio] + .lbl::before {
    content: "";
    display: block;
    position: absolute;
    background-color: #444;
    border: none;
    border-radius: 0;
    height: 18px;
    width: 18px;
    top: 1px;
    left: 0;
}

input[type=checkbox].error + .lbl::before,
input[type=radio].error + .lbl::before {
    border: 1px solid #e44646;
}

.supra input[type=checkbox] + .lbl::after,
.supra input[type=radio] + .lbl::after {
    content: "";
    display: block;
    position: absolute;
    background-color: #00C0FF;
    border: none;
    border-radius: 0;
    height: 4px;
    width: 4px;
    top: 8px;
    left: 7px;
    opacity: 0;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}

input[type=radio] + .lbl::before {
    border-radius: 50%;
}


/* Checked state styles */

input[type=checkbox]:checked + .lbl::after,
input[type=radio]:checked + .lbl::after {
    height: 14px;
    width: 14px;
    top: 3px;
    left: 2px;
    opacity: 1;
}


/* Hover state styles */

input[type=checkbox]:hover + .lbl::after,
input[type=checkbox]:focus + .lbl::after,
input[type=radio]:hover + .lbl::after,
input[type=radio]:focus + .lbl::after,
input[type=checkbox] + .lbl:hover::after,
input[type=checkbox] + .lbl:focus::after,
input[type=radio] + .lbl:hover::after,
input[type=radio] + .lbl:focus::after {
    opacity: 1;
}


/* Disabled state styles */

input[type=checkbox]:disabled + .lbl::before,
input[type=radio]:disabled + .lbl::before,
input[type=checkbox][disabled] + .lbl::before,
input[type=radio][disabled] + .lbl::before,
input[type=checkbox].disabled + .lbl::before,
input[type=radio].disabled + .lbl::before,
input[type=checkbox]:disabled + .lbl::after,
input[type=radio]:disabled + .lbl::after,
input[type=checkbox][disabled] + .lbl::after,
input[type=radio][disabled] + .lbl::after,
input[type=checkbox].disabled + .lbl::after,
input[type=radio].disabled + .lbl::after {
    background-color: #eee !important;
    border-color: #eee !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


/* Styles for Radio button */

.supra input[type=radio] + .lbl::before {
    border-radius: 50%;
}

.supra input[type=radio] + .lbl::after {
    border-radius: 50%;
}

input[type=radio]:checked + .lbl::after {
    opacity: 1;
}

.radio,
.checkbox {
    margin-top: 15px;
    margin-bottom: 15px;
}

/*.radio .radio-inline {*/

/*margin-left: 20px;*/

/*}*/

/*.radio .radio-inline:first-child {*/

/*margin-left: 0;*/

/*}*/

.radio-inline,
.radio label,
.checkbox label {
    padding-left: 0;
    font-weight: inherit;
    display: inline-block !important;
    width: 100%;
}

/*.row [class^=col-]:last-child {*/

/*min-height: 0;*/

/*}*/

@media all and (min-width: 768px) {
    nav .burger-menu {
        display: none;
    }
}

@media all and (max-width: 1024px) {
    aside.left ul li:nth-last-child(3),
    aside.left ul li:nth-last-child(4),
    aside.left ul li:nth-last-child(5) {
        display: none;
    }
}

@media all and (max-width: 998px) {

    #modal-container .modal-content .item-width-50 .item {
        margin: 20px 0 0 !important;
        width: 100%;
        float: none;
    }

    #modal-container .modal-content .item-width-50 .item:nth-child(1) {
        margin: 0 !important;
    }

    #modal-container .modal-content .item-width-50 .item .dropdown-toggle {
        width: 100%;
    }

    #modal-container .gallery figure,
    #modal-container .gallery-video .video-item {
        width: 20% !important;
        height: 150px !important;
    }

    #modal-container .gallery figure .wrap-hover,
    #modal-container .gallery-video .video-item .wrap-hover {
        height: 100px;
    }

    .height-500 {
        width: auto;
    }

    .modal-gallery {
        width: 80vw;
    }
}

@media all and (max-width: 500px) {
    /*section*/
    aside.control-panel ul.sections li {
        transition: max-height 0.8s;
        -webkit-transition: max-height 0.8s;
    }
    aside.control-panel ul.sections li.nopadding {
        padding: 0 5px;
        max-height: 0;
        overflow: hidden;
    }

    aside.control-panel ul.sections li.nopadding ul {
        padding: 0;
        overflow: hidden;
        line-height: 0;
    }

    aside.control-panel ul.sections li.nopadding ul li {
        display: block;
        margin-bottom: 5px;
        position: relative;
        overflow: hidden;
        min-height: 30px;
        width: 220px;
    }

    aside.control-panel ul.sections li.nopadding ul li:first-child {
        margin-top: 0;
    }

    aside.control-panel ul.sections li.nopadding ul li img {
        max-width: 230px;
        width: 100%;
    }

    aside.control-panel ul.sections li.nopadding ul li:first-child {
        margin-top: 0;
    }

    aside.control-panel ul.sections li.nopadding ul li .add-section {
        color: #ffffff;
    }

    aside.control-panel ul.sections li.nopadding ul li.wrap-hover:hover,
    aside.control-panel ul.sections li.nopadding ul li.wrap-hover:focus {
        cursor: grab;
        cursor: -webkit-grab;
    }

    aside.control-panel ul.sections li.nopadding ul li.wrap-hover {
        margin: 0 0 5px 0;
        background: none;
    }

    aside.control-panel.active ul.sections li.nopadding ul li.wrap-hover i,
    aside.control-panel.active ul.sections li.nopadding ul li.wrap-hover i,
    aside.control-panel.active ul.sections li.nopadding ul li.wrap-hover i {
        display: none;
    }

    aside.control-panel.active ul.sections li.active + li.nopadding ul li.wrap-hover:hover i,
    aside.control-panel.active ul.sections li.active + li.nopadding ul li.wrap-hover:focus i,
    aside.control-panel.active ul.sections li.active + li.nopadding.active ul li.wrap-hover i {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        cursor: grab;
        cursor: -webkit-grab;
        background: rgba(0, 192, 255, 0.9);
        left: 5px;
        right: 5px;
    }

    aside.control-panel ul.sections li.active + li.nopadding {
        max-height: 4000px;
    }
    aside.control-panel ul.sections li.nopadding ul li {
        padding: 5px 5px 0;
        min-height: 30px;
    }
    aside.add-sections-items {
        right: 34px;
    }
    aside.add-sections-items.show {
        position: static;
        width: 100%;
    }
    aside.add-sections-items > ul li {
        width: 100%;
        padding: 0 !important;
        margin: 5px 0 0 0 !important;
    }
    .message {
        padding: 5px 15px 5px 5px;
        margin: 10px auto 0;
    }
    .message i {
        top: 5px;
        right: 5px;
    }
    .modal.fade.in {
        overflow: scroll !important;
        display: block;
    }
    .height-500 {
        height: 350px;
    }
    .modal-gallery {
        width: 100vw;
        height: 350px;
    }
    #modal-container .modal-content .preview-bg figure .wrap-hover {
        max-height: 100px;
    }
    #modal-container .modal-content .dropdown button {
        width: 100%;
    }
    #modal-container .modal-content .icons .ico {
        width: 13%;
    }
    #modal-container .modal-content .radio .radio-inline {
        display: block !important;
        margin-left: 0;
        margin-top: 5px;
    }
    #modal-container .modal-content .radio .radio-inline:first-child {
        margin-top: 0;
    }
    #modal-container .modal-content .nopadding-right-10 {
        padding: 0;
    }
    #modal-container .modal-content .section-set-dropdown {
        padding: 0 15px;
    }
    #modal-container .modal-content .section-set-dropdown label {
        width: 65%;
    }
    #modal-container .modal-content .section-set-dropdown .dropdown {
        width: 35%;
    }
    #modal-container .modal-content .section-set-dropdown .dropdown > button {
        padding: 0;
    }
    #modal-container .modal-content .section-settings {
        margin-top: 15px;
    }
    #modal-container .modal-content .section-settings .item {
        padding-left: 15px;
    }
    #modal-container .modal-content .choice-element {
        width: 48%;
        margin: 5px 2% 20px 0;
    }
    #modal-container .modal-content .seo .nopadding-left-10 {
        padding: 0;
    }
    #modal-container .modal-header .modal-title h4 {
        margin: 0 7px 0 0;
    }
    #modal-container .modal-content .radio-control.none ~ .preview-bg,
    #modal-container .modal-content .nav-pr-bg {
        float: none;
    }
    #modal-container .modal-content .double-dropdown,
    #modal-container .modal-content .show-custom-size .custom-size {
        width: 46.7%;
    }

    #modal-container .gallery figure,
    #modal-container .gallery-video .video-item {
        width: 33.33% !important;
    }

    .sp-container {
        left: auto !important;
        right: 5px !important;
        width: 203px !important;
    }
}


/* ------------------ */

.off-canvas-active .nb-off-canvas {
    -webkit-transform: translate(-250px, 0px);
    transform: translate(-250px, 0px);
}

nav.navbar {
    z-index: 1060;
}

.nb-off-canvas {
    z-index: 1070;
}

.off-canvas-overlay {
    z-index: 1050;
}


/* ------------------ */

.edit-elements .owl-theme .owl-controls,
.edit-typography .owl-theme .owl-controls {
    z-index: -1;
}

.edit-typography .owl-carousel .owl-item {
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
}

.thin .nicescroll-rails,
.nicescroll-rails-hr {
    display: none !important;
}


/* ------------------ */

.sp-container {
    position: fixed !important;
}


/**
 * 10. Constructor Form
 */

/* Sidebar Area & main window */

#modal-container .construct-form-sidebar {
    padding-right: 15px;
    padding-left: 0px;
}

/*
#modal-container .construct-form-sidebar button {
    border: none;
    color: #ffffff;
    background-color: #4f4f4f;
}
*/

#modal-container .sidebar-btn {
    width: 100%;
    border: none;
    color: #ffffff;
    background-color: #4a4a4a;
    /*
        color: #444;
        background-color: transparent;
        border: 1px solid #eee;
    */
    border-radius: 1px;
    margin-bottom: 5px;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: 14px;
    text-align: left;
    height: 50px;
    padding: 0px;
}

#modal-container .sidebar-btn:hover {
    background-color: #444;
}

#modal-container .sidebar-btn:focus {
    outline: none;
}

#modal-container .sidebar-btn i {
    margin-right: 10px;
    margin-left: 10px;
    font-size: 20px;
    vertical-align: sub;
}

#modal-container .construct-form-main {
    padding-left: 0px;
    padding-right: 0px;
    height: 490px;
    overflow: auto;
    border: 1px dotted #444;
    border-radius: 1px;
    /*    background-color: #4f4f4f;*/
}

#modal-container .construct-form-main-inner {
    padding: 10px;
    min-height: 100px;
}


/* Constructor Form Object */

#modal-container .object-area {
    background-color: #4f4f4f;
    /*    border:1px solid #444;*/
    margin-bottom: 10px;
}

#modal-container .object-area:last-child {
    margin-bottom: 0px;
}

#modal-container .toggle-area {
    padding-top: 15px;
    padding-bottom: 14px;
}

#modal-container .toggle-area.hide {
    display: none;
}

#modal-container .toggle-area .field-container {
    margin-bottom: 10px;
}

#modal-container .toggle-area .field-container:last-child {
    margin-bottom: 0;
}

#modal-container .toggle-area .field-container.form-horizontal .checkbox {
    padding-top: 0;
    line-height: 0;
    min-height: 20px;
    margin: 0;
}

#modal-container .block-for-drop {
    height: 40px;
    border: 1px dotted #444;
    margin: 10px 0;
}


/* Constructor Form Object title bar customisation */

#modal-container .object-title-bar {
    background-color: #4a4a4a;
    line-height: 40px;
    padding-left: 14px;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #aaa;
    padding-right: 0px;
}

#modal-container .object-title-bar:hover {
    cursor: default;
}

#modal-container .object-title-bar button {
    background-color: transparent;
    color: #cdcdcd;
    height: 40px;
    width: 40px;
    float: right;
    font-size: 18px;
    margin: 0px;
    border: none;
    border-radius: 0;
}

#modal-container .object-title-bar button:hover {
    background-color: #f43c37;
    color: #FFFFFF;
}

#modal-container .object-title-bar button,
.add-btn:focus,
.adding-btn:focus,
.del-field-btn:focus {
    outline: none;
}

#modal-container .object-area > .row {
    margin-right: 0px;
    margin-left: 0px;
}


/* Constructor Form Object field container customisation */

#modal-container .field-label {
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: 14px;
    text-align: left;
    color: #c1c1c1;
    padding: 0;
    padding-left: 14px;
}

/*
#modal-container .field-label.text-div {
    padding-left: 0;
    margin-left: -15px;
}
*/

#modal-container .input-width {
    padding: 0 15px 0 0;
}

#modal-container .input-group-border {
    border: none;
}

#modal-container .construct-form-main .field-input {
    font-size: inherit;
}

#modal-container .construct-form-main .field-input-number {
    width: 90px;
    padding-right: 12px;
    height: 40px;
}

#modal-container .construct-form-main .button-row {
    margin-left: -15px;
    margin-right: -15px;
}

#modal-container .construct-form-main .add-btn-panel {
    margin-top: 10px;
    margin-bottom: 10px;
}

#modal-container .construct-form-main .add-btn {
    height: 30px;
    width: auto;
    float: none;
    font-size: 12px;
    border: 1px solid gray;
    background-color: transparent;
}

#modal-container .construct-form-main .adding-btn-panel {
    margin-top: 10px;
}

#modal-container .construct-form-main .adding-btn {
    height: 30px;
    width: auto;
    float: none;
    font-size: 12px;
    color: #fff;
    /*    border: 1px solid #ccc;*/
    border-radius: 0;
    background-color: #4a4a4a;
}

/*
#modal-container .construct-form-main .adding-btn:hover {
    border-color:#fff;
}
*/

#modal-container .field-container .del-field-btn,
#modal-container .field-container .check-field-btn {
    width: 19px;
    height: 19px;
    padding: 4px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 0;
    margin: 0;
    display: block;
}

#modal-container .field-container .del-field-btn i,
#modal-container .field-container .check-field-btn i {
    display: block;
    top: 0px;
    font-size: 11px;
}

#modal-container .field-container .del-field-btn:hover {
    background-color: #f43c37;
    color: #f5f5f5;
    outline: none;
}

#modal-container .field-container .check-field-btn:hover,
#modal-container .field-container .check-field-btn.active {
    background-color: #00BEFF;
    color: #f5f5f5;
    outline: none;
}


/*#modal-container*/

#modal-container .construct-form-main .align-up {
    padding: 0px;
    border: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*
#modal-container .checkbox input[type="checkbox"]{
    margin-left: 5px;
}
*/

/* Site style after insert constructor form */

input[type=checkbox] + .lbl::after,
input[type=radio] + .lbl::after {
    background-color: #00c0ff;
}

#modal-container .nomargintop .radio-inline {
    margin-left: 0px !important;
    margin-right: 15px;
}

.modal-backdrop {
    z-index: 2040;
}