/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 .techgraph-front-end-ui
 {
	 margin: 1em 0;
 }
 
 .techgraph-front-end-ui button
 {
	margin: 0 0.1em;
 }

 .techgraph-front-end-ui .techgraph-buttons a
 {
	display: inline-block;
	margin: 0 0.5em 0.5em 0;
	background-color: #eee;
	border-radius: 10px;
	border: 1px solid #ccc;
	font-size: 1em;
	font-weight: bold;
	padding: 0.1em 0.5em;
 }

 .techgraph-front-end-ui .techgraph-buttons a:hover
 {
   border-color: #000;
 }

#techgraph-editor-iframe
{
	/* have our iframe fill the parent window to begin with */
	width: 100%;
	height: 100vh;
}

.techgraph img.techgraph-thumbnail {
	/* Assure the graph thumbnail always fits in the current window (80% of the viewport minimun dimension). */
	max-width: 80vmin;
}

.techgraph-thumbnail-svg > svg
{
    width: 100%;
    max-width: 80vmin;
    height: auto;
}

/** CSS Spinner **/
.lds-dual-ring
{
  display: inline-block;
}

.lds-dual-ring:after
{
  content: " ";
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  border: 4px solid rgb(128, 27, 128);
  border-color: rgb(128, 27, 128) transparent rgb(128, 27, 128) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Make the popup window control buttons 50% larger for improved visibility. */
.popupwindow_titlebar_button {
	width: 33px;
	height: 30px;
}

/* [TGP-120] 'Avada menu bar on top of graph editor window' 
   Update the popup window z-index to be "higher" than the Avada (sticky) header resolve problem. */
.popupwindow_container
{
	z-index: 10020; /* greater than Avada header z-index of 10011 */
}

/* [TGP-79] 'Add "Properties" command, button and form' - hide list markers radio button items. */
#techgraph-properties-editor .tgp-radio-buttons li {
	list-style-type: none;
}

/* Our Notes text area should stretch to the full width of its container. */
#techgraph-properties-editor #tgp_property_notes {
	width: 100%;
	height: 6em;
}

/* We initially hide the Share button sub-service buttons (and the Copy URL input field). */
.techgraph-share-services {
	display: none;
}

/* Indent the Password Field in the Properties editor so it looks "subordinate" to the "Password" radiobutton item. */
#techgraph-properties-editor #tgp-field-password {
	margin-left: 3em;
}

/* Put a little padding at the bottom of the Properties Editor form so the submit button isn't so close to the popup frame */
#techgraph-properties-editor .techgraph_properties_form
{
	padding-bottom: 2em;
}

/* Assure validation error messages stand out on the form. */
.techgraph_properties_form .error
{
	color: red;
}

/* The submit button starts disabled; is enabled on change. */
.techgraph_properties_form input:disabled {
	color: gray;
}

.techgraph_properties_form #tgp-properties-form-submit-button
{
	margin-top: 1em;
}

/* Make the active state of the TinyMCE rich text editor more visible. */
#tgp-field-notes .mce-btn.mce-active button, 
#tgp-field-notes .mce-btn.mce-active:hover button, 
#tgp-field-notes .mce-btn.mce-active i, 
#tgp-field-notes .mce-btn.mce-active:hover i {
    color: black;
}

/* Add the “Page: “ prefix to the FacetWP techgraph_page_numbers facet ONLY if 
   we have pages. */
.facetwp-facet-techgraph_page_numbers .facetwp-pager:not(:empty)::before {
    content: "Page: ";
}

/* [TGO-96] 'Trial subscription should not allow Renew, only Upgrade'
   Add rule to hide the “Renew” link for the Trial subscription (subscription_plan=5477) element. */
.pms-account-subscription-action-link__renew[href*="&subscription_plan=5477&"] {
	display: none;
}

/* [TGO-95] 'New User (with no graphs): My Graphs: Improve "Please add techgraphs for them to display here" message' 
   We hide the message if the user has no graphs. They can use the "New Graph" button to add graphs. 
*/
a[href*="/wp-admin/post-new.php?post_type=techgraph"] {
	display: none;
}

/* [TGP-196] 'Add the word "Close to the TechGraph Editor popup window Close button' */
/* Let the Close button width adjust to the text. */
.techgraph-editor-popup-window .popupwindow_titlebar_button_close {
	width: auto;
}
/* Add the word "Close" before the button. */
.techgraph-editor-popup-window .popupwindow_titlebar_button_close::before {
	content: "Save & Close";
	font-size: 1em;
	margin-top: -0.3em; /* Center the text vertically in the area. */
}
/* Hide the SVG "X" icon in the popup window close button. */
.techgraph-editor-popup-window .popupwindow_titlebar_button_close svg {
	display: none;
}

/* [TGO-138] 'Improve "Add New Graph" experience with visual choices' 
   Style the entries layout for the "Add New Graph" page using flexbox. */
.techgraph-graph-templates {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.techgraph-graph-templates .techgraph-graph-template {
	flex: 0 1 300px;
	margin: 1em;
	padding: 1em;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-align: center;
}

.techgraph-graph-templates .techgraph-graph-template:hover {
	background-color: #eee;
}

/* [TGO-206] 'Delete Graph confirmation dialog formatting problem' */
#techgraph-confirmation-dialog {
	width: 100% !important; /* Make the dialog fill the window width. !important needed to override element auto-generated width. */
}