/* 
	This file has all the styles used on the admin and public facing side
*/
/*

INDEX:
	1. Comments
	2. Global styles
	3. Overlay styles
	4. Third party or modules CSS (TO BE REMOVED IN FUTURE VERSIONS)
*/

/************************************************
	1. COMMENTS
************************************************/

	/* Post Comments */
	#comments-video-container {
		margin-top: 11px;
		margin-bottom: 11px;
	}
	.comment-navigation ul.comment-nav-menu, .comment-navigation div.comment-nav-menu > ul {
		border-bottom: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.comment-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.comment-navigation li a, .comment-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.comment-navigation li a {
		border-bottom: 0;
		padding-bottom: 10px;
		color: #6a6a6a;
		cursor:pointer;
		line-height: 1.3;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.comment-navigation li a:hover {
		color: #000;
	}
	.comment-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857 rem 0 0;
		position: relative;
	}
	.comment-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.comment-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.comment-navigation ul li:hover > ul {
		border-left: 0;
		display: block;
	}
	.comment-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286 rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571 rem 0.714285714 rem;
		width: 180px;
		width: 12.85714286 rem;
		white-space: normal;
	}
	.comment-navigation li ul li a:hover {
		background: #e3e3e3;
		color: #444;
	}
	.comment-navigation .current-menu-item > a, .comment-navigation .current-menu-ancestor > a, .comment-navigation .current_page_item > a, .comment-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	#comments-text-link.selected, #comments-video-link.selected {
		border-bottom: 1px solid lightblue;
	}




/************************************************
	2. GLOBAL STYLES
************************************************/

	br.clear {
		float: none;
		clear: both;
	}

	.ziggeo-ctrl-btn {
		background-image: linear-gradient(#53c7f4, #335af4);
		border: 1px solid gray;
		border-radius: 4px;
		color: white;
		padding: 4px 10px;
		font-weight: bold;
		cursor: pointer;
		text-align: center;
		position:relative;
		margin: 2px;
		box-sizing: border-box;
	}
	.ziggeo-ctrl-btn.disabled {
		background-image: linear-gradient(lightgray, gray);
		pointer-events: none;
	}
	.ziggeo-ctrl-btn.selected {
		background-image: linear-gradient(#335af4, #53c7f4);
		background-color: lightgray;
		background-blend-mode: overlay;
		pointer-events: none;
	}
	.ziggeo-ctrl-btn-inline {
		padding: 0 4px;
		font-weight: normal;
		background: none;
		color: black;
		border: 1px dashed gray;
		border-radius: 10px;
		margin: 0 4px;
		cursor: pointer;
	}
	.ziggeo-ctrl-btn.delete {
		background-image: linear-gradient(orange, red);
    	transition: color .1s ease-in;
	}

	.ziggeo-ctrl-btn.delete::before {
		content: "\f182";
		padding-right: 4px;
		font-family: dashicons;
	}

	.ziggeo-ctrl-btn i {
		position: absolute;
		font-size: 0.5em;
		top: 2px;
		right: 2px;
		width: 1em;
		color: white;
		font-weight: bold;
		border-radius: 50%;
		border: 1px solid white;
		height: 1em;
		text-align: center;
		line-height: 1em;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		background-color: white;
	}
		.ziggeo-ctrl-btn i div {
			display: none;
		}
		.ziggeo-ctrl-btn:hover i div {
			display: block;
			font-size: 14px;
			position: absolute;
			background-color: rgba(24, 24, 24, 0.6);
			z-index: 2;
			padding: 10px;
			line-height: 16px;
			min-width: 120px;
			border: 4px double gray;
			border-radius: 0 10px 20px 20px;
		}
		.ziggeo-ctrl-btn.close {
			position: absolute;
			top: 10px;
			right: 10px;
			border-radius: 50%;
			background-image: radial-gradient(orange,red);
			width: 20px;
			height: 20px;
			font-size: 14px;
			line-height: 16px;
			padding: 0;
		}
		.ziggeo-ctrl-btn.close::after {
			content: "x";
		}
	.ziggeo-ctrl-group {
		border: 4px double lightgray;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 10px;
		margin: 10px 0;
	}

	.ziggeo-ctrl-form-popup::after {
		content: "\f504";
		font-family: dashicons;
		margin-left: 2px;
	}

	.ziggeo-ctrl-group label {
		display: block;
	}
	.ziggeo-ctrl-img-toggle {
		display: inline-block;
		width: 200px;
		height: 100px;
		border: 4px double gray;
		margin: 4px;
		box-sizing: border-box;
		border-radius: 40px 10px 80px 10px;
		line-height: 100px;
		text-align: left;
		padding: 8px;
		border-block-color: lightblue lightgreen;
		border-block-width: thin;
		vertical-align: bottom;
		cursor: pointer;
	}
	.ziggeo-ctrl-img-toggle.on {
		box-shadow: 0 0 20px 8px lightblue inset;
		border-right-color: green;
	}
	.ziggeo-ctrl-img-toggle.off {
		box-shadow: 0 0 10px 10px lightgray inset
	}
	.ziggeo-ctrl-img-toggle.disabled {
		cursor: not-allowed;
		box-shadow: none;
		background-color: transparent;
		color: gray;
		pointer-events: none;
	}
	.ziggeo-ctrl-img-toggle.on.disabled {
		border-right-color: lightgreen;
	}
	.ziggeo-list {
		margin-bottom: 20px;
		box-shadow: 2px 2px 2px lightgray;
	}
	.ziggeo-ctrl-editlist {
		list-style: none;
		border: 1px solid gray;
		background-image: linear-gradient(white, lightgray);
		padding: 4px;
		box-sizing: border-box;
		width: 300px;
		height: 32px;
		overflow: hidden;
		position: relative;
	}
	.ziggeo-ctrl-editlist::after {
		content: "\f140";
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		height: 32px;
		width: 32px;
		text-align: center;
		line-height: 30px;
		border-left: 1px solid lightgray;
		font-family: dashicons;
		font-size: 30px;
		padding: 0;
		margin: 0;
		color: lightgray;
	}
	.ziggeo-ctrl-editlist:focus {
		overflow-y: auto;
		height: auto;
		border-left: none;
		background: none;
		border-bottom: 2px double lightgray;
		border-right: none;
	}
	.ziggeo-ctrl-editlist:focus::after {
		display: none;
	}
	.ziggeo-ctrl-editlist li {
		background-color: white;
		margin: 0;
		height: 30px;
		line-height: 28px;
		padding: 2px 4px;
		box-sizing: border-box;
	}
	.ziggeo-ctrl-editlist li:hover {
		background-color: lightgray;
	}
	.ziggeo-ctrl-editlist:not(focus) li {
		pointer-events: none;
	}
	.ziggeo-ctrl-editlist:focus li {
		pointer-events: all;
	}

	/* Styles related to Ziggeo popup. Mostly to be used on admin side */
	.ziggeo_popup_form {
		position: fixed;
		top: 10%;
		left: 10%;
		right: 10%;
		bottom: 10%;
		overflow: auto;
		background-color: white;
		z-index: 9999;
		box-sizing: border-box;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border: 2px groove white;
	}
	.ziggeo-btn-radio {
		padding: 2px 8px;
		display: inline-block;
		background-color: white;
		cursor: pointer;
	}
	.ziggeo-btn-radio::before {
		content: "";
		border: 1px solid gray;
		box-sizing: border-box;
		width: 10px;
		height: 10px;
		background-color: green;
		display: inline-block;
		margin-right: 8px;
	}
	.ziggeo-btn-radio.disabled {
		background-color: #eaeaea;
	}
	.ziggeo-btn-radio.disabled::before {
		background-color: lightgray;
	}
	.ziggeo-ctrl-radio-group {
		display: inline-block;
		padding: 4px;
		box-sizing: border-box;
		background-color: lightgray;
		margin: 10px 0;
		border: 1px solid gray;
		box-sizing: border-box;
	}
	.ziggeo-group-section label::before {
		content: "";
		display: block;
	}
	.ziggeo-group-section input[type="range"] {
		width: 90%;
		margin-bottom: 10px;
	}
	.ziggeo-group-section [type="range"] + span {
		width: 6%;
		display: inline-block;
		margin-bottom: 10px;
		vertical-align: top;
	}




/************************************************
	3. OVERLAY STYLES
************************************************/

	/* Overlay for recorder */
	#ziggeo-overlay-screen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: gray;
		opacity: 0.6;
		z-index: 99999;
	}
	#ziggeo-overlay-close {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 10px;
		top: 10px;
		background-color: white;
		color: white;
		cursor: pointer;
		text-shadow: -1px -1px 0px black, 1px 1px 1px black, -1px 1px 1px black, 1px -1px 1px black;
		text-align: center;
		border-radius: 50%;
	}
	#ziggeo-video-screen {
		width: 300px;
		height: 300px;
		background-color: white;
		left: calc(50% - 150px);
		top: calc(50% - 150px);
		position: fixed;
		z-index: 100000;
	}
	.ziggeo_nonclickable {
		pointer-events: none;
	}




/************************************************
	4. THIRD PARTY OR MODULES CSS (TO BE REMOVED IN FUTURE VERSIONS)
************************************************/

	/*******************************************************************************/
	/* Other CSS */
	/*******************************************************************************/

	/* Support for JobManager integration */
	.ziggeo-button {
		background-image: linear-gradient(silver, white);
		border: 1px solid gray;
		border-radius: 20px;
		color: gray;
		padding: 4px;
	}
	#ziggeo-buttons-holder-JMV {
		background: transparent none repeat scroll 0 0;
		text-align: center;
		width: 100%;
		margin-top: 4px;
	}
		#ziggeo-buttons-holder-JMV .ziggeo-button {
			display: inline-block;
			width: 40%;
			cursor: pointer;
		}
		#ziggeo-buttons-holder-JMV .ziggeo-button:hover {
			background-image: linear-gradient(white, silver);
		}
			#ziggeo-buttons-holder-JMV .ziggeo-button.btn-left {
				border-bottom-right-radius: 5px;
				border-top-right-radius: 5px;
				margin-right: 2px;
			}
			#ziggeo-buttons-holder-JMV .ziggeo-button.btn-right {
				border-bottom-left-radius: 5px;
				border-top-left-radius: 5px;
				margin-left: 2px;
			}