body { margin: 0; } 
.widget-wrapper {
  width: 4000px;
  display: flex;
  height: 100vh;
  overflow: scroll;
}

@media (max-width: 1199.98px) {
  .widget-wrapper {
    width: 100%;
  }
}

.widget-header {
  border-right: 1px solid #404040;
}

.widget-header hr {
  margin-bottom: 0;
}

.widget-cell {
  width: 100%;
  height: 100%;
}

@media (max-width: 1199.98px) {
  .widget-cell {
    min-width: 100%;
  }
}

.gutter {
  cursor: ew-resize;
  height: 100%;
  background: #aaa;
}

.gutter:hover {
  background: #555;
}

.bg-tan {
  background-color: #e2dcc3;
}

.widget-header {
  background-color: #000;
}

.widget-cell h1 {
  color: #b2b6bc;
  font-size: 1.25rem;
  padding: 15px 0 0 24px;
}

.cb-event-widget {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid #999;
  background-color: #fafafa;
}

.cb-event-widget-header {
  background-color: #25292B;
  min-height: 150px;
}

.cb-event-widget-header img,
.cb-widget-header img {
  width: 45px;
  margin: 20px 0 0 15px;
  vertical-align: middle;
}

.cb-event-widget-header p {
  font-size: 24px;
  vertical-align: middle;
  margin-top: 30px;
  display: inline-block;
}

.cb-event-widget-content {
  margin: -60px 20px 40px
}

@media (max-width: 767.98px) {
  .cb-event-widget-content {
    margin: -60px 10px 40px
  }
}

.event-wrapper {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 22px 20px 5px;
}

@media (max-width: 767.98px) {
  .event-wrapper {
    padding: 22px 15px 5px;
  }
}

.event-wrapper h2 {
  font-size: 12px;
}

.event-wrapper hr {
  margin-top: 0;
}

.calendar-icon-wrapper {
  width: 70px;
}

.calendar-icon-wrapper img {
  width: 70px;
  -webkit-filter: drop-shadow(2px 2px 2px #ddd);
  filter: drop-shadow(2px 2px 2px #ddd);
}

.event-info-group {
  font-size: 15px;
  padding: 0 15px;
}

.event-title {
  font-size: 15px;
  line-height: 1.3;
  margin: 2px 0;
}

.event-title,
.event-title a {
  color: #1F2022;
}

.event-title a {
  text-decoration: none;
}

.event-title a:hover {
  color: #F05A38;
  text-decoration: underline;
}

.event-time {
  color: #808793;
  font-size: 14px;
}

.event-month-label {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  font-size: 14px;
  color: #fff;
  text-align: center;
}

.event-date-label {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  font-size: 32px;
  font-weight: 300;
  text-align: center;
}

.event-day-label {
  color: #808793;
  font-size: 14px;
  width: 70px;
}

.event-actions {
  margin-top: 6px;
  font-weight: 600;
  font-size: 15px;
}

.event-price {
  color: #808793;
  margin-right: 12px;
}

.event-register a {
  color: #F05A38;
  text-decoration: none;
}

.event-register a:hover {
  text-decoration: underline;
}

.cb-story-timeline,
.cb-donate {
  margin: 0 auto;
  background-color: #fff;
}

.cb-story-timeline {
  width: 100%;
  max-width: 500px;
  border: 1px solid rgba(0, 0, 0, .125);
  background-color: #fff;
}

.cb-donate {
  width: 100%;
  max-width: 500px;
  border: 1px solid rgba(0, 0, 0, .125);
  background-color: #fafafa;
}

.bg-black {
  background-color: #25292B;
}

.top-black-bar {
  background-color: #000;
  height: 6px;
}

.widget-title-main {
  font-size: 20px;
  line-height: 1.2;
  vertical-align: middle;
  margin: 22px 0 1px;
}

.widget-title-secondary {
  margin-top: -5px;
  font-size: 14px;
  color: #808793;
}

.widget-title-secondary-dark {
  font-size: 14px;
  color: #B3B8C1;
}

.story-count-wrapper {
  margin: 22px 30px 0 0;
}

.story-count {
  font-size: 14px;
  color: #939BA8;
}

.cb-story-timeline-body {
  margin: 69px 25px 0 16px;
  padding-top: 35px;
}

.month-label-wrapper {
  margin: 0 0 30px 24px;
}

.dot-wrapper {
  display: inline-block;
  vertical-align: middle;
}

.orange-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #F05A38;
  margin-left: 0;
}

.black-circle-outline {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #000;
  margin: -13px 0 0 -3px;
  z-index: 100;
}

.month-label {
  display: inline-block;
  margin: 0 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 0 10px 0 4px;
  background-color: #fff;
}

.month-label-wrapper hr {
  margin: -11px 0 0 30px;
}

.story-item-wrapper {
  padding: 0 0 20px;
}

.date-item {
  position: relative;
  width: 60px;
  margin-left: 0;
}

.big-orange-dot {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #F05A38;
}

.day-label {
  color: #FFD4CB;
  font-weight: 500;
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  text-align: center;
  font-size: 13px;
}

.date-label {
  color: #fff;
  font-weight: 500;
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  text-align: center;
  font-size: 28px;
}

.story-headline-wrapper {
  vertical-align: top;
  margin: 4px 0 0 12px;
}

.story-title {
  margin: 0 0 5px;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.4;
}

.story-title,
.story-title a {
  color: #1F2022;
}

.story-title a {
  text-decoration: none;
}

.story-author {
  margin: 0;
  font-size: 13px;
  color: #808793;
}

.story-author,
.story-author a {
  color: #808793;
}

.story-author a {
  text-decoration: none;
}

.story-title a:hover,
.story-author a:hover {
  color: #F05A38;
  text-decoration: underline;
}

.more-button-wrapper {
  padding: 20px 0 34px;
}

.cb-story-timeline-body .collapse:not(.show) {
  display: block;
  height: 220px !important;
  overflow: hidden;
}

.cb-story-timeline-body .collapsing {
  height: 230px !important;
}

.more-button-wrapper a.collapsed:after {
  content: '+ Show More';
}

.more-button-wrapper a:not(.collapsed):after {
  content: '- Show Less';
}

.vertical-rule {
  position: absolute;
  height: 100%;
  left: 28px;
  border-left: 2px solid #F05A38;
  margin-top: -36px;
}

.send-tip {
  max-width: 500px;
  border: 1px solid rgba(0, 0, 0, .125);
  margin: 0 auto;
}

.send-tip-container {
  padding: 20px;
}

.tip-icon-wrapper {
  background-color: #F7F8F9;
  border: 1px solid #ced4da;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  vertical-align: bottom;
}

.tip-icon-wrapper .fa-envelope {
  color: #939BA8;
  font-size: 25px;
  margin-top: 11px;
}

.tip-message-wrapper .form-control {
  background-color: #fafafa;
  font-size: 14px;
  padding: .5rem .75rem;
}

.tip-message-wrapper .form-control:hover {
  background-color: #fff;
  border: 1px solid #F05A38;
}

.tip-message-wrapper .form-control::placeholder {
  color: #bbb;
}

.btn-outline-light-gray {
  color: #929CA8;
  background-color: #F7F8F9;
  background-image: none;
  border-color: #ced4da;
  -webkit-appearance: none;
  -webkit-border-radius: .25rem;
}

.btn-outline-light-gray:hover {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.fa-lock {
  font-size: 11px;
  color: #bbb
}

#confidentialTip .card-header {
  border: none;
}

#confidentialTip .card {
  border: none;
}

#confidentialTip a:hover h5,
#confidentialTip a:hover .fa-lock {
  color: #F05A38;
}

#confidentialTip h5 {
  font-size: 14px;
  font-weight: 400;
  color: #707387;
}

#confidentialTip a.collapsed h5::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  content: "\f053";
  float: right;
  vertical-align: middle;
  margin-top: 2px;
}

#confidentialTip a:not(.collapsed) h5::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  content: "\f078";
  float: right;
  vertical-align: middle;
  margin-top: 2px;
}

.confidential-item-container h4 {
  font-size: 19px;
  margin-bottom: .35rem;
}

.confidential-item-container .fa-whatsapp-square {
  color: #2EB743;
  font-size: 45px;
}

.tip-message-wrapper {
  font-size: 14px;
}

.tip-message-wrapper h4 {
  font-size: 22px;
  font-weight: 300;
}

.confidential-item-container .img-wrapper img {
  width: 38px;
  border-radius: 5px;
}

.tip-message-wrapper ul,
.tip-message-wrapper li {
  padding: 0;
  list-style: none;
}

.btn-info-tooltip {
  background: none;
  border: none;
  padding: 6px 6px 5px;
}

.btn-info-tooltip:hover {
  background: none;
}

.btn-info-tooltip .fa-info-circle {
  color: #bbb;
  font-size: 13px;
  margin-bottom: 7px;
}

.btn-info-tooltip:hover .fa-info-circle {
  color: #fff;
  cursor: pointer;
}

.donate-container {
  padding: 20px;
}

.donate-choose-copy {
  font-size: 14px;
}

.donate-star-img {
  width: 14px;
  padding-bottom: 4px;
  margin-right: 0;
}

.slider-wrapper {
  margin: 14px 0;
}

.slider-wrapper p {
  margin: 0;
}

.toggle_radio {
  position: relative;
  background: #DFE3E6;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 !important;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  position: relative;
  height: 46px;
  width: 100%;
}

.toggle_radio>* {
  float: left;
}

.toggle_radio input[type=radio] {
  display: none;
}

.toggle_radio label {
  color: #88909D;
  z-index: 0;
  display: block;
  width: 31.5%;
  height: 26px;
  margin: 11px 3px 9px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 1;
  text-align: center;
  font-weight: 600;
  position: absolute;
}

.toggle_radio label:hover p {
  color: #F05A38;
}

.toggle_option_slider {
  width: 32%;
  height: 38px;
  position: absolute;
  top: 4px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

#first_toggle.active~.toggle_option_slider {
  background: #fff;
  left: 4px;
}

#first_toggle.active~.first-label p {
  color: #F05A38;
}

#second_toggle.active~.toggle_option_slider {
  background: #fff;
  left: 32%;
}

.second-label {
  left: 32%;
}

#second_toggle.active~.second-label p {
  color: #F05A38;
}

#third_toggle.active~.toggle_option_slider {
  background: #fff;
  left: 67.25%;
}

.third-label {
  left: 67.25%;
}

#third_toggle.active~.third-label p {
  color: #F05A38;
}

.amount-select {
  width: 100%;
  margin: 15px 0 0 0;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  visibility: hidden;
}

.checkbox-tools:checked+label,
.checkbox-tools:not(:checked)+label {
  position: relative;
  display: inline-block;
  padding: 10px 5px;
  width: 15.25%;
  font-size: 14px;
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 130ms linear;
  transition: all 130ms linear;
}

.checkbox-tools:not(:checked)+label {
  background-color: #fff;
  border: 1px solid #F05A38;
  color: #F05A38;
  font-weight: 600;
}

.checkbox-tools:checked+label,
.checkbox-tools:not(:checked)+label:hover {
  background-color: #F05A38;
  border: 1px solid #F05A38;
  color: #fff;
  font-weight: 600;
}

.checkbox-tools:checked+label::before,
.checkbox-tools:not(:checked)+label::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  z-index: -1;
}

.donate-footer {
  margin: 10px 20px 30px;
}

.btn-orange {
  background-color: #F05A38;
  color: #fff;
  font-weight: 600;
  padding: 10px 0;
}

.btn-orange:hover {
  background-color: #000;
  color: #fff;
}

.stripe-logo {
  text-align: center;
  margin-top: 18px;
}

.stripe-logo img {
  width: 120px;
}

.donation-input {
  width: 48%;
}

.donation-input input::placeholder {
  color: #B3B8C1;
}