@import "cms-fancytree.css";

@media screen and (max-width:400px) {
  @-ms-viewport{
    width: device-width;
  }
}

body {
  max-width: 370px;
  margin: auto;
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
	padding-left: 1.0em;
	padding-right: 1.0em;
	position: relative;
}

header {
	padding-bottom: 0.5em;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-areas: 
		"ha ha ha ha ha ha"
		"hb hb hb hc hc hc"
		"hd hf hf hf hf hg"		
}

header select {
	width: 100%;
}

div#item-flag {
	font-size: 1.5em;
	cursor: pointer;
}

div.ha {
	grid-area: ha;
}

div.hb {
	grid-area: hb;
}

div.hf {
	grid-area: hf;
}

div.hf {
	padding-top: 1.5em;
	padding-bottom: 0.5em;
}

#history-div {
	grid-area: hb;
	margin-left: 0em;
}

#leftnav-hider {
	grid-area: hd;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
	cursor: pointer;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

#leftnav-hider i {
	text-align: center;
}

#status-block {
	padding-left: 1.5em;
	font-size: 1.6em;
	text-decoration: underline;
	width: 60%;
	display: table-cell;
}

#currently-editing {
	color: #0093ba;
	font-size: 1.5em;
	width: 40%;
	display: table-cell;
}

#search-bar {
	grid-area: hc;
	margin-left: 1.0em;
	margin-top: 0em;
}

#search-bar input {
	display: inline-block;
	width: 72%
}

#search-bar.search-comps {
	display: inline-block;
	width: 100%;
}

#search-bar button {
	padding: 0;
}

#searchresults ul, #flagged-items-dialog ul {
	list-style-type: none;
}

#searchresults li, #flagged-items-dialog li {
	margin-bottom: 0.5em;
	margin-left: -2em;
}

#footer-wrapper {
	margin-top: 2em;
}

h1.main-heading {
	margin-bottom: 6px;
}

p.main-heading {
	margin-top: 0px;
}

hr {
	opacity: 0.4;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
}

#item-editor {
	width: 100%;
}

div.ff:nth-child(odd) {
	background-color: #eaeaea;
}

div.ff {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	align-items: center;
}

div.ff label {
	grid-column: 1 / span 2;
	margin-left: 0.5em;
}

div.ff div.inputs {
	grid-column: 3 / span 5;
}

div.ff div.extras {
	grid-column: 8 / span 2;
}

div#widefield-open-icon {
	cursor: pointer;
/* 	text-decoration: underline; */
}

#field-language-selector select {
	display: block;
}
 
input, textarea {
	max-width: 300px;
	width: 100%;
}
	
#item-editor label, #login label {
	display: inline-block;
	width: 100%;
}

#item-editor form .button-set button[disabled=disabled] {
	cursor: default;
}

.cms-dialog span.cms-icon {
	float:left; 
	margin:0 7px 50px 0;
}

.x1pt2em {
	font-size: 1.2em;
}

#addlinkdiv {
	width: 90%;
	margin-top: 1em;
	padding: 1em;
/* 	border: 1px solid #999 ; */
}

#addlinkdiv input {
	width: 90%;
}

#addlinkdiv label {
	display: inline-block;
	width: 5em;
}

input[type="checkbox"], input[type="radio"] {
	width: 2em;
}

.readonly-layer {
	position: absolute;
	top: 40px;
	left: 0px;
	background-image: url('/cms/resources/css/readonly.png');
	height: 95%;
	width: 100%;
	background-repeat: repeat;
	background-color: pink;
	opacity: 0;
	z-index: -1;
}

span.inaccessible {
	opacity: 0.5;
}

details {
	padding-top: 1em;
	padding-bottom: 1em;
}

#addlinkdiv details {
	padding-top: 0em;
	padding-bottom: 1em;
}

					/* >>>>> Used by cms-test */
						.pass {
							color: green;
						}
						
						.fail {
							color: red;
						}
					/* <<<<< Used by cms-test */

.inline {
	display: inline-block;
}

.hide {
	display: none;
}

.invisible {
	visibility: hidden;
}

.spacer10 {
	margin-top: 10px;
}

.spacer20 {
	margin-top: 20px;
}

.spacer3em {
	margin-top: 3em;
}

.top-align {
	vertical-align: top;
}

					/* >>>>> Used on login page */
						.underline {
							text-decoration: underline;
						}
						
						.red {
							color: red;
						}
						
						.green {
							color: green;
						}
						
						#login .heading {
							font-weight: bold;
							text-align: left;
						}	
					/* <<<<< Used on login page */

#linknav-container {
	display: block;
}

#link-confirm {
	visibility: hidden;
}

.sortable-link {
	margin-bottom: 0.5em;	
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.sortable-link.changed-link.ui-state-default {
	background-image: url('ui-bg_glass_45_mod_1x400.png');
}

.sortable-link .left {
	grid-column: 1 / 3;
}

.sortable-link .left .ui-icon {
	display: inline-block; /* Otherwise, icon is not visible */
	width: 1em;
	padding-right: 0.5em;
}

.sortable-link .right {
	grid-column: 3;
	justify-self: right;
}

/* High specificy, otherwise gets ignored */
#links-tab .sortable-link .right button {
	margin-top: 0;
}

#sortable-links button.remove-link {
	background-color: red;
	border-color: #c90000;
}

.link-linker {
	cursor: pointer;
	text-decoration: underline;
}

#links-tab button.link-linker {
	padding-left: 6px;
	background-color: #db9131;
}

#links-tab button.edit-link, #links-tab button.edit-parent-link {
	padding-left: 6px;
	background-color: #6eac2c;
}

div.button-set {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#item-editor button.action, #user-form button.action {
	justify-self: left;
	background-color: #6eac2c;
}

#item-editor button.reset, #user-form button.reset {
	justify-self: right;
	background-color: #d27e00;
}

div.action-reset-combo {
	justify-self: right;
}

						/* >>>>> Buttons */
							#item-editor button, #login button, #user-form button {
								background-color: #6eac2c;
								border: 1px solid #acdd4a;
								border-radius: 6px;
								color: #fff;
								padding: 6px;
								margin-top: 1.5em;
								cursor: pointer;
							}
							
							#item-editor #trash-button, #item-editor #trash-flagged-button, button#trash-empty-button {
								background: red;
								font-weight: bold;
							}
							
							#item-editor #trash-flagged-button-wrapper {
								display: grid;
								grid-template-columns: repeat(3, 1fr);
							}
							
							#version-tab button {
								margin-bottom: 1.5em;
								background-color: #6eac2c;
							}
							
						/* <<<<< Buttons */


#trash-table {
	margin-top: 1em;
	width: 100%;
}

#trash-table input[type=radio] {
	float: left;
	margin-left: 2em;
}

#trash-action {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	margin-top: 1.5em;
}

#trash-action button {
	margin-top: 0;
}

#trash-action .radio-set-container {
	justify-self: center;
}

div#trash-action-in-header {
	grid-area: hg;
	display: grid;
	align-items: center;
}

div#trash-action-in-header i {
	display: block;
	color: red;	
	cursor: pointer;
}

.progressbar {
	display: inline-block;
/* 	width: 15em; */
	margin-left: 1em;
}

div.section-ops {
	display: grid;
	grid-template-columns: 4fr 1fr 2fr;
	margin-top: 2em;
}

div.section-ops.delete {
	align-items: center;
}

div.section-ops span.radio-label {
	margin-left: -0.5em
}

div.section-ops input[type=radio] {
	margin-left: 1.0em
}

div#item-editor div.section-ops button {
	margin-top: 0em;
	width: 7em;
}

div.section-ops .radio-pair {
	display: inline-block;
}

.gap-1em {
	margin-left: 1em;
}

#core-commerce {
	display: none;
}

#version-tab table th, #version-tab table td, #trash-table th, #trash-table td {
	padding: 6px 12px 6px 6px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	vertical-align: top;
}

#version-buttons {
	margin-top: 2em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 50%;
	align-items: center;
}

#version-buttons button {
	margin-top: 0;
	margin-bottom: 0;
}
	
#move-target-identifier, #link-target-identifier {
	padding-left: 1em;
}

button[disabled=disabled] {
	opacity: 0.5;
}

#move-wrapper span.space-after {
	padding-right: 1em;
}

#item-core-editor {
	position: relative;
}

#tag-options {
	padding: 1em;
	border: #d2a54a solid 5px;
	z-index: 1000;
	background-color: #f2d9a7;
	position: absolute;
	right: 10em;
	bottom: 1em;
	width: 300px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	max-height: 150px;
	overflow: scroll;
}

#tag-options h3 {
	margin-top: 0px;
}

#tag-options ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#tag-options.hide {
	display: none;
}

#media-form input[name=thumbnail] {
	margin-right: 2em;
}

input.highlight {
	border: purple solid 5px;
}

div#field-guidance table, div#link-guidance table {
	border: 1px solid;
	border-collapse: collapse;
}

div#field-guidance td, div#link-guidance td {
	border: 1px dashed;
	padding: 5px;
}

div#item-flag i.flagged {
	color: red;
}

div#copy-data-section i.refresher {
	font-size: 1.2em;
	cursor: pointer;	
	padding: 0 1em 0 1em;
}

div#item-sibling-flag, div#item-flag-clear, div#item-flag-show {
	position: relative;
	color: #016b9b;
	font-size: 1.5em;
}

div#item-flag i, 
div#item-sibling-flag i, 
div#item-flag-clear i, 
div#item-flag-show i,
div#trash-action i
{
	cursor: pointer;
}

div#item-sibling-flag div {
	position: absolute;
	top: 6px;
	left: 6px;
	color: #58bbd5;
}

div#item-flag-clear div {
	position: absolute;
	top: 2px;
	left: 6px;
	color: #58bbd5;
	font-size: 1.5em;
}



img.egg-timer-gif {
	width: 100%;
}

div#undo-icon, div#redo-icon {
	visibility: hidden;
	cursor: pointer;
}

div#undo-redo, div#misc-controls {
	margin-top: 1.0em;
	display: grid;
	grid-template-columns: repeat(4, 1fr);	
}

div#trash-action {
	margin-top: 0;
}

div#trash-action i {
	justify-self: right;	
	color: red;
}

.in-your-face-text {
	font-size: 1.3em;
	font-weight: bold;
}

/* Probably used in search results dialog */
div.cms-icon-boy {background-position: -33px 0px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-girl {background-position: -48px 0px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-pdf {background-position: -64px 0px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-document {background-position: -80px 0px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-image {background-position: -96px 0px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-homepage {background-position: -16px 0px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-movie {background-position: 0px -32px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-photo {background-position: -16px -32px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-content {background-position: 0px -16px; background-image: url("fancytree-cms-icons.gif");}
div.cms-icon-component {background-position: -48px -80px; background-image: url("fancytree-cms-icons.gif");}

div#widefield-wrapper {
	visibility: hidden;
	z-index: 100;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
/* 	margin-top: 12px; */
}

textarea#widefield-editor {
	width: 100%;
	height: 100%;
	max-width: none;
	background-color: pink;
	border: grey 4px solid;
	margin: 0;
	padding: 1em;
}

div#widefield-toolbar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: grey;
	margin: 0;
	padding: 1em;
	width: 100%;
}

div#widefield-toolbar textarea {
	margin: 0;
	border: none;
}

div#widefield-toolbar label {
	color: white;
	font-size: larger;
	font-weight: bold;
	margin-right: 1em;
}
	
div#widefield-toolbar div.left {
	grid-column: 1;
}

div#widefield-toolbar div.right {
	grid-column: 2;
	justify-self: right;
}

div#widefield-toolbar div.widefield-icon {
	display: inline-block;
	width: 40px;
	padding: 6px;
	color: white;
	background-color: purple;
	text-align: center;
	cursor: pointer;
}

div#widefield-toolbar div#widefield-close-icon {
	background-color: rgb(78, 154, 6);
	font-weight: bold;
}

div#session-expiry-warning {
	display: block;
	position: fixed;
	z-index: 1000;
	top: 30%;
	left: 30%;
	width: 30%;
	border: 6px solid blue;
	border-style: outset;
	background-color: lightblue;
	padding: 2em;
}

div#session-expiry-warning.hidden {
	display: none;
}

#login, #user-form {
	font-size: 1.1em;
}

div#user-corner {
	font-size: 1.25em;
	position: relative;
}

div#user-corner i {
	font-size: 1.25em;
	color: green;
	margin-right: 0.5em;
	cursor: pointer;
}

div#user-menu {
    position: absolute;
    top: 1.5em;
    background-color: pink;
    z-index: 1;
    padding: 0.25em;
		border: 2px solid red;
}

div#user-menu.hidden {
	visibility: hidden;
}

div#user-menu ul {
	list-style: none;
	line-height: 1.5em;
	margin: 0;
}

div#user-menu li {
	margin-left: -2.5em;
	cursor: pointer;
}

div#user-menu a {
	text-decoration: none;
}

div#user-update-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

div#user-update-header p {
	justify-self: right;
}


div.user-update-msg {
	color: green;
	width: 100%;
	border: 2px solid green;
	font-size: 1.5em;
	padding: 0 1em 0 1em;
}

@media (min-width: 700px) {
	header {
		grid-template-columns: repeat(9, 1fr);
		grid-template-areas: 
			"ha ha ha ha hb hb hc hc hc"
			"hd hf hf hf hf hf hf hf hg"
	}
	
	body {
	  max-width: 800px;
	}
	
	div.hb {
		margin-top: 1.5em;
	}
	
	div.media-details {
		display: grid;
		gap: 30px;
		grid-template-columns: fit-content(200px) 1fr;
	}
	
	#search-bar {
		margin-top: 1.5em;
		width: 100%;
	}
	
	#history-div {
		margin-top: 1.5em;
	}

	#field-language-selector select {
		display: inline;
	}
 
	input, textarea {
		max-width: 400px;
		width: 100%;
	}
	
	input#link-target-origid {
		width: 5em;
		display: block;
		margin-top: 6px;
	}
	
	#item-editor label, #login label {
		max-width: 150px;
		width: 100%;
	}
	
}