body.probuilder-edit-mode *
{
	cursor: pointer !important;
}
body.probuilder-edit-mode #probuilder-editor *
{
	cursor: auto !important;
}
#wpadminbar #probuilder-toggle-dom-path
{
	position: absolute;
	top: 32px;
	right: 10px;
	width: auto;
	max-width: 80vw;
	padding: 0 15px;
	color: #fff;
	font-size: .9em;
	text-align: right;
	white-space: nowrap;
	background-color: #15181b;
	overflow: hidden;;
}
.wp-admin #probuilder-toggle
{
	display: none !important;
}
#probuilder-editor *
{
	box-sizing: border-box;
}
#probuilder-toggle
{
	float: left;
	background-color: #4a90e2;
}
#probuilder-toggle a
{
	color: #fff;
}
#probuilder-toggle a:before
{
	position: relative;
	top: 2px;
	content: "\f308";
	padding: 4px 0;
	margin-right: 6px;
	float: left;
	font: 400 20px/1 dashicons;
	speak: none;
}
#probuilder-toggle:hover
{
	background-color: #599be8;
}
#probuilder-toggle.toggle-active
{
	background-color: #e74c3c;
}
#wp-admin-bar-probuilder-toggle:hover .ab-item,#wp-admin-bar-probuilder-toggle:focus .ab-item,#wp-admin-bar-probuilder-toggle:active .ab-item
{
	background-color: inherit !important;
}
#probuilder-overlay,#probuilder-overlay-sec
{
	position: absolute;
	z-index: 999998;
	background-color: rgba(231, 76, 60, 0.5);
	pointer-events: none;
}
#probuilder-editor
{
	position: fixed;
	bottom: 15px;
	right: 15%;
	width: 40vw;
	min-width: 450px;
	height: calc(70vh + 120px);
	overflow: hidden;
	padding: 25px;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	background-color: #fff;	
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
	transition: visibility 0s linear .35s, opacity .35s linear;
}
#probuilder-editor.visible
{
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}
#probuilder-editor-handle
{
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	padding: 0 15px;
	background-color: #4a90e2;
	cursor: move !important;
}
#probuilder-editor-handle .handle-part
{
	float: left;
	width: 50%;
	line-height: 40px;
	color: #fff;
}
#probuilder-editor-handle .handle-part p
{
	line-height: 38px;
}
#probuilder-editor-handle .handle-part:nth-of-type(2)
{
	text-align: right;
}
#probuilder-editor-handle .handle-part:nth-of-type(2) a span
{
	line-height: 40px;
	color: #fff;
}
#probuilder-editor-handle .handle-part, #probuilder-editor-handle .handle-part p
{
	cursor: move !important;
}
#probuilder-editor .editor-container
{	
	height: calc(70vh - 89px);
}
#probuilder-editor .scroll-element
{
	height: calc(70vh - 180px) !important;	
	overflow-y: auto;
}
#probuilder-editor .editor-container .probuilder-row
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	padding: 10px;
}
#probuilder-editor .editor-container input[type="text"],#probuilder-editor .editor-container select
{
	width: 100%;
	margin: 0 7px;
	height: 35px;
	border-radius: 5px;
	outline: none;
	border: none;
	background: #e8ebed;
	color: #576366;
	font-size: 14px;
}
#probuilder-editor .editor-container button
{
	height: 55px;
	z-index: 3;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 35px;
	text-transform: uppercase;
	color: #fff;
	background-color: #4a90e2;
	cursor: pointer !important;
	border: 0;
	font-size: 1em;
}
#probuilder-editor .editor-container button.loading:before
{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 5px;
	background-color: #4572a7;
	content: '';
	animation: loadingBar ease-in 9s;
	animation-fill-mode: forwards;
}
#probuilder-editor .editor-container button.loading.fast:before
{
	animation-duration: .5s;
}
@keyframes loadingBar
{
	0%
	{
		width: 0;
	}

	25%
	{
		width: 90%;
	}

	50%
	{
		width: 100%;
		opacity: 1;
	}

	90%
	{
		width: 100%;
		opacity: .5;
	}

	100%
	{
		width: 100%;
		opacity: 0;
	}
}
#probuilder-editor .editor-container button:hover
{
	background-color: #599be8;
}
#probuilder-editor .editor-container select[name="selectors"]
{
	width: 100px;
}
#probuilder-editor .editor-container input[type="checkbox"]
{
	position: relative;
	top: 4px;
	float: left;
}
#probuilder-editor .editor-container input::-webkit-input-placeholder
{
	color: #b1b4b5;
	font-size: .8em;
}
#probuilder-editor .editor-container input::-moz-placeholder
{
	color: #b1b4b5;
	font-size: .8em;
}
#probuilder-editor .editor-container input:-ms-input-placeholder
{
	color: #b1b4b5;
	font-size: .8em;
}
#probuilder-editor .editor-container input:-moz-placeholder
{
	color: #b1b4b5;
	font-size: .8em;
}
#probuilder-editor .editor-container label
{
	float: left;
	cursor: default !important;
}
#probuilder-editor .editor-container #probuilder-go-parent-element span,#probuilder-editor .editor-container #probuilder-set-selectors span
{
	position: relative;
	top: 6px;
	color: #4a90e2;
}
#probuilder-editor .editor-container .CodeMirror, #probuilder-editor .editor-container .CodeMirrorInput
{
	width: 100%;
	height: 30vh;
	margin: 0 7px;
	padding: 5px 15px;
	border-radius: 5px;
	outline: none;
	border: none;
	background-color: #e8ebed;
	color: #576366;
	font-size: 14px;
}
#probuilder-editor .editor-container .css-input .CodeMirror
{
	height: 10vh;
}

#probuilder-editor .probuilder-tab
{
	display: none;
}
#probuilder-editor .probuilder-tab.current
{
	display: block;
}
#probuilder-editor .probuilder-tab-links
{
	padding: 0;
	margin: 40px 18px 25px 18px;
	list-style: none;
	border-bottom: 2px solid #e8ebed;
}
#probuilder-editor .probuilder-tab-links li
{
	display: inline-block;
	padding: 10px 15px;
	margin:0;
	cursor: pointer !important;
}
#probuilder-editor .probuilder-tab-links li.current
{
	margin-bottom: -2px;
	border-bottom: 2px solid #4a90e2;
}
#probuilder-editor .probuilder-vertical-container
{
	padding: 0 17px;
}
#probuilder-editor .probuilder-vertical-tabs
{
	display: none;
	width: 100%;
}
#probuilder-editor .probuilder-vertical-tabs.current
{
	display: block;
}
#probuilder-editor .probuilder-vertical-tabs-container-left
{
	height: 100vh;
	width: 30%;
	float: left;
	border-right: 1px solid #e8ebed;
}
#probuilder-editor .probuilder-vertical-tabs-container-left .probuilder-vertical-tab
{

}
#probuilder-editor .probuilder-vertical-tabs-container-right
{
	width: 70%;
	float: left;
}
#probuilder-editor .probuilder-vertical-tab-links
{
	list-style: none;
}
#probuilder-editor .probuilder-vertical-tab-links li
{
	position: relative;
	padding: 9px 12px;
	margin:0;
	cursor: pointer !important;
}
#probuilder-editor .probuilder-vertical-tab-links li:not(.current):not(.probuilder-pro-badge):hover
{
	background-color: #e8ebed;
}
#probuilder-editor .probuilder-vertical-tab-links li.current
{
	margin-right: -1px;
	color: #fff;
	background-color: #4a90e2
}
#probuilder-editor .probuilder-vertical-tabs-container-right label
{
	position: relative;
	top: 15px;
	display: inline-block;
	width: 50%;
	clear: left;
	padding-right: 10px;
	font-weight: normal;
	font-size: .8em;
	text-align: right;
	transition: all .15s ease;
}
#probuilder-editor .probuilder-vertical-tabs-container-right .hint
{
	position: relative;
	top: -3px;
	float: right;
	font-size: .6em;
}
#probuilder-editor .probuilder-vertical-tabs-container-right .hint a
{
	color: #4a90e2;
}
#probuilder-editor .probuilder-vertical-tabs-container-right label.current-info-text-visible
{	
	transform: translateY(-10px);
}
#probuilder-editor .probuilder-vertical-tabs-container-right #current-info-text
{
	display: block;
}
#probuilder-editor .probuilder-vertical-tabs-container-right input[type="text"], #probuilder-editor .probuilder-vertical-tabs-container-right select
{
	display: inline-block;
	width: 50%;
	margin: 5px 0;
}
#all-probuilds-container #all-probuilds
{
	margin-top: 100px;
	max-height: 86vh;
	overflow-y: auto;
}
#all-probuilds-container
{
	z-index: 999997;
	position: fixed;
	top: 0;
	right: -350px;
	height: 100%;
	width: 350px;
	background-color: #4a90e2;
	transition: transform 1s ease-in-out;
}
#all-probuilds-container.open
{
	transform: translateX(-350px);
}
#all-probuilds-container #show-all-probuilds
{
	position: absolute;
	top: calc(50% - 25px);
	left: -50px;
	width: 150px;
	height: 50px;
	display: block;
	color: #fff;
	text-align: center;
	line-height: 55px;
	background-color: #4a90e2;
	transform: rotate(-90deg) translateY(0);
	transition: transform .5s ease-in-out;
	outline: none !important;
}
#all-probuilds-container #show-all-probuilds.visible
{
	transform: rotate(-90deg) translateY(-50px);
}
#all-probuilds-container #show-all-probuilds:before,#all-probuilds-container #show-all-probuilds:after
{
	content: '';
	position: absolute;
	left: -20px;
	width: 50px;
	height: 100%;
	background-color: #4a90e2;
	transform: skew(-25deg, 0);
}
#all-probuilds-container #show-all-probuilds:after
{
	left: auto;
	right: -20px;
	background-color: #4a90e2;
	transform: skew(25deg, 0);
}
#all-probuilds-container #all-probuilds-list
{
	list-style: none;
}
#all-probuilds-container #all-probuilds-list li
{
	position: relative;
	padding: 7px 15px 7px 35px;
	margin-bottom: 5px;
	background-color: #fff;
	color: #4a90e2;
	transition: all .25s ease;
}
#all-probuilds-container #all-probuilds-list li.deleted
{
	background-color: #e74c3c;
	animation: deletedItem .5s ease 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
#all-probuilds-container #all-probuilds-list li.deleted *
{
	color: #fff !important;
	text-decoration: line-through;
}
@keyframes deletedItem
{
	0%
	{
		opacity: 1;
	}
	100%
	{
		opacity: 0;
		height: 0;
		padding: 0;
		margin: 0;
		overflow: hidden;
	}
}
#all-probuilds-container #all-probuilds-list li .trash
{
	position: absolute;
	right: 37px;
	top: calc(50% - 1px);
	display: none;
	font-size: 15px;
}
#all-probuilds-container #all-probuilds-list li:hover .trash
{
	display:block;
}
#all-probuilds-container #all-probuilds-list li span
{
	color: #717171;
	font-size: .8em;
}
#all-probuilds-container #all-probuilds-list li a
{
	color: #4a90e2;
	font-size: .9em;
}
#all-probuilds-container #all-probuilds-list li .fa
{
	position: absolute;
	left: 5px;
	top: calc(50% - 10px);
	font-size: 22px;
}
#all-probuilds-container #all-probuilds-list li .trash .fa
{
	top: calc(50% - 12px);
	width: 25px;
	height: 25px;
	border-radius: 100%;	
	font-size: 19px;
	text-align: center;
	line-height: 25px;
	transition: all .25s ease;
}
#all-probuilds-container #all-probuilds-list li .trash:hover .fa
{
	color: #e74c3c;
	background-color: rgba(231, 76, 60, 0.25);
	border-radius: 100%;
}
#probuilder-editor #probuilder-editor-loading
{
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.75);
	opacity: 0;
	transition: all .25s ease;
}
#probuilder-editor #probuilder-editor-loading.visible
{
	opacity: 1;
}


/* Admin area */
.probuilder_page_probuilder-settings .probuilder-settings-container
{
	position: relative;
	float: left;
	width: calc(50% - 70px);
	padding: 50px 25px 0 25px;
	margin: 20px 20px 0 0;
	background-color: #fff;
}
.probuilder_page_probuilder-settings .probuilder-settings-container h3
{
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 15px;
	margin-top: 0;
	width: 100%;
	color: #fff;
	font-size: 1.15em;
	background-color: #4a90e2;
	box-sizing: border-box;
}
.probuilder_page_probuilder-settings .probuilder-settings-container .form-table th
{
	padding: 10px 10px 10px 0;
	vertical-align: middle;
	text-align: right;
}
.probuilder_page_probuilder-settings .probuilder-settings-container .form-table th small
{
	display: block;
	font-weight: 400;
	font-size: .8em;
}
.probuilder_page_probuilder-settings .probuilder-settings-container .form-table td
{
	padding: 6px 10px;
}
.probuilder_page_probuilder-settings .probuilder-settings-container input[type="text"],.probuilder_page_probuilder-settings .probuilder-settings-container select,.probuilder_page_probuilder-settings .probuilder-settings-container textarea, .probuilder_page_probuilder-settings .probuilder-settings-container input[type="password"]
{
	width: 100%;
	margin: 0;
	height: 35px;
	padding: 5px 15px;
	border-radius: 5px;
	outline: none;
	border: none;
	background: #f5f5f5;
	color: #576366;
	font-size: 14px;
}
.probuilder_page_probuilder-settings .probuilder-settings-container textarea
{
	height: 100px;
}
.probuilder_page_probuilder-settings .probuilder-settings-container input[type="submit"]
{
	height: 35px;
	border: 0;
	background-color: #4a90e2;
	color: #fff;
	line-height: 35px;
	text-shadow: none;
	box-shadow: none;
}
.probuilder_page_probuilder-settings .probuilder-settings-container input[type="submit"]:hover
{
	background-color: #599be8;
}
.probuilder_page_probuilder-settings .probuilder-settings-container input[type="submit"][disabled]
{
	background-color: #f5f5f5 !important;
	color: #ccc !important;
}
.probuilder_page_probuilder-settings .probuilder-settings-container input[type="checkbox"]
{
	display: none;
}
.probuilder_page_probuilder-settings .probuilder-settings-container label.select-label
{
	background: #f5f5f5;
	border-radius: 2em;
	padding: 2px;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	border: 1px solid #f5f5f5;
	outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.probuilder_page_probuilder-settings .probuilder-settings-container input[type="checkbox"]:checked + label.select-label
{
	background: #72de83;
}
.probuilder_page_probuilder-settings .probuilder-settings-container label.select-label:after
{
	position: relative;
	left: 0;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
	border-radius: 2em;
	background: #f5f5f5;
	transition: left 0.3s cubic-bezier(0.17, 0.8, 0.3, 1.25), padding 0.3s ease, margin 0.3s ease;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.probuilder_page_probuilder-settings .probuilder-settings-container input[type="checkbox"]:checked + label.select-label:after
{
	left: 50%;
}
.probuilder_page_probuilder-settings .probuilder-settings-container .vertical-align-top
{
	vertical-align: top !important;
}
.probuilder_page_probuilder-settings .probuilder-settings-container #colorpicker
{
	padding-left: 35px;
}
#probuilder-editor .full-width
{
	width: 100%;
}
.probuilder-note,.probuilder_page_probuilder-settings #media-query-explain
{
    margin: 0 0 15px 5px;
	padding: 5px 9px;
	color: #9b812e;
	background-color: #ffe38b;
	font-size: 12px;
	border-radius: 3px;
}
.probuilder_page_probuilder-settings #media-query-explain
{
	margin: 10px 0 0 0;
	display: none;	
}
.probuilder_page_probuilder-settings #media-query-explain p
{
	margin: 0;
	font-weight: normal;
	font-size: .9em;
}

/* CSS Spinner */
.probuilder-spinner
{
	position: absolute;
	top: calc(50% - 25px);
	width: 50px;
	height: 50px;
	margin-left: calc(50% - 25px);
	border: 3px solid rgba(255,255,255,.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
}
@keyframes spin
{
	to
	{
		-webkit-transform: rotate(360deg);
	}
}

/* Helper classes */

.p0 {
	padding: 0!important
}

/* Padding Top */
.pt0
{
	padding-top: 0 !important;
}

.pt10 {
	padding-top: 10px!important
}

.pt15 {
	padding-top: 15px!important
}

.pt20 {
	padding-top: 20px!important
}

.pt30 {
	padding-top: 30px!important
}

.pt40 {
	padding-top: 40px!important
}

.pt50 {
	padding-top: 50px!important
}

.pt60 {
	padding-top: 60px!important
}

.pt70 {
	padding-top: 70px!important
}

.pt80 {
	padding-top: 80px!important
}

.pt90 {
	padding-top: 90px!important
}

.pt100 {
	padding-top: 100px!important
}

.pt110 {
	padding-top: 110px!important
}

.pt120 {
	padding-top: 120px!important
}

.pt130 {
	padding-top: 130px!important
}

.pt140 {
	padding-top: 140px!important
}


/* Padding Bottom */

.pb0 {
	padding-bottom: 0px!important
}

.pb10 {
	padding-bottom: 10px!important
}

.pb15 {
	padding-bottom: 15px!important
}

.pb20 {
	padding-bottom: 20px!important
}

.pb30 {
	padding-bottom: 30px!important
}

.pb40 {
	padding-bottom: 40px!important
}

.pb50 {
	padding-bottom: 50px!important
}

.pb60 {
	padding-bottom: 60px!important
}

.pb70 {
	padding-bottom: 70px!important
}

.pb80 {
	padding-bottom: 80px!important
}

.pb90 {
	padding-bottom: 90px!important
}

.pb100 {
	padding-bottom: 100px!important
}

.pb110 {
	padding-bottom: 110px!important
}

.pb120 {
	padding-bottom: 120px!important
}

.pb130 {
	padding-bottom: 130px!important
}

.pb140 {
	padding-bottom: 140px!important
}


/* Padding Left */

.pl0 {
	padding-left: 0px!important
}

.pl3 {
	padding-left: 3px!important
}

.pl5 {
	padding-left: 5px!important
}

.pl10 {
	padding-left: 10px!important
}

.pl20 {
	padding-left: 20px!important
}

.pl30 {
	padding-left: 30px;
}

.pl40 {
	padding-left: 40px;
}

.pl50 {
	padding-left: 50px;
}

.pl60 {
	padding-left: 60px;
}

.pl70 {
	padding-left: 70px;
}

.pl80 {
	padding-left: 80px;
}

.pl90 {
	padding-left: 90px;
}

.pl100 {
	padding-left: 100px;
}


/* Padding Right */

.pr0 {
	padding-right: 0px!important
}

.pr5 {
	padding-right: 5px!important
}

.pr10 {
	padding-right: 10px!important
}

.pr20 {
	padding-right: 20px!important
}

.pr30 {
	padding-right: 30px!important
}

.pr40 {
	padding-right: 40px;
}

.pr50 {
	padding-right: 50px;
}

.pr60 {
	padding-right: 60px;
}

.pr70 {
	padding-right: 70px;
}

.pr80 {
	padding-right: 80px;
}

.pr90 {
	padding-right: 90px;
}

.pr100 {
	padding-right: 100px;
}

.pr110 {
	padding-right: 110px;
}

.pr120 {
	padding-right: 120px;
}
.white-bg
{
	background-color: #fff !important;
}
.probuilder-pro-badge,.probuilder-pro-badge-checkbox
{
	color: #d0d0d0;
}
.probuilder-pro-badge:after,.probuilder-pro-badge-checkbox:before
{
	position: absolute;
    content: 'PRO';
    margin-left: 5px;
    margin-top: 4px;
    display: inline-block;
	width: 23px;
	height: 15px;
	line-height: 16px;
	text-align: center;
    border-radius: 3px;
    color: #000;
    font-size: .5em;
    background-color: #ffd302;
    font-weight: 600;
}
.probuilder-pro-badge.small-margin:after
{
	margin-top: 1px;
}
.probuilder-pro-badge-select
{
	position: relative;
}
.probuilder-pro-badge-select select
{
	color: #d0d0d0 !important;
	background-color: #f9f9f9 !important;
}
.probuilder-pro-badge-select:after
{
	left: 21px;
	top: 6px;
}
.probuilder-pro-badge-checkbox:before
{
	top: -2px;
	position: relative;
	margin: 0;
}
.toplevel_page_probuilder .main-page-iframe
{
	width: calc(100% + 20px);
	height: 100vh;
	overflow: hidden;
	position: relative;
	left: -20px;
}
.toplevel_page_probuilder .main-page-iframe iframe
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}