/*
|--------------------------------------------------------------------------
| Colors
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Fonts variants
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Breakpoints (for mobile first)
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Misc
|--------------------------------------------------------------------------
*/
/*
@mixin header_ss_roman {
    font-family: vars.$helvetica;
    font-weight: vars.$font-weight-regular;
    font-size: 14px;
    line-height: 18px;

    @include mix.sm {
        font-size: 18px;
        line-height: 22px;
    }
}

@mixin header_ss_light {
    font-family: vars.$helvetica;
    font-weight: vars.$font-weight-light;
    font-size: 14px;
    line-height: 18px;

    @include mix.sm {
        font-size: 18px;
        line-height: 22px;
    }
}
*/
/* Text mixins based on style guide.
*  Use these with "head", "subhead" classes, etc.
*  Don't use them directly on the h1, h2, etc. elements.
*/
/*
@mixin footnoteStyle {
    font-size: 12px;
    font-weight: vars.$font-weight-regular;
    font-family: vars.$helveticaCondensed;
}
*/
/*
|--------------------------------------------------------------------------
| Debug
|--------------------------------------------------------------------------
*/
/*
 * Show a warning message if the debug mode is enabled in the top right corner of the viewport.
 * How to use:
 * @include show-debug-mode;
 */
/*
|--------------------------------------------------------------------------
| Helper Functions
|--------------------------------------------------------------------------
*/
/**
 * Converts an HEX color into a RGB list
 */
/**
 * Converts an HEX color into RGB with alpha
 */
/**
 * Converts a value in pixels to em's, assuming that 1em=16px.
 * @param {Number} $value - A value in px
 * @return {Number} - The value converted to em's
 */
/**
 * Converts a value in pixels to rem's, assuming that 1rem=16px.
 * @param {Number} $value - A value in px
 * @return {Number} - The value converted to rem's
 */
/**
 * Remove the unit of a length.
 * @param {Number} $number - Number to remove unit from
 * @return {Number} - Unitless number
 */
/**
 * Get the width of a span of columns and the gutter spaces BETWEEN them.
 * The returned value will have the same unit as the $colWidth param.
 *
 * @param {Number} $cols - Number of columns
 * @param {Number} $colWidth - Base width for a single column.
 * @param {Number} $gutter - Width of a gutter space.
 * @return {Number} - Width for $cols columns
 */
/**
 * Get the width of a span of columns and a gutter space for EACH column.
 * The returned value will have the same unit as the $colWidth param.
 *
 * @param {Number} $cols - Number of columns
 * @param {Number} $colWidth - Base width for a single column.
 * @param {Number} $gutter - Width of a gutter space.
 * @return {Number} - Width for $cols columns
 */
#resources .card-container > h2 {
  margin-bottom: 50px;
}
#resources .card-container .ulist a {
  color: #58595b;
  font-weight: 600;
}
#resources .video-js {
  width: 100%;
}
#resources .col-3-video {
  background-color: #d9d9d9;
  padding: 14px 11px;
}
#resources .col-3-video img {
  margin-bottom: 0;
}
#resources .col-3-video video {
  width: 100%;
}
#resources .col-3-video picture {
  margin-bottom: 0 !important;
}
#resources .col-3-video .video-thumbnail {
  width: 33%;
}
#resources .col-3-video .video-thumbnail .playing {
  height: 0;
  position: relative;
  display: none;
}
#resources .col-3-video .video-thumbnail .playing .copy {
  padding: 7px;
  font-family: "ITCFranklinGothicStd", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #58595B;
  text-align: center;
  background-color: #D9D9D9;
  max-width: 83px;
  position: absolute;
  top: -36px;
  left: calc(50% - 41.5px);
}
#resources .col-3-video .video-thumbnail.active .playing {
  display: block;
}

#resources .card-banner, #access-support .card-banner {
  background: linear-gradient(120deg, rgb(149, 29, 32) 0%, rgb(192, 49, 26) 31%, rgb(255, 255, 255) 31%, rgb(189, 189, 189) 31%, rgb(255, 255, 255) 31.8%, rgb(255, 255, 255) 100%);
  padding: 0;
}
#resources .card-banner .card-header, #access-support .card-banner .card-header {
  width: 311.596px;
  padding: 30px 50px 30px 37px !important;
}
#resources .card-banner .middle-img, #access-support .card-banner .middle-img {
  margin: auto;
}
#resources .card-banner .middle-img img, #access-support .card-banner .middle-img img {
  position: relative;
  right: 10px;
  padding: 30px 0 20px 0;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  #resources .card-banner .middle-img img, #access-support .card-banner .middle-img img {
    right: unset;
    width: 85%;
    padding-bottom: 0;
  }
}
#resources .card-banner .card-content .btn, #access-support .card-banner .card-content .btn {
  margin-bottom: 20px;
  padding-right: 18px;
}
#resources .card-banner .card-content p, #access-support .card-banner .card-content p {
  font-size: 17px;
  line-height: 19px;
}
#resources .card-banner .card-content .span, #access-support .card-banner .card-content .span {
  font-size: 14px;
}
@media (min-width: 992px) {
  #resources .card-container.card-banner, #access-support .card-container.card-banner {
    background: linear-gradient(120deg, rgb(149, 29, 32) 0%, rgb(192, 49, 26) 32%, rgb(255, 255, 255) 32%, rgb(189, 189, 189) 32%, rgb(255, 255, 255) 33.1%, rgb(255, 255, 255) 100%);
  }
  #resources .card-container.card-banner .card-header-shadow:after, #access-support .card-container.card-banner .card-header-shadow:after {
    right: -13px;
    width: 100%;
  }
  #resources .card-container.card-banner .card-header-shadow .card-header, #access-support .card-container.card-banner .card-header-shadow .card-header {
    width: 320.596px;
  }
  #resources .card-container.card-banner .card-content, #access-support .card-container.card-banner .card-content {
    padding-right: 18px !important;
  }
}
@media (max-width: 767px) {
  #resources .card-container.card-banner .card-content p, #access-support .card-container.card-banner .card-content p {
    text-align: center;
  }
}

#access-support #access-resources .resources-cols > div:first-child {
  min-width: 122px;
  width: 122px;
}

.resources-cols {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .resources-cols {
    gap: 10px;
  }
  .resources-cols.card-col {
    flex-direction: column;
  }
}
.resources-cols > div:first-child {
  min-width: 119px;
  width: 164px;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .resources-cols > div:first-child {
    width: 129px;
  }
}
.resources-cols > div:first-child .img-wrapper img {
  max-width: 125px;
}
.resources-cols > div:last-child {
  flex-grow: 1;
}
.resources-cols > div.card {
  width: 305px;
}
.resources-cols h2 {
  margin-bottom: 3px !important;
}
@media (max-width: 767px) {
  .resources-cols.xtandi-access {
    flex-direction: column;
  }
  .resources-cols.xtandi-access a {
    width: 100%;
  }
  .resources-cols.xtandi-access a img {
    margin: unset !important;
  }
}
.resources-cols .btn {
  padding: 0 16px 2px !important;
}

@media (min-width: 992px) {
  .metastatic-container .resources-cols > div:first-child {
    width: 133px;
    justify-content: flex-start;
  }
}

.enrollment-steps-border {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  background-color: #c0311a;
  padding: 1px;
  margin-bottom: 20px;
}

.enrollment-steps {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17.5px), calc(100% - 17.5px) 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17.5px), calc(100% - 17.5px) 100%, 0 100%);
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}
.enrollment-steps .ulist {
  padding-bottom: 0;
}
.enrollment-steps h4 {
  color: #c0311a !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 23px;
  margin-bottom: 10px !important;
}
.enrollment-steps ul {
  margin-bottom: 20px;
}

.info-icon-list .icon-lead img, .info-icon-list .icon-lead picture {
  min-width: 38px;
  width: 38px;
  margin-left: unset !important;
  margin-right: unset !important;
}

.process-steps {
  padding-top: 14px;
  padding-right: 20px;
  padding-bottom: 30px;
  background: linear-gradient(90deg, rgba(251, 176, 52, 0) 0%, rgba(251, 176, 52, 0.1333333333) 40.47%, rgba(251, 176, 52, 0.1333333333) 60.47%, rgba(251, 176, 52, 0) 100%);
}
.process-steps.flex, .process-steps .flex {
  display: flex;
  color: #58595b;
}
.process-steps.flex-column, .process-steps .flex-column {
  display: flex;
  flex-direction: column;
}
.process-steps.flex a, .process-steps .flex a {
  color: #58595b;
}
.process-steps > .flex {
  gap: 14px;
}
.process-steps > .flex > div.flex {
  flex: 1;
}
.process-steps > .flex > div.flex picture {
  width: 34px;
}

#provider-support .collapsible-group .collapsible-item.active .collapsible-content {
  padding-bottom: 0;
}
/*# sourceMappingURL=resources.css.map */