/*
 * Copyright (c) 2025, Tribal Limited
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Zenario, Tribal Limited nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL TRIBAL LTD BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */


body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body p {
	margin:0;
}

body input[type="button"] {
	height:24px;
	line-height:24px;
	padding:0 10px;
	border: 0;
	background: #1d6eb6;
	color: #fff;
	border-radius:2px;
	-webkit-transition: all 0.2s ease-in-out;
  	-moz-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
	cursor:pointer;
}

body input[type="button"]:hover {
	background-color:#2885d7;
}

#toolbar,
#lowerbar,
#editor { 
	left: 0;
	right: 25%;
}

#toolbar {
	height: 49px;
	top: 0;
	position: absolute;
	border-bottom:1px solid #abc5cd;
	line-height:1.5em;
	padding:10px;
}

#lowerbar {
	height: 39px;
	bottom: 0;
	position: absolute;
	border-top:1px solid #abc5cd;
	padding:10px 20px;
}

#toolbar,
#lowerbar {
	background: #dcf5fd;
}

#editor { 
	/*top: 60px;
	position: absolute;
	bottom: 60px;*/
	
	width:75%;
	height:calc(100vh - 130px);
	position:relative;
	z-index:9;
	top:70px;
	direction:initial;
	
}
#sidebar {
	top: 0;
	bottom: 0;
	left: calc(75% - 1px);
	right: 0;
	position: absolute;
	height: 100%;
	background: #f0f0f0;
	border-left:1px solid #ccc;
}

#sidebar a {
	color:#1d6eb6;
}

#sidebar.sidebarEmpty {
	background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 25px, #d0d0d0 25px, #d0d0d0 50px);
}

#sidebar .sidepanel_header,
#sidebar .info {
	background:#d3d3d3;
	padding:6px 10px;
}

#sidebar .sidepanel_header + .sidepanel_header {
	padding-top:0;
}

#sidebar .sidepanel_header table {
	border-spacing:0;
}

#sidebar .sidepanel_header table,
#sidebar .sidepanel_header table th,
#sidebar .sidepanel_header table td {
	padding:0;
	margin:0;
}

#sidebar .sidepanel_header table.selected_path td code {
	display: inline-block;
  	background: #f5f892;
  	padding: 1px 5px;
}

#sidebar .sidepanel_header span.info_icon {
	font-size:16px;
}

#sidebar .info {
	background:#d3d3d3;
	padding:10px 12px;
	line-height:1.5em;
}

#sidebar .info .info_text,
#sidebar .info .learn_yaml {
	padding-top:8px;
}

.vscroll {
	height: 100%;
	width: 100%;
	overflow-x: auto;
	overflow-y: scroll;
}

.ace_gutter-layer {
	min-width: 65px;
}


#toolbar h1 {
	margin: 0;
	padding: 0 0 2px;
	font-size: 15px;
}

#toolbar div.toolbar_content {
	position:relative;
	float: left;
	width:calc(100% - 270px - 40px);
	padding-left:40px;
	max-height:50px;
}

#toolbar div.toolbar_content p {
	line-height:1.35em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#toolbar div.toolbar_content .zenario_debug {
	position:absolute;
	left:0;
}

#toolbar div.toolbar_content .zenario_debug div {
	width: 28px;
	height: 28px;
	background-size:18px 18px;
}

#toolbar div.buttons {
	float: right;
	width:270px;
	padding-top:5px;
}

#toolbar div.buttons input {
	margin-left:5px;
}


#lowerbar select {
	width: auto;
}

#lowerbar .asterisk_explination {
	line-height: 1em;
	font-size: 0.75em;
	font-style: italic;
	margin-left: 10px;
	padding-top:4px;
}


#sidebar .sidepanel_title {
	font-weight: bold;
}

#sidebar .tagPath li.active {
	color: black;
}

#sidebar div.description {
	max-height: 50%;
	overflow-y: auto;
}

#sidebar div.type,
#sidebar div.required {
	margin: 3px 0;
}

#sidebar div.value,
#sidebar div.properties,
#sidebar div.additionalProperties {
	margin: 0;
}

#sidebar .properties_table {
	width:100%;
  	border-collapse: collapse;
  	border-top:1px solid #aaa;
  	border-bottom:1px solid #aaa;
}

#sidebar .properties_table td {
	border-top: 1px solid #a0a0a0;
}

#sidebar .property td.property_name > span {
	background: white;
	color:#0c2193;
	border: #c0c0c0 1px solid;
	border-radius: 2px;
	padding: 0px 5px;
	width: calc(100% - 30px);
	display: inline-block;
	float: left;
	position: relative;
	left: 3px;
}

#sidebar .property td.property_name {
	min-width: 130px;
}

#sidebar .property.required td.property_name span:after {
	content: ' *';
	color: #e00000;
	float: right;
	position: relative;
	left: 2px;
	right: 2px;
	top: 0;
}

#sidebar .undefined_property td.property_name > span {
	color:#867f7f;
}

#sidebar .undefined_property.required td.property_name > span {
	background: #ffd0d0;
}

#sidebar .property td.property_desc div {
	width: 100%;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 22px;
	max-height: 22px;
	white-space: nowrap;
}

.editor_tooltip,
.zenario_devtools_tooltip {
	border: 1px black solid;
	border-radius: 3px;
	background: #eeeeee;
	color: black;
	z-index: 10;
	padding: 2px;
	width: auto;
	min-width: 450px;
	max-width: 900px;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height:1.5em;
	padding:10px 15px;
}

.editor_tooltip p,
.zenario_devtools_tooltip p {
	margin: 16px 0 0;
}

.editor_tooltip .tag_name,
.zenario_devtools_tooltip .tag_name {
	font-family: "Courier new", monospace;
	font-weight: bold;
	font-size: 16px;
}

#properties_table td {
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 11px;
}

#toolbar,
#lowerbar,
#sidebar,
.editor_tooltip,
.zenario_devtools_tooltip {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

#toolbar,
#lowerbar,
#sidebar {
	font-size: 12px;
}

#editor.ace-tm .ace_marker-layer .ace_active-line {
	background:#f5f892;
}



/* RESPONSIVE STYLES
--------------------------------------------------------------------------------------------------*/

/* Layout max-width: 1024px
--------------------------------------------------------------------------------------------------*/

@media all and (max-width: 1025px) {
		
		#toolbar {
			height:69px;
		}
		
		#editor {
			height:calc(100vh - 150px);
			top:90px;
		}
	
}