:root {

  /* Default color shades */
  /*--md-default-fg-color:               #007cc2;
  --md-default-fg-color--light:        #007cc2;
  --md-default-fg-color--lighter:      #007cc2;
  --md-default-fg-color--lightest:     #007cc2;
  --md-default-bg-color:               #007cc2;
  --md-default-bg-color--light:        #007cc2;
  --md-default-bg-color--lighter:      #007cc2;
  --md-default-bg-color--lightest:     #007cc2;*/

  /* Primary color shades */
  --md-primary-fg-color:               #007cc2;
  --md-primary-fg-color--light:        #34a4e3;
  --md-primary-fg-color--dark:         #026196;
  /*--md-primary-bg-color:               #007cc2;
  --md-primary-bg-color--light:        #007cc2;*/

  /* Accent color shades */
  --md-accent-fg-color:                hsl(14, 100%, 63%);
  /*--md-accent-fg-color--transparent:   ...;
  --md-accent-bg-color:                ...;
  --md-accent-bg-color--light:         ...;*/
}

[data-md-color-scheme="dragandbot"] {
  --md-primary-fg-color:               #007cc2;
  --md-primary-fg-color--light:        #34a4e3;
  --md-primary-fg-color--dark:         #026196;
}

span.area {
	/*border-radius: 5px;
	border: 2px solid #2196f3;
	padding: 0px 4px;*/
	color: #2196f3;
	text-transform: uppercase;
}

/* for images of buttons inline */
span.button-img img{
	height: 25px;
	margin-bottom: -3px;
	border-radius: 5px;
}

span.rounded-img img{
	border-radius: 5px;
}

span.button-click {
	border-radius: 5px;
	color: white;
	background: #2196f3;
  padding: 2px 4px;
}

span.db-button {
  border-radius: 0.2 rem;
  font-size: 0.75em;
	color: white;
	background: #333a4a;
	padding: 2px 4px;
}

span.unicode-large {
	font-size: 125%;
	/* position: relative;
	top: 5px; */
}

video {
	width: 100%;
}

/*lightbox*/
a.boxedThumb {
  display: block;
  padding: 4px;
  line-height: 20px;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
}

a.boxedThumb:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
}

/*for images with caption*/
.md-typeset figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}