/*
* -------------------------
*  Parent Frame Styles
* -------------------------
*/

html {
  background: url("//cdn.abcmouse.com/home/homepage/letter_bg.png");
}

html[lang=zh],
html[lang=zh] body {
  font-family: abcmouse-sans-sc !important;
}

html[lang=ja],
html[lang=ja] body {
  font-family: abcmouse-sans-jp !important;
}

body#parent-main-frame {
  width: 1014px;
  height: 650px;
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0 !important;
  padding-top: 0;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
  -ms-transform: translate(-50%, -50%) scale(0.5);
  -moz-transform: translate(-50%, -50%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
  box-shadow: 0px 0px 50px #000;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[ui-view="main"] {
  display: none;
}

div.main {
  position: relative;
  width: 1014px;
  height: 602px;
  background-color: #4D99E0;
  overflow: hidden;
}

#content-iframe {
  position: absolute;
  top: 0;
  height: 602px;
  width: 100%;
  border-width: 0px;
  opacity: 1;
}


/*
* ------------------------------------
*  SVG Style Overrides - Parent Frame
* ------------------------------------
*/

[name="home"] {
  fill: #4ea2e6;
}

[name="assessments"] {
  fill: #4ea2e6;
}

[name="assessments"] svg {
  width: 21px;
}
/*
* ------------------------------
*  Parent Frame - Header Styles
* ------------------------------
*/

[ui-view="frame"].zh {
  font-family: 'abcmouse-sans-sc';
}

[ui-view="frame"].ja {
  font-family: 'abcmouse-sans-jp';
}

[ui-view="frame"] .header {
  height: 48px;
  background-color: #EEF7FF;
}

[ui-view="frame"] .go-to-homepage {
  float: left;
  cursor:pointer;
}

[ui-view="frame"] .give-gift,
[ui-view="frame"] .log-out,
[ui-view="frame"] .toggle-lang {
  float: right;
  cursor: pointer;
}

[ui-view="frame"] .toggle-lang {
  width: 106px;
  text-align: right;
  margin-right: 6px;
}

[ui-view="frame"] .log-out {
  margin: 0 12px;
}

[ui-view="frame"] .go-to-homepage,
[ui-view="frame"] .give-gift,
[ui-view="frame"] .log-out,
[ui-view="frame"] .toggle-lang {
  display: table;
  height: inherit;
}

[ui-view="frame"] .go-to-homepage > *,
[ui-view="frame"] .give-gift > *,
[ui-view="frame"] .log-out > *,
[ui-view="frame"] .toggle-lang > * {
  display: table-cell;
  vertical-align: middle;
}

[ui-view="frame"] .go-to-homepage > div,
[ui-view="frame"] .give-gift > div,
[ui-view="frame"] .toggle-lang > div {
  width: 45px;
  position: relative;
}

[ui-view="frame"] .log-out > div {
  width: 27px;
}

[ui-view="frame"] .go-to-homepage svg,
[ui-view="frame"] .give-gift svg,
[ui-view="frame"] .log-out svg,
[ui-view="frame"] .toggle-lang svg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

[ui-view="frame"] .go-to-homepage h1,
[ui-view="frame"] .give-gift h1,
[ui-view="frame"] .log-out h1,
[ui-view="frame"] .toggle-lang h1 {
  padding-top: 3px;
  font-size: 13px;
  color: #4075C5;
  font-weight: 500;
}

/*XRELAUNCH-2621 hide gift button for all*/
[ui-view="frame"] .give-gift {
  display: none;
}

[ui-view="frame"] .log-out h1 {
  padding-right: 6px;
}


/*
* ----------------------------------
*  Parent Frame - Breadcrumb Styles
* ----------------------------------
*/

[ui-view="frame"] breadcrumbs {
  display: block;
  position: relative;
  z-index: 1;
  height: 42px;
  margin: 0;
  padding-left: 9px;
  color: #fff;
}

[ui-view="frame"] breadcrumbs.under {
  z-index: 0;
}

[ui-view="frame"] breadcrumbs svg-image[name="back"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  cursor: pointer;
}

[ui-view="frame"] breadcrumbs h2 {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  width: 922px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
}

[ui-view="frame"] breadcrumbs h2.hidden {
  visibility: hidden;
}

[ui-view="frame"] breadcrumbs h2.smaller {
  font-size: 18px;
}

[ui-view="frame"] breadcrumbs h2 * {
  color: #fff;
}

[ui-view="frame"] breadcrumbs h2 > .crumb {
  cursor: default;
}

[ui-view="frame"] breadcrumbs h2 > .crumb.overflowing {
  cursor: pointer;
}

[ui-view="frame"] breadcrumbs .caret {
  color: #98ccfc;
}

[ui-view="frame"] breadcrumbs .overflow-breadcrumbs {
  display: none;
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 12px;
  width: auto;
  height: 50px;
  border: 2px solid #4C99DF;
  border-radius: 8px;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
  background: #FEFEF4;
  padding: 0 20px;
  color: #3F3F3A;
  font-size: 18px;
  font-weight: 600;
}

[ui-view="frame"] breadcrumbs .overflow-breadcrumbs.shown {
  display: block;
}

[ui-view="frame"] breadcrumbs .overflow-breadcrumbs .v-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

[ui-view="frame"] breadcrumbs .overflow-breadcrumbs-underlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

[ui-view="frame"] breadcrumbs .overflow-breadcrumbs-underlay.shown {
  display: block;
}

#content-iframe.transition-opacity {
  opacity: 0;
}

/*
* --------------------------------------
*  Parent Frame - Page Animation Styles
* --------------------------------------
*/

.parent-card-anim {
  position: absolute;
  z-index: 2;
  border-radius: 10px;
  background: #fff;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  overflow: hidden;
}

.parent-card-anim.expanded {
  left: 47px !important;
  top: 42px !important;
  width: 920px !important;
  height: 503px !important;
}

.anim-header-blue {
  height: 52px;
  width: 100%;
  background: #e4f5ff;
}

.parent-card-anim.expanded.card-opacity {
  opacity: 0;
  visibility: hidden;
}

.parent-card-anim-header {
  height: 70px;
  width: 100%;
  border-bottom: 2px solid #000;
}

.parent-card-anim-header.curriculum {
  border-color: #ff8400;
}

.parent-card-anim-header.customer-support {
  border-color: #8F53E7;
}

.parent-card-anim-header.contact-us {
  height: 203px;
  width: 100%;
  background: #DCF1FF;
  border-bottom: 9px solid #C4E8FF;
  box-shadow: inset 1px 0px 0px 1px #c4e8ff;
}

.parent-card-anim-header.my-account {
  border-color: #2cba00;
}

.parent-card-anim-header.settings {
  border-color: #0b45a9;
}

.parent-card-anim-header > * {
  float: left;
  height: 100%;
}

.parent-card-anim-icon {
  width: 69px;
  position: relative;
}

.parent-card-anim-title {
  width: 152px;
  transition: all 0.5s 0.2s;
}

.parent-card-anim.expanded .parent-card-anim-title {
  width: 850px;
}

.parent-card-anim-title h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 18px;
  padding: 16px 10px 16px 0;
  transition: all 0.5s 0.2s;
  color: #f64e17;
}

.parent-card-anim.expanded .parent-card-anim-title h3 {
  font-size: 24px;
  padding: 25px 10px 25px 0;
}

.parent-card-anim-icon svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/*
* --------------------------------------
*  Parent Frame - Auto Popup Styles
* --------------------------------------
*/

#autopop-modal .iframe-container {
  height: 512px;
  border-radius: 10px;
  background: transparent;
}

#autopop-modal iframe {
  display: block;
  margin: 0 auto;
  border: none;
  background: transparent;
  background: none;
}

#autopop-modal .aofl-modal-dialog{
  background: none;
  box-shadow: none;
  width: auto;
  height: auto;
}