html body {
  font-family: 'Arial';
  font-size: 12px;
  font-weight: normal;
  line-height: 150%;
  color: #333;
  padding: 0;
}

html h1 {
  font-family: 'Arial';
  font-size: 40px;
  font-weight: bold;
  line-height: 130%;
  color: #ffffff;
  padding: 0;
}
html h2,
html h3,
html h4,
html h5,
html h6 {
  font-family: 'Arial', sans-serif;
}
html input,
html button,
html select,
html textarea {
  font-family: 'Arial';
}


/* =====================================================
   The "account masthead" bar across the top of the site
   ===================================================== */

html .account-masthead {
  min-height: 10px;	
  background: #108082;
}



/* ========================================================================
   The main masthead bar that contains the site logo, nav links, and search
   ======================================================================== */

html .masthead {
  background-color: #ffffff;
  background-image: url("../../../base/images/taustapallero-kulma.png");
  background-repeat: no-repeat;
}
html .masthead .container {
  margin-top: 20px;
  margin-bottom: 20px;
}
html .masthead input[type="text"] {
  border-color: #108082;
  color: black;
}
html .masthead .navigation .nav-pills li a {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
}
html .masthead .navigation .nav-pills li a:hover,
html .masthead .navigation .nav-pills li.active a {
  background-color: #6dcff6;
  color: #ffffff;
}
html .masthead .btn-navbar,
html .masthead .btn-navbar:hover,
html .masthead .btn-navbar:focus,
html .masthead .btn-navbar:active,
html .masthead .btn-navbar.active,
html .masthead .btn-navbar.disabled,
html .masthead .btn-navbar[disabled] {
  background-color: #6dcff6;
}

/* ===========================================
   The content in the middle of the front page
   =========================================== */
/* Remove the "box shadow" effect around various boxes on the page. */
.box {
  box-shadow: none;
}
/* Remove the borders around boxes in "hero area". */
.hero .box {
  border: none;
}
/* Change the colors of the "Search Your Data" box. */
.homepage .module-search .module-content {
  color: #969696;
  background-color: #969696;
  border: none;
  border-radius: 0px;
}
/* Change the input border color of the "Search Your Data" box. */
.homepage .module-search .module-content input {
  border-color: #108082;
}
/* Change the background color of the "Popular Tags" box. */
.homepage .module-search .tags {
  background-color: #969696;
}

.homepage .module-search .tag {
  background-color: #108082;
  border-radius: 100px;
  color: #ffffff;
  box-shadow: none;
  border: none;
}

/* Remove some padding. This makes the bottom edges of the "Welcome to CKAN"
   and "Search Your Data" boxes line up. */
.module-content:last-child {
  padding-bottom: 10px;
}
.homepage .module-search {
  padding: 0px;
}

/* Add background image if screen is larger than 768px */
@media (min-width: 768px) {

  .homepage .main {
    background: #ffffff;
  } 
  .homepage [role=main] {
    background: #ffffff;
  }
  [role=main], .main {
    background: #ffffff;
    background-repeat:no-repeat;
    background-size: contain;
  }
  .homepage .hero {
    background: #f6f6f6;
    background-repeat:no-repeat;
    background-size:cover;
    padding-top: 0px!important;
    padding: 0px 0!important; 
  }
}

.syke_combined_search {
    /*background: #f6f6f6 url(../../../base/images/etusivu_tausta_1920px.jpg);*/
    background: #1C8689;
    background-size: cover;
    color: white;
    min-height: 409px;
    padding: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;    
}


.syke_scheme_selection {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
    padding-bottom: 20px;
}

.syke_scheme_selection_button {
    display:flex; 
	align-items:center; 
	background-image:url('../../../base/images/BTN_shortcut_turq.png'); 
	height: 66px; 
	width:294px;
}

.syke_scheme_selection_button_content {
	color:#fff; 
	max-width:60%;
	font-size: 15px;
	font-weight: bold;
}

.logo {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.shortcutbutton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    position: relative;
    width: 100%;
}


@media (max-width: 768px) {
  .hero {
  background: #f6f6f6;
    padding-top: 0px!important;
    padding: 0px!important; 
  }
}

@media (min-width: 768px)
[role=main], .main {
    padding-top: 0px!important;
    padding: 0px!important; 
}

@media (min-width: 768px)
.homepage [role=main] {
    padding: 0px!important; 
}

/* Content box in main area 
*/

.sykebox {
  border: none;
  border-top: 4px solid #24ADAE;
  border-radius: 0px;
  background-color: #F1F7F7;
  width: 360px;
  padding: 5px;
}

.sykebox a:hover {
  color: #24ADAE;
}


.transparent {
  background: transparent;
}

/*  ==================================
    Dataset page
    ================================== */
.pill {
  background-color: #679d7d;
}

.label {
   border-radius: 10px;
}

.label, .badge {
    padding: 3px 6px;
}

.nav-item.active>a, .nav-aside li.active a {
    background-color: #679d7d;
}

.nav-item.active>a:hover, .nav-aside li.active a:hover {
    background-color: #87bd9d;
}

/* ====================================
   The footer at the bottom of the site
   ==================================== */
html .site-footer {
  color: #ffffff;
  background: #969696;
}

html .site-footer a {
  color: #ffffff;
}

/* ====================================
   Other modifications
   ==================================== */

/* Datatypes */

.label[data-format=xls], .label[data-format*=xls] {
    background-color: #91a62f;
}

.label[data-format=pdf], .label[data-format*=pdf] {
    background-color: #e0051e;
}

.reportingHelpText {
	color: #fff;
	max-width: 1000px;
	margin-left: 20px;
}

.reportingHelpImage {
	max-width: 800px;
	margin-left: 100px;
	margin-bottom: 20px;
	border: solid 1px black;
}