/*!
 * Copyright (c) 2016-present, Skillsoft, Inc - All Rights Reserved.
 * Unauthorized copying of this file, via any medium is strictly prohibited.
 * Proprietary and confidential.
 */
/*
  Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview
  https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
  hence the need for both ReactModal__Content and ReactModal__InsideContent
*/

@media screen and (max-width: 1542px) {
  .wideContent {
    width: 70%;
  }

  .certitude {
    max-width: 100vw !important;
    margin: 0 !important;
  }
}

@media screen and (min-width: 1543px) {
  .wideContent {
    width: 1080px;
  }
}

@media screen and (max-width: 767px) {
  .ReactModal__Journey__InsideContent {
    width: 500px;
  }

  .fullScreenCertitude {
    height: 100vh;
    overflow-y: hidden !important;
  }

  .title,
  .title_darkMode {
    font-size: 0.75rem !important;
    font-size: var(--font12) !important;
  }
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
  .ReactModal__Content {
    margin: 1.5rem;
    margin: var(--space24);
  }

  .ReactModal__InnerContent {
    width: 95%;
    height: 100%;
    padding: 0.5rem !important;
    padding: var(--space8) !important;
  }

  .ReactModal__Journey__InsideContent {
    width: 350px;
  }

  .title,
  .title_darkMode {
    font-size: 0.75rem !important;
    font-size: var(--font12) !important;
  }
}

@media only screen and (min-height: 559px) {
  .fullScreenInside {
    height: 100vh;
  }
}

@media only screen and (max-width: 767px) {
  .extraButton {
    margin-top: -100vh !important;
  }
}

@media only screen and (min-width: 767px) {
  .badge {
    width: 600px;
  }
}

.extraButton {
  position: relative;
  z-index: 0;
  float: right;
  margin-top: calc(-80vh - 65px);
  margin-right: 19px;
}

.hideTitle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.ReactModal__Journey__InsideContent.fullHeight,
.ReactModal__InsideContent.fullHeight {
  height: calc(100vh + 54px);
}

.fullScreenModal {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
}

.normalScreenModal,
.journeyNormalScreenModal {
  max-width: 1080px;
  max-height: 85vh;
  border-radius: 3px;
  outline: 1px solid transparent !important;
}

.certitude {
  max-height: 100vh;
}

.certitudeCloseButton {
  z-index: 10000;
  z-index: var(--zAboveAllPlusOne);
  padding-top: 5px;
}

.ReactModal__Content {
  overflow: auto;
  outline: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ReactModal__InsideContent {
  overflow-y: auto;
  background: white;
  background: var(--reverseColor);
  -webkit-box-shadow: 0 17px 30px 0 rgba(0, 0, 0, .19), 0 5px 15px 0 rgba(0, 0, 0, .24);
          box-shadow: 0 17px 30px 0 rgba(0, 0, 0, .19), 0 5px 15px 0 rgba(0, 0, 0, .24);
  -webkit-box-shadow: var(--modalShadow);
          box-shadow: var(--modalShadow);
  -webkit-overflow-scrolling: touch;
}

.ReactModal__Journey__InsideContent {
  max-height: 100vh;
  overflow-y: auto;
  background: rgb(36, 48, 56);
  -webkit-box-shadow: 0 17px 30px 0 rgba(0, 0, 0, .19), 0 5px 15px 0 rgba(0, 0, 0, .24);
          box-shadow: 0 17px 30px 0 rgba(0, 0, 0, .19), 0 5px 15px 0 rgba(0, 0, 0, .24);
  -webkit-box-shadow: var(--modalShadow);
          box-shadow: var(--modalShadow);
  -webkit-overflow-scrolling: touch;
}

/* Will cause IOS to jump to beginning
   https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285
  */

.certitudeBody.ReactModal__Body--open {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.disableBoxShadow {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.transparentBackground {
  background: transparent;
}

.ReactModal__Header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ReactModal__Header_onboarding {
  position: relative;
}

.fullScreenHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  text-align: center;
}

.fullScreenCloseButton {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.normalCloseButton {
  margin-top: 8px;
  margin-top: 0.5rem;
  margin-top: var(--space8);
  margin-right: 20px;
  text-align: right;
}

.normalCloseButton > * {
  margin-right: 0;
}

.whilteButton > button {
  color: white !important;
  color: var(--reverseColor) !important;
}

.badgeCloseButton {
  margin-top: -6px;
}

.onboardingCloseButton {
  position: absolute;
  top: 20px;
  right: 0;
}

.ReactModal__Content--after-open {
  opacity: 1;
}

.ReactModal__Content--before-close {
  opacity: 0;
}

.ReactModal__Overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.ReactModal__Overlay--after-open {
  background-color: rgba(0, 0, 0, .75);
}

.ReactModal__Overlay--before-close {
  background-color: rgba(0, 0, 0, 0);
}

.title {
  -ms-flex: 0 1 auto;
  padding: 24px;
  padding: 1.5rem;
  padding-bottom: 0;
  margin: 0;
  font-size: 20px;
  font-size: 1.25rem;
  font-size: var(--font20);
}

.title_onboarding {
  width: 100%;
  padding: 24px 0 0;
  padding: 1.5rem 0 0;
  text-align: center;
}

.title_darkMode {
  height: 29px;
  margin-bottom: 0.1px;
  font-size: 20px;
  font-size: 1.25rem;
  font-size: var(--font20);
  color: rgb(255, 255, 255);
}

.title_darkMode_withTag {
  height: 29px;
  margin-bottom: 0.1px;
  color: rgb(255, 255, 255);
}

.fullScreenTitle {
  -webkit-box-flex: 8;
      -ms-flex: 8;
          flex: 8;
  width: 100%;
  padding: 24px;
  padding: 1.5rem;
  padding-bottom: 0;
  padding-left: 15%;
  margin: 0;
  font-size: 20px;
  font-size: 1.25rem;
  font-size: var(--font20);
  font-weight: normal !important;
  color: #6a6e75;
  color: var(--lightNeutralColor);
  text-align: center;
}

.gutterless {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.ReactModal__InnerContent,
.ReactModal__Journey__InnerContent {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 24px;
  padding: 1.5rem;
  padding-top: 12.8px;
  padding-top: 0.8rem;
}

.ReactModal__Actions {
  padding: 16px 24px;
  padding: 1rem 1.5rem;
  background: #ebeef2;
  background: var(--lightestNeutralColor);
}

.actionsRight {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: right;
      -ms-flex-align: right;
          align-items: right;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 20px 8px;
  padding: 1.25rem 0.5rem;
  padding: var(--space20) var(--space8);
}

.ReactModal__Actions > * {
  margin-right: 18px;
}

@media only screen and (max-width: 320px) {
  .ReactModal__Journey__InsideContent {
    width: 320px;
    height: 568px;
  }

  .title_darkMode_withTag {
    display: none;
  }

  .ReactModal__Journey__InnerContent {
    padding: 128px 0;
  }

  .journeyNormalScreenModal {
    max-height: none;
  }

  .whilteButton {
    margin: 0.75rem;
    margin: var(--space12);
  }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .ReactModal__full__InsideContent {
    max-height: 100vh;
  }

  .ReactModal__full__InsideContent .ReactModal__Actions {
    display: none;
  }

  .ReactModal__full__InsideContent .normalScreenModal,
  .ReactModal__full__InsideContent .journeyNormalScreenModal {
    max-height: 100vh;
  }

  .ReactModal__full__InsideContent .ReactModal__Header h1 {
    font-size: 1.0625rem !important;
    font-size: var(--font17) !important;
  }

  .ReactModal__full__InsideContent .JourneyView---prelist---2pAxJ {
    margin-left: -15px !important;
  }

  .ReactModal__full__InsideContent .title {
    padding: 3rem 0 0 1.5rem;
    padding: var(--space48) 0 0 var(--space24);
  }

  .ReactModal__full__InsideContent .fullScreenCloseButton {
    padding-bottom: 1rem;
    padding-bottom: var(--space16);
  }

  .ReactModal__full__InsideContent .ReactModal__InnerContent {
    padding: 1.5rem !important;
    padding: var(--space24) !important;
  }

  .ReactModal__Content {
    margin: 0 !important;
  }
}