/**
 * Shortcode generator screen
 * 
 * @package EasySocialShareButtons
 * @since 7.0
 * @author appscreo
 */

.essb-shortcode-overlay {
	background: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
}

.essb-shortcode-screen {
	background: #fff;
	position: fixed;
    border-radius: 3px;
    width: 1100px;
    height: 600px;
    max-width: 90%;
	max-height: 90%;
    overflow: hidden;
    top: 50%;
    left: 50%;
    z-index: 100200;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

.essb-shortcode-screen .heading {
	background: #000638;
	color: #fff;
	display: flex;
	align-items: center;
}

.essb-shortcode-screen .heading .essb-logo {
	padding: 15px;
	background-repeat: no-repeat;
	background-position: center;
}

.essb-shortcode-screen .heading span.title {
	font-size: 16px;
	font-weight: 400;
	display: block;
	width: 100%;
	letter-spacing: -0.5px;
}

.essb-shortcode-screen .heading span.close {
	width: 40px;
	font-size: 18px;
	cursor: pointer;
}

.essb-shortcode-screen .heading span.generate,
.essb-shortcode-screen .heading span.generated-list,
.essb-shortcode-screen .heading span.generate-options {
	display: flex;
    align-items: center;
    margin-right: 15px;
    padding: 7px 15px;
    border: 2px solid #fff;
	cursor: pointer;
	border-radius: 4px;
}

.essb-shortcode-screen .heading span.generated-list { display: none; }

.essb-shortcode-screen .heading span.generate i,
.essb-shortcode-screen .heading span.generate-options i,
.essb-shortcode-screen .heading span.generated-list i { font-size: 16px; margin-right: 5px; }

.essb-shortcode-screen .heading span.generate:hover,
.essb-shortcode-screen .heading span.generated-list:hover {
	background: #fff;
	color: #000638;
}

.essb-shortcode-screen .window-content {
	display: flex;
	height: 100%;
}

.essb-shortcode-screen .window-content .navigation {
	width: 250px;
	background: #f1f3f5;
	height: 100%;
	overflow-y: scroll;
}

.essb-shortcode-screen .window-content .navigation::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.essb-shortcode-screen .window-content .navigation::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5;
}

.essb-shortcode-screen .window-content .navigation::-webkit-scrollbar-thumb {
	background-color: #0ae;
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                   color-stop(.5, rgba(255, 255, 255, .2)),
					   color-stop(.5, transparent), to(transparent));
}

.essb-shortcode-screen .window-content .navigation a {
	display: flex;
	padding: 10px 15px;
	text-decoration: none;
	color: #000;
	align-items: center;
}

.essb-shortcode-screen .window-content .navigation a .icon i {
	font-size: 21px;
	margin-right: 10px;
}

.essb-shortcode-screen .window-content .navigation a:hover,
.essb-shortcode-screen .window-content .navigation a.active {
	background: #02b1ff;
	color: #fff;
}



.essb-shortcode-screen .window-content .navigation a .sc {
	font-weight: 700;
	display: block;
}

.essb-shortcode-screen .window-content .navigation a .title {
	font-weight: 400;
	display: block;
	font-size: 11px;
}

.essb-shortcode-screen .window-content .content {
	width: calc(100% - 250px);
	padding: 15px;
}

.essb-shortcode-screen .window-content .content .heading-row {
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
    padding: 15px 20px;
}

.essb-shortcode-screen .window-content .content .heading-row h3 {
	margin-bottom: 0;
}

.essb-shortcode-screen .window-content .content .option-row {
	display: flex;
	padding: 10px 0;
	margin: 5px 0;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.essb-shortcode-screen .window-content .content .seperator-row {
	background: #19073B;
	color: #fff;
	padding: 15px;
	margin-top: -5px;
	text-transform: uppercase;
	letter-spacing: 0px;
	font-size: 13px;
}

.essb-shortcode-screen .window-content .content .seperator-small-row {
	background: #f1f3f5;
	padding: 15px;
	margin-top: -5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 12px;
}

.essb-shortcode-screen .window-content .content .option-saverow {
	padding: 15px;
	margin: 5px 0;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	background: rgba(0,0,0,0.05);
}

.essb-shortcode-screen .window-content .content .option-saverow .value-field {
	padding-top: 5px;
}

.essb-shortcode-screen .window-content .content .option-row .param {
	width: 230px;
	padding-right: 15px;
}

.essb-shortcode-screen .window-content .content .option-row .param label,
.essb-shortcode-screen .window-content .content .option-row .param em { display: block; }

.essb-shortcode-screen .window-content .content .option-row .param label { font-size: 13px; cursor: default; }
.essb-shortcode-screen .window-content .content .option-row .param em { margin-top: 5px; font-size: 11px; font-style: normal; }

.essb-shortcode-screen .window-content .content .option-row .value {
	width: calc(100% - 250px);
}

.essb-shortcode-screen .window-content .shortcode-options {
	display: none;
	padding-bottom: 30px;
}

.essb-shortcode-screen .window-content .shortcode-options.active {
	display: block;
}

.essb-shortcode-screen .window-content .shortcode-options h2,
.essb-shortcode-screen .window-content .shortcode-options h3 {
	margin-top: 0;
}

.essb-shortcode-screen .window-content .shortcode-options h2 { margin-bottom: 0.5em; }
.essb-shortcode-screen .window-content .shortcode-options h3 { font-size: 14px; }

.essb-shortcode-screen .window-content .content {
	height: 100%;
	overflow-y: scroll;
}

.essb-shortcode-screen .window-content .content::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.essb-shortcode-screen .window-content .content::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5;
}

.essb-shortcode-screen .window-content .content::-webkit-scrollbar-thumb {
	background-color: #0ae;
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                   color-stop(.5, rgba(255, 255, 255, .2)),
					   color-stop(.5, transparent), to(transparent));
}

.essb-shortcode-screen .window-content .content .shortcode-generated {
	display: none;
	margin: 20px 0; 
}

.essb-shortcode-screen .window-content .content .shortcode-generated h5 {
	margin: 10px 0;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.essb-shortcode-screen .window-content .content .shortcode-result { 

	padding: 10px; 
	background: #f1f3f5; 
	color: #121212;
	font-family: Consolas,Monaco,monospace;
	font-size: 13px;
}

.essb-shortcode-screen .window-content .content .shortcode-embed-result { 

	padding: 10px; 
	background: #f1f3f5; 
	color: #121212;
	font-family: Consolas,Monaco,monospace;
	font-size: 13px;
}

/* Stored shortcodes design */
.essb-shortcode-screen .window-content .shortcode-list .essb-stored-sc {
	border: 1px solid rgba(0,0,0,0.1);
	padding: 15px;
	margin: 10px 0;
}

.essb-shortcode-screen .window-content .shortcode-list .essb-stored-sc .header {
	display: flex;
	align-content: center;
}

.essb-shortcode-screen .window-content .shortcode-list .essb-stored-sc .header .icon i {
	font-size: 18px;
    margin-right: 5px;
}

.essb-shortcode-screen .window-content .shortcode-list .essb-stored-sc .header .title {
	font-size: 15px;
	font-weight: bold;
	line-height: 1;
	width: calc(100% - 140px);
	padding-bottom: 10px;
}

.essb-shortcode-screen .window-content .shortcode-list .essb-stored-sc .header .actions {
	width: 140px;
	display: flex;
	align-content: center;
}

.essb-shortcode-screen .window-content .shortcode-list .essb-stored-sc .header .actions span {
	width: 50%;
	font-size: 11px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	cursor: pointer;
}

.essb-shortcode-screen .window-content .shortcode-list .essb-stored-sc .header .actions span i {
	margin-right: 5px;
	font-size: 14px;
}

.essb-shortcode-screen .window-content .shortcode-options .option-row .value input.size-small {
	width: 100px;
}

.essb-shortcode-screen .window-content .shortcode-options .option-row .value input.size-1-3 {
	width: 33%;
}

.essb-shortcode-screen .window-content .shortcode-options .option-row .value input.size-1-2 {
	width: 50%;
}

.essb-shortcode-screen .window-content .shortcode-options .option-row .value input.size-1-4 {
	width: 25%;
}

.essb-shortcode-screen .shortcode-all-profile-networks { display: none; }

/**
 * Media Shortcodes icon
 */

.mce-i-essb-sc-generator {
  font-family: "dashicons";
}

.mce-i-essb-sc-generator:before {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  font-family: "dashicons";
  content: "\f237";
  speak: none;
  vertical-align: top;
  position: relative;
}

.wp-media-buttons .essb-mce-button span.mb-essb-sc-generator {
	display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: text-top;
    margin: 0 2px;
}

.mb-essb-sc-generator:before {
	font: normal 18px/1 dashicons;
	content: "\f237";
}