/* Options Framework Admin Styles */

#optionsframework-wrap h1 {
	font-size: 2em;
}
h2 .nav-tab {
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
}
#optionsframework-container {
	display:block;
	position:relative;
	margin-top: 20px;
    background: #f5f5f5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
#optionsframework {
    background:#fff;
}
#optionsframework h2 {
	cursor: default;
	border-bottom: 1px solid #ddd;
    font-size: 1.8em;
    line-height: 2em;
	margin-top:0;
}
#optionsframework p {
	margin-bottom:0;
	padding-bottom:10px;
}
#optionsframework .section {
	width: 100%;
	display: inline-block;
	margin-bottom: 25px;
	padding: 0;
}
#optionsframework .group {
	padding: 10px 20px 40px 20px;
	min-height: 800px;
}
#optionsframework .section .section_heading {
	float:left;
	width:30%;
	padding-right:2%;
}
#optionsframework .full-header .section_heading {
	float: none;
	width: 100%;
	padding-right: 0;
}
#optionsframework .section h4 {
	margin-top:0;
	margin-bottom:7px;
}
#optionsframework .section .option {
	float:left;
	width:68%;
}
#optionsframework .section-hr .option {
	width:100%;
}
#optionsframework .section .controls {
	width:100%;
	padding-bottom:10px;
}
#optionsframework .section .explain {
	width:100%;
	padding-bottom:8px;
	font-size: 12px;
	line-height:16px;
	color: #777;
}
#optionsframework .section-checkbox .controls {
	width: 100%;
}
#optionsframework .section-checkbox .explain {
	width:100%;
}
#optionsframework .controls input[type=text] {
	min-height: 28px;
}
#optionsframework .tiny .controls input[type=text], #optionsframework .section-transparentcolor .controls input[type=text], #optionsframework .section-gradientcolor .controls input[type=text] {
	width:100%;
}
#optionsframework .controls input[type=text].wp-color-picker {
    width: 65px;
}
#optionsframework .controls select {
	margin-bottom:10px;
}
#optionsframework .controls textarea {
	width:100%;
	margin-bottom:10px;
}
#optionsframework .section-radio label, #optionsframework .section-multicheck label {
	float:left;
	max-width:90%;
	line-height: 16px;
	margin-bottom: 5px;
}
#optionsframework input.checkbox, #optionsframework input.of-radio {
	margin: 0 10px 5px 0;
	float:left;
	clear:both;
}
#optionsframework .section-typography .controls,
#optionsframework .section-margin .controls {
	float:none;
	width:auto;
}
#optionsframework .section-typography .explain,
#optionsframework .section-margin .explain {
	float:none;
	width:auto;
}
#optionsframework .controls input.of-typography-size,
#optionsframework .controls .of-typography-size,
#optionsframework .controls .of-typography-measure,
#optionsframework .controls .of-margin-size {
	width:80px;
	float:left
}
#optionsframework .controls .of-typography-unit,
#optionsframework .controls .of-margin-unit {
	width:50px;
	margin-left:5px;
	float:left
}
#optionsframework .controls .of-typography-face,
#optionsframework .controls .of-margin-face {
	width:100px;
	margin-left:5px;
	float:left
}
#optionsframework .controls .of-typography-style,
#optionsframework .controls .of-margin-style {
	width:80px;
	margin-left:5px;
	margin-right:5px;
	float:left
}
#optionsframework .section-transparentcolor .asColorPicker-wrap,
#optionsframework .section-gradientcolor .asColorPicker-wrap {
	min-height: 220px
}
#optionsframework .section-typography .wp-picker-container
#optionsframework .section-margin .wp-picker-container {
	margin-top:2px;
}
#optionsframework .of-background-properties {
	display:inline-block;
	clear:both;
	margin-top: 10px;
}
#optionsframework .controls .of-background-repeat {
	width:125px;
	margin-right:5px;
	float:left
}
#optionsframework .controls .of-background-position {
	width:125px;
	margin-right:5px;
	float:left
}
#optionsframework .controls .of-background-attachment {
	width:125px;
	margin-right:5px;
	float:left
}
#optionsframework .section-background .wp-picker-container {
	float:left;
	vertical-align:baseline
}
#optionsframework .controls .of-radio-img-img {
	border:3px solid #f9f9f9;
	margin:0 5px 10px 0;
	display:none;
	cursor:pointer;
	float:left;
	max-width: 100%
}
#optionsframework .controls .of-radio-img-selected {
	border:3px solid #ccc
}
#optionsframework .controls .of-radio-img-img:hover {
	opacity:.8;
}
#optionsframework .controls .of-border-width {
	width:80px;
	float:left
}
#optionsframework .controls .of-border-style {
	width:120px;
	float:left
}
#optionsframework .hide {
	display:none;
}
#optionsframework .of-option-image {
	max-width:340px;
	margin:3px 0 18px 0;
}

/* Editor */

#optionsframework .section-editor .explain {
	max-width: 98%;
	float:none;
	margin-bottom:5px;
}

/* Image Uploader */

#optionsframework .controls input.upload {
	width:65%;
}

#optionsframework .parent-screenshot {
	display: inline-block;
	width: 100%;
}

#optionsframework .screenshot,
#optionsframework .screenshot-multi {
	float:left;
	width: 100%;
	margin-left:1px;
	position:relative;
	margin-top:3px;
	background: url("../images/showsitelogo-bg.png");
}
#optionsframework .screenshot-multi {
	width: 49%;
}
#optionsframework .screenshot img {
	border-color:#ccc #eee #eee #ccc;
	border-style:solid;
	border-width:1px;
	float:left;
	max-width:334px;
	padding:4px;
	margin-bottom:10px;
	max-width:97%
}
#optionsframework .screenshot .remove-image,
#optionsframework .screenshot .remove-multi-image {
	background:url("../images/ico-delete.png") no-repeat;
	border:medium none;
	bottom:4px;
	display:block;
	float:left;
	height:16px;
	padding:0;
	position:absolute;
	left:-4px;
	text-indent:-9999px;
	width:16px;
}
#optionsframework .screenshot .no_image .file_link {
	margin-left: 20px;
}
#optionsframework .screenshot .no_image .remove-button,
#optionsframework .screenshot .no_image .remove-multi-button {
	bottom: 0;
}
#optionsframework .reset-button {
	float:left;
	cursor:pointer;
}

/* Bottom Section */

#optionsframework-submit {
	padding: 7px 10px;
	background-color: #f1f1f1;
}
#optionsframework .button-primary {
	float:right;
}
#optionsframework .section:after {
	content: "";
	display: table;
}
#optionsframework .section:after {
	clear: both;
}
#optionsframework-wrap .nav-tab-wrapper, 
#optionsframework-wrap .wrap h2.nav-tab-wrapper, 
#optionsframework-wrap h1.nav-tab-wrapper {
    float: left;
	width: 160px;
	border: none;
	padding: 0;
}
#optionsframework-wrap .nav-tab {
	display:block;
	width: 100%;
	color: inherit;
	background-color: #efefef;
	border: none;
	margin: 0;
	padding: 10px;
}
#optionsframework-wrap .nav-tab-active, 
#optionsframework-wrap .nav-tab-active:focus, 
#optionsframework-wrap .nav-tab-active:focus:active, 
#optionsframework-wrap .nav-tab-active:hover,
#optionsframework-wrap .nav-tab:focus,
#optionsframework-wrap .nav-tab:hover {
    background: #FFF;
}
#optionsframework-metabox {
  margin-left: 161px;
}
#optionsframework-wrap .metabox-holder {
    padding: 0;
}
#optionsframework-wrap .postbox {
	border: none;
    box-shadow: none;
    margin: 0;
}

.datebook-gradient-bg {
	border-radius: 4px;
	background: url("../images/showsite-color-bg.png");
}
.datebook-transparent-box {
	position:relative;
	display: inline-block;
	width:100%;
}
.datebook-transparent-box .datebook-color-shared {
	position: absolute;
	margin: 1px 0px 1px 2px;
	padding: 0;
	list-style: none;
	background: rgba(255,255,255,1.00) url("../images/showsite-color-bg.png");
}
.datebook-transparent-box .datebook-color-shared li {
	float:left;
	position:relative;
	margin:0;
	text-align: center;
	width: 57px;
	height: 26px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	letter-spacing: 0.094em;
	cursor:pointer;
	border-right: 1px solid #7e8993;
}
#optionsframework .section-transparentcolor .controls .datebook-transparent-box input[type="text"] {
	float:left;
	padding-left:68px;
	height:28px;
	width:auto;
	min-width: 200px
}

.datebook-gradient-box {
	position:relative;
	display: inline-block;
	width:98%;
	margin-bottom:-1px;
	padding:1%;
	padding-top:110px;
	border-radius: 4px;
}
.datebook-gradient-box .datebook-color-shared {
	position: relative;
	width:100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.datebook-gradient-box .datebook-color-shared li {
	position:relative;
	margin-bottom:0;
	background-color: #693a7d;
	text-align: center;
	width: 30px;
	height: 30px;
	border-radius: 5px;
	border:3px solid #FFFFFF;
	-webkit-box-shadow: 1px 1px 4px 1px rgba(00,00,00,0.2);
	box-shadow: 1px 1px 4px 1px rgba(00,00,00,0.2);
	letter-spacing: 0.094em;
	cursor:pointer
}
.datebook-gradient-box .datebook-color-shared li:first-child {
	float:left;
}
.datebook-gradient-box .datebook-color-shared li:last-child {
	float:right;
}
.datebook-gradient-box .datebook-color-shared .picker_editor {
	width: 100%;
}
.datebook-gradient-box .datebook-angle-radio {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	text-align: center;
	z-index:0
}
.datebook-gradient-box label.datebook-gradient-label,
.datebook-gradient-box label.datebook-gradient-label::before {
	-webkit-transition: .25s all ease;
	-o-transition: .25s all ease;
	transition: .25s all ease;
}
.datebook-gradient-box .datebook-angle-radio label {
	margin-right: -50px;
	z-index: 90;
	position: relative;
	padding-left: 30px;
	color: #717171;
}
.datebook-gradient-box .datebook-angle-radio label.datebook-gradient-label {
	position: relative;
	display: inline-block;
	margin-right: 7px;
	margin-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
	cursor: pointer;
	border-radius: 100%;
	width: 23px;
	height: 23px;
	line-height: 21px;
	border: 1px solid transparent;
	background-color: #fff;
	-webkit-box-shadow: 1px 1px 4px 1px rgba(00,00,00,0.2);
	box-shadow: 1px 1px 4px 1px rgba(00,00,00,0.2);
}
.datebook-gradient-box .datebook-angle-radio input[type="checkbox"]:checked + label.datebook-gradient-label, 
.datebook-gradient-box .datebook-angle-radio input[type="radio"]:checked + label.datebook-gradient-label {
	background-color: rgb(200, 200, 200);
}
.datebook-gradient-box .datebook-angle-radio input[type="checkbox"], 
.datebook-gradient-box .datebook-angle-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.datebook-gradient-box .datebook-angle-radio input {
	width: 27px;
	height:32px
}

#optionsframework .section-info img.emoji {
    height: 2em !important;
    width: 2em !important;
}
#optionsframework .section-textarea #emoji_icons {
	font-size: 1.8em;
}



#optionsframework .datebook-screenshot-tooltip {
	position: relative;
	display: inline-block;
	font-size:20px
}
#optionsframework #tooltip {
	background: #FFF;
	padding: 4px;
	border-radius: 4px;
	display: none;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
}

#optionsframework #tooltip[data-show] {
        display: block;
      }

#optionsframework #arrow,
#optionsframework #arrow::before {
        position: absolute;
        width: 8px;
        height: 8px;
        background: inherit;
      }

#optionsframework #arrow {
        visibility: hidden;
      }

#optionsframework #arrow::before {
        visibility: visible;
        content: '';
        transform: rotate(45deg);
      }

#optionsframework #tooltip[data-popper-placement^='top'] > #arrow {
        bottom: -4px;
      }

#optionsframework #tooltip[data-popper-placement^='bottom'] > #arrow {
        top: -4px;
      }

#optionsframework #tooltip[data-popper-placement^='left'] > #arrow {
        right: -4px;
      }

#optionsframework #tooltip[data-popper-placement^='right'] > #arrow {
        left: -4px;
      }






@media(max-width: 500px) {
	.datebook-gradient-box .datebook-angle-radio {
		position:absolute;
		bottom:50px;
		left:0;
		right:0;
		text-align: center;
	}
	.datebook-gradient-box .layout_default.picker_wrapper {
		__font-size: 7px;
	}
	.datebook-gradient-box .layout_default .picker_editor {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#optionsframework-wrap .nav-tab-wrapper, 
	#optionsframework-wrap .wrap h2.nav-tab-wrapper, 
	#optionsframework-wrap h1.nav-tab-wrapper {
		display:inline;
		float: none;
		width: 100%;
	}
	#optionsframework-wrap .nav-tab {
		display: block;
		width: auto;
	}
	#optionsframework-metabox {
		margin-left:0;
	}

	#optionsframework .section .section_heading {
		float: none;
		width:100%;
		padding-right:0%;
	}
	#optionsframework .section .option {
		float: none;
		width:100%;
	}
}
