/*----------------------------------------------
 * Deafult Layout - Responsive Layout at the end
 *---------------------------------------------*/

#stream-container {
  width: 100%;
}

#chat-container {
  width: 100%;
}

/*----------------------------------------------
 * Navigation Tab Styles
 *---------------------------------------------*/

.nav-tabs {
	float: left;
	width: 100%;
	margin: 0;
	padding-top: 10px;
	list-style-type: none;
}

.nav-tabs > li {
	float: left;
	margin-bottom: 1px;
	border: none;
}

.nav-tabs > li > a {
	margin-right: 2px;
/*line-height: 1.5;*/
	padding: 10px;
	text-decoration: none;
	float: left;
}

.nav-tabs > li > a:hover {
	background-color: #eee;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: #555;
	cursor: default;
	background-color: #fff;
	outline: none !important;
  -moz-outline-style: none !important;
}

/*----------------------------------------------
 * Tab Content Tab Styles
 *---------------------------------------------*/

.tab-content > .tab-pane {
	float: left;
	width: 100%;
	display: none;
}

.tab-content > .tab-pane.active {
	display: block;
	padding: 10px;
	background-color: #fff;
}

/*----------------------------------------------
 * Switch and Slider Styles
 *---------------------------------------------*/

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  background-color: #c44;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
  background-color: #00A060;
}

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

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/*----------------------------------------------
 * Stream Table Styles
 *---------------------------------------------*/

table.stream-table {
  width: 100%;
}

table.stream-table tr {
  line-height: 1.5;
}

table.stream-table tr th {
  padding: 5px 2px;
  text-align: left;
}

table.stream-table tr td {
  padding: 2px 2px;
  text-align: left;
}

.left, th.left, td.left { text-align: left; }

.center, th.center, td.center { text-align: center; }

.middle, th.middle, td.middle { vertical-align: middle; }

td.padding-2-5 { padding: 2px 5px; }

.stream-container {
  overflow: hidden;
}

/*----------------------------------------------
 * Stream Tab Styles
 *---------------------------------------------*/

#stream-hoster-live-stream button {
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

.stream-tablinks {
  background-color: #e8112d;
  display: none;
}

.stream-tablinks.active{
  background-color: #bb1a2f;
  display: block;
}

.stream-tabs, .extra-tabs, .feature-tabs {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: #fff;
  margin-left: 0;
}

/* Style the buttons that are used to open the tab content */
.stream-tabs button, .extra-tabs button, .feature-tabs button {
  background-color: #e8112d;
  color: #fff;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 2px 6px 0px 6px;
  transition: 0.3s;
  display: inline;
  margin: 0 4px 0 0;
}

/* Change background color of buttons on hover */
.stream-tabs button:hover, .extra-tabs button:hover,  .feature-tabs button:hover {
  background-color: #444;
}

/* Create an active/current tablink class */
.stream-tabs button.active, .extra-tabs button.active,  .feature-tabs button.active {
  background-color: #bb1a2f;
}

/*----------------------------------------------
 * Tab Content Styles
 *---------------------------------------------*/

.stream-tabcontent {
  display: none;
  padding: 0 0 56.25% 0;
  position: relative;
  height: 0;
  border: 1px solid #bb1a2f;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
}

.stream-tabcontent.feature-tabcontent {
  padding-bottom: 0;
  height:80vh;
}

.stream-tabcontent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}

/*----------------------------------------------
 * Attendance Form Styles
 *---------------------------------------------*/

div#stream-attendance form.wpcf7-form {
  padding:10px;
  padding-top:20px;
  margin:0;
  background-color: #fff;
  text-align: left;
}

div#stream-attendance form.wpcf7-form input.attendance-surname-class,
div.stream-tabcontent div.wpcf7 {
  width: 80%;
  margin-left: 10px;
  margin-top:15px;
  border-radius: 10px;
  line-height: 22px;
}

div.stream-tabcontent form.wpcf7-form input.attendance-place-class {
  width: 80%;
  margin-left: 10px;
  border-radius: 10px;
  line-height: 22px;
}

div.stream-tabcontent form.wpcf7-form span input.attendance-number-class {
  width: 20%;
  margin-left: 10px;
  border-radius: 10px;
  line-height: 22px;
}

/*----------------------------------------------
 * PayPal Styles
 *---------------------------------------------*/

div.wp_paypal_button_widget_any_amt {
 width: 80%;
 margin: 10px 5%;
 text-align: left;
}

div.wp_paypal_button_widget_any_amt form.wp_accept_pp_button_form_any_amount div {
 padding-top: 5px;
}

/* Hide the link that should open and close the topnav on small screens */
.stream-tabs .icon, .extra-tabs .icon, .feature-tabs .icon {
  display: none;
}

/* When the screen is less than 1050 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* This group of settings apploies to stream tabs in the tabbed layout only */
@media screen and (max-width: 1050px) {
  .stream-tabs button:not(.active) {background-color: #e8112d; display: none;}

  .stream-tabs button.active {background-color: #bb1a2f; display: block;}

  .stream-tabs button.icon {float: right; display: block; background-color: #e8112d;}

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1050px) {
  .stream-tabs.responsive {position: relative;}

  .stream-tabs.responsive button.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  div.stream-tabs.responsive button:not(.icon) {
    float: none;
    display: block;
    text-align: left;
    width: 200px;
  }

}

/* (chat group of tabs) When the screen is less than 1400 pixels wide, hide all links, except for the first one ("Chat"). Show the link that contains should open and close the extranav (.icon) */
/* This group applies to the feature tabs (extra tabs) in the tabbed layout only */
@media screen and (max-width: 1500px) {
  .extra-tabs.tabbed-stream button:not(.active) {background-color: #e8112d; display: none;}

  .extra-tabs.tabbed-stream button.active {background-color: #bb1a2f; display: block;}

  .extra-tabs.tabbed-stream button.icon {float: right; display: block; background-color: #e8112d;}

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1500px) {
  .extra-tabs.tabbed-stream.responsive {position: relative;}

  .extra-tabs.tabbed-stream.responsive button.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .extra-tabs.tabbed-stream.responsive button:not(.icon) {
    float: none;
    display: block;
    text-align: left;
    width: 200px;
  }

}

/* This group applies to the feature tabs in the feed layout only */
@media screen and (max-width: 700px) {
  .feature-tabs.feed-stream button:not(.active) {background-color: #e8112d; display: none;}

  .feature-tabs.feed-stream button.active {background-color: #bb1a2f; display: block;}

  .feature-tabs.feed-stream button.icon {float: right; display: block; background-color: #e8112d;}

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
  .feature-tabs.feed-stream.responsive {position: relative;}

  .feature-tabs.feed-stream.responsive button.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .feature-tabs.feed-stream.responsive button:not(.icon) {
    float: none;
    display: block;
    text-align: left;
    width: 200px;
  }

}

/* This group applies to the undocked features window only */
@media screen and (max-width: 400px) {
  body.csp_undocked_features .extra-tabs button:not(.active), body.csp_undocked_features .feature-tabs button:not(.active) {background-color: #e8112d; display: none;}

  body.csp_undocked_features .extra-tabs button.active, body.csp_undocked_features .feature-tabs button.active {background-color: #bb1a2f; display: block;}

  body.csp_undocked_features .extra-tabs button.icon, body.csp_undocked_features .feature-tabs button.icon {float: right; display: block; background-color: #e8112d;}

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 400px) {
  body.csp_undocked_features .extra-tabs.responsive, body.csp_undocked_features .feature-tabs.responsive {position: relative;}

  body.csp_undocked_features .extra-tabs.responsive button.icon, body.csp_undocked_features .feature-tabs.responsive button.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  body.csp_undocked_features .extra-tabs.responsive button:not(.icon), body.csp_undocked_features .feature-tabs.responsive button:not(.icon) {
    float: none;
    display: block;
    text-align: left;
    width: 200px;
  }

}

.csp_feed_content_td {
  width: 72%;
  border: 0px;
  padding: 0;
}

.csp_feed_content_td #csp_video_player {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
  height: 0;
  /* resize: both; */
}

.csp_feed_content_td #csp_video_player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.csp_feed_content_td #csp_feature_container {
  height: 840px;
}

.csp_feed_thumbnail_td {
  width: 28%;
  border: 0px;
  padding: 0 0 0 30px;
  vertical-align: top;
}

.csp_feed_thumbnail_div {
  clear:both;
  margin-bottom:10px;
  border:1px solid #aaa;
  border-left: 10px solid #aaa;
  background-color:#dda;
  cursor: pointer;
}

.csp_active_thumb {
  border-left: 10px solid #bb1a2f;
}

.csp_feed_thumbnail_image_div {
  margin: 0;
  padding: 0;
  float: right;
  width: 40%;
  height: 100px;
  text-align: right;
  overflow: hidden;
}

.csp_feed_thumbnail_image {
/*  width: 100%;
height: auto; */
height: 100px;
width: auto;
max-height: 100px;
max-width: 178px;
margin:0 0 0 5px;
}

.csp_feed_thumbnail_text_container {
  height: 100px;
  line-height:1.2;
  text-align: center;
  padding: 10px 0 10px 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.csp_feed_thumbnail_text_bold {
  padding: 0 0 5px 0;
  font-weight: bold;
}

.csp_feed_thumbnail_text {
}

.hidden { display: none; }

.visible_block { display: block; }

div.div-dock-buttons button {
  background-color: #bb1a2f !important;
  color: #fff;
  font-weight: bold;
}

/*----------------------------------------------
 * Responsive Layout
 *---------------------------------------------*/

@media only screen and (min-width: 1024px) {
  #stream-container {
    width: 70%;
    float: left;
  }

  #chat-container {
    width: 30%;
    float: right;
    height: 80vh;
  }

}