/* ==========================================================================
   tools.css loads on all the Envira Tools Administration Screen

   Any styles that will be used by the Tools section (or are useful to be
   included for future use) should be added to this file.

   ========================================================================== */
/* ==========================================================================
   Imports
   ========================================================================== */
/* ==========================================================================
   Variables SCSS
   ========================================================================== */
/* ==========================================================================
   Mixins
   ========================================================================== */
/**
* Media Query
*/
/**
* Border-Radius
*/
/* Add this attribute to the element that needs a tooltip */
[data-envira-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer; }

/* Hide the tooltip content by default */
[data-envira-tooltip]:before,
[data-envira-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none; }

/* Position tooltip above the element */
[data-envira-tooltip]:before {
  position: absolute;
  bottom: 120%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -35px;
  padding: 7px;
  width: 60px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  color: #fff;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  content: attr(data-envira-tooltip);
  text-align: center;
  font-size: 12px;
  line-height: 1.2; }

/* Triangle hack to make tooltip look like a speech bubble */
[data-envira-tooltip]:after {
  position: absolute;
  bottom: 120%;
  left: 50%;
  width: 0;
  margin-left: -5px;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0; }

/* Show tooltip content on hover */
[data-envira-tooltip]:hover:before,
[data-envira-tooltip]:hover:after {
  visibility: visible;
  opacity: 1; }

.envira-hidden {
  display: none !important; }

.envira-clearfix {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0; }

/* ==========================================================================
   Tools Styles
   ========================================================================== */
.envira-tab label {
  margin-top: 7px;
  display: block; }

.nav-tab {
  float: left; }

#envira-gallery-tools {
  padding: 20px 0;
  /**
  * Clearing
  */
  /**
  * Tab Panels
  */
  /**
  * Refresh
  */ }
  #envira-gallery-tools #envira-gallery-refresh-submit {
	margin-left: 10px; }
  #envira-gallery-tools .envira-hideme {
	display: none; }
  #envira-gallery-tools .envira-clear {
	clear: both; }
	#envira-gallery-tools .envira-clear:after {
	  clear: both;
	  content: '.';
	  display: block;
	  height: 0;
	  line-height: 0;
	  overflow: auto;
	  visibility: hidden;
	  zoom: 1; }
  #envira-gallery-tools .envira-gallery {
	margin: 15px 0 20px; }
  #envira-gallery-tools .envira-tab {
	display: none;
	/**
	* Active Tab Panel
	*/
	/**
	* Copy to Clipboard Button
	*/
	/**
	* Submit Button
	*/
	/**
	* Particular Tabs
	*/ }
	#envira-gallery-tools .envira-tab.envira-active {
	  display: block; }
	#envira-gallery-tools .envira-tab th {
	  width: 170px;
	  padding-right: 40px; }
	  @media (min-width: 600px) and (max-width: 767px) {
		#envira-gallery-tools .envira-tab th {
		  width: auto; } }
	#envira-gallery-tools .envira-tab input[type="text"],
	#envira-gallery-tools .envira-tab input[type="number"],
	#envira-gallery-tools .envira-tab input[type="password"],
	#envira-gallery-tools .envira-tab select,
	#envira-gallery-tools .envira-tab textarea {
	  width: 350px;
	  padding-right: 0;
	  font-size: 13px; }
	  @media (min-width: 600px) and (max-width: 767px) {
		#envira-gallery-tools .envira-tab input[type="text"],
		#envira-gallery-tools .envira-tab input[type="number"],
		#envira-gallery-tools .envira-tab input[type="password"],
		#envira-gallery-tools .envira-tab select,
		#envira-gallery-tools .envira-tab textarea {
		  width: 100%; } }
	#envira-gallery-tools .envira-tab form#logs-filter input[type="text"],
	#envira-gallery-tools .envira-tab form#logs-filter input[type="number"],
	#envira-gallery-tools .envira-tab form#logs-filter input[type="password"],
	#envira-gallery-tools .envira-tab form#logs-filter select,
	#envira-gallery-tools .envira-tab form#logs-filter textarea {
	  width: inherit; }
	#envira-gallery-tools .envira-tab form#logs-filter input.current-page {
	  text-align: center;
	  padding-right: 3px; }
	#envira-gallery-tools .envira-tab form#logs-filter .tablenav input[type="text"],
	#envira-gallery-tools .envira-tab form#logs-filter .tablenav input[type="number"] {
	  min-width: 30px; }
	#envira-gallery-tools .envira-tab textarea#debug-textarea {
	  width: 80%;
	  max-width: 965px; }
	#envira-gallery-tools .envira-tab input[type="text"],
	#envira-gallery-tools .envira-tab input[type="number"],
	#envira-gallery-tools .envira-tab input[type="password"] {
	  height: 32px; }
	  @media (min-width: 600px) and (max-width: 767px) {
		#envira-gallery-tools .envira-tab input[type="text"],
		#envira-gallery-tools .envira-tab input[type="number"],
		#envira-gallery-tools .envira-tab input[type="password"] {
		  height: auto; } }
	#envira-gallery-tools .envira-tab a.envira-clipboard {
	  width: 33px;
	  padding: 0; }
	#envira-gallery-tools .envira-tab #envira-gallery-tools-submit {
	  margin: 40px 0 0 0px; }
	#envira-gallery-tools .envira-tab #envira-tools-status .wrap {
	  margin-left: 0; }
  #envira-gallery-tools #envira-gallery-refresh-submit {
	vertical-align: baseline; }
  #envira-gallery-tools .envira-external-req {
	border: 1px solid #7cc048;
	border-radius: 3px;
	padding: 30px; }
	#envira-gallery-tools .envira-external-req h2 {
	  font-size: 20px;
	  margin: 0;
	  padding: 0; }
  #envira-gallery-tools .envira-external-req-active {
	border: 1px solid #7cc048;
	background-color: #ffffff;
	border-radius: 3px;
	padding: 30px; }
	#envira-gallery-tools .envira-external-req-active h2 {
	  font-size: 20px;
	  font-weight: 600;
	  margin: 0;
	  padding: 0; }

/* ==========================================================================
   Tools Tab Styles
   ========================================================================== */
#envira-tabs .form-table th, #envira-tabs .form-table td {
  padding-top: 25px;
  padding-bottom: 25px; }
@media (min-width: 768px) and (max-width: 991px) {
  #envira-tabs .form-table th {
	padding-top: 40px;
	padding-bottom: 10px;
	padding-right: 0px !important; } }
@media (min-width: 600px) and (max-width: 767px) {
  #envira-tabs .form-table th {
	padding-top: 40px;
	padding-bottom: 10px;
	padding-right: 0px !important; } }
#envira-tabs .form-table tr#envira-tools-key-box th {
  /* bit of a hack */ }
  @media (min-width: 768px) and (max-width: 991px) {
	#envira-tabs .form-table tr#envira-tools-key-box th {
	  padding-top: 20px; } }
  @media (min-width: 600px) and (max-width: 767px) {
	#envira-tabs .form-table tr#envira-tools-key-box th {
	  padding-top: 20px; } }
@media (min-width: 768px) and (max-width: 991px) {
  #envira-tabs .form-table td {
	padding-top: 0;
	padding-right: 0px; } }
@media (min-width: 600px) and (max-width: 767px) {
  #envira-tabs .form-table td {
	padding-top: 0;
	padding-right: 0px; } }
#envira-tabs .form-table tr {
  border-bottom: 1px solid #ddd; }
#envira-tabs .form-table tr.no-bottom-border {
  border-bottom: 0; }
#envira-tabs .envira-tab table.form-table tr:first-of-type th,
#envira-tabs .envira-tab table.form-table tr:first-of-type td {
  padding-top: 0; }
#envira-tabs .description {
  color: #666666;
  font-size: 13px;
  margin-top: 10px; }

#envira-tabs-nav {
  border-bottom: 0 !important;
  background-color: #ffffff;
  height: 50px;
  padding-left: 20px;
  margin: 0 0 0 -20px;
  display: table;
  width: 100%; }
  @media (min-width: 600px) and (max-width: 767px) {
	#envira-tabs-nav {
	  height: auto;
	  background-color: transparent;
	  margin: 5px 0 0 0;
	  padding: 0 10px;
	  display: table; } }
  #envira-tabs-nav a {
	float: left;
	/* Required for WordPress 4.3 and under */
	border-left: 1px solid #f1f1f1;
	border-right: 1px solid #f1f1f1;
	border-top: 0;
	color: #6b6e72;
	background: none;
	line-height: 50px;
	font-size: 13px;
	padding: 0 15px;
	margin: 0; }
	@media (min-width: 600px) and (max-width: 767px) {
	  #envira-tabs-nav a {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		background-color: #f7f7f7;
		padding: 0px 20px;
		margin: 5px 5px 0px 0;
		border: 1px solid #ddd;
		line-height: 35px;
		min-height: 30px; } }
  #envira-tabs-nav a:first-child {
	/*		margin-left: 20px;
			@include mq(xs) {
				margin-left: 0;
			}*/ }
  #envira-tabs-nav .envira-active {
	background-color: #f1f1f1;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	color: #000000; }
	@media (min-width: 600px) and (max-width: 767px) {
	  #envira-tabs-nav .envira-active {
		background-color: #6b6e72;
		color: #ffffff; } }
  @media (min-width: 600px) and (max-width: 767px) {
	#envira-tabs-nav a:hover {
	  background-color: #6b6e72;
	  color: #ffffff; } }

.envira-log-changed-table {
  padding: 0;
  margin: 0;
  width: 100%; }
  .envira-log-changed-table th, .envira-log-changed-table td {
	font-size: 12px;
	line-height: 14px; }
  .envira-log-changed-table .key-value {
	background: #ccc; }

body.envira_page_envira-gallery-tools #wpfooter {
  position: relative; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media only screen and (max-width: 770px) {
  #envira-gallery-tools #envira-gallery-tools-submit {
	margin: 40px 0 0 0; } }