/* d_all.css */
@import url('https://fonts.googleapis.com/css?family=Changa:600');

:root {
    --height-reader: calc(100vh - var(--height-header) - var(--height-top-tabs) - var(--height-top-bar) - var(--height-padding-top) - var(--height-padding-bottom) - var(--height-bottom-bar) - var(--height-bottom-tabs) - var(--height-bottom-free) );
    --height-header: 75px;
    --height-top-tabs: 50px; /* Same for lang and level */
    --height-top-bar: 50px;
    --height-padding-top: 25px;
    --height-padding-bottom: 25px;
    --height-bottom-bar: 50px;
    --height-bottom-tabs: 50px;
    --height-bottom-free: 25px;
    --height-audioplayer: 50px;
}

html,
body {
	background-image: linear-gradient(rgba(90,160,199,1) 0%, rgba(233,243,246,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aa0c7', endColorstr='#e9f3f6', GradientType=0 );
}

h1,h2,h3 {
  font-family: 'Changa', cursive;
}

h1 {
  font-size: 64px;
  margin: 20px auto;
}

h1,h2,h3,h4 {
  letter-spacing: 2px !important ;    
}

video {
    border-radius: 10px;
}

#header {
    padding: 15px 30px;
}

#di_logo {
    width: 100%;
    max-width: 250px;
}

#di_wrapper {
	height: 100vh;
	background-repeat: no-repeat;
	background-position: bottom;
}

#ReadMe {
    background: #ffffff;
    overflow: auto;
/*    
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
*/
	border-radius: 10px;    
    padding: 25px 50px 0px 50px; /* 0 50px 25px 50px; */
    height: var(--height-reader); /* calc(100vh - 75px - 300px); */ /* (header logo - tab lang) */
}

.dc_mission_signlist_readme {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.darkopacity { 
     background-color: rgba(0,0,0,0.6);
     height: 100%;
}

.txtBoderBlack{
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fgYellow,
.fgYellow a{
  color: #ffff00;
}

.title {
    line-height: 60px;
}

input.btn-custom-g {
	background: rgba(107,189,189,1);
	background: linear-gradient(to bottom, rgba(107,189,189,1) 0%, rgba(53,100,99,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bbdbd', endColorstr='#356463', GradientType=0 );
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-family: 'Changa', cursive;
  font-size: 22px;
	border-radius: 7px;
	padding: 5px 10px;
	border: 1px #264849 solid;
	color:#ffff39;
	text-decoration: none;
}

input.btn-custom-g:hover {
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,1);
	text-decoration: none;
}

a.btn-custom-g {
	background: rgba(107,189,189,1);
	background: linear-gradient(to bottom, rgba(107,189,189,1) 0%, rgba(53,100,99,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bbdbd', endColorstr='#356463', GradientType=0 );
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-family: 'Changa', cursive;
	border-radius: 7px;
	padding: 5px 10px;
	border: 1px #264849 solid;
	color:#ffff39;
	text-decoration: none;
}

a.btn-custom-g:hover {
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,1);
	text-decoration: none;
}

a.dc_disabled {
  opacity: 0.5;
}

.dc_button_back {
	padding-top: 10px;
	height: 40px;
}

.dc_button_text {
	padding-top: 10px;
	width: 32px;
}

.dc_audioplayer {
	width: 100%;
	border-bottom-right-radius: 10px;
}

/* --- Color in element a in text svenska and engelska --- */
.uppdrag-blueBGDefault {
    color: blue;
}

.uppdrag-blueBG1 {
    color: blue;
}

.uppdrag-blueBG2 {
    color: yellow;
}


.dc_text_info {
  max-width: 700px;
/*
  background: rgba(107,189,189,1);
  background: -moz-linear-gradient(top, rgba(93,167,167,1) 0%, rgba(53,100,99,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(107,189,189,1)), color-stop(100%, rgba(53,100,99,1)));
  background: -webkit-linear-gradient(top, rgba(107,189,189,1) 0%, rgba(53,100,99,1) 100%);
  background: -o-linear-gradient(top, rgba(107,189,189,1) 0%, rgba(53,100,99,1) 100%);
  background: -ms-linear-gradient(top, rgba(107,189,189,1) 0%, rgba(53,100,99,1) 100%);
*/
  background: linear-gradient(to bottom, rgba(93,167,167,1) 0%, rgba(53,100,99,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bbdbd', endColorstr='#356463', GradientType=0 );

  font-size: 14px;
  border-radius: 7px;
  padding: 5px 10px;
  color: #ffff39;
  text-align: left;
}

@media (min-width: 576px) {
	a.btn-custom-g {
		display: inline-block;
		width: auto;
		margin: 10px 10px 10px 10px;
		font-size: 22px;
	}
}

@media (max-width: 768px) {
	a.btn-custom-g {
		display: block;
		width: 60%;
		margin: 0px 0px 10px 0px;
		font-size: 20px;

	}
}