io.parrots/styles/app/component/page/AccountAuthenticationPage.less

Parrots.io App

.parrots-page-account-authentication{
  background: -webkit-linear-gradient(left top, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2);
  width: 100%;
  height: 100%;
  position: @ACCOUNT_AUTHENTICATION_PAGE_POSITION;
  display: @ACCOUNT_AUTHENTICATION_PAGE_DISPLAY;
  align-items: @ACCOUNT_AUTHENTICATION_PAGE_ALIGN_ITEM;
  justify-content: @ACCOUNT_AUTHENTICATION_PAGE_JUSTIFY_CONTENT;

  >.header-view{
    position: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_POSITION;
    top: 0;
    width: 100%;
    align-items: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_ALIGN_ITEM;
    display: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_DISPLAY;
    justify-content: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_JUSTIFY_CONTENT;
    color: extract(@CLR_1, 9);
    height: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_HEIGHT;

    >.header-text-language{
      .FC0();
      padding-left: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_TEXT_LANGUAGE_PADDING_LEFT;
      padding-right: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_TEXT_LANGUAGE_PADDING_RIGHT;

      .material-simple-dropdown{
        border-width: 0;

        .dropdown-container{
          >.dropdown{
            >.label{
              button{
                background-color: transparent;

                .table-cell-wrapper{
                  .FC0();
                  color: white;
                }
                .down-triangle{
                  color: white;
                }
              } 
            }
          }
        }
      }
    }
  }

  >.body-view{
    >.body-text-header{
      .FC0();
      color: extract(@CLR_1, 9);
      padding-bottom: @ACCOUNT_AUTHENTICATION_PAGE_BODY_VIEW_TEXT_HEADER_PADDING_BOTTOM;
    }
  }

  >.footer-view{
    position: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_POSITION;
    bottom: 0;
    width: 100%;
    align-items: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_ALIGN_ITEM;
    display: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_DISPLAY;
    justify-content: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_JUSTIFY_CONTENT;
    color: extract(@CLR_1, 9);
    height: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_HEIGHT;

    >.footer-text{
      .FC0();
      padding-left: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_TEXT_PADDING_LEFT;
      padding-right: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_TEXT_PADDING_RIGHT;
    }
  }

  >.greet-view {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: @ACCOUNT_AUTHENTICATION_PAGE_GREET_VIEW_POSITION;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: -webkit-linear-gradient(left top, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2);
    display: @ACCOUNT_AUTHENTICATION_PAGE_GREET_VIEW_DISPLAY;
    align-items: @ACCOUNT_AUTHENTICATION_PAGE_GREET_VIEW_ALIGN_ITEMN;
    opacity: 1;
  
    >.greet-text{
      .FC8L();
      width: 100%;
      text-align: @ACCOUNT_AUTHENTICATION_PAGE_GREET_VIEW_TEXT;
      color: extract(@CLR_1, 9);
    }
  }
}

.parrots-page-login {

  >.signin-view{
    width: @LOGIN_PAGE_SININ_VIEW_WIDTH;
    height: @LOGIN_PAGE_SININ_VIEW_HEIGHT;
    background-color: extract(@CLR_1, 9);
    position: @LOGIN_PAGE_SININ_VIEW_POSITION;
    -webkit-box-shadow: @LOGIN_PAGE_SININ_VIEW_BOX_SHADOW;
    -moz-box-shadow: @LOGIN_PAGE_SININ_VIEW_BOX_SHADOW;
    box-shadow: @LOGIN_PAGE_SININ_VIEW_BOX_SHADOW;

    >.signin-wrapper{
      margin: @LOGIN_PAGE_SININ_VIEW_WRAPPER_MARGIN;
      padding-top: @LOGIN_PAGE_SININ_VIEW_WRAPPER_PADDING_TOP;
      height: @LOGIN_PAGE_SININ_VIEW_WRAPPER_PADDING_HEIGHT;
  
      >.signin-view-title{
        display: @LOGIN_PAGE_SININ_VIEW_WRAPPER_TITLE_VIEW_DISPLAY;
        align-items: @LOGIN_PAGE_SININ_VIEW_WRAPPER_TITLE_VIEW_ALIGN_ITEMN;
        padding-bottom: @LOGIN_PAGE_SININ_VIEW_WRAPPER_TITLE_VIEW_PADDING_BOTTOM;
  
        >.signin-icon-title{
          padding-right: @LOGIN_PAGE_SININ_VIEW_WRAPPER_TITLE_VIEW_ICON_PADDING_RIGHT;
        }

        >.signin-text-title-wrapper{
          >.signin-text-title{
            .FC4();
          }
    
          >.signin-text-sub-title{
            .FC0();
            color: extract(@CLR_1, 1);
          }
        }
      }

      >.signin-text-box{
        display: flow-root;
        padding-top: @LOGIN_PAGE_SININ_VIEW_WRAPPER_BOX_PADDING_TOP;
        .material-text-box{
          width: 100%;
          .table-wrapper{
            width: 100%;
          }
        }
      }

      >.signin-view-wrapper{
        display: @LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_DISPLAY;
        align-items: @LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_ALIGN_ITEMN;
        padding-top: @LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_PADDING_TOP;

        >.signin-view-wrapper-text{
          .FC1();
          padding-right: @LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_TEXT_PADDING_RIGHT;
        }

        >.signin-view-wrapper-icon{
          padding-right: @LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_ICON_PADDING_RIGHT;
          cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
        }

        >.signin-view-wrapper-btn{
          display: @ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY;
          right: 0;
          width: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
          height: @ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT;
          align-items: @ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM;
          background-color: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BACKGROUND_COLOR;
          border-radius: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS;
          position: @ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION;
          margin-right: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_RIGHT;
          justify-content: @ACCOUNT_AUTHENTICATION_PAGE_BTN_JUSTIFY_CONTENT;
          cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
        }

        >.signin-view-wrapper-text-forgot-password{
          .FC1();
          cursor: pointer;
          color: extract(@CLR_1, 1);
          padding-right: @LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_TEXT_FORGOT_PASSWORD_PADDING_RIGHT;
        }

        >.signin-view-wrapper-text-remember-me{
          .FC1();
          color: extract(@CLR_1, 1);
          padding-right: @LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_TEXT_FORGOT_PASSWORD_PADDING_RIGHT;
        }
      }
    }

    >.signin-footer-view{
      .FC0();
      position: @LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_POSITION;
      bottom: 0;
      width: 100%;
      align-items: @LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_ALIGN_ITEMN;
      display: @LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_DISPLAY;
      justify-content: @LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_JUSTIFY_CONTENT;
      background-color: hsv(0, 0, 97%);
      height: @LOGIN_PAGE_SININ_VIEW_FOOTER_VIEWHEIGHT;
      color: extract(@CLR_1, 1);
      cursor: @LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_CURSOR;
    }
  }
}

.parrots-page-register {
  >.register-view{
    width: @REGISTER_PAGE_REGISTER_VIEW_WIDTH;
    height: @REGISTER_PAGE_REGISTER_VIEW_HEIGHT;
    background-color: extract(@CLR_1, 9);
    position: @REGISTER_PAGE_REGISTER_VIEW_POSITION;
    -webkit-box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;
    -moz-box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;
    box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;

    >.col-md-6{
      height: 100%;

      >.register-wrapper{
        margin: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_MARGIN;
        padding-top: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_PADDING_TOP;
        height: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_PADDING_HEIGHT;
  
        >.wrapper-date{
          padding-left: 0;
          padding-right: 0;
        }
  
        .material-simple-dropdown {
          .FC0();
          height: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_DROPDOWN_HEIGHT;
          width: 100%;
  
          >.dropdown-container {
            height: 100%;
  
            >.menu{
              min-width: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_DROPDOWN_MENU_MIN_WIDTH;
              max-height: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_DROPDOWN_MENU_MIN_HEIGHT;
            }
          }
          
          >.material-simple-dropdown{
            .FC0();
          }
        }
  
        material-telno-text-box{
          height: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_HEIGHT;
          margin-bottom: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_MARGIN_BOTTOM;

          .material-simple-dropdown {
            border-bottom: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_BORDER_BOTTOM;
            // width: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_WIDTH;
          }
          
          >.material-telno-text-box{
            .FC0();
            width: 100%;
            
            .material-text-box{
              margin-bottom: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEXT_BOX_PADDING_BOTTOM;
              width: 100%;
              .table-wrapper{
                width: 100%;
              }
            }
          }
        }
  
        >.txplain-text{
          .FC0();
          color: extract(@CLR_1, 1);
          display: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEPLAIN_TEXT_DISPLAY;
  
          >.view-detail-data{
            padding-left: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEPLAIN_TEXT_VIEW_DETAIL_DATA_PADDING_LEFT;
            color: extract(@CLR_P, 3);
            cursor: pointer;
          }
        }
  
        >.register-view-header{
          display: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_HEADER_VIEW_DISPLAY;
          align-items: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_HEADER_VIEW_ALIGN_ITEMN;
          padding-bottom: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_HEADER_VIEW_PADDING_BOTTOM;
  
          >.register-icon-header{
            padding-right: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_HEADER_VIEW_ICON_PADDING_RIGHT;
          }
  
          >.register-text-header-wrapper{
            >.register-text-header{
              .FC4();
            }
      
            >.register-text-sub-header{
              .FC0();
              color: extract(@CLR_1, 1);
            }
          }
        }

        >.register-drop-down{
          padding-top: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_DROP_DOWN_PADDING_TOP;
        }
  
        >.register-text-box{
          .material-text-box{
            margin-bottom: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEXT_BOX_PADDING_BOTTOM;
            width: 100%;
            .table-wrapper{
              width: 100%;
            }
          }
        }
  
        >.col-xs-12{
          >.security-level{
            background-color: extract(@CLR_1, 5);
            height: @CREATE_ACCOUNT_PAGE_REGISTER_VIEW_WRAPPER_SECURITY_LEVEL_HEIGHT;
            width: 100%;
            margin-top: @CREATE_ACCOUNT_PAGE_REGISTER_VIEW_WRAPPER_SECURITY_LEVEL_MARGIN_TOP;
  
            >.security-level-progress{
              height: 100%;
              width: 0;
              transition: 'width 0.3s ease-in-out';
            }
          }
    
          >.security-level-text{
            .FC0();
            margin-top: @CREATE_ACCOUNT_PAGE_REGISTER_VIEW_WRAPPER_SECURITY_LEVEL_TEXT_MARGIN_TOP;
          }
  
          >.security-level-text-description{
            .FC0();
            margin-top: @CREATE_ACCOUNT_PAGE_REGISTER_VIEW_WRAPPER_SECURITY_LEVEL_TEXT_DESCRIPTION_MARGIN_TOP;
            color: extract(@CLR_1, 1);
          }
        } 
  
        >.footer{
          bottom: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_BOTTOM;
          position: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_POSITION;
          height: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_HEIGHT;
          display: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_DISPLAY;
          width: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_WIDTH;

          >.btn-previous-step{
            display: @ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY;
            left: 0;
            margin-top: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_TOP;
            width: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
            height: @ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT;
            align-items: @ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM;
            padding-left: @ACCOUNT_AUTHENTICATION_PAGE_BTN_PADDING_LEFT;
            border-radius: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS;
            position: @ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION;
            cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
          }

          >.text-confirm-email{
            .FC0();
            color: extract(@CLR_1, 1);
            padding-right: @LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_TEXT_CONFIRM_EMAIL_PADDING_RIGHT;
            cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
            position: absolute;
            bottom: 12pt;
          }
          
          >.btn-next-step{
            display: @ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY;
            right: 0;
            margin-top: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_TOP;
            width: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
            height: @ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT;
            align-items: @ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM;
            background-color: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BACKGROUND_COLOR;
            border-radius: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS;
            position: @ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION;
            justify-content: @ACCOUNT_AUTHENTICATION_PAGE_BTN_JUSTIFY_CONTENT;
            cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
          }

          >.btn-sikp-step{
            color: extract(@CLR_1, 1);
            display: @ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY;
            right: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
            margin-top: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_TOP;
            width: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
            height: @ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT;
            align-items: @ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM;
            border-radius: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS;
            position: @ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION;
            justify-content: @ACCOUNT_AUTHENTICATION_PAGE_BTN_JUSTIFY_CONTENT;
            cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
          }
        }
      }
    }

    >.wrapper-image-bg-preview{
      padding-left: 0;
      padding-right: 0;
      height: 100%;
      overflow: @REGISTER_PAGE_WRAPPER_BG_IMAGE_OVERFLOW;

      >.image-bg-preview{
        width: 100%;
      }

      >.shadow-after-image{
        background-color: extract(@CLR_0, 1);
        position: @REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_POSITION;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: @REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_OPACITY;
      }
      
      >.text-after-image{
        pre{
          .FC3L();
          background-color: @REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_BG_COLOR;
          border: 0;
          overflow: @REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_OVERFLOW;
          color: extract(@CLR_1, 9);
          position: @REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_POSITION;
          bottom: @REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_BOTTOM;
          width: 100%;
          text-align: @REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_ALIGN;
        }
      }
    }
  }

  >.register-page-number{
    display: @REGISTER_PAGE_NUMBER_DISPLAY;
    justify-content: @REGISTER_PAGE_NUMBER_JUSTIFY_CONTENT;
    padding-top: @REGISTER_PAGE_NUMBER_PADDING_TOP;
    
    >.rcorners-dense {
      opacity: @REGISTER_PAGE_NUMBER_RCORNERS_DENSE_OPACITY;
      border-radius: @REGISTER_PAGE_NUMBER_RCORNERS_BORDER_RAIUS;
      background-color: extract(@CLR_1, 9);
      width: @REGISTER_PAGE_NUMBER_RCORNERS_WIDTH;
      height: @REGISTER_PAGE_NUMBER_RCORNERS_HEIGHT;   
      margin-left: @REGISTER_PAGE_NUMBER_RCORNERS_MARGIN_LEFT;
      margin-right: @REGISTER_PAGE_NUMBER_RCORNERS_MARGIN_RIGHT;
    } 

    >.rcorners {
      opacity: @REGISTER_PAGE_NUMBER_RCORNERS_OPACITY;
      border-radius: @REGISTER_PAGE_NUMBER_RCORNERS_BORDER_RAIUS;
      background-color: extract(@CLR_1, 9);
      width: @REGISTER_PAGE_NUMBER_RCORNERS_WIDTH;
      height: @REGISTER_PAGE_NUMBER_RCORNERS_HEIGHT;   
      margin-left: @REGISTER_PAGE_NUMBER_RCORNERS_MARGIN_LEFT;
      margin-right: @REGISTER_PAGE_NUMBER_RCORNERS_MARGIN_RIGHT;
    } 
  }
}

.parrots-page-terms-of-service{
  width: @REGISTER_PAGE_REGISTER_VIEW_WIDTH;
  height: @REGISTER_PAGE_REGISTER_VIEW_HEIGHT;
  background-color: extract(@CLR_1, 9);
  position: @REGISTER_PAGE_REGISTER_VIEW_POSITION;
  -webkit-box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;
  -moz-box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;
  box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;

  >.parrots-page-terms-of-service-wrapper{
    margin: @TERMS_OF_SERVICE_PAGE_MARGIN;

    >.parrots-page-terms-of-service-wrapper-header-title{
      .FC4();
      padding-top: @TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_TITLE_PADDING_TOP;
    }

    >.parrots-page-terms-of-service-wrapper-header-description{
      .FC0();
      color: extract(@CLR_1, 1);
    }

    >.parrots-page-terms-of-service-wrapper-body{
      width: 100%;
      height: @TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_BODY_HEIGHT;
      overflow: @TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_BODY_ORVERFLOW;
      margin-top: @TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_BODY_MARGIN_TOP;

      >.parrots-page-terms-of-service-wrapper-body-detail{
        .FC0();
        height: 2000pt;//fix for test(auto)  
        padding-right: @TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_BODY_DETAIL_PADDING_RIGHT;
      }
    }

    >.parrots-page-terms-of-service-wrapper-footer{
      bottom: 10%;
      position: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_POSITION;
      height: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_HEIGHT;
      display: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_DISPLAY;
      width: 84%;
  
      >.btn-previous-step{
        display: @ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY;
        left: 0;
        margin-top: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_TOP;
        width: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
        height: @ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT;
        align-items: @ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM;
        padding-left: @ACCOUNT_AUTHENTICATION_PAGE_BTN_PADDING_LEFT;
        border-radius: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS;
        position: @ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION;
        cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
      }
      
      >.btn-next-step{
        color: extract(@CLR_1, 9);
        display: @ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY;
        right: 0;
        margin-top: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_TOP;
        width: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
        height: @ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT;
        align-items: @ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM;
        background-color: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BACKGROUND_COLOR;
        border-radius: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS;
        position: @ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION;
        justify-content: @ACCOUNT_AUTHENTICATION_PAGE_BTN_JUSTIFY_CONTENT;
        cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
      }
  
      >.btn-sikp-step{
        color: extract(@CLR_1, 1);
        display: @ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY;
        right: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
        margin-top: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_TOP;
        width: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
        height: @ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT;
        align-items: @ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM;
        border-radius: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS;
        position: @ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION;
        justify-content: @ACCOUNT_AUTHENTICATION_PAGE_BTN_JUSTIFY_CONTENT;
        cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
      }
    }
  }
}

.parrots-page-validation-email{
  >.validation-email-view{
    width: @REGISTER_PAGE_REGISTER_VIEW_WIDTH;
    height: @REGISTER_PAGE_REGISTER_VIEW_HEIGHT;
    background-color: extract(@CLR_1, 9);
    position: @REGISTER_PAGE_REGISTER_VIEW_POSITION;
    -webkit-box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;
    -moz-box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;
    box-shadow: @REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW;
    
    >.validation-email-view-image{
      height: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_HEIGHT;
      display: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_DISPLAY;
      width: 100%;
      justify-content: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_JUSTIFY_CONTENT;
      justify-items: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_JUSTIFY_ITEM;
      padding-top: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_PADDINT_TOP; 
      padding-bottom: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_PADDINT_BOTTOM;

      >.icon-wrapper{
        display: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_WRAPPER_ICON_DISPLAY;
        align-content: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_WRAPPER_ICON_ALIGN_CONTENT;
        align-items: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_WRAPPER_ICON_ALIGN_ITEM;
      }
    }

    >.validation-email-view-title{
      .FC2();
      text-align: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_TEXT_ALIGN;
      padding-bottom: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_TITLE_PADDINT_BOTTOM;
    }

    >.validation-email-view-description{
      .FC2();
      text-align: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_TEXT_ALIGN;
      padding-bottom: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_DESCRIPTION_PADDINT_BOTTOM;
    }

    >.validation-email-view-box-email{
      .FC1();
      padding-bottom: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_DESCRIPTION_PADDINT_BOTTOM;
      text-align: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_TEXT_ALIGN;
      display: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_DISPLAY;
      justify-content: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_JUSTIFY_ITEM;

      >.validation-email-view-box-email-text{
        .FC1();
        color: extract(@CLR_1, 1);
        padding-right: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_PADDING_LEFT;
        padding-left: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_PADDING_RIGHT;

        material-text-box .material-text-box {
          width: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_BOX_WIDTH;
          margin-top: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_BOX_MARGIN_TOP;
        }
      }

      >.validation-email-view-box-email-re-send{
        .FC1();
        cursor: pointer;
        color: extract(@CLR_P, 4);
      }
    }

    >.validation-email-view-text-description{
      .FC1();
      text-align: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_TEXT_ALIGN;
      color: extract(@CLR_1, 1);
      padding-bottom: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_PADDING_BOTTOM;
    }

    >.parrots-page-validation-email-footer{
      position: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_EMAIL_FOOTER_POSITION;
      right: 0;
      bottom: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_EMAIL_FOOTER_BOTTOM;

      >.btn-close{
        color: extract(@CLR_1, 9);
        margin-right: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_RIFGT;
        display: @ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY;
        right: 0;
        margin-top: @ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_TOP;
        width: @ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH;
        height: @ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT;
        align-items: @ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM;
        background-color: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BACKGROUND_COLOR;
        border-radius: @ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS;
        position: @ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION;
        justify-content: @ACCOUNT_AUTHENTICATION_PAGE_BTN_JUSTIFY_CONTENT;
        cursor: @ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR;
      }
    }
  }
}

.parrots-page-activate{
  width: 100%;
  height: 100%;
}

.phx-notification-container{
  z-index: -1;
}

phx-toast-notification{
  z-index: 500;
}

@media (max-width: @REGISTER_PAGE_REGISTER_VIEW_WIDTH) {
  .parrots-page-register {
    >.register-view{
      width: @REGISTER_PAGE_REGISTER_VIEW_WIDTH / 2;
    }
  }
}