tronair-gui/src/App.css

Web application/GUI for performing airdrops on the TRON blockchain

.swal2-container {
  zoom: 1.5;
}

.font-helveticaNeueMedium {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
}
@media (min-resolution: 120dpi) {
  .font-helveticaNeueMedium {
    font-family: 'HelveticaNeue-Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
  }
}

/* Font copied in place by React Studio. Please check that your license for this font file permits embedding on a website. */
@font-face {
  font-family: 'SFUIText-Regular';
  src: url('fonts/BF396DF7D0C0-Regular.otf');
}

.font-SFUITextRegular {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
}
@media (min-resolution: 120dpi) {
  .font-SFUITextRegular {
    font-family: 'SFUIText-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
  }
}

.App { /* Base font style */
  font-family: '(null)', sans-serif;
  font-size: 15.1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgba(0, 0, 0, 0.8500);
  background-color: #f6f6f6;
}

.App .baseFont * { /* Base font style override for UI framework components */
  font-family: '(null)', sans-serif;
  font-size: 15.1px;
}

.App .appBg {
  background-color: #f6f6f6;
}

.App .cardBg {
  background-color: white;
}

.App .baseTextBg { /* Base text color as background */
  background-color: rgba(0, 0, 0, 0.8500);
}

.App .secondaryTextColor {
  color: rgba(0, 0, 0, 0.5000);
}

.App .secondaryTextBg {
  background-color: rgba(0, 0, 0, 0.5000);
}

.App .primaryTextColor {
  color: #bee9ee;
}

.App .primaryBg {
  background-color: #bee9ee;
}

.App .highlightTextColor {
  color: #4c98e7;
}

.App .highlightBg {
  background-color: #4c98e7;
}

/* Styles to customize the UI framework plugin (MUI, https://muicss.com) */
.mui-btn {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.mui-btn--primary {
    background-color: #bee9ee;
}
.mui-btn--primary:active, .mui-btn--primary:focus, .mui-btn--primary:hover {
    background-color: #c3ebf0;
}
.mui-btn--accent {
    background-color: #4c98e7;
}
.mui-btn--accent:active, .mui-btn--accent:focus, .mui-btn--accent:hover {
    background-color: #5ba4ea;
}
.mui-textfield {  /* Reset UI framework styling that affects layout */
    padding-top: 0;
    margin-bottom: 0;
}
.mui-checkbox, .mui-radio {  /* Reset UI framework styling that affects layout */
    margin-top: 0;
    margin-bottom: 0;
}
.mui-select {  /* Reset UI framework styling that affects layout */
    padding-top: 0;
    margin-bottom: 0;
}
.mui-btn+.mui-btn {  /* Reset UI framework styling that affects layout */
    margin-left: 0;
}
.mui-btn--fab {  /* Reset UI framework styling that breaks compositing */
    z-index: auto;
}

@keyframes fadeIn {
    0%   { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@keyframes slideIn_right {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(0); }
}
@keyframes slideIn_bottom {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

/* App-wide text styles specified in React Studio */
.App .actionFont {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
  font-size: 17.9px;
  font-weight: 400;
}
@media (min-resolution: 120dpi) {
  .App .actionFont {
    font-family: 'HelveticaNeue-Medium', sans-serif;
  }
}
.App .actionFont * {
  font-size: 17.9px;
}
.App .headlineFont {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
  font-size: 19.4px;
  font-weight: 600;
}
.App .headlineFont * {
  font-size: 19.4px;
}
.App .navBar {
  background-color: #bee9ee;
  color: black;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 63px;
  min-height: 63px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
  font-size: 18px;
}

.App .navBar a {
  color: black;
}

.App .navBar .title {
  position: absolute;
  width: 100%;
  text-align: center;
  padding: 4px;
  margin-top: 13px;
}

.App .navBar .backBtn {
  position: absolute;
  padding: 4px;
  margin-left: 14px;
  margin-top: 14px;
  cursor: pointer;
}

@media (min-width: 320px) {
  .mui-container {
    max-width: 320px;
  }
}
@media (min-width: 568px) {
  .mui-container {
    max-width: 568px;
  }
}
@media (min-width: 768px) {
  .mui-container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .mui-container {
    max-width: 1024px;
  }
}

.AppScreen {
  padding-left: 0;
  padding-right: 0;
  position: absolute;
  width: 100%;
}

.App .background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.App .layoutFlow {
  position: relative;
  width: 100%;
  pointer-events: none;
}
.App .layoutFlow:before {  /* Prevent margin collapse */
  content: "";
  display: table;
  clear: both;
}
.App .layoutFlow .flowRow {
  position: relative;
  width: 100%;
}

.App .screenFgContainer {
  /* Items in the foreground group within a screen are placed with fixed positioning */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.App .foreground {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.App ul {
  margin: 0;
  padding: 0;
}
.App li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: relative;
}
.App .hasNestedComps {
  position: relative;
}
.App .hasNestedComps:after {
  content: "";
  display: table;
  clear: both;
}
.App .hasNestedComps .background {
  position: absolute;
}
.App .hasNestedComps .layoutFlow {
  position: relative;
}
.App .bottomAlignedContent {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.App .blockInputOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  z-index: 99999999;
}

/* This component has a fixed-size layout */
  .Demoscreen {
    min-height: 612px;
    overflow: hidden;
    width: 100%; /* This component was designed using a width of 881px */
    height: 100%;
  }
  .Demoscreen > .background > .containerMinHeight {
    min-height: 612px;
  }


  .Demoscreen > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Demoscreen > .foreground > .elText {
    overflow: hidden;
    position: absolute;
    left: calc(50.0% + -166px);
    top: 275px;
    width: 332px;
    height: 71px;
  }

/* This component has a fixed-size layout */
  .Submitoptions {
    min-height: 256px;
    width: 100%; /* This component was designed using a width of 431px */
    height: 100%;
  }
  .Submitoptions > .background > .containerMinHeight {
    min-height: 256px;
  }


  .Submitoptions > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Submitoptions > .layoutFlow > .elSave_check {
    position: relative;
    margin-top: 26px;
    width: 180px;
    margin-left: calc(50.0% - 90px);
  }
  .Submitoptions > .layoutFlow > .elSave_check > * { 
  width: 180px;
  }
  


  .Submitoptions > .layoutFlow > .elText {
    overflow: hidden;
    position: relative;
    margin-top: 13px;
    margin-left: 10.0%;
    margin-right: calc(10.0% + 0px);
    width: calc(80.0% - 0px);
  }
  .Submitoptions > .layoutFlow > .elText > * { 
    width: 100%;
  }
  


  .Submitoptions > .layoutFlow > .elSave_dir_txt {
    position: relative;
    margin-top: 5px;
    margin-left: 10.0%;
    margin-right: calc(35.0% + 0px);
    width: calc(55.0% - 0px);
  }
  .Submitoptions > .layoutFlow > .elSave_dir_txt > * { 
    width: 100%;
  height: 34px;
  }
  

.Submitoptions .elSave_dir_browse button {
  border: 0.0px solid transparent;
}



  .Submitoptions > .layoutFlow > .elSave_dir_browse {
    line-height: 34px;
    position: relative;
    margin-top: -34px;
    margin-left: 66.0%;
    margin-right: calc(10.0% + 0px);
    width: calc(24.0% - 0px);
  }
  .Submitoptions > .layoutFlow > .elSave_dir_browse > * { 
    width: 100%;
  }
  

.Submitoptions .elButton button {
  border: 0.0px solid transparent;
}



  .Submitoptions > .layoutFlow > .elButton {
    line-height: 35px;
    position: relative;
    margin-top: 39px;
    margin-left: 30.0%;
    margin-right: calc(30.0% + 0px);
    width: calc(40.0% - 0px);
  }
  .Submitoptions > .layoutFlow > .elButton > * { 
    width: 100%;
  }
  

/* This component has a fixed-size layout */
  .Summary {
    min-height: 364px;
    width: 100%; /* This component was designed using a width of 621px */
    height: 100%;
  }
  .Summary > .background > .containerMinHeight {
    min-height: 364px;
  }


  .Summary > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Summary > .layoutFlow > .elText {
    overflow: hidden;
    position: relative;
    margin-top: 18px;
    margin-left: 10.0%;
    margin-right: calc(10.0% + 0px);
    width: calc(80.0% - 0px);
  }
  .Summary > .layoutFlow > .elText > * { 
    width: 100%;
  }
  


  .Summary > .layoutFlow > .elSummary_txt {
    position: relative;
    margin-top: 8px;
    margin-left: 10.0%;
    margin-right: calc(10.0% + 0px);
    width: calc(80.0% - 0px);
  }
  .Summary > .layoutFlow > .elSummary_txt > * { 
    width: 100%;
  }
  


/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .background > .state0_elBackground134370 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
@media (min-width: 568px) {
  .SubmitScreen > .background > .state0_elBackground134370 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .SubmitScreen > .background > .state0_elBackground134370 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .SubmitScreen > .background > .state0_elBackground134370 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}


/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .background > .state0_elImage282629 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
@media (min-width: 568px) {
  .SubmitScreen > .background > .state0_elImage282629 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .SubmitScreen > .background > .state0_elImage282629 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .SubmitScreen > .background > .state0_elImage282629 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}

.SubmitScreen .state0_elComponent289835 {
  overflow: hidden;
}

.SubmitScreen .state0_elComponent289835.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 {
    position: relative;
    margin-top: 55px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 > * { 
    width: 100%;
  }
  
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 > .background > .containerMinHeight {
    min-height: 256px;
  }

@media (min-width: 568px) {
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 {
    position: relative;
    margin-top: 30px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 > * { 
    width: 100%;
  }
  
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 > .background > .containerMinHeight {
    min-height: 256px;
  }

}
@media (min-width: 768px) {
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 {
    position: relative;
    margin-top: 100px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 > * { 
    width: 100%;
  }
  
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 > .background > .containerMinHeight {
    min-height: 256px;
  }

}
@media (min-width: 1024px) {
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 {
    position: relative;
    margin-top: 75px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 > * { 
    width: 100%;
  }
  
  .SubmitScreen > .layoutFlow > .state0_elComponent289835 > .background > .containerMinHeight {
    min-height: 256px;
  }

}

.SubmitScreen .state0_elCNBanner154895 {
  overflow: hidden;
}

.SubmitScreen .state0_elCNBanner154895.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elCNBanner154895 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elCNBanner154895 > .background > .containerMinHeight {
    min-height: 46px;
  }

@media (min-width: 568px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elCNBanner154895 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elCNBanner154895 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 768px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elCNBanner154895 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elCNBanner154895 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 1024px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elCNBanner154895 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elCNBanner154895 > .background > .containerMinHeight {
    min-height: 46px;
  }

}

.SubmitScreen .state0_elProgressbar254548 {
  overflow: hidden;
}

.SubmitScreen .state0_elProgressbar254548.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elProgressbar254548 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elProgressbar254548 > .background > .containerMinHeight {
    min-height: 46px;
  }

@media (min-width: 568px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elProgressbar254548 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elProgressbar254548 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 768px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elProgressbar254548 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elProgressbar254548 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 1024px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elProgressbar254548 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state0_elProgressbar254548 > .background > .containerMinHeight {
    min-height: 46px;
  }

}


/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .background > .state1_elBackground134370 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
@media (min-width: 568px) {
  .SubmitScreen > .background > .state1_elBackground134370 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .SubmitScreen > .background > .state1_elBackground134370 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .SubmitScreen > .background > .state1_elBackground134370 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}


/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .background > .state1_elImage282629 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
@media (min-width: 568px) {
  .SubmitScreen > .background > .state1_elImage282629 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .SubmitScreen > .background > .state1_elImage282629 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .SubmitScreen > .background > .state1_elImage282629 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}

.SubmitScreen .state1_elComponent289835 {
  overflow: hidden;
}

.SubmitScreen .state1_elComponent289835.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 {
    position: relative;
    margin-top: 55px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 > * { 
    width: 100%;
  }
  
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 > .background > .containerMinHeight {
    min-height: 256px;
  }

@media (min-width: 568px) {
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 {
    position: relative;
    margin-top: 30px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 > * { 
    width: 100%;
  }
  
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 > .background > .containerMinHeight {
    min-height: 256px;
  }

}
@media (min-width: 768px) {
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 {
    position: relative;
    margin-top: 100px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 > * { 
    width: 100%;
  }
  
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 > .background > .containerMinHeight {
    min-height: 256px;
  }

}
@media (min-width: 1024px) {
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 {
    position: relative;
    margin-top: 75px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 > * { 
    width: 100%;
  }
  
  .SubmitScreen > .layoutFlow > .state1_elComponent289835 > .background > .containerMinHeight {
    min-height: 256px;
  }

}

.SubmitScreen .state1_elCNBanner154895 {
  overflow: hidden;
}

.SubmitScreen .state1_elCNBanner154895.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elCNBanner154895 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elCNBanner154895 > .background > .containerMinHeight {
    min-height: 46px;
  }

@media (min-width: 568px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elCNBanner154895 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elCNBanner154895 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 768px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elCNBanner154895 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elCNBanner154895 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 1024px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elCNBanner154895 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elCNBanner154895 > .background > .containerMinHeight {
    min-height: 46px;
  }

}

.SubmitScreen .state1_elProgressbar254548 {
  overflow: hidden;
}

.SubmitScreen .state1_elProgressbar254548.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elProgressbar254548 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elProgressbar254548 > .background > .containerMinHeight {
    min-height: 46px;
  }

@media (min-width: 568px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elProgressbar254548 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elProgressbar254548 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 768px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elProgressbar254548 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elProgressbar254548 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 1024px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elProgressbar254548 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elProgressbar254548 > .background > .containerMinHeight {
    min-height: 46px;
  }

}

.SubmitScreen .state1_elComponent {
  overflow: hidden;
}

.SubmitScreen .state1_elComponent.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elComponent {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elComponent > .background > .containerMinHeight {
    min-height: 616px;
  }

@media (min-width: 568px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elComponent {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elComponent > .background > .containerMinHeight {
    min-height: 616px;
  }

}
@media (min-width: 768px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elComponent {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elComponent > .background > .containerMinHeight {
    min-height: 612px;
  }

}
@media (min-width: 1024px) {
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elComponent {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
  .SubmitScreen > .screenFgContainer > .foreground > .state1_elComponent > .background > .containerMinHeight {
    min-height: 612px;
  }

}


/* Narrowest size for this element's responsive layout */
  .ReviewScreen > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
@media (min-width: 568px) {
  .ReviewScreen > .background > .elBackground {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .ReviewScreen > .background > .elBackground {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .ReviewScreen > .background > .elBackground {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}


/* Narrowest size for this element's responsive layout */
  .ReviewScreen > .background > .elImage {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
@media (min-width: 568px) {
  .ReviewScreen > .background > .elImage {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .ReviewScreen > .background > .elImage {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .ReviewScreen > .background > .elImage {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}

.ReviewScreen .elSummary {
  overflow: hidden;
}

.ReviewScreen .elSummary.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .ReviewScreen > .layoutFlow > .elSummary {
    position: relative;
    margin-top: 55px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .ReviewScreen > .layoutFlow > .elSummary > * { 
    width: 100%;
  }
  
  .ReviewScreen > .layoutFlow > .elSummary > .background > .containerMinHeight {
    min-height: 364px;
  }

@media (min-width: 568px) {
  .ReviewScreen > .layoutFlow > .elSummary {
    position: relative;
    margin-top: 30px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .ReviewScreen > .layoutFlow > .elSummary > * { 
    width: 100%;
  }
  
  .ReviewScreen > .layoutFlow > .elSummary > .background > .containerMinHeight {
    min-height: 364px;
  }

}
@media (min-width: 768px) {
  .ReviewScreen > .layoutFlow > .elSummary {
    position: relative;
    margin-top: 100px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .ReviewScreen > .layoutFlow > .elSummary > * { 
    width: 100%;
  }
  
  .ReviewScreen > .layoutFlow > .elSummary > .background > .containerMinHeight {
    min-height: 364px;
  }

}
@media (min-width: 1024px) {
  .ReviewScreen > .layoutFlow > .elSummary {
    position: relative;
    margin-top: 75px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .ReviewScreen > .layoutFlow > .elSummary > * { 
    width: 100%;
  }
  
  .ReviewScreen > .layoutFlow > .elSummary > .background > .containerMinHeight {
    min-height: 364px;
  }

}

.ReviewScreen .elCNBanner {
  overflow: hidden;
}

.ReviewScreen .elCNBanner.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .ReviewScreen > .screenFgContainer > .foreground > .elCNBanner {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .ReviewScreen > .screenFgContainer > .foreground > .elCNBanner > .background > .containerMinHeight {
    min-height: 46px;
  }

@media (min-width: 568px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elCNBanner {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .ReviewScreen > .screenFgContainer > .foreground > .elCNBanner > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 768px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elCNBanner {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .ReviewScreen > .screenFgContainer > .foreground > .elCNBanner > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 1024px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elCNBanner {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .ReviewScreen > .screenFgContainer > .foreground > .elCNBanner > .background > .containerMinHeight {
    min-height: 46px;
  }

}

.ReviewScreen .elProgressbar {
  overflow: hidden;
}

.ReviewScreen .elProgressbar.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .ReviewScreen > .screenFgContainer > .foreground > .elProgressbar {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .ReviewScreen > .screenFgContainer > .foreground > .elProgressbar > .background > .containerMinHeight {
    min-height: 46px;
  }

@media (min-width: 568px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elProgressbar {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .ReviewScreen > .screenFgContainer > .foreground > .elProgressbar > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 768px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elProgressbar {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .ReviewScreen > .screenFgContainer > .foreground > .elProgressbar > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 1024px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elProgressbar {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .ReviewScreen > .screenFgContainer > .foreground > .elProgressbar > .background > .containerMinHeight {
    min-height: 46px;
  }

}

.ReviewScreen .elSubmit_airdrop_btn {
  cursor: pointer;
  border: 0.0px solid transparent;
}

.ReviewScreen .elSubmit_airdrop_btn:focus {
  box-shadow: 0 0 6px rgba(249, 247, 255, 0.2500);
  outline: none;
}



/* Narrowest size for this element's responsive layout */
  .ReviewScreen > .screenFgContainer > .foreground > .elSubmit_airdrop_btn {
    line-height: 45px;
    position: fixed;
    right: calc(20.0% + 0px);
    top: 444px;
    width: 136px;
    height: 45px;
  }
@media (min-width: 568px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elSubmit_airdrop_btn {
    line-height: 45px;
    right: calc(20.0% + 0px);
    top: 418px;
    width: 136px;
    height: 45px;
  }
}
@media (min-width: 768px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elSubmit_airdrop_btn {
    line-height: 45px;
    right: calc(20.0% + 0px);
    top: 486px;
    width: 135px;
    height: 45px;
  }
}
@media (min-width: 1024px) {
  .ReviewScreen > .screenFgContainer > .foreground > .elSubmit_airdrop_btn {
    line-height: 45px;
    right: calc(20.0% + 0px);
    top: 461px;
    width: 135px;
    height: 45px;
  }
}

/* This component has a fixed-size layout */
  .Options {
    min-height: 514px;
    width: 100%; /* This component was designed using a width of 690px */
    height: 100%;
  }
  .Options > .background > .containerMinHeight {
    min-height: 514px;
  }


  .Options > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Options > .layoutFlow > .elText {
    overflow: hidden;
    position: relative;
    margin-top: 26px;
    margin-left: 0px;
    margin-right: 52.0%;
    width: calc(48.0% - 0px);
  }
  .Options > .layoutFlow > .elText > * { 
    width: 100%;
  }
  


  .Options > .layoutFlow > .elDrop_token_pick {
    position: relative;
    margin-top: -27px;
    width: 225px;
    margin-left: 50.0%;
  }
  .Options > .layoutFlow > .elDrop_token_pick > * { 
  width: 225px;
  }
  


  .Options > .layoutFlow > .elTextCopy {
    overflow: hidden;
    position: relative;
    margin-top: 25px;
    margin-left: 10.0%;
    margin-right: calc(10.0% + 0px);
    width: calc(80.0% - 0px);
  }
  .Options > .layoutFlow > .elTextCopy > * { 
    width: 100%;
  }
  


  .Options > .layoutFlow > .elHolder_pick {
    position: relative;
    margin-top: 10px;
    width: 225px;
    margin-left: calc(50.0% + -180px);
  }
  .Options > .layoutFlow > .elHolder_pick > * { 
  width: 225px;
  }
  


  .Options > .layoutFlow > .elHolder_check {
    position: relative;
    margin-top: -27px;
    width: 126px;
    margin-left: calc(50.0% + 56px);
  }
  .Options > .layoutFlow > .elHolder_check > * { 
  /*width: 126px;*/
  width: 200px;
  }
  


  .Options > .layoutFlow > .elAnd_or_pick {
    position: relative;
    margin-top: 10px;
    width: 80px;
    margin-left: calc(50.0% - 40px);
  }
  .Options > .layoutFlow > .elAnd_or_pick > * { 
  width: 80px;
  }
  


  .Options > .layoutFlow > .elVoter_pick {
    position: relative;
    margin-top: 10px;
    width: 225px;
    margin-left: calc(50.0% + -180px);
  }
  .Options > .layoutFlow > .elVoter_pick > * { 
  width: 225px;
  }
  


  .Options > .layoutFlow > .elVoter_check {
    position: relative;
    margin-top: -27px;
    width: 126px;
    margin-left: calc(50.0% + 56px);
  }
  .Options > .layoutFlow > .elVoter_check > * { 
  width: 126px;
  }
  


  .Options > .layoutFlow > .elTextCopy2 {
    overflow: hidden;
    position: relative;
    margin-top: 26px;
    margin-left: 0px;
    margin-right: 52.0%;
    width: calc(48.0% - 0px);
  }
  .Options > .layoutFlow > .elTextCopy2 > * { 
    width: 100%;
  }
  


  .Options > .layoutFlow > .elDrop_amount {
    position: relative;
    margin-top: -27px;
    width: 169px;
    margin-left: 50.0%;
  }
  .Options > .layoutFlow > .elDrop_amount > * { 
  width: 169px;
  height: 34px;
  }
  


  .Options > .layoutFlow > .elWeighted_check {
    position: relative;
    margin-top: -27px;
    width: 126px;
    margin-left: calc(50.0% + 180px);
  }
  .Options > .layoutFlow > .elWeighted_check > * { 
  width: 126px;
  }
  


  .Options > .layoutFlow > .elText2 {
    overflow: hidden;
    position: relative;
    margin-top: 26px;
    margin-left: 10.0%;
    margin-right: calc(10.0% + 0px);
    width: calc(80.0% - 0px);
  }
  .Options > .layoutFlow > .elText2 > * { 
    width: 100%;
  }
  


  .Options > .layoutFlow > .elDrop_examples_txt {
    position: relative;
    margin-top: 10px;
    margin-left: 10.0%;
    margin-right: calc(10.0% + 0px);
    width: calc(80.0% - 0px);
  }
  .Options > .layoutFlow > .elDrop_examples_txt > * { 
    width: 100%;
  }
  

/* This component has a fixed-size layout */
  .Licenseagreement {
    min-height: 441px;
    width: 100%; /* This component was designed using a width of 529px */
    height: 100%;
  }
  .Licenseagreement > .background > .containerMinHeight {
    min-height: 441px;
  }


  .Licenseagreement > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Licenseagreement > .layoutFlow > .elTitle {
    overflow: hidden;
    position: relative;
    margin-top: 44px;
    margin-left: 0px;
    margin-right: 0px;
    width: calc(100.0% - 0px);
  }
  .Licenseagreement > .layoutFlow > .elTitle > * { 
    width: 100%;
  }
  


  .Licenseagreement > .layoutFlow > .elBody {
    overflow: hidden;
    position: relative;
    margin-top: 0px;
    margin-left: 5.0%;
    margin-right: calc(5.0% + 0px);
    width: calc(90.0% - 0px);
  }
  .Licenseagreement > .layoutFlow > .elBody > * { 
    width: 100%;
  }
  

.Licenseagreement .elAccept_Btn {
  border: 0.0px solid transparent;
}



  .Licenseagreement > .foreground > .elAccept_Btn {
    line-height: 35px;
    position: absolute;
    right: calc(5.0% + 0px);
    bottom: 22px;
    width: 144px;
    height: 35px;
  }

/* This component has a fixed-size layout */
  .Chooselogin {
    min-height: 343px;
    width: 100%; /* This component was designed using a width of 415px */
    height: 100%;
  }
  .Chooselogin > .background > .containerMinHeight {
    min-height: 343px;
  }


  .Chooselogin > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }

.Chooselogin .elTl_login_btn button {
  border: 0.0px solid transparent;
}



  .Chooselogin > .layoutFlow > .elTl_login_btn {
    line-height: 45px;
    position: relative;
    margin-top: 86px;
    width: 270px;
    margin-left: calc(50.0% - 135px);
  }
  .Chooselogin > .layoutFlow > .elTl_login_btn > * { 
  width: 270px;
  }
  

.Chooselogin .elTl_login_btnCopy button {
  border: 0.0px solid transparent;
}



  .Chooselogin > .layoutFlow > .elTl_login_btnCopy {
    line-height: 45px;
    position: relative;
    margin-top: 86px;
    width: 270px;
    margin-left: calc(50.0% - 135px);
  }
  .Chooselogin > .layoutFlow > .elTl_login_btnCopy > * { 
  width: 270px;
  }
  

/* This component has a fixed-size layout */
  .Pklogin {
    min-height: 307px;
    width: 100%; /* This component was designed using a width of 415px */
    height: 100%;
  }
  .Pklogin > .background > .containerMinHeight {
    min-height: 307px;
  }


  .Pklogin > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Pklogin > .layoutFlow > .elPk_text_edit {
    position: relative;
    margin-top: 76px;
    width: 270px;
    margin-left: calc(50.0% - 135px);
  }
  .Pklogin > .layoutFlow > .elPk_text_edit > * { 
  width: 270px;
  height: 34px;
  }
  

.Pklogin .elVerfiy_pk_btn button {
  border: 0.0px solid transparent;
}



  .Pklogin > .layoutFlow > .elVerfiy_pk_btn {
    line-height: 45px;
    position: relative;
    margin-top: 77px;
    width: 270px;
    margin-left: calc(50.0% - 135px);
  }
  .Pklogin > .layoutFlow > .elVerfiy_pk_btn > * { 
  width: 270px;
  }
  

/* This component has a fixed-size layout */
  .Verifylogin {
    min-height: 299px;
    width: 100%; /* This component was designed using a width of 533px */
    height: 100%;
  }
  .Verifylogin > .background > .containerMinHeight {
    min-height: 299px;
  }


  .Verifylogin > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Verifylogin > .layoutFlow > .elText {
    overflow: hidden;
    position: relative;
    margin-top: 74px;
    width: 270px;
    margin-left: calc(50.0% - 135px);
  }
  .Verifylogin > .layoutFlow > .elText > * { 
  width: 270px;
  }
  


  .Verifylogin > .layoutFlow > .elText2 {
    overflow: hidden;
    position: relative;
    margin-top: 30px;
    margin-left: 0px;
    margin-right: 0px;
    width: calc(100.0% - 0px);
  }
  .Verifylogin > .layoutFlow > .elText2 > * { 
    width: 100%;
  }
  


/* Narrowest size for this element's responsive layout */
  .SettingsScreen > .background > .elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
@media (min-width: 568px) {
  .SettingsScreen > .background > .elBackground {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .SettingsScreen > .background > .elBackground {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .SettingsScreen > .background > .elBackground {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}


/* Narrowest size for this element's responsive layout */
  .SettingsScreen > .background > .elImage {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
@media (min-width: 568px) {
  .SettingsScreen > .background > .elImage {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .SettingsScreen > .background > .elImage {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .SettingsScreen > .background > .elImage {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }
}

.SettingsScreen .elComponent {
  overflow: hidden;
}

.SettingsScreen .elComponent.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SettingsScreen > .layoutFlow > .elComponent {
    position: relative;
    margin-top: 55px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SettingsScreen > .layoutFlow > .elComponent > * { 
    width: 100%;
  }
  
  .SettingsScreen > .layoutFlow > .elComponent > .background > .containerMinHeight {
    min-height: 428px;
  }

@media (min-width: 568px) {
  .SettingsScreen > .layoutFlow > .elComponent {
    position: relative;
    margin-top: 30px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SettingsScreen > .layoutFlow > .elComponent > * { 
    width: 100%;
  }
  
  .SettingsScreen > .layoutFlow > .elComponent > .background > .containerMinHeight {
    min-height: 428px;
  }

}
@media (min-width: 768px) {
  .SettingsScreen > .layoutFlow > .elComponent {
    position: relative;
    margin-top: 100px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SettingsScreen > .layoutFlow > .elComponent > * { 
    width: 100%;
  }
  
  .SettingsScreen > .layoutFlow > .elComponent > .background > .containerMinHeight {
    min-height: 428px;
  }

}
@media (min-width: 1024px) {
  .SettingsScreen > .layoutFlow > .elComponent {
    position: relative;
    margin-top: 75px;
    margin-left: 20.0%;
    margin-right: calc(20.0% + 0px);
    width: calc(60.0% - 0px);
  }
  .SettingsScreen > .layoutFlow > .elComponent > * { 
    width: 100%;
  }
  
  .SettingsScreen > .layoutFlow > .elComponent > .background > .containerMinHeight {
    min-height: 428px;
  }

}

.SettingsScreen .elGo2review_btn button {
  border: 0.0px solid transparent;
}



/* Narrowest size for this element's responsive layout */
  .SettingsScreen > .layoutFlow > .elGo2review_btn {
    line-height: 34px;
    position: relative;
    margin-top: 22px;
    width: 100%;
  }
  .SettingsScreen > .layoutFlow > .elGo2review_btn > * { 
  margin-left: auto;
  width: 113px;
  margin-right: calc(20.0% + 0px);
  }
  
@media (min-width: 568px) {
  .SettingsScreen > .layoutFlow > .elGo2review_btn {
    line-height: 34px;
    position: relative;
    margin-top: 22px;
    width: 100%;
  }
  .SettingsScreen > .layoutFlow > .elGo2review_btn > * { 
  margin-left: auto;
  width: 113px;
  margin-right: calc(20.0% + 0px);
  }
  
}
@media (min-width: 768px) {
  .SettingsScreen > .layoutFlow > .elGo2review_btn {
    line-height: 34px;
    position: relative;
    margin-top: 22px;
    width: 100%;
  }
  .SettingsScreen > .layoutFlow > .elGo2review_btn > * { 
  margin-left: auto;
  width: 113px;
  margin-right: calc(20.0% + 0px);
  }
  
}
@media (min-width: 1024px) {
  .SettingsScreen > .layoutFlow > .elGo2review_btn {
    line-height: 34px;
    position: relative;
    margin-top: 22px;
    width: 100%;
  }
  .SettingsScreen > .layoutFlow > .elGo2review_btn > * { 
  margin-left: auto;
  width: 113px;
  margin-right: calc(20.0% + 0px);
  }
  
}

.SettingsScreen .elNavBar2 {
  overflow: hidden;
}

.SettingsScreen .elNavBar2.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SettingsScreen > .screenFgContainer > .foreground > .elNavBar2 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SettingsScreen > .screenFgContainer > .foreground > .elNavBar2 > .background > .containerMinHeight {
    min-height: 46px;
  }

@media (min-width: 568px) {
  .SettingsScreen > .screenFgContainer > .foreground > .elNavBar2 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SettingsScreen > .screenFgContainer > .foreground > .elNavBar2 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 768px) {
  .SettingsScreen > .screenFgContainer > .foreground > .elNavBar2 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SettingsScreen > .screenFgContainer > .foreground > .elNavBar2 > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 1024px) {
  .SettingsScreen > .screenFgContainer > .foreground > .elNavBar2 {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SettingsScreen > .screenFgContainer > .foreground > .elNavBar2 > .background > .containerMinHeight {
    min-height: 46px;
  }

}

.SettingsScreen .elProgressbar {
  overflow: hidden;
}

.SettingsScreen .elProgressbar.hasNestedComps > div {
  overflow: hidden;
  position: relative;
}



/* Narrowest size for this element's responsive layout */
  .SettingsScreen > .screenFgContainer > .foreground > .elProgressbar {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SettingsScreen > .screenFgContainer > .foreground > .elProgressbar > .background > .containerMinHeight {
    min-height: 46px;
  }

@media (min-width: 568px) {
  .SettingsScreen > .screenFgContainer > .foreground > .elProgressbar {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SettingsScreen > .screenFgContainer > .foreground > .elProgressbar > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 768px) {
  .SettingsScreen > .screenFgContainer > .foreground > .elProgressbar {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SettingsScreen > .screenFgContainer > .foreground > .elProgressbar > .background > .containerMinHeight {
    min-height: 46px;
  }

}
@media (min-width: 1024px) {
  .SettingsScreen > .screenFgContainer > .foreground > .elProgressbar {
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 46px;
  }
  .SettingsScreen > .screenFgContainer > .foreground > .elProgressbar > .background > .containerMinHeight {
    min-height: 46px;
  }

}

/* This component has a fixed-size layout */
  .Cnbanner {
    min-height: 46px;
    overflow: hidden;
    width: 100%; /* This component was designed using a width of 940px */
    height: 100%;
  }
  .Cnbanner > .background > .containerMinHeight {
    min-height: 46px;
  }


  .Cnbanner > .background > .state0_elBackground {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Cnbanner > .foreground > .state0_elImage357362 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 46px;
    height: 46px;
  }


  .Cnbanner > .foreground > .state0_elText2125288 {
    overflow: hidden;
    position: absolute;
    left: 45px;
    top: 12px;
    width: 236px;
    height: 26px;
  }


  .Cnbanner > .foreground > .state0_elImageCopy {
    position: absolute;
    right: 11px;
    top: 12px;
    width: 23px;
    height: 23px;
  }


  .Cnbanner > .foreground > .state0_elText {
    overflow: hidden;
    position: absolute;
    right: 45px;
    top: 12px;
    width: 169px;
    height: 26px;
  }

/* This component has a fixed-size layout */
  .Cnbanner {
    min-height: 46px;
    overflow: hidden;
    width: 100%; /* This component was designed using a width of 940px */
    height: 100%;
  }
  .Cnbanner > .background > .containerMinHeight {
    min-height: 46px;
  }


  .Cnbanner > .foreground > .state1_elImage357362 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 46px;
    height: 46px;
  }


  .Cnbanner > .foreground > .state1_elText2125288 {
    overflow: hidden;
    position: absolute;
    left: 45px;
    top: 12px;
    width: 236px;
    height: 26px;
  }


  .Cnbanner > .foreground > .state1_elTextCopy {
    overflow: hidden;
    position: absolute;
    right: 45px;
    top: 12px;
    width: 169px;
    height: 26px;
  }


  .Cnbanner > .foreground > .state1_elImageCopy2 {
    position: absolute;
    right: 11px;
    top: 12px;
    width: 23px;
    height: 23px;
  }

/* This component has a fixed-size layout */
  .Progressbar {
    min-height: 46px;
    overflow: hidden;
    width: 100%; /* This component was designed using a width of 940px */
    height: 100%;
  }
  .Progressbar > .background > .containerMinHeight {
    min-height: 46px;
  }


  .Progressbar > .background > .state0_elBackground814814 {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100.0%;
    height: 100%;
  }


  .Progressbar > .foreground > .state0_elText2668785 {
    overflow: hidden;
    position: absolute;
    left: calc(35.0% + -140px);
    top: 12px;
    width: 135px;
    height: 26px;
  }


  .Progressbar > .foreground > .state0_elImage {
    position: absolute;
    left: 35.0%;
    top: 7px;
    width: 32px;
    height: 32px;
  }


  .Progressbar > .foreground > .state0_elTextCopy838478 {
    overflow: hidden;
    position: absolute;
    left: calc(52.0% + -140px);
    top: 12px;
    width: 135px;
    hei