/* --------------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------*/

/*

CAROUSEL.CSS - moving its contents here to avoid multiple trips for css files (learning from Google PageSpeed Insights)

*/




/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
  /* font-family: "Helvetica Neue",HelveticaNeueLTStd,Helvetica,Arial,sans-serif */
  /* Helvetica Neue is looking different on diff OS versions of Mac, hence using custom font all the way */
  font-family: HelveticaNeueLTStd,Helvetica,Arial,sans-serif
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette-divider-bottom {     /*margin setting for the last featurette divider on home page*/
    margin-top: 80px;
    margin-bottom: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

/* --------------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------*/



/* Custom styles */

/* Base */

.top-menu {
  margin-left: 30px;
}

@media (min-width: 768px){
.collapse > ul {
  padding-left: 250px; /* increasing the space between the menu and the logo (it seems padding is being measured from extreme left) */
  }
}

/* its important to use .collapse here otherwise it may mess up the ul in Insights page*/
/* this setting is only for the 'text' of the nav-pills */
/* moving this to .nav > li > a since both are basically the same */
/* .collapse > ul > li > a {
  color: #5a5a5a;
  font-size: 14.2px;
  font-weight:500;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
} */

.nav > li > a,
.nav > li > ul > li > a {

  color: #5a5a5a;
  font-size: 14.2px;
  font-weight:500;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

  /* adding a transparent border so that hovering doesnt move the menu */
  /* NOTE: This section may be appearing twice in this file - (now merged)*/

  border-width: 2px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0); /* the last 0 is for 0 opacity (i.e transparency) - so the border color is the same as the background color */
  border-radius: 6px; /* to increase the curviness of the corners */
  padding: 8px 13px; /* reducing the padding by 2px to account for the increased border */
}

.nav > li:not(.active) > a:hover,
.nav > li:not(.active) > a:focus {
  background-color: transparent; /* to nullify the grey background that is set in standard css */
  border-color: #337ab7;
  box-shadow: 1px 1px #337ab7;
}

/* original padding is 15px. reducing it to align it well with the menu */
.navbar-brand {
  padding-top: 1px;
  padding-left: 1px;
}

/*We addded navbar-default because we needed nav-pills collapsing on smaller screens. Removing the default background it added*/
.navbar-default {
  background:transparent;
  border-color: transparent;
}

/* doing the below in custom-base.js */
/* #main-navigation.navbar-collapse.collapse.in {
  border-color: transparent;
}*/

.featurette-heading {
  letter-spacing: 0; /* Thin out the marketing headings */
  margin-top: 70px; /* manually setting the top margin since its h2 and vertical align may not work. see this: https://stackoverflow.com/questions/12025924/html-vertical-alignment-and-align-center-in-h2-tag */
  margin-bottom: 0px;
}

/* had changed this to relative and z-index -1 so that the dropdown from search comes on top of it ref: https://stackoverflow.com/a/16156332/1526703 */
/* but the hyperlinks were no longer clickable then */
/* As a workaround, setting z-index as -1 only to the first row.featurette for now until we find a decent solution (TODO) */
/* see class z-index-negative */
.row.featurette  {
  position:relative;
  /* z-index:1; */
}

.z-index-negative {
  z-index:-1;
}

.marketing {
  top:100%;
  position:relative;
  clear:both;
}
.marketing h2 {
  font-weight: 500;
}

/* for footer of base */

/*trying to have 'responsive alignment' (https://stackoverflow.com/a/27267067/1526703)*/

@media (max-width: 767px) {
  .pull-right-xs {
    text-align: right;
  }
}

@media (min-width: 768px) { /* Small devices (tablets, 768px and up) */
  .text-center-sm {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .pull-right-sm {
    text-align: right;
  }
}

@media (max-width: 767px) { /* Small devices (tablets, 768px and up) */
  .text-center-xs {
    text-align: center;
  }
}






/* Search/Home page */

@media screen and (max-width: 768px) {
  h2{
    font-size:23px;
  }
}

/* Customizing the Search box */
.searchbox {
  color: #000 !important;
  font-size: 1.75vw;
  padding: 1px 7px; /* 7px is for left and right */
  text-transform: capitalize; /* Capitalises first letter of each word only 'visually', value sent is as-typed */
  height:60px;
}
/* showing only one searchbox (https://stackoverflow.com/a/18176310/1526703) */
#searchbox-lgscreen { display: inline-block; }
#searchbox-smscreen { display: none; }

/* using viewport sizing here for the placeholder font size to adjust relative to the screen size of the viewing device*/
@media(max-width:767px){
  /* showing only one searchbox (https://stackoverflow.com/a/18176310/1526703) */
  #searchbox-lgscreen { display: none; }
  /* using viewport sizing here for the placeholder font size to adjust relative to the screen size of the viewing device*/
  #searchbox-smscreen {
    display: inline-block;
    /* font-size: 3vw; */
    font-size: 18.5px;
  }
  #searchbox-smscreen::placeholder {
    font-size: 3.5vw;
  }

}

/*The following is to not have the placeholder capitalise every word as set above (text-transform: capitalize) */
/* TODO: may not work for IE (see here: https://stackoverflow.com/questions/22415038/text-transform-capitalize-also-affects-placeholder) */
::-webkit-input-placeholder { text-transform: initial;}
:-moz-placeholder {text-transform: initial;}
::-moz-placeholder {   text-transform: initial;}
:-ms-input-placeholder {text-transform: initial;}

#search_button {
  /*height:100%;*/
  /*font-size: 23px;*/
  padding: 15px 20px;
  font-size: 21px;
}

.dropdown-menu {
  text-shadow: none;
  font-size: 18.5px;
  z-index: 1999; /* See the note about stacking context below. */
}

/* If the dropdown-menu is long, it hides behind text of div */
/* maybe because creating a stacking context */
/* (https://stackoverflow.com/questions/16149701/bootstrap-dropdowns-menus-appearing-behind-other-elements-ie7) */
/* have also installed a chrome extension to help debug. Need to work on it */
/* Earlier it was hiding fully behind div which got resolved by setting overflow:visible; for carousel-inner */
/* but now its appearing behind text */
/* Tried to fix it now by setting position:relative and z-index:-1 for row.featurette above ref: https://stackoverflow.com/a/16156332/1526703
/* but then the hyperlinks in row.featurette were not clickable */
/* As a workaround, setting -1 z-index only to the first row.featurette for now until we find a solution */
/*#myCarousel {position:relative; z-index:1;} */
/*.carousel-inner {position:relative; z-index:1; overflow:auto;}
.carousel-caption { position:relative; z-index:1; overflow:auto; }
.container { position:relative; z-index:1; overflow:auto; }
.container.marketing { position:relative; z-index:1;overflow:auto; }*/

/* Top-aligning carousel as per this: http://stackoverflow.com/questions/21213154/bootstrap-carousel-caption-top-alignment
Also, putting a margin from the top. TODO: may need to make this relative so appears fine on all screen sizes */
.carousel-caption {
  /* margin-top: 20px; */ /* Commenting this temporarily while we have the Budget link in place */
  padding-top: 10px; /* Reducing padding temporarily while we have the Budget link in place */
  /* top:120px; */ /* Commenting out the margin from the top of the browser, using margin-top instead (margin from the previous element) */
  bottom: auto;
  color: #5a5a5a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  /*position: relative; /* changing this position because otherwise height:auto for div.item.active is not coming into effect and the background image is not spanning the carousel-caption div */
}

.carousel .item {
  background-color: #eee8e8; /* we are using background color 'in addition to background image' so that it shows a light colour 'while' the background img loads
  /* Background pattern from subtlepatterns.com (TODO(License): AJ: this credit is required) */
  background-image: url("/static/build/img/textured_paper.google_optimized.57291c4387de.jpg");
  padding-top: 20px; /* so nav is vertically spaced a bit */
  /* TODO: Using a fixed height for now since height:auto does not work on parents with children having position:absolute (carousel-caption has that). May need to change later though. */
  /* See https://stackoverflow.com/questions/12070759/ , https://stackoverflow.com/questions/9061520 and https://stackoverflow.com/questions/11492055 */
  /*height: 900px;*/
  padding-bottom : 30px; /* so that text on other pages doesnt end abruptly */ /* padding is 'inside' the border, margin is 'outside' */ /* homepage doesnt get affected with this (perhaps because it has a fixed height of 500px) */

}

.carousel {
height:100%; /* resolves the issue where the footer was hiding behind overlapping child of previous div*/
margin-bottom: 10px; /*reducing the default margin */
}

.carousel-inner {
  overflow:visible; /* overriding the overflow setting from carousel.less so that the drop-down and other stuff does not clip */
}

.sector-results-table {
  font-size: 20px;
  margin: auto; /* centering the table */
  color: #0b243b;
  /*border-color: #5a5a5a;*/
  /*border-color: black;*/
  background-image: url("/static/build/img/textured_paper_lightened.45c1eee52a7d.jpg");
  /*width: auto !important;*/ /* This was to make the width non-100% since 100% is set as default but commented it since we are reducing width of the panel now */
}

@media(max-width: 767px) { /* some settings below are similar to settings for detail page's table (table-custom) below */
  .sector-results-table {
     font-size: 12px;
     table-layout: fixed;
     word-break: break-word;
     width:100%;
   }
   .results-text {
     text-align:center;
   }
   /*.sector-results-table > tbody > tr > td {
     display: block;
     width:100%;
     text-align:center;
   }*/
}

.sector-results-table tr {
  /*border-color: black;*/
}

.sector-results-table td {
  border-color: #5a5a5a !important; /* for some reason, doesnt work without 'important' https://stackoverflow.com/questions/30573978/what-is-the-best-way-to-change-the-border-color-of-a-bootstrap-table */
}

/* Changing the hover color for rows*/
.table-hover tbody tr:hover td {
    /*background: rgb(224, 233, 246);*/
    background-image: url("/static/build/img/textured_paper_further_lightened.a8c27c51b18f.jpg");
}

.panel-heading div {
			margin-top: -28px;
			font-size: 15px;
		}

.panel-heading div span{
			margin-left:5px;
		}

.panel-body{
      background-color: #337ab7;
      display: none;
		}

/* TODO: Generalize all font sizes for small screens (so that we dont have to do it repeatedly for every div/span etc.)

/* using important here since 'badge' is further down and will overwrite it */

@media (max-width: 767px) {
   .badge-filter {
     font-size:15px !important;
   }
 }

 @media (min-width: 768px) {
    .badge-filter {
      font-size:13px !important;
    }
  }

.badge-filter {
  /* using important here since 'badge' is further down and will overwrite it */
  margin-top:-1em !important; /* using em here so its relative for the corresponding font size (and hence relative to the screen size) */
  margin-right: 0.1em !important; /* using em here so its relative for the corresponding font size (and hence relative to the screen size)*/
}

 @media (max-width: 767px) {
    h4.panel-title {
      font-size:12px;
    }
    .state-filter {
      font-size: 12px;
    }
  }

  @media (min-width: 768px) {
    h4.panel-title {
      font-size:18px;
    }
  }

  h4.panel-title {
    margin-top:1.5em;
    margin-bottom:0.8em;
  }


/* overriding the pager class */
.pager {
font-size: 20px;
color: #2d2d2d;
}

/* TODO: Instead of changing font size for small screens for every text on the page, we could perhaps use em or vw as described on some SO posts */
@media(max-width: 767px) { .pager {font-size: 15px;} }







/* Search Results */

.carousel .search-results-page {
  height: 800px;
}


/* Detail page */

.detail-text {
  line-height: 1.5;
  margin-top: unset;
}

.table-custom {
  font-size: 20px;
  margin: auto; /* centering the table */
  color: #0b243b;
}

/* customizing all cells of the detail page */
.table-custom > tbody > tr > td {
  vertical-align: middle;
}

tr.custom_vertical_align > td {
    vertical-align: baseline !important;
}

/* customizing only second column of the detail page */
.table-custom td:nth-child(2) {
  font-weight: 500;
}
@media(min-width: 767px) {
    /* setting the left padding for 2nd TD, only for desktop size screens, rest of the screen sizes take the bootstrap default(8px) left padding*/
    .table-custom td:nth-child(2)
    {
        padding-left: 30px;
    }
}
@media(max-width: 767px) {

  .detail-text {
    text-align: center;
  }

  .table-custom {
    table-layout: fixed; /* so the table does not go out of the containing div */
  }
  .table-custom > tbody > tr > td {
    /*display: table-row;*/ /* This helps in displaying cells as rows (so the table kind of "wraps-around" for smaller screens) but commenting this since we are now using display: block which seems to be producing the same effect */
    display: block; /* wraps the table on the screen for smaller screens */
    text-align: center;
    width:100%; /* to correct the column sizes since we are using table-layout: fixed; */
    word-break: break-word; /* This helps in breaking the words for smaller screens so the text doesnt go off screen for large words (like URLs etc.) */
  }
}



/* increasing the size of the label */
.label-detail-custom {
  /* first two below are trying to make text vertically centered */
  position: relative;
  top: -0.7rem;
  padding: 0.3em 0.6em;
  display: block; /* for the label to span the entire width of the parent cell */
  font-size: 70%;
  line-height: 1.5;
}


/* making position:relative atleast for carousel in detail page (if not on carousel-caption for all pages since that may need more tweaks here and there) so that its easy to manage the detail page since then it will be part of the document flow */
.caption-detail {
  /* removing all paddings/margins to move the title up */
  /*margin-top: 0;
  padding-top: 0;*/
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top:0;
  left: 0%;
  right: 0%;
}

@media(max-width: 480px) {
  .caption-detail { margin-top:10px;}
}

.caption-detail > h2 {
  margin-top: 0;
}

.badge-link span:hover {
  background-color: #337ab7;
}

.badge-link:hover {
  text-decoration: none;
}

.badge-link:visited {
  text-decoration: none;
}

.shortcut-buttons *{
    display: inline-block;
    vertical-align: baseline;
}

.shortcut-link {
    margin:5px;
}
/* Org visibility toggle switch with slider */
/* ref: https://stackoverflow.com/questions/53572460/toggle-switch-disable-one-button-when-i-enable-the-other-one */

/* align invisible org label in the center */
.toggle-button-div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: red;
}

/* The switch - the box around the slider */
.toggle-visibility-switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

/* Hide default HTML checkbox */
.toggle-visibility-switch input {
  display:none;
}

/* The slider */
.toggle-visibility-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196F3;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.toggle-visibility-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-visibility-slider {
  background-color: #2196F3;
}

input:focus + .toggle-visibility-slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .toggle-visibility-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(60px);
}
.toggle-visibility-on {
  display: none;
}

.toggle-visibility-on, .toggle-visibility-off {
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .toggle-visibility-slider .toggle-visibility-on {
  display: block;
}

input:checked + .toggle-visibility-slider .toggle-visibility-off {
  display: none;
}

/* Rounded sliders */
.toggle-visibility-slider.round {
  border-radius: 34px;
}

.toggle-visibility-slider.round:before {
  border-radius: 50%;
}

/* Sectors */

@media (min-width: 768px) {
  .thumbnail {
    min-height: 350px; /* this is set so that all the rows appear the same (earlier images were moving up and down based on img and text length of the thumbnail above them) https://stackoverflow.com/questions/39623180 */
  }

  .thumbnail a>img { /* setting a max-height for the image */
    width:100%; /* not sure if this is needed */
    height:200px; /* setting fixed height so images look neat and similar */
  }
}

@media (max-width: 767px) {
  .thumbnail {
    min-height: 200px; /* this is set so that all the rows appear the same (earlier images were moving up and down based on img and text length of the thumbnail above them) https://stackoverflow.com/questions/39623180 */
  }

  .thumbnail a>img { /* setting a max-height for the image */
    width:100%; /* not sure if this is needed */
    height:100px; /* setting fixed height so images look neat and similar */
  }

  h3 {
    font-size: 15px;
  }
}

/* Dashboard */

/* resetting the background-color of navbar-header set by custom.css of gentelella */
.navbar-header {
    background: transparent;
}
/* Highcharts */

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}


/* General */

body {
  padding-bottom: 0px; /* unsetting the bottom padding set by carousel.css */
}

.page-text {
  font-size: 20px;
  /*color: #5a5a5a;*/
  line-height: 1.7;
}

.page-text-small {
  font-size: 17px;
  /*color: #5a5a5a;*/
  line-height: 1.7;
}

.about-page {
  width: auto;
  margin-left: 10%;
  margin-right: 10%;
}

.link-custom {
  text-decoration: underline;
  /*color: #20527d;*/
  color: #5a5a5a;
  /*color:inherit; /* keep the original color and dont change it to blue */
}

.highlight-colour {
  color: #337ab7;
  /* text-shadow: unset; */
}

u.thin-underline {
  text-decoration: none;
  border-bottom: 1px solid black;
}

.carousel .full_length {
  height: auto; /* this will auto-adjust according to the content of the page */
}

@media (min-width: 768px) {
    .featurette-heading {
      font-size: 30px;
    }

  .general-caption {
    color: #5a5a5a;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    /*position: relative; /* changing this position because otherwise height:auto for div.item.active is not coming into effect and the background image is not spanning the carousel-caption div */
  }
}

@media (max-width: 767px) {
    .page-text {
      font-size: 16px;
    }
}

/* Edit Org page*/

/* Changing the look of the tooltip on the edit-org page */
.tooltip-inner {
   background-color:transparent;
   color:#393939;
   font-weight: bold;
}

/* only .tooltip-arrow will not work because bootstrap has it defined based on positioning so bootstrap's version will supersede since it'll be more specific then */
.tooltip.right .tooltip-arrow {
   /*border-right-color:#393939;*/
   visibility: hidden;
}

/* just setting the background and border to transparent since could not set its size right*/
.input-group .input-group-addon {
  background-color: transparent;
  border-color: transparent;
}

/* form-control-inline sets the width to auto since by default its 100%. See https://stackoverflow.com/a/49548939/1526703 */
.form-control-inline {
  width: auto;
}


/* Changing the default size of badges */
.badge {
  font-size: 18px;
  padding: 10px;
  font-weight: normal;
  margin-top: 5px; /* spacing out the badges */
  margin-bottom: 5px; /* spacing out the badges */
  margin-right: 12px; /* spacing out the badges */
}

@media (max-width: 767px) {
  .badge {
    /* spacing out the badges even further for mobile. Google webmaster complained of clickable elements being too close.
    Search for tap targets here:
    https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design*/
    /* Adjusting the badge margins further, as a single badge(placed in a multiple badge placeholder) seems un-aligned.*/
    margin-top: 25px;     /* spacing out the badges */
    margin-right: 12.5px;  /* spacing out the badges */
    margin-left: 12.5px;  /* spacing out the badges */
  }
  .badge.single-badge {
    margin-left: 25px;
    margin-top: 0px;
  }
}

.badge-small { font-size: 70% ;}
.badge-medium { font-size: 100% ;}
.badge-highlight { background-color: #000080; }  /* used to change the default badge color */

/* Customizing checkbox-badges */

.badge-checkboxes .checkbox input[type="checkbox"]:checked:focus + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"]:checked:focus + .badge {
  box-shadow: none; /* dont need the box shadow */
}

.badge-checkboxes .checkbox input[type="checkbox"]:checked + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"]:checked + .badge {
  background-color: #337ab7;
}

.badge-checkboxes .checkbox input[type="checkbox"]:focus + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"]:focus + .badge {
  box-shadow: none; /* dont need the box shadow */
}

.badge-checkboxes .checkbox input[type="checkbox"] + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"] + .badge {
  /* Commenting this out now since we have applied a global customization to badges now */

  /* font-size: 15px;
  padding: 7px 7px; */
  font-weight: bold;
}

/* Remove badge background-color and set text color for not checked options */
.badge-checkboxes .checkbox input[type="checkbox"]:not(:checked) + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"]:not(:checked) + .badge {
  color: #337ab7;
}
/* -------------------------------------------------------------------------------------------------------------------*/
/* STYLING FOR YOUTUBE FEED CONTAINER */
/* using flex, though only for large screens (for mobiles we don't want all of them in a row) */
@media (min-width: 768px) {
  .youtube_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.player_title_div {
    width:100%;
    text-align:center;
}

/* adding some space between videos on mobile */
@media (max-width: 767px) {
  .youtube_element {
    margin-bottom: 3%;
  }
}

/* -------------------------------------------------------------------------------------------------------------------*/
/* STYLING FOR TWITTER FEED CONTAINER */
/* Ref : https://tomelliott.com/javascript-ajax/custom-twitter-feed-integration-jquery */
#loading-container {
    padding:16px 0px 16px 0px;
    text-align:left;
}

#twitter-feed {
    width:auto;
    font-family: Arial, Helvetica, sans-serif;
    margin-top:6px;
    padding:8px 10px 5px 10px;
    border-radius:12px;
    background-image: url("/static/build/img/textured_paper_lightened.45c1eee52a7d.jpg");
    color:#333;
    overflow:auto;
}

#twitter-feed h1 {
    color:#5F5F5F;
    margin:0px;
    padding:9px 0px 9px 0px;
    font-size:18px;
    font-weight:lighter;
}

.twitter-article, #loading-container {
    width:100%;
    border-top:1px dotted #CCC;
    float:left;
    padding:8px 0px 8px 0px;
    position:relative;
}
.twitter-pic {
    position:absolute;
}

.twitter-pic img {
    float:left;
    border-radius:7px;
    border:none;

}

/* -------- TEXT STYLING ------*/
.twitter-text {
    width:100%;
    float:left;
    font-size:14px;
    padding-left:52px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.twitter-text p {
    margin:0px;
    line-height:19px;
}
.twitter-text a,  h1 a {
    color: #00acee;
    text-decoration: none;
}
.twitter-text a:hover,  h1 a:hover {
    text-decoration: underline;
    color: #00acee;
}

.tweet-time {
    font-size:10px;
    color:#878787;
    float:right;
}
.tweet-time a, .tweet-time a:hover {
    color:#878787;
}

.tweetprofilelink a {
    color:#444;
}
.tweetprofilelink a:hover {
    color:#444;
}

/* -------- FEED  ACTIONS ------*/
#twitter-actions {
    width:75px;
    float:right;
    margin-right:5px;
    margin-top:3px;
    display:none;
}
.intent {
    width:25px;
    height:16px;
    float:left;
}
.intent a{
    width:25px;
    height:16px;
    display:block;
    float:left;
}
.intent a:hover{
    background-position:-25px 0px;
}

#intent-retweet a{
    background-position:0px -17px;
}
#intent-retweet a:hover{
    background-position:-25px -17px;
}
#intent-fave a{
    background-position:0px -36px;
}
#intent-fave a:hover{
    background-position:-25px -36px;
}

/* -------- RETWEET INDICATOR ------*/
#retweet-indicator {
    width:14px;
    height:10px;
    background-position:-5px -54px;
    margin-top:3px;
    float:left;
}

/* styling for more and less links for toggling active district list display */
.more_less_links {
    font-weight: 400;
    font-size: 18px;
    text-decoration: underline;
}

/* styling for hidden badges */
.hidden_badges {
    display: none;
}
/********************************Testimonial carousel styling starts **************************************************/
/* src: https://bootsnipp.com/snippets/K5VD MIT License: https://bootsnipp.com/license */
/* carousel */
.testimonial-heading
{
    text-align: center;
    font-size: 18.5px;
    padding-right: 12px;
    font-weight: 500;
    color: #5a5a5a;
}
#testimonial-carousel .item
{
    background: none;
    height: 200px;
    padding-left: 6%;
    padding-right: 4%;
    padding-top: 3%;
}
#testimonial-carousel .carousel-inner
{
    height: 100%;
    width: 100%;

}
#testimonial-carousel .carousel-inner .item
{
    height: 100%;
    width: 100%;
}

.testimonial-container
{
    display: flex;
    justify-content: center;
}
.testimonial-small
{
    font-size: 80%;
}
.testimonial-center-align
{
    text-align: center;
}

/* Control buttons  */
#testimonial-carousel .carousel-control
{
    background: none;
    color: #222;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 4.3%;
    width: fit-content;
}

/* Changes the color of the indicators */
#testimonial-carousel .carousel-indicators li
{
    background: #c0c0c0;
}
#testimonial-carousel .carousel-indicators .active
{
    background: #333333;
}
#testimonial-carousel img
{
    width: 55px;
    height: 50px;
}
/* End carousel */

.item blockquote.testimonial-blockquote
{
    border-left: none;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    color: #5a5a5a;
    padding-top:1.5%;
    padding-bottom:1.5%;
    padding-right:4%;
    padding-left:4%;
}

.item blockquote.testimonial-blockquote img
{
    margin-bottom: 10px;
}

.item blockquote.testimonial-blockquote .content-col:before
{
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 1.8%;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px)
{
    #testimonial-carousel
    {
      margin-bottom: 0;
      padding: 0 40px 30px 40px;
      /*
      Fix for the testimonial carousel location change on right/auto scroll on mobile devices and tablets.
      The problem was occurring due the inherent bootstrap carousel code where due to varying heights of
      item content, the carousel keeps changing its height accordingly and focus scrolls to a different point on the page.
      To resolve the issue, we used the overflow hidden styling, which hides the overflowing content outside the div,
      hence keeps the carousel position unchanged. This was done according to Comment 4 in the SO solution mentioned
      here : https://stackoverflow.com/a/25258800
      */
      overflow: hidden;  /*added to resolve the carousel location change on scroll on non-desktop devices*/
    }

}
/**
  MEDIA QUERIES
*/

/* Small devices (tablets, up to 768px) */
@media (max-width: 767px)
{

    #testimonial-carousel
    {
      margin-bottom: 20px;
      padding: 0 10px 10px 10px;
      /*
      Fix for the testimonial carousel location change on right/auto scroll on mobile devices and tablets.
      Full description of the issue given above in the carousel styling code for tablets
      */
      overflow: hidden;  /*added to resolve the carousel location change on scroll on non-desktop devices*/
    }
    .item blockquote.testimonial-blockquote
    {
        padding-top:3.3%;
        padding-bottom:3.3%;
        padding-right:6.8%;
        padding-left:6.8%;
        font-size: 16px;
    }
    #testimonial-carousel .carousel-inner{
        height: 100%;
        width: 100%;
        margin-bottom: 2px;
    }
    #testimonial-carousel .carousel-inner .item{
        height: 100%;
        width: 100%;
    }
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */

    #testimonial-carousel .carousel-indicators li
    {

        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }

}
/********************************Testimonial carousel styling ends ***************************************************/

/*****new results template styling starts***************/
/****Ref:https://bootsnipp.com/snippets/dzlk *****/
/** License for this code snippet: https://bootsnipp.com/license **/
.carousel-custom-background .item{
    background-image: url("/static/build/img/textured_paper_lightened.45c1eee52a7d.jpg");
}


.results-container { margin-top: 20px; }
.results-hgroup { margin-bottom: 20px; }

.results-hgroup {
    padding-left: 15px;
    margin-bottom:0px;
}
.results-hgroup h1 {
    font: 500 normal 1.625em "Roboto",Arial,Verdana,sans-serif;
    color: #2a3644;
    margin-top: 0;
    line-height: 1.15;
}

.results-panel-primary{
    padding-left:0px;
    padding-right:0px;
    background: none;
    border:transparent;
    margin-bottom:0px;
    width:100%
}
.panel-primary>.results-panel-heading{
    margin-top: -45px;
    background:none;
    border:none;
    color:inherit;
}
.results-panel-heading div{
    margin-top: 35px;
    padding-bottom: 25px;
}
.panel-primary>.results-panel-heading>.results-panel-title{
    display: inline-block !important;
    word-wrap : break-word;
    width: 80%;
    /* font-size: 17px; */
    font: normal normal 1.24em "Roboto",Arial,Verdana,sans-serif;
    line-height: inherit; /* resetting it back since the 'normal' in font property above is changing it */
    color: #333333;
}
.results-badge-filter{
    color:#248dc1 !important;
}
.results-filter-btn{
    background-color:#337ab7;
    color:white;
}
.results-filter-input{
    font-size:15.75px;
    border:none;
}
.results-panel-body{
    background:none;
    padding-top: 0px;
    padding-bottom: 20px;
    width:100%;
}

.custom-text-grey {color: #4e4949;}
.medium-bold {font-weight: 500}
.search-results-section {
      /* padding-top:10px; */
      -moz-border-radius-topleft: 15px;
      -moz-border-radius-topright: 15px;
      -moz-border-radius-bottomright: 15px;
      -moz-border-radius-bottomleft: 15px;
      -webkit-border-radius: 15px 15px 15px 15px;
      border-radius: 15px 15px 15px 15px;
      width: 100%;
      /* background-image: url("/static/build/img/textured_paper_lightened.45c1eee52a7d.jpg"); */
}

.search-result {
  background-image: url("/static/build/img/textured_paper_lightened.45c1eee52a7d.jpg");
  -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  padding-top: 20px; padding-bottom: 0px; padding-left:10px;
  margin-top: 20px;
  cursor: pointer;
}

.search-result:first-child { margin-top: 0 !important; }
.search-result .col-md-2 { border-left: 1px dotted #0b243b; /* min-height: 100px; */ }
.search-result ul { padding-left: 0 !important; list-style: none;  }
.search-result ul li { font: 400 normal .98em "Roboto",Arial,Verdana,sans-serif;  line-height: 30px; color: #0b243b; }
.search-result ul li i { padding-right: 5px; }
.search-result .col-md-10 { position: relative; }
.search-result h3 { font: 400 normal 1.56em "Roboto",Arial,Verdana,sans-serif; margin-top: 0 !important; margin-bottom: 10px !important; }
.search-result h3 > a, .search-result i { color: #0466bd !important; word-wrap : break-word; }
/* .search-result h3 { text-shadow: 0px 0px #0466bd; } */ /* shadown of the same colour to make it little bolder */
.search-result h3 { text-shadow: 2px 2px #fafafa; }
.search-result p { font: normal normal 1.23em "Roboto",Arial,Verdana,sans-serif; color: #0b243b; line-height:inherit; word-break: break-word;}

.search-result:hover {
  background-image: url("/static/build/img/textured_paper_further_lightened.a8c27c51b18f.jpg");
}

/**styling for Org logo image in results template ***/
.org-logo-img{
    max-width:  110px;
    max-height: 110px;
}

@media (max-width: 768px){
    .panel-primary>.results-panel-heading>.results-panel-title
    {
        display: inline-block !important;
        width: 100%;
        word-wrap : break-word;
        font-size:1.23em;
    }
    .panel-primary>.results-panel-heading div {
        margin-top: 15px;
    }
    .results-filter-div
    {
        float:none !important;
        margin: 0 auto;
        text-align:center;
    }
    .panel-primary>.panel-heading .badge
    {
        margin-left: -20px;
    }
    #horizontal-list
    {
        /* used flex box below to evenly spread out the list items and wrap to next line, if required
        according to this SO post : https://stackoverflow.com/a/23226961/11002262 */
        display: flex;
        align-items: stretch; /* Default */
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
        padding-bottom: 20px;
        flex-wrap : wrap;
    }
    ul#horizontal-list li
    {
		display: block;
        flex: 0 1 auto; /* Default */
        list-style-type: none;
        padding-right: 2px;
    }
    ul#horizontal-list li i
    {
      padding-right: 0px;
    }
    ul#horizontal-list li:last-child i{
      padding-right: 2px;
    }
    article> div.col-xs-12.col-sm-12.col-md-2
    {
      border-left: none;
      min-height: auto;
    }
}

/*****new results template styling ends ***************/

/*******Article post template styling *****************/
/** Article post template derived from src : https://bootsnipp.com/snippets/2VoQ MIT License: https://bootsnipp.com/license **/
.article-main{
    /* background-image: url("/static/build/img/textured_paper_further_lightened.a8c27c51b18f.jpg"); */
    background-color: #ffffff;
    padding: 40px;
    border-radius: 25px;
    background-position: left top;
    background-repeat: repeat;
    /* width:75%; */
}
.article-header{
    /* border-bottom: 2px solid #337ab7; */
    text-align : center;
}
.article-header h3{
    font-weight: 700;
    font-size: 20px;
    margin-top: 5px;
}

.article-authors {
  font-size: 12px;
}

.article-update{
    overflow-wrap:break-word;
    font-size:18px;
    line-height: 1.6;
    /* background-color:#e6f7ff; */
    background-color:#fefefe;
    border-color:#cbcbcb;
    color:#5a5a5a;
}

.article-body{
    font-size: 18px;
    /* text-align: justify; */
    line-height: 1.6;
}
.article-body ol{
    padding-left:1em;
}
.article-body ol li{
    padding-left:0.5em;
    padding-bottom: 0.5em;
}
.article-body ol li ul{
    padding-top:0.5em;
}
.article-body ol li ul li{
    padding-bottom:0.5em;
}

.article-references{
    overflow-wrap:break-word;
    font-size:15px;
}

.article-references h5 {
    /* border-bottom: 1px solid #337ab7; */
    font-size: 17px;
}

.article-disclaimer {
    padding-top:10px;
}

.article-disclaimer h5 {
    font-size: 17px;
    margin-bottom: 5px;
}

.article-disclaimer p{
    font-size: 14px;
    /* font-style: italic; */
    text-align: justify;
}

.article-info
{
    font-size:15px;
    list-style-type: none;
}
.article-bullet{
    font-size:13px !important;
}
.info-bullet{
    font-size:13px !important;
    padding-right:5px;
}
.article-divider {
  color: #337ab7;
  width: 60%;
}

.article-ref-link {
  color: inherit;
}
.article-ref-link:hover {
  text-decoration: none;
}

/* Highlighting the article reference (for a few seconds) when reached through anchor tag  */
/* https://stackoverflow.com/a/65716121/1526703 */
.ref-list>li:target { /* when this element is navigated to (from a link) */
   animation-name: ref-animation;
   animation-duration: 3s;
}
@keyframes ref-animation {
   from { background-color: #ffffeb;     }  /* light yellow */
   to   { background-color: transparent; }  /* back to original */
}

/* mobile screens */
@media (max-width: 767px){
    .article-main{
        width: 100%;
        margin: 0 auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    .article-update{
        font-size:14px;
    }

    .article-label {
        text-align: center;
    }

    .article-body{  /*reduce font size on mobile screens*/
        font-size: 16px !important;
    }

    .article-body ul {
        padding-left: 15px;
        list-style-type: none;
    }

    .article-body ul li {
        padding-left: 0px;
    }

    .article-body ul.fa-ul {
        margin:0px;
    }

    .article-body ol li ul{
        padding-top:0.8em;
    }

    .article-divider { /*horizontal line after header to stretch through entire length on mobile devices*/
        width: 100% !important;
    }

    .article-references ol {
        padding-left: 15px;
    }

    .article-bullet{
        font-size:11px !important;
    }

    .break-non-mobile { /* for br tags on non-mobile screens only */
      display:none;
    }
}

/* laptops, desktops.. */
@media (min-width: 769px){
  .break-mobile { /* for br tags on mobile screens only */
    display:none;
  }
}
/*******Article post template styling ends*****************/

/*****Styling for message admin *******************/
tr.message_ignored{
    background-color : #e3e49157;
}
tr.email_verified{
    background-color : #7979e245;
}
tr.message_sent{
    background-color : #a0d4a675;
}