@import url("general.css");
@import url("aria.css");
@import url("ui.css");
@import url("layout.css");
/* Font Awesome */
@import url("solid.css");
@import url("fontawesome.css");
@import url("codemirror.css");

.layout {
	position: absolute;
	width: 100%;
	height: 100%;
	top: -20000px;
}

/*********************************************************/

dialog>.description {	/* hidden dialog descriptions */
	display: none !important;
}

.droptarget {
	border: 2px solid red !important;
}

/**************************** Logo panels ******************************/

/* alert, confirm, prompt */

.shadowed {
  border: 1px solid #eee;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
  -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.box {
  padding: 10px;
  background: #fff;
  position: relative;
  border-radius: 5px;
  margin: 0 10px;
}

.imagebuttons {
	display: flex;
	flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
	padding: 10px;
}
.imagebutton {
	display: inline-block;
	text-align: center;
	background-color: transparent;
	border: none;
	>figure, >img {
		margin: 0;
		cursor: pointer;
	}
	img.border {
		border: 2px solid #888;
	}
	>figure {
		display: table;
		caption-side: bottom;
		>figcaption {
			display: table-caption;
			min-height: 3em;	/* todo: 2xline-height of 1.5 */
			font-size: 9pt;
		}
	}
}

.progressbar {
	background-color: #ddd;
	border-radius: 4px;
	padding: 0;
	>div {
		background-color:#2196F3;
		border-radius: 4px;
		color: white;
		height: 1.5em;
		text-align: center;
	}
}

/*******************************************************************/

/* Image from http://loading.io/ */
#waiting-page {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.drag-over {
	border: 1px solid red;
}

#about-logo-text {
	padding-left: 10px;
	vertical-align: top;
}

/************************ Logo Controls ****************************/

.logo-editbox {
	padding: 2px 2px;
	height: auto;
	width: auto;
}

.logo-listbox {
	overflow-x:hidden;
	overflow-y: auto;
	padding: 0 0.3rem;
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
}

.logo-popup {
	width: 100px;
}

.logo-listbox p {
	white-space: nowrap;
    overflow-x: hidden;
	margin-bottom: 0.2rem;
}

.logo-listbox p[selected] {
    background: ButtonFace;
}

.logo-listbox:focus p[selected] {
    background: Highlight;
    color: HighlightText;
}

.logo-statictext {
	overflow: hidden;
	padding: 2px;
	height: auto;
	border: none;
	width: auto;
}

.logo-statictext p {
	margin-bottom: 5px;
	white-space: pre-line;
	word-wrap: break-word;
}

.logo-statictext p:last-of-type {
	margin-bottom: 0px;
}

.logo-checkbox {
	display: inline-block;
	white-space: nowrap;
	font-weight: normal;
	padding: 3px;
	width: auto;
}

.logo-checkbox[disabled], .logo-checkbox[disabled] span {
	cursor: not-allowed;
	color: #888;
}

.logo-checkbox span {
	vertical-align: middle;
	margin-right: 5px;
	font-weight: normal;
	background-color: transparent;
}

.logo-checkbox [type=checkbox], .logo-checkbox [type=radio] {
	margin: 0 5px 0 5px;
	vertical-align: middle;
}

.logo-video {width: initial;height: initial;}

/*********************** Symbols in editable table **************************/

.table-remove {
	color: #700;
	cursor: pointer;
}
.table-remove:hover {
	color: #f00;
}

.table-add {
	color: #070;
	cursor: pointer;
}
.table-add:hover {
	color: #0b0;
}

/*********************** Hidden texts **************************/

#welcome {
	display:none;
}

#hotkeys-dialog div {
	max-width: 350px;
}

#hotkeys-dialog td:last-child {
	padding-left: 20px
}

/***************************************************************/

@media screen and (max-width: 799px) {

	/* for small screens, hide button labels */
	.shrink-if-small span:last-child {
		display: none;
	}
}

/*** CSS Animations ***/

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30%;
}

/*** Printing ***/

@media print {
	div {
		overflow: visible !important;
	}
	@page {
		padding-right: 1ch;
	}
}

/****************** Z Ordering ************************/

#waiting-page {
	z-index: 29000;
}

.msgbox-image {
	padding: 10px;
}

/* Images in message boxes */
@media screen and (max-width: 991px) {
	.msgbox-image {
		width: 120px;
	}
}

@media screen and (max-width: 768px) {
	.msgbox-image {
		width: 60px;
	}
}

@media screen and (max-width: 544px) {
	.msgbox-image {
		display: none;
	}
}

#robots-message {
	margin-top: 10px;
}

.robots-error {
	font-weight: bold;
	color: red;
}

.robots-connected {
	font-weight: bold;
	color: darkgreen;	
}

/* ARIA for clickable images etc */
a.col {
	text-decoration: none;
	color: inherit;
}

/* the Open Icons font has 1 px margin, which does not fit */
.oi {
	top: 0px !important;
}

/* flashing warning text */

.warning-text {
    animation: blinkingText 0.8s infinite;
}
@keyframes blinkingText{
    0%{     color: red;    }
    80%{    color: transparent; }
    100%{   color: red;    }
}