/* ---------------------------------------------------------- GENERAL */
:root {
  --green: #22ccaa;
  --green2: #26CBA8;
  --white: #F2F4F6;
  --black: #30323f;
  --blue: #2396F5;
  --blue-light: #F5F7F9;
  --blue-dark: #2C2F3D;
  --yellow: #FFCC33;
  --yellow-faded: rgba(255,204,51,0.5);
  --border-dark: rgba(0,0,0,0.1);
  --border-light: rgba(255,255,255,0.3);
  --text-light: rgba(255,255,255,0.4);
  --text-medium: rgba(255,255,255,0.9);
  --text-dark: rgba(0,0,0,0.6);
}

body{background: #22ccaa; font-family: "Museo Sans", arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased!important; font-smoothing: antialiased; font-size: 17px; color:#666;}

/*Containing Elements*/
main{font-family:"Avenir Next", Arial, sans-serif; font-weight:500;}
.main{margin-top: 50px; margin-bottom: 50px;}
.main .col-12 { padding: 0; }

/*Text*/
a.link { cursor: pointer; } /*no href*/
a:hover { cursor: pointer; } /*no href*/
.btn-primary{background:var(--blue); border-color:var(--blue);}

.hide-me { display: none; }

/* ---------------------------------------------------------- HEADER */
header { border-bottom: 1px solid var(--border-light);}
header * { vertical-align: middle }
header img.logo { margin-right: 2em; }
header a { color: #fff;  text-decoration: none; }
header a:hover { color: #fff;  text-decoration: none; color: var(--blue); }
header nav a { margin-left: 1rem; }

#top-nav {}
#top-nav .navbar{border-bottom: 1px solid rgba(255,255,255,0.2);padding: 0 !important;}
.navbar .container{padding-left:0px !important; padding-right:0 !important;}
/* .navbar-brand{padding:0; margin-right:15px; padding-top:6px; padding-bottom:14px;} */
#top-nav .navbar-toggle { display: none; }
#top-nav .collapse { display: block; }
#top-nav ul li a { color: #fff; padding:15px;} 
#top-nav ul li a:hover { text-decoration: none; color:rgba(0,0,0,0.5);} 
.navbar-header {  }
#navbar {display: flex; flex:1; justify-content:space-between; margin-top:2px;}
#navbar ul { margin: 0; padding: 0; }
#navbar ul:first-child { }
.navbar-nav { flex-direction: row; }
.navbar-nav li { flex-direction: row; }

.navbar-brand-wrap { position: relative; }
.navbar-brand img{margin-top: -4px;}
.navbar-default .navbar-brand { color: #fff; font-size: 120%; position: relative; padding-left: 10px; padding-right: 10px; }
.navbar-default .navbar-brand.active,
.navbar-default .navbar-brand:hover { background: #fff; color:#0ca; }
.navbar-brand-wrap ul{
position: absolute; top: 27px; left: 0px; background: #fff;
display: none;
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
z-index: 999999;
}
.navbar-brand-wrap li { width: 250px; }
.navbar-brand-wrap li a { color: #666 !important; padding: 2.5rem 1rem !important; }
.navbar-brand-wrap li.spacer { height: 1px; border-top: 1px solid rgba(0,0,0,0.05); }
li a.navbar-academy { background: #ee515a; color: #fff; padding: 3px 10px !important; margin: 12px 0 0 10px; border-radius: 5px; }
li a.navbar-academy:hover { background: #c20 !important; color: #fff !important; }

/* ---------------------------------------------------------- MAIN */

.container-fluid.step{max-width: 1600px;}

/*Confirm*/
.tab-content .confirm{background: var(--blue-light); padding:20px 10px; color:var(--blue); display: flex; width: 100%; border-bottom: 1px solid var(--border-dark); font-size: 90%;}
.tab-content .confirm span{line-height: 0.8em; background-color: rgba(0,0,0,0.1); margin-left: 5px; border-radius: 2px; padding:4px;}
.tab-content .confirm a:hover { cursor: pointer; }

/*Savebar*/
.savebar{align-self: flex-start; flex-basis: 95%;}
.savebar .btn{background: #2ca05a; color:#fff !important; padding:4px 15px 3px 15px; border-radius: 20px;}
.savebar .btn.unsaved {background:#E85656;}
.savebar .btn.unsaved:hover{background: #BD4342; color:#fff !important;}

/* ---------------------------------------------------  CHOOSE TYPE */
.choose-type-container { display: flex; }
.choose-type { border: 2px solid transparent; background: #fff; width: 45%; border-radius: 5px; flex: 1; margin: 0 2rem 2rem 0; padding: 1rem; }
.choose-type:hover { cursor: pointer; }
.choose-type.selected { border: 2px solid #c20; }

/* ---------------------------------------------------  CUSTOMIZE TRIGGER */
.choose-trigger { color: var(--white); }
.trigger-preview { margin: 2rem 0 0 0; padding: 1rem; border: 2px solid transparent; border-radius: 5px; color: var(--white); }
.trigger-preview:hover { cursor: pointer; border-color: var(--yellow); }
.trigger-preview img { width: 100%; }

.BN-trigger { padding: 0; }

/* ----------------------------------------------------------  POPUP
.BN-popup { padding: 30px 50px 20px 50px; border-radius: 5px; max-width: 660px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); }

.popup-background { background: #fff; padding: 4rem 0; }
.popup-body { background: #fff; border: 1px solid rgba(0,0,0,0); padding: 1rem; 
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); border-radius: 2px;
}
.popup-body label { width: 80px; }
.popup-body button { border: none; background: teal; color: #fff; border-radius: 5px; padding: 0.5rem 1rem; }
 */


/* ----------------------------------------------------------  CUSTOMIZE */

.customize h5 { color: var(--text-dark); padding: 20px 10px 20px 0; font-weight: 600; margin: 0;} 
.customize h5:hover { color: var(--green); cursor: pointer;} 
.customize span.flaticon{margin: 0 5px 0 10px;}
.customize .controls hr{margin:0;}
.customize .options { display: none; }

.customize .skip-options .form-group { padding: 0 20px; margin: 20px 0 10px 10px; }
.customize .skip-options input[type="checkbox"] { margin-left: 5px; }
.customize .skip-options label.form-check-label { margin-left: 30px; color: var(--blue); }
.customize .skip-options .alert-warning { margin-top: 10px; }

.customize .block:first-child {}
.customize .edit-options { visibility: hidden; opacity: 0; height: 0; transition: all 0.1s linear; }
.customize .edit-options.active { visibility: visible; height: auto; opacity: 1;}
.customize .edit-options .row { padding: 0 35px; }
.customize .edit-options .row .row { padding: 0 15px; }

.customize div[data-name="Rules"] ul.rules-hide{margin-bottom: 20px;}
.customize div[data-name="Rules"] ul.rules-hide li span{color:#CCC; cursor:pointer;}
.customize div[data-name="Rules"] ul.rules-hide li span:hover{color:#E85655; cursor:pointer;}
span.delete:hover{color:#E85655; cursor:pointer;}

.customize div[data-name="Rules"] form{margin-bottom:10px;}
.customize div[data-name="Rules"] form span{color:var(--blue);}
.customize div[data-name="Rules"] label{}
.customize div[data-name="Rules"] input.form-control{}
.customize div[data-name="Rules"] .btn{padding-top:9px; padding-bottom:9px; width: 100%;}

/* ----------------------------------------------------------  FORMS */
ul.font-select li { display: block; border:1px solid #ececec;}
ul.font-select li:hover { cursor: pointer;}
ul.font-select li.lead { background: #fff; color: #333; display: block; padding: 12px 10px; border-radius: 5px; width: 100%; font-size: 1em; position: relative; height: 46px; }
ul.font-select li.lead:hover{border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
ul.font-select li.lead span.preview { display: inline-block; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.font-select li.lead span.flaticon {  float: right; opacity: 0.5; text-align: center;}
ul.font-select li.lead span.icon { position: absolute; right: -1px; top: 0; width: 30px; background: #fff; color: #333; text-align: center; height: 30px; padding-top: 10px;
border-left: 1px solid rgba(0,0,0,0.2);
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
font-size: 90%;
}
ul.font-select li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; top: 44px; left: -1px; display: none; width: calc(100% + 2px);}
ul.font-select .dd { float: right; background: #000; color: #fff; }
ul.font-select li.hover > ul,
ul.font-select li.hover ul:hover { visibility: visible; opacity: 1; display: block; z-index: 10000; background: transparent; border-radius: 5px; padding:0; }
ul.font-select li ul li { clear: both; width: 100%; background: #fff; color: #333; border-bottom: none; padding: 10px; }
ul.font-select li ul li:hover { background: #D9EDF7;}
ul.font-select li ul li.selected { background: #2396F5; color:#fff;}
ul.font-select li ul li.selected:hover { background: #2396F5; }
ul.font-select li ul li:last-child {border-bottom: 1px solid #ececec; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}

.text-editor-controls { background: #fff; border:1px solid #ececec; border-bottom: none; border-top-right-radius: 5px; border-top-left-radius: 5px; font-size: 85%;}
.text-editor-controls button { background: transparent; border: none; padding: 7px 0; border-right: 1px solid #ececec; display: inline-block; width:40px; text-align: center;}
.text-editor-controls button:first-child { border-top-left-radius: 5px; }
.text-editor-controls button:hover { background: #ececec; color: #000; cursor: pointer; border-right: 1px solid #ececec;}
.text-editor-controls button[data-action="bold"] { font-weight: bold; }
.text-editor-controls button[data-action="italic"] { font-style: italic; }
.text-editor-controls button[data-action="link"] { font-style: normal; }
.text-editor-controls button.hide-me { display: none; }
.text-editor { background: #fff; color: #333; border:1px solid #ececec; padding: 10px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.text-editor:hover { cursor: text; }
.text-editor:focus {outline:none;}
.remove-links { font-size: 80%; font-weight: bold; opacity: 0.8; }
.remove-links:hover { cursor: pointer; color: #c20; }

.customize .controls .col-md-6{padding-left: 0; padding-right: 8px;}
.customize .controls .col-md-6 + .col-md-6{padding-left: 8px; padding-right: 0;}
.customize .controls .col-md-6 + .col-md-6 + .col-md-6{padding-left: 0; padding-right: 8px;}
.customize .controls .col-md-12{padding-left: 0; padding-right: 0;}
.customize .controls .form-check{padding-left:0;}
.customize .controls [data-name="Paragraph"] .form-check{padding-left:1.25rem;}
.customize .controls [data-name="Layout"] .form-check{padding-left:1.25rem;}
.customize .controls [data-name="Container"] .form-check{padding-left:1.25rem;}
.customize .controls [data-name="Headline"] .form-check{padding-left:1.25rem;}
.customize .controls [data-name="Share"] .form-check{padding-left:1.25rem;}
.customize .controls textarea.form-control{min-height:150px; border-color: #ececec;}
.customize .controls input{border-color:#ececec; padding:22px 10px;}
.customize .controls select{border-color: #ececec; height:46px;}

.save-title { text-align: left; margin-bottom: 4rem; }

/*Tabs*/
.nav-pills-wrap { padding: 0; }
.nav-pills{background: var(--blue-dark); font-weight: 600; border-top-left-radius: 5px; border-top-right-radius: 5px;}

.nav-pills .nav-item:last-child a{border-right:none;}

.nav-pills .nav-item .nav-link{color:var(--text-light); padding-top: 20px; padding-bottom: 20px; border-right:1px solid var(--border-light); text-align: center;}
.nav-pills .nav-item .nav-link:hover{color:var(--green); cursor: pointer;}
.nav-pills .nav-item .nav-link.disabled:hover{color:var(--text-light);}
.nav-pills .nav-item .nav-link.active{background: var(--blue-light); color:var(--text-dark); border-color:var(--blue-light);}
.nav-pills .nav-item .nav-link{border-radius:0;}
.nav-pills .nav-item:first-child .nav-link{border-top-left-radius:5px;}
.nav-pills .nav-item:last-child .nav-link{border-top-right-radius:5px;}
.nav-pills .nav-item .nav-link:last-child a{border-right:none;}

.nav-pills .nav-item .nav-link span{display: block; width: 30px; height:30px; text-align: center; border-radius: 15px; border:2px solid var(--text-light); color: var(--text-light); margin: 0 auto 8px auto;}
.nav-pills .nav-item .nav-link:hover span{border-color:var(--green); color:var(--green);}
/* .nav-pills .nav-item .nav-link.disabled:hover span{border-color:var(--text-light); color:var(--text-light);} */
.nav-pills .nav-item .nav-link span.publish{border:none; position: relative; top:2px;}
.nav-pills .nav-item .nav-link span em{position: relative; top:2px; font-style: normal;}
.nav-pills .nav-item .nav-link span .material-icons{font-size: 20px;}

.nav-pills .nav-item .nav-link.active span{border-color: var(--green); color: var(--green);}

.nav-pills .nav-item .nav-link.complete{color:var(--green);}
.nav-pills .nav-item .nav-link.complete.active{color:var(--text-dark);}
.nav-pills .nav-item .nav-link.complete span{border-color: var(--green); background-color: var(--green); color: var(--blue-dark);}
.nav-pills .nav-item .nav-link.complete.active span{border-color: var(--green); color: var(--green);background-color: var(--blue-light);}

.nav-item a.complete:hover { cursor: pointer; }

.tab-content{background: #fff; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}



/*customize*/
.tab-content .customize{display: grid; grid-template-columns:minmax(150px, 400px) auto; grid-template-rows:auto;}
.tab-content .customize .controls{flex:1; background: var(--blue-light); border-bottom-right-radius:0; border-top-right-radius: 0; border-bottom-left-radius: 5px; border-right: 1px solid var(--border-dark); padding-bottom: 20px;}

.edit-options label{ color: var(--blue); font-weight: 400; }
.edit-options h4 { font-size: 1.1rem; color: var(--text-dark); font-weight: 600; margin-top: 20px;}
.edit-options .form-group { margin-bottom: 20px; }
.edit-options .form-group.form-check { margin-bottom: 20px;}
.edit-options .form-control.range{height: auto; padding: 14px 10px 8px 10px; border-color: #ececec;}
.edit-options[data-name="Labels"] .col-md-12 .form-group.form-check { padding-left: 0; margin-bottom: 10px;}
.customize .controls .edit-options[data-name="Labels"] hr{margin-top: -5px; margin-bottom: 15px;}
.edit-options .form-group.form-check label{ margin-bottom: 0; margin-left: 5px;}
.customize .controls .edit-options hr {  border-color: var(--border-dark); margin-top: -10px; margin-bottom: 10px; }
.edit-options .template-thumbs img { width: 47.5%; margin: 0 5% 5% 0; border: 2px solid transparent; }
.edit-options .template-thumbs img:nth-child(2n){margin-right: 0;}
.edit-options .template-thumbs img.active, 
.edit-options .template-thumbs img:hover { cursor: pointer; border-color: var(--blue); }
.customize .radio { margin: 10px 0; }
.customize .radio-wrap { margin: 10px 0 20px 0; }
.customize hr.lg-margin { margin: 20px 0 !important; }


/*Preview*/
.tab-content .customize .preview{flex:1;flex-grow: 2;background: #FFF;border-bottom-right-radius: 5px;}
.tab-content .customize .preview .instructions{border-bottom:1px solid #ececec; padding:18px;}
.tab-content .customize .preview .instructions p{margin-bottom: 0; color:#666; font-size: 1.1em;}

.tab-content .customize .preview .BN-popup .BN-tint{position: relative !important; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.tab-content .customize .preview .BN-popup .BN-close{z-index:9999998;}

/*Preview Hover Effects*/
.tab-content .customize .preview .BN-trigger .BN-text-contents h1:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-trigger .BN-text-contents p:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-trigger .BN-text-contents .form-contents:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-trigger .BN-text-contents button:hover{outline:1px solid fuchsia; cursor:pointer;}

.tab-content .customize .preview .BN-takeover .BN-text-contents h1:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-takeover .BN-text-contents p:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-takeover .form-contents:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-takeover button:hover{outline:1px solid fuchsia; cursor:pointer;}

.tab-content .customize .preview .BN-popup .BN-text-contents h3:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-popup .BN-text-contents p:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-popup .BN-text-contents .form-contents:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-popup .BN-text-contents form button:hover{outline:1px solid fuchsia; cursor:pointer;}

.tab-content .customize .preview .BN-inline .BN-text-contents h1:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-inline .BN-text-contents p:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-inline form:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .BN-inline .BN-text-contents form button:hover{outline:1px solid fuchsia; cursor:pointer;}

.tab-content .customize .preview .fake-browser h1:hover{outline:1px solid fuchsia; cursor:pointer;}
.tab-content .customize .preview .fake-browser p:hover{outline:1px solid fuchsia; cursor:pointer;}

/*Making sure previews render correctly in editor mode*/

.tab-content .customize .preview button:focus{outline:none;}
.tab-content .customize .preview .trigger, .tab-content .customize .preview .popup{margin:50px;}
.tab-content .customize .preview .popup.fullscreen{margin:0;}
.tab-content .customize .preview .trigger .fake-browser, .tab-content .customize .preview .popup .fake-browser{margin:0;}
.tab-content .customize .preview .trigger.sticky .BN-hbar{position:relative !important; z-index:1000000 !important;}
.tab-content .customize .preview .trigger.sticky .browser-body{padding:0;}
.tab-content .customize .preview .trigger.sticky .browser-body .BN-hbar.BN-top{padding-bottom:500px;}
.tab-content .customize .preview .trigger.sticky .browser-body .BN-hbar.BN-bottom{padding-top:500px;}
.tab-content .customize .preview .trigger.sticky .browser-body .BN-hbar.BN-full.BN-bottom .BN-container{border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;}

.BN-live { position: relative; }
.BN-takeover-wrap { position: relative; width: auto; height: auto; }

.popup.fullscreen{margin:0;}
.popup.fullscreen .BN-wrap-tint{border-bottom-right-radius: 5px; min-height: 1245px;}

/*Integrations*/
.integrations {}
.integrations li:hover { cursor: pointer; background: var(--yellow); }
.integrations ul.nav { margin: 1rem 0; padding: 0; }
.integrations ul.nav li { padding: 0.5rem 1rem; margin-right: 1rem; background: var(--blue-light); border-radius: 5px; }
.integrations ul.nav li.active { background: var(--green); color: #fff; }
.integrations ul.providers { margin: 2rem 0; }
.integrations a.back { color: var(--blue) !important; }
.integrations a.back:hover { cursor: pointer; }
.integrations .buttons { margin-top: 2rem; }
.integrations .btn-submit {font-size: 110%; margin-right: 1rem;cursor: pointer;background: var(--yellow);}
.integrations .btn-submit:hover{background:#F5A623;}
.integrations .btn-test { cursor: pointer; }
.integrations .delete:hover { cursor: pointer; color: var(--red-dark);}
.integrations .loading { display: block; clear: both; width: 100%; height: 100px; background: url('/assets/dashv3/i/loading.gif') center center no-repeat;}
.integrations .tags.list-group{margin-top:0;}
.integrations .tags h5{font-size:17px;}
.integrations form.add-tags { margin: 1em 0; }
.integrations form.add-tags input.add-tag { width: 90%; margin-right: 5px; padding: 5px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.2); }
.integrations .list-group-item.active { background: #F5F7F9 url('/assets/dashv3/i/icon-check-active.png') center right no-repeat; border-color:rgba(0,0,0,0.1); color:#22ccaa; }
.integrations .list-group-item.active:hover { background: #F5F7F9 url('/assets/dashv3/i/icon-cross.png') center right no-repeat; border-color:rgba(0,0,0,0.1); color:#E85656; }
.integrations .list-group-item:hover { background: #fff url('/assets/dashv3/i/icon-check.png') center right no-repeat; border-color:rgba(0,0,0,0.1);}
.integrations .add-tags .btn-primary{background-color:#ffcc33; border-color:#ffcc33; color:#000;}
.integrations .add-tags .btn-primary:hover{background-color:#F5A623; border-color:#F5A623;}


/* .providers { display: flex; } */
.provider-logo { margin-bottom: 2rem; }


.integrations .tags { display: block; margin-top: 1em; }
.integrations h3 { display: block; margin-top: 1em; }


/*Publish*/
.step-publish{background: var(--blue-light); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding:50px 0; color:#666; text-align: center;}
.step-publish h2{color:var(--green);}
.step-publish h5{color:var(--green); text-align: left;}
.step-publish h5.toggler:hover { cursor: pointer; }
.step-publish h5.toggler:after { content:  "\203A "; text-align: right; float: right; }
.step-publish h5.toggler.open:after { content:  "\203A "; text-align: right; float: right; transform: rotate(90deg); }
.step-publish span.toggler-content { display: block; margin-bottom: 1em; }
.step-publish span.toggler-content.format-preference { text-align: left; }
.step-publish span.toggler-content.hide-me { display: none; }
.step-publish form{margin-bottom: 20px;}
.step-publish textarea.form-control{height:100px;}
.step-publish .form-control.small { width: 40%; display: inline-block; margin-left: 5px; }
.step-publish p a{text-decoration: none; color:var(--blue);}
.step-publish p a:hover{text-decoration: underline;}
.step-publish p .material-icons{position: relative; top:6px; margin-right: 5px;}
.step-publish .btn-publish{background: #ffcc33;}
.step-publish .btn-publish:hover{background: #FFDB70;}

.step-publish .form-inline{justify-content:center;}
.step-publish .form-inline label{margin-right:20px;}
.step-publish .form-inline input{margin-right:20px;}
.step-publish .form-check{margin-top:30px;}

/*Integrations*/
.step-integrations{border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding:0 0 30px 0; color:#666;}
.step-integrations .confirm{margin-bottom: 50px;}
.step-integrations .confirm a{color:#fff;}
.step-integrations form{text-align: left; margin-bottom: 0;}
.step-integrations form select{margin-bottom: 20px;}
.step-integrations h2{color:var(--green);}
.step-integrations h3{color:var(--green);}
.step-integrations p a{text-decoration: none; color:var(--blue);}
.step-integrations p a:hover{text-decoration: underline;}
.step-integrations p .material-icons{position: relative; top:6px; margin-right: 5px;}

/*Template*/
.step-template { max-width: 80%; margin: 2rem auto; }
.step-template form { width: 90%; }
.step-template .form-check { padding-left: 0; }
.step-template .form-check label { padding-left: 1rem; }

/*Fake Browser*/
.fake-browser{
	display: block;
	margin:50px;
	border-radius: 7px;
	background: #fff;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

.browser-toolbar{
	background: #ececec;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	padding:12px 20px 8px 20px;	
	pointer-events: none;
}

.browser-toolbar span{
	display: inline-block;
	width:12px;
	height:12px;
	margin-right: 3px;
	border-radius: 6px;
}

.browser-toolbar span.red{background-color: #FB6363;}
.browser-toolbar span.yellow{background-color: #FCC158;}
.browser-toolbar span.green{background-color: #22C85B;}

.email-field { border-bottom: 1px solid #ececec; padding:12px 20px 8px 20px; }
.email-field p { margin-bottom: 0; color:#666; font-weight: 400; }
.email-field p strong{ font-weight: 600; color:var(--text-dark); }

.browser-body{ padding:50px; white-space: pre-line; }

/*Smallest Setting*/
@media (max-width: 575.98px) {
	.sidebar{
		position: relative;
	}
	
	.sidebar-sticky{
		height: auto;
	}
}



	/* ========== UPLOADS ========== */
	.BN-upload-wrapper {
	  max-width: 500px;
	  margin: 0 auto;
	  position: relative;
	  overflow: hidden;
	  display: block;
	}

	.BN-upload-wrapper button.upload {
	  border: 2px solid rgba(0,0,0,0.3);
	  color: #000;
	  background-color: #fc3;
	  padding: 8px 20px;
	  border-radius: 8px;
	  font-size: 20px;
	  font-weight: bold;
	  z-index: 9999;
	}
	.BN-upload-wrapper button.upload:hover { cursor: pointer; }

	.BN-upload-wrapper .progress {
	  line-height: 0;
	  visibility: hidden;
	  width: 100%;
	  background: darkgreen;
	  color: #fff;
	  font-weight: bold;
	  font-size: 70%;
	  margin: 1em 0;
	  height: 5px;
	  padding: 10px;
	  border-radius: 3px;
	  transition: all 0.25s linear;
	}
	.BN-upload-wrapper .progress.inactive { visibility: hidden; width: 0%; opacity: 0; }
	.BN-upload-wrapper .progress.active { visibility: visible; opacity: 1;}
	.BN-upload-wrapper .progress.processing { background: darkgreen; color: #000; opacity: 0.7; visibility: visible; }

	.BN-upload-wrapper button.upload:hover {
	  cursor: pointer;
	}

	.BN-upload-wrapper input[type=file] {
	  font-size: 80px;
	  position: absolute;
	  z-index: 999;
	  left: 0;
	  top: 0;
	  opacity: 0;
	}
	.BN-upload-wrapper input[type=file]:hover {
	  cursor: pointer;
	}

.edit-options .thumb-wrap{margin-bottom:0;}
.edit-options button.img-preview, .sidebar button.img-preview { display: flex; justify-content: center; width: 100%; height:100px; position: relative; border-radius:4px; border:none; background:rgba(0,0,0,1);}
.edit-options button.img-preview.btn, .sidebar button.img-preview.btn{background-color:rgba(0,0,0,0.1); padding:0;}
.edit-options button.img-preview.btn.btn-primary, .sidebar button.img-preview.btn.btn-primary{padding:0;}
.edit-options .img-preview img, .sidebar .img-preview img { position: absolute; top: 0; left: 0; width: calc(100% - 2px); height:calc(100% - 2px); border-radius:4px; margin:1px; object-fit:cover; object-position:50% 50%; flex:1; align-self:center; }
.edit-options .img-preview img, .sidebar .img-preview img {background: transparent url() 0 0 no-repeat!important; text-indent: -9999px; color: transparent!important; -webkit-appearance: none!important;}
.edit-options .img-preview span, .sidebar .img-preview span { background: rgba(0,0,0,0.5); color: #fff; padding: .5em; border-radius: 5px; position:relative; }
.edit-options button.img-preview + a, .sidebar button.img-preview + a{cursor:pointer; margin-top:10px; display:block;}
.edit-options button.img-preview + a:hover, .sidebar button.img-preview + a:hover{text-decoration:none; color:#ffcc33;}
.edit-options div div.radio:first-of-type, .sidebar div div.radio:first-of-type{margin-top:0;}
.edit-options input[type=range] { width: 100%; padding: 0; }

/* ========== AWEBER POPUP ========== */
.aweber { display: block; width: 50%; margin: 3rem auto; background: var(--white); color: var(--text-dark); border-radius: 5px; padding: 1rem 2rem; text-align: center; }

/* ========== MODALS ========== */

.ReactModal__Overlay { z-index: 1000001 !important; position: fixed; background: #f5f7f9; color:#666; font-size:14px; display: flex; justify-content: center; width: 100vw; min-height: 100vh; top: 0; left: 0; opacity: 0; transition: opacity .15s ease-out; overflow-y: scroll;}
.ReactModal__Overlay.ReactModal__Overlay_after-open { opacity: 1; }
.ReactModal__Overlay.ReactModal__Overlay_before-close { opacity: 0; }

.ReactModal__Content{position: absolute; outline: none; width: 70%; max-width: 960px; flex:1; margin-top: 0%; transition: all .2s linear; opacity: 0; }
.ReactModal__Content.ReactModal__Content_after-open { margin-top: 10%; opacity: 1; }
.ReactModal__Content.ReactModal__Content_before-close { margin-top: 0%; opacity: 0; }

.ReactModal__Content .close-modal:hover { cursor: pointer; }
.ReactModal__Content .back:hover { cursor: pointer; }
.modal-wrap .ReactModalHeader h1{margin-top:0; margin-bottom: 40px; font-size: 2rem; clear: both; }
.modal-wrap .ReactModalHeader .close-modal{margin-top:13px; float:right !important;}
.modal-wrap .ReactModalBody{display: flex; flex-wrap:wrap; background: #fff; border:1px solid #ececec; border-radius: 5px; margin-top:20px;}
.modal-wrap .ReactModalBody .modal-item{flex:1; border-right:1px solid #ececec; padding:2.5%; text-align: center;}
.modal-wrap .ReactModalBody .modal-item:last-child{border-right: none;}
.modal-wrap .ReactModalBody .modal-item:hover{background: #ececec;}
.modal-wrap .ReactModalBody .modal-item p{margin-bottom: 0;}
.modal-wrap .ReactModalBody .modal-item button{margin-top: 20px;}
.modal-wrap .ReactModalBody .modal-item .form-group{margin-bottom: 0;}
.modal-wrap .ReactModalBody .modal-item label{margin-bottom: 20px;}
.modal-wrap .ReactModalBody .modal-item label.standalone {margin-bottom: 0px; margin-top: 20px; }

.modal-wrap.single .ReactModalBody{padding: 7%;}
.modal-wrap.single .ReactModalBody .filter .nav-pills{background: transparent;}
.modal-wrap.single .ReactModalBody .modal-item{text-align: left;}
.modal-wrap.single .ReactModalBody .modal-item:hover{background-color:transparent;}

.modal-wrap.quarters .ReactModalBody .modal-item{flex:none; box-sizing: border-box; width: 25%; border-bottom:1px solid #ececec;}
.modal-wrap.quarters .ReactModalBody .modal-item:nth-child(1){border-top-left-radius: 5px;}
.modal-wrap.quarters .ReactModalBody .modal-item:nth-child(4){border-top-right-radius:5px; border-right: none;}
.modal-wrap.quarters .ReactModalBody .modal-item:nth-child(4n+4){border-right: none;}
.modal-wrap.quarters .ReactModalBody .modal-item:nth-child(5){border-left:none;}
.modal-wrap.quarters .ReactModalBody .modal-item:first-child{border-left: none;}
.modal-wrap.quarters .ReactModalBody .modal-item img{-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); cursor:pointer;}
.modal-wrap.quarters .ReactModalBody .modal-item:hover .btn-default{background:#ffcc33;}
.modal-wrap.quarters .ReactModalBody .modal-item:hover .btn-default:hover{background:#F5A623; color:#fff;}

.modal-wrap.confirm .ReactModalHeader{text-align: center;}
.modal-wrap.confirm .ReactModalBody{background: transparent; border:none;}
.modal-wrap.confirm .ReactModalBody .modal-item:hover{background-color:transparent;}
.modal-wrap.confirm .ReactModalFooter{text-align: center;}

.ReactModalFooter{margin-top: 20px; margin-bottom: 10%; text-align: right;}
.ReactModalBody button.btn-default { border: none; margin: 0; }

.ReactModalBody h4 { font-size: 120%; font-weight: bold; margin-bottom: .5em; }

.ReactModalBody.image-gallery { padding-bottom: 0; margin-bottom: 20px; }
.modal-wrap .image-wrap {width:25%; padding:2.5%; margin: 0; border-right: 1px solid #ececec; border-top: 1px solid #ececec; background: #fff url('//beacon.by/assets/v2/i/loading.gif') 49% 50% no-repeat;}
.image-wrap:nth-of-type(5){border-right:none;}
.modal-wrap .image-wrap h3 { width: 100%; font-size:1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom:10px; text-align:center; }
.modal-wrap .image-wrap img { display: block; margin: 5px auto; clear: both; background: #fff; max-width:100%; height: 120px;}
.modal-wrap .image-wrap:hover { cursor: pointer; background-color:rgba(0,0,0,0.03); }
.modal-wrap .image-wrap a:hover {color:#ffcc33;}
.modal-wrap .filter { width: 100%; background: #efefef; padding: 20px;}
.modal-wrap .filter nav-pills{background: transparent;}
.modal-wrap .status { width: 100%; background: #FFF6D9; padding: 20px;}
.modal-wrap .status .btn{float:right; background:#ffcc33; color:#2c2f3d; border:1px solid rgba(0,0,0,0.1);}
.modal-wrap .status h4{margin-bottom:0; margin-top:6px; font-weight:normal;}
.modal-wrap .search { float: right; }
.modal-wrap .search input { padding: 5px 5px 5px 40px; border-radius: 5px; border: rgba(0,0,0,0.1); }

.inner-icon { position: relative; }
.inner-icon .icon { position: absolute; padding: 5px 0 0 10px; pointer-events: none; left: 0; }
.modal-wrap .image-edit img { display: block; margin: 50px auto;  }
.modal-wrap .image-edit form { margin: 50px auto;  }
.modal-wrap .image-edit .btn-delete { margin: 20px 0; background-color: #fff; color: #E64A4A; }
.modal-wrap .image-edit .btn-save { margin: 20px 0; background-color: #fc3;  }
.modal-wrap .back * { display: inline-flex; vertical-align: middle; }
.modal-wrap .back .icon { padding-right: 2px; }
.modal-wrap .delete-image { margin: 1.5em 0; color: #E64A4A; }
.modal-wrap .delete-image * { display: inline-flex; vertical-align: middle; }
.modal-wrap .clickable:hover { cursor: pointer; }
.modal-wrap .clickable .btn:hover { background: #FECC45; }
.modal-wrap ul.nav-pills{background: transparent; border-top-left-radius: 0; border-top-right-radius: 0;}
.modal-wrap ul.nav-pills li { padding: 0.5em 1em; border:1px solid rgba(0,0,0,0.05); border-radius: 5px; background:rgba(255,255,255,1); margin-left:20px; margin-bottom: 10px; }
.modal-wrap ul.nav-pills li.title {padding: 0.5em 1em 0.5em 0;border-radius: 5px; background: transparent; border:none; margin-left:0; }
.modal-wrap ul.nav-pills li.title:hover { background: rgba(0,0,0,0); cursor: auto; }
.modal-wrap ul.nav-pills li:hover { cursor: pointer; background: rgba(0,0,0,0.05); }
.modal-wrap ul.nav-pills li.active,
.modal-wrap ul.nav-pills li.active:hover { background: #3383C8; color: #fff; }

.modal-wrap ul.nav-pills.template-list{margin-top:20px;}
.modal-wrap ul.nav-pills.template-list li{margin-left:0; margin-top:0; padding:0; margin-bottom:0; border-top:none; border-bottom:1px solid ececec; border-radius:0;}
.modal-wrap ul.nav-pills.template-list li:first-child{border-top:1px solid #ececec; border-top-left-radius:5px; border-top-right-radius:5px;}
.modal-wrap ul.nav-pills.template-list li a{border-radius:0; padding:15px;}
.modal-wrap ul.nav-pills.template-list li:last-child{border-bottom-left-radius:5px; border-bottom-right-radius:5px;}

.modal-wrap .btn-muted{border:1px solid #ccc; background:#ececec;}
.modal-wrap .btn-muted:hover{border-color:rgba(0,0,0,0.1) !important;}