/*
App Name: Studycat Fun Series
Description: SSO Stylesheet for SC Fun Series for index.html (sso auth wrapper).
Version: 1.2.3
Author: Studycat Inc. 
Author URI: https://studycat.com/
*/
/* v. 24/11/26 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  background-repeat: no-repeat;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* END HTML5 display-role reset for older browsers */
/* box sizing */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* END box sizing */
/* Typography */
@font-face {
  font-family: "Studycat-Regular";
  src: url(/assets/fonts/Studycat-Regular.ttf);
}
@font-face {
  font-family: "Mulish-Bold";
  src: url(/assets/fonts/Mulish-Bold.ttf);
}
/* END Typography */
/* General Styles */
html,
body,
.container,
.row,
.panel-default {
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.panel-default {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.panel-body {
  width: 100%;
  height: 100%;
}

#ui-note {
  position: fixed;
  right: 10px;
  top: 9rem;
  z-index: 999;
  transform: rotate(90deg);
  transform-origin: right;
}

.FE-bg {
  background: url(/assets/bg_white.png) #33cdd8;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 90% 95%;
}

.FF-bg {
  background: url(/assets/bg_white.png) #4189ff;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 90% 95%;
}

.FC-bg {
  background: url(/assets/bg_white.png) #ff8d26;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 90% 95%;
}

.FS-bg {
  background: url(/assets/bg_white.png) #f8646d;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 90% 95%;
}

.FG-bg {
  background: url(/assets/bg_white.png) #6cb616;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 90% 95%;
}

.SC-bg {
  background: url(/assets/bg_white.png) #4189ff;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 90% 95%;
}

.FEW-bg {
  background: url(/assets/bg_white.png) #33cdd8;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 90% 95%;
}

.SA-bg {
  background: url(/assets/bg_white.png) #fff;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 90% 95%;
}

h1,
h2,
h3 {
  font-family: "Studycat-Regular";
  color: black;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
  padding: 1rem 1rem 0;
}

h3 {
  font-size: 26px;
}

h3#welcome-back-text {
  font-family: "Mulish-Bold", Helvetica, sans-serif;
}

p,
a,
div,
span {
  font-family: "Mulish", Helvetica, Arial, sans-serif;
}

p {
  margin: 0;
}

a:focus {
  outline: 0;
}

a.change-sign-in-link {
  color: #449bef;
  font-family: "Mulish-Bold", Helvetica, sans-serif;
  font-size: 1.6rem;
}
@media only screen and (min-height: 800px) {
  a.change-sign-in-link {
    font-size: 1.8rem;
  }
}
@media only screen and (min-height: 600px) and (orientation: landscape) {
  a.change-sign-in-link {
    font-size: 2rem;
  }
}

input,
select {
  border: 1px solid #525252;
}

input::-webkit-input-placeholder {
  color: #6a6a6a;
}

input::-moz-placeholder {
  color: #6a6a6a;
}

input:-ms-input-placeholder {
  color: #6a6a6a;
}

input::-ms-input-placeholder {
  color: #6a6a6a;
}

input::placeholder {
  color: #6a6a6a;
}

sub {
  display: flex;
  width: 100%;
  flex-direction: row;
  font-size: 9px;
  color: #fff;
}

sub span#device-size,
sub span#htmlVer,
sub span#jsVer {
  color: rgba(37, 40, 42, 0.75);
}

/* END General Styles */
/* Functional CSS*/
.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.active {
  display: block !important;
}

.sc-display-none {
  display: none !important;
}

.sc-embed-display-none {
  display: none !important;
}

.sc-sign-in-display-none {
  display: none !important;
}

.iframe-display-none {
  display: none !important;
}

/* END Functional CSS*/
/* Social Div & Sign up / Sign In */
#div-social {
  display: block;
  margin-top: 6rem;
}

#sc-embed-signup-label,
#sc-embed-signin-label {
  padding: 0 0 1rem;
}

#sc-embed-signin-label #sc-sign-in-intro {
  margin-top: 1rem;
}

#sc-sign-up-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#sc-sign-in-intro ul,
#sc-sign-up-intro ul {
  line-height: 1.5;
  text-align: left;
  width: auto;
  margin: 1rem 0 1rem 3rem;
  list-style-image: url(../assets/tick.svg);
  padding: 0px 2rem;
  list-style-position: outside;
}
#sc-sign-in-intro .sign-links,
#sc-sign-up-intro .sign-links {
  display: flex;
  flex-direction: column;
}
#sc-sign-in-intro .sign-links a,
#sc-sign-in-intro .sign-links span,
#sc-sign-up-intro .sign-links a,
#sc-sign-up-intro .sign-links span {
  font-size: 16px;
  line-height: 1.5;
}
#sc-sign-in-intro .sign-links a,
#sc-sign-up-intro .sign-links a {
  text-decoration: none;
  font-weight: 700;
  color: #33cdd8;
}

/* END Social Div & Sign up / Sign In */
/* IFrame Styles */
iframe#sc-iframe-IdP {
  width: 100%;
  height: 24rem;
  position: relative;
}

iframe#sc-iframe-IdP body {
  display: block;
}

/* END IFrame Styles */
/* Button Styles */
#cancel,
#back-button {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 3rem;
  border: none;
  z-index: 5;
}

#cancel {
  background: url(../assets/close-button.svg);
  background-size: contain;
  background-repeat: no-repeat;
  right: 2rem;
}

#back-button {
  background: url(../assets/back-button.svg);
  background-size: contain;
  background-repeat: no-repeat;
  left: 2rem;
}

#sc-embed-signup-button,
#sc-embed-signin-button,
#AppleExchange,
#GoogleExchange {
  display: flex;
  margin: auto;
  height: 48px;
  width: 80%;
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: 15px center;
  font-size: 16px;
  text-align: center;
  overflow: hidden;
  border-radius: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0 50px 0;
  cursor: pointer;
}

#sc-embed-signup-button,
#sc-embed-signin-button {
  background-color: #45c38f;
  background-image: url(../assets/icon_mail.svg) !important;
  color: #fff;
  border: 0;
  margin: 0 auto 20px;
}

#AppleExchange,
#GoogleExchange {
  background-color: #fff;
  background-repeat: no-repeat;
  color: #000;
  border: 1px solid #605e5c;
  margin: 0 auto 1rem;
}

#AppleExchange {
  background-image: url(../assets/icon-apple.svg) !important;
}

#GoogleExchange {
  background-image: url(../assets/icon-google.svg) !important;
}

#AppleExchange:hover,
#AppleManagedExchange:hover {
  -webkit-filter: invert(95%) !important;
  filter: invert(95%) !important;
}

#GoogleExchange:hover {
  background-color: #c64a29 !important;
  color: #fff;
}

/* END Button Styles */
/* Image & Overlay Styles */
.sc-images img {
  display: block;
  height: 20vh;
  width: auto;
  position: absolute;
  bottom: 17%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 5;
}
.sc-images #studycat-welcome {
  bottom: 7.5%;
  right: 0 !important;
  left: unset;
  transform: translate(0);
}
.sc-images #studycat-write {
  height: 25vh;
}

.sc-cover {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  background: #33cdd8;
}
.sc-cover .sc-cover-title {
  font-family: "Studycat-Regular";
  font-size: 40px;
  color: white;
  text-align: center;
  margin-top: 8rem;
}
.sc-cover h3 {
  display: block;
  width: 15rem;
  padding: 0.5rem;
  border-radius: 5px;
  border: 1px solid #fff;
  margin: auto;
  position: relative;
  top: 50%;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1rem;
  cursor: pointer;
}
.sc-cover #sc-go-back-link {
  display: block;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.sc-cover img {
  display: block;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#workingCover a {
  display: none;
}

.FE-sc-cover {
  background: #33cdd8;
}

.FF-sc-cover {
  background: #4189ff;
}

.FC-sc-cover {
  background: #ff8d26;
}

.FS-sc-cover {
  background: #f8646d;
}

.FG-sc-cover {
  background: #6cb616;
}

.SC-sc-cover {
  background: #4189ff;
}

.FEW-sc-cover {
  background: #33cdd8;
}

.SA-sc-cover {
  background: #6FD4FF;
}

/* END Image & Overlay Styles */
/* Language selector */
.language-chooser {
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.language-chooser select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  height: 30px;
  border: 1px solid #6f7577;
  padding: 2px 5px;
  text-align: center;
  border-radius: 4px;
  background: #fff;
  margin: 0 0 10px 0;
}
.language-chooser select option {
  text-align: center !important;
}
.language-chooser::before {
  content: url(/assets/ic-language-blue.svg);
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  top: 7px;
  left: -4px;
}

/* END Language selector */
/* Language specific adjustments */
/* Studycat-Regualr does not seem to work for most of the non-latin languages. Change it to Mulish*/
.locale-ko h2, .locale-ja h2, .locale-ru h2, .locale-zh-cn h2, .locale-zh-hant h2, .locale-th h2 {
  font-family: "Mulish", Helvetica, sans-serif;
}

/* Stylings for the default error landing page */
.error-container .positioning-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 3rem;
  max-width: 500px;
  margin: auto;
}
.error-container .positioning-container .top-section, .error-container .positioning-container .bottom-section {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-shrink: 0.3;
  flex-grow: 1;
}
.error-container .positioning-container .top-section {
  height: 60%;
}
.error-container .positioning-container .top-section span {
  margin-bottom: 0.3rem;
}
.error-container .positioning-container .top-section button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "Studycat-Regular", Arial, Helvetica, sans-serif;
  width: 100%;
  color: #fff;
  box-shadow: none;
  border: none;
  cursor: pointer;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  background: url(/assets/button_green.png);
  background-size: 100% 100%;
  background-color: transparent;
  border-radius: none;
  height: 50px;
  font-size: 20px;
  padding-bottom: 4px;
  margin: 0 auto;
}
.error-container .positioning-container .bottom-section {
  height: 40%;
  align-items: flex-end;
}
.error-container .positioning-container .bottom-section img {
  width: 12rem;
}
@media only screen and (max-height: 499px) {
  .error-container .positioning-container .top-section h2 {
    font-size: 26px;
  }
  .error-container .positioning-container .bottom-section img {
    width: 6rem;
  }
}

/* END Language specific adjustments */
/* Legacy CSS Rules 
    # We keep these here since the purpose is not defined.
    # We and may be needed it later.
*/
/* END Legacy CSS Rules */
/* MEDIA Queries
    # We take Apple ratio as benchmark since they include most of the target devices.
    # For devices that don't fit into these media queries we will have to find specific one.
    # I did not include the media queries to keep them in one place for better maintenance
    # and target tracking. 
    # There are a few exceptions for button and error page level rules in _selfAsserted-embedded.scss
*/
/* ----------- Wider Mobile Devices Portrait ----------- */
@media only screen and (min-width: 580px) and (max-width: 767px) {
  .panel-default {
    width: 70%;
  }
}
/* ----------- Narrow mobile phones (320px - 374px) Portrait----------- */
@media only screen and (min-width: 320px) and (max-width: 374px) {
  #cancel,
#back-button {
    top: 2.2rem;
  }

  h2 {
    font-size: 30px;
    padding: 0 1rem;
  }

  #privacy-link {
    font-size: 12px;
  }

  .locale-de #div-social h2 {
    font-size: 22px;
  }
  .locale-de #div-social #sc-sign-up-intro {
    font-size: 11px;
  }
  .locale-de #div-social #sc-sign-up-intro ul {
    margin: 1rem 0 1rem 2rem;
  }

  .locale-fr #div-social h2, .locale-it #div-social h2, .locale-ko #div-social h2, .locale-nl #div-social h2 {
    font-size: 26px;
  }
  .locale-fr #div-social #sc-sign-up-intro ul, .locale-it #div-social #sc-sign-up-intro ul, .locale-ko #div-social #sc-sign-up-intro ul, .locale-nl #div-social #sc-sign-up-intro ul {
    margin: 1rem 0 1rem 2rem;
  }

  .locale-ja #div-social h2 {
    font-size: 20px;
  }

  .locale-ru #div-social h2 {
    font-size: 26px;
  }
  .locale-ru #div-social #sc-sign-up-intro {
    font-size: 11px;
  }
  .locale-ru #div-social #sc-sign-up-intro ul {
    margin: 0.5rem 0 0.5rem 2rem;
  }
  .locale-ru #privacy-link {
    font-size: 11px;
  }

  .locale-sv #div-social h2, .locale-tr #div-social h2, .locale-vi #div-social h2 {
    font-size: 26px;
  }
  .locale-sv #div-social #sc-sign-up-intro ul, .locale-tr #div-social #sc-sign-up-intro ul, .locale-vi #div-social #sc-sign-up-intro ul {
    margin: 1rem 0 1rem 2rem;
  }
}
/* ----------- Small display height i.e. iPhone SE (< 667px) Portrait----------- */
@media only screen and (max-height: 666px) {
  #sc-embed-signup-button,
#sc-embed-signin-button,
#AppleExchange,
#GoogleExchange {
    height: 40px;
    background-size: 18px auto;
    background-position: 12px center;
    font-size: 12px;
  }

  #sc-sign-in-intro,
#sc-sign-up-intro {
    font-size: 12px;
  }
  #sc-sign-in-intro ul,
#sc-sign-up-intro ul {
    line-height: 1.2;
  }
  #sc-sign-in-intro ul li::before,
#sc-sign-up-intro ul li::before {
    width: 14px;
    height: 12px;
    margin-right: 4px;
  }
  #sc-sign-in-intro .sign-links a,
#sc-sign-in-intro .sign-links span,
#sc-sign-up-intro .sign-links a,
#sc-sign-up-intro .sign-links span {
    font-size: 12px;
    line-height: 1.2;
  }

  #sc-embed-signup-button,
#sc-embed-signin-button {
    margin: 0 auto 12px;
  }

  .sc-images img {
    position: absolute;
    height: 20vh;
    width: auto;
    z-index: 5;
    bottom: 7.5%;
    transform: translate(0);
    display: block;
  }
  .sc-images #studycat-welcome,
.sc-images #studycat-mail,
.sc-images #studycat-globe {
    right: 7%;
    left: unset !important;
  }
  .sc-images #studycat-write,
.sc-images #studycat-shield {
    left: 7%;
  }

  iframe#sc-iframe-IdP {
    height: 22rem;
  }
}
/* ----------- iPad 1, 2, 3, 4 Mini and Air and Pro 9.7, 10.5", 12.9" Landscape ----------- */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
  h2 {
    font-size: 50px;
  }

  .panel-default {
    width: 55%;
  }

  #cancel {
    right: 4rem;
  }

  #back-button {
    left: 4rem;
  }

  .sc-images img {
    height: 35vh;
  }
  .sc-images #studycat-write {
    height: 40vh;
  }
  .sc-images #studycat-welcome,
.sc-images #studycat-mail,
.sc-images #studycat-globe {
    right: 4% !important;
    left: unset !important;
  }
  .sc-images #studycat-write,
.sc-images #studycat-shield {
    left: 20% !important;
  }

  .sc-cover img {
    width: 25%;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  h2 {
    font-size: 60px;
  }

  #cancel, #back-button {
    top: 4rem;
  }

  #cancel {
    right: 6rem;
  }

  #back-button {
    left: 6rem;
  }
}
@media only screen and (min-width: 1366px) and (max-width: 1366px) {
  h2 {
    font-size: 70px;
    padding: 3rem 1rem 1rem;
  }

  #cancel, #back-button {
    width: 40px;
    height: 40px;
  }
}
@media only screen and (min-width: 1367px) {
  h2 {
    font-size: 55px;
    padding: 3rem 0 1rem;
  }

  .panel-default {
    width: 44rem;
  }

  #cancel, #back-button {
    top: 3rem;
  }

  #cancel {
    right: 6rem;
  }

  #back-button {
    left: 6rem;
  }

  .sc-images img {
    height: 35vh;
  }
  .sc-images #studycat-write {
    height: 40vh;
  }
  .sc-images #studycat-welcome,
.sc-images #studycat-mail,
.sc-images #studycat-globe {
    right: 4% !important;
    left: unset !important;
  }
  .sc-images #studycat-write,
.sc-images #studycat-shield {
    left: 20% !important;
  }

  .sc-cover img {
    width: 15rem;
  }
}
@media only screen and (min-width: 1800px) {
  #cancel, #back-button {
    top: 3rem;
  }

  #cancel {
    right: 8rem;
  }

  #back-button {
    left: 8rem;
  }
}
/*# sourceMappingURL=styles.css.map */