/* #content{
    margin: 10px;
  } */
  
  .sfb-header-container{
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .simple-input{
    width: 400px;
  }
  
  #field-sitewide-search{
    width: 400px;
  }

 .item-label{
   white-space: initial !important;
  width: 90%;
  display: inline-block;
 }

#data-resource-sfb-table{
  width: 80% !important;
}

.custom-image-view-warpper > img{
  max-width: 40% !important;
  max-height: auto !important;
}

.dcat-export-link{
  margin-left: 10px;
  margin-top: 5px;
}

/* waiting dotted begin */


.jumping-dots-loader {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
  }
  
  .jumping-dots-loader span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #abd4fa;
  margin: 35px 5px;
  }
  
  .jumping-dots-loader span:nth-child(1) {
  animation: bounce 1s ease-in-out infinite;
  }
  
  .jumping-dots-loader span:nth-child(2) {
  animation: bounce 1s ease-in-out 0.33s infinite;
  }
  
  .jumping-dots-loader span:nth-child(3) {
  animation: bounce 1s ease-in-out 0.66s infinite;
  }
  
  @keyframes bounce {
  0%, 75%, 100% {
   -webkit-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
   transform: translateY(0);
  }
  25% {
   -webkit-transform: translateY(-20px);
   -ms-transform: translateY(-20px);
   -o-transform: translateY(-20px);
   transform: translateY(-20px);
  }
  }
  
  /* waiting dotted end */
/* #content{
  margin: 10px;
} */

.sfb-header-container{
  margin-left: 10px;
  margin-right: 10px;
}

.simple-input{
  width: 400px;
}

#field-sitewide-search{
  width: 400px;
}

.item-label{
  white-space: initial !important;
 width: 90%;
 display: inline-block;
}

#data-resource-sfb-table{
  width: 80% !important;
}

.custom-image-view-warpper > img{
  max-width: 40% !important;
  height: auto !important;
}

.dcat-export-link{
  margin-left: 10px;
  margin-top: 5px;
}

/* waiting dotted begin */


.jumping-dots-loader {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
  }
  
  .jumping-dots-loader span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: rgba(30, 139, 85, 0.8) !important;
  margin: 35px 5px;
  }
  
  .jumping-dots-loader span:nth-child(1) {
  animation: bounce 1s ease-in-out infinite;
  }
  
  .jumping-dots-loader span:nth-child(2) {
  animation: bounce 1s ease-in-out 0.33s infinite;
  }
  
  .jumping-dots-loader span:nth-child(3) {
  animation: bounce 1s ease-in-out 0.66s infinite;
  }
  
  @keyframes bounce {
  0%, 75%, 100% {
   -webkit-transform: translateY(0);
   -ms-transform: translateY(0);
   -o-transform: translateY(0);
   transform: translateY(0);
  }
  25% {
   -webkit-transform: translateY(-20px);
   -ms-transform: translateY(-20px);
   -o-transform: translateY(-20px);
   transform: translateY(-20px);
  }
  }
  
  /* waiting dotted end */


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

   .account-masthead {
    background-color: #1480e6 !important;
}

/* The text and icons in the user account info. */
.account-masthead .account ul li a {
  color: rgba(255, 255, 255, 0.6);
}
/* The user account info text and icons, when the user's pointer is hovering
   over them. */
.account-masthead .account ul li a:hover {
  color: rgba(255, 255, 255, 0.7);
  background-color:#1480e6 !important;
}


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

.masthead {
  background-color: #1480e6 !important;
}
/* The "navigation pills" in the masthead (the links to Datasets,
   Organizations, etc) when the user's pointer hovers over them. */
.masthead .navigation .nav-pills li a:hover {
  background-color: #1480e6 !important;
  color: white;
}
/* The "active" navigation pill (for example, when you're on the /dataset page
   the "Datasets" link is active). */
.masthead .navigation .nav-pills li.active a {
  background-color: #1480e6 !important;
}
/* The "box shadow" effect that appears around the search box when it
   has the keyboard cursor's focus. */
.masthead input[type="text"]:focus {
  -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
}


/* ===========================================
   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 the "Welcome to CKAN" and "Search Your Data"
   boxes. */
.hero .box {
  border: none;
}
/* Change the colors of the "Search Your Data" box. */
.homepage .module-search .module-content {
  color: rgba(255, 255, 255, 0.8);
  background-color: #1480e6 !important;
}
/* Change the background color of the "Popular Tags" box. */
.homepage .module-search .tags {
  background-color: #1480e6 !important;
}
/* 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: 0px;
}
.homepage .module-search {
  padding: 0px;
}
/* Add a border line between the top and bottom halves of the front page. */
.homepage [role="main"] {
  border-top: 1px solid rgb(204, 204, 204);
}


/* ====================================
   The footer at the bottom of the site
   ==================================== */

.site-footer,
body {
  background-color: #1480e6 !important;
}
/* The text in the footer. */
.site-footer,
.site-footer label,
.site-footer small {
  color: rgba(255, 255, 255, 0.6);
}
/* The link texts in the footer. */
.site-footer a {
  color: rgba(255, 255, 255, 0.6);
}