@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");

body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: #000000;
  background-color: #ffffff;
}

/* Utilities */

.font-10 {
  font-size: 10px;
}
.font-11 {
  font-size: 11px;
}
.font-12 {
  font-size: 12px;
}
.font-13 {
  font-size: 13px;
}
.font-14 {
  font-size: 14px;
}
.font-15 {
  font-size: 15px;
}
.font-16 {
  font-size: 16px;
}
.font-17 {
  font-size: 17px;
}
.font-18 {
  font-size: 18px;
}
.font-19 {
  font-size: 18px;
}
.font-20 {
  font-size: 20px;
}
.font-25 {
  font-size: 20px;
}
.font-36 {
  font-size: 36px;
}
.font-weight-300 {
  font-weight: 300;
}
.font-weight-400 {
  font-weight: 400;
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-700 {
  font-weight: 700;
}
.pb-5-25 {
  padding-bottom: 3.25rem;
}
.pt-2-5 {
  padding-top: 2.5rem !important;
}
.pt-2-5 {
  padding-top: 2.5rem !important;
}
.pt-2-00 {
  padding-top: 2rem !important;
}
.pb-2-00 {
  padding-bottom: 2rem !important;
}
.mb-2-00 {
  margin-bottom: 2rem !important;
}
.pb-2-5 {
  padding-bottom: 2.5rem !important;
}
.mb-0-4 {
  margin-bottom: 0.4rem !important;
}
.pb-3-5 {
  padding-bottom: 3.5rem !important;
}
.pb-2-25 {
  padding-bottom: 2.25rem !important;
}
.pt-2-25 {
  padding-top: 2.25rem !important;
}
.pb15 {
  padding-bottom: 15px !important;
}
.pb20 {
  padding-bottom: 20px !important;
}
.pt15 {
  padding-top: 15px !important;
}
.mb84 {
  margin-bottom: 30px !important;
}
.mb37 {
  margin-bottom: 37px !important;
}
.mt37 {
  margin-top: 37px !important;
}
.pb80 {
  padding-bottom: 80px !important;
}
.pb84 {
  padding-bottom: 84px !important;
}
.pb38 {
  padding-bottom: 38px !important;
}
.w-20 {
  width: 20%;
}
.w-10 {
  width: 10%;
}
.w-30 {
  width: 30%;
}
.w-33-33 {
  width: 33.33%;
}
.w-16-66 {
  width: 16.66%;
}
.mw-700px {
  max-width: 700px !important;
}

.mw-90pr {
  max-width: 90% !important;
}

img {
  width: 100%;
  max-width: 100%;
}
dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
  padding: 0;
}
a:hover {
  text-decoration: none;
  transition: 0.2s;
  opacity: 1;
}
a.color-green:hover {
  color: #7be6ac;
}
.container-fluid {
  padding: 0px;
}
.color-white {
  color: #fff;
}
.color-black {
  color: #000;
}
.color-green {
  color: #7be6ac;
}
.bg-white {
  background-color: #fff;
}
.bg-black {
  background-color: #000;
}
.bg-green {
  background-color: #7be6ac;
}
.btn {
  outline: none !important;
}
.btn:hover,
.btn:focus {
  outline: none !important;
  color: #000;
}
.cust-btn {
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  background: #7be6ac;
  border: 1.5px solid #7be6ac;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.cust-btn-small {
  width: 60%;
  height: 36px;
  font-size: 14px;
  line-height: 16.41px;
  font-weight: 700;
}
.cust-btn-large {
  width: 335px;
  height: 57px;
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}
.cust-btn-small:hover,
.cust-btn-small:focus,
.cust-btn-large:hover,
.cust-btn-large:focus {
  box-shadow: inset 4px 4px 10px #55a57a;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

/* Splash Section*/

.splash-wrapper {
  position: relative;
  height: 100vh;
}

.splash-wrapper .logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.splash-wrapper .logo-wrapper .login-logo {
  width: 270px;
}

/* Welcome Section */

.welcome-wrapper {
  position: relative;
  height: 100vh;
}
.welcome-text-wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.welcome-wrapper .logo-wrapper {
  position: relative;
  width: 100%;
  padding: 30px 24px 0px;
}
.welcome-wrapper p.first-time {
  bottom: auto;
  position: relative;
  padding-top: 15px;
}
.welcome-text {
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.05em;
  color: #000000;
  text-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  margin-bottom: 0;
  padding: 140px 65px 75px;
}
.welcome-wrapper .welcome-text-wrapper .logo-wrapper {
  padding: 0px 0px 75px;
}

.welcome-wrapper .welcome-text-wrapper .logo-wrapper img.login-logo {
  width: 100%;
}

/* login/ Sign up Section */

.login-wrapper {
  background-color: #7be6ac;
  position: relative;
}
.login-wrapper .logo-wrapper {
  position: relative;
  width: 100%;
  padding: 33px 42px 0px;
}
.logo-wrapper .login-logo {
  width: 120px;
}
.login-text {
  font-weight: 900;
  font-size: 30px;
  line-height: 42px;
  color: #ffffff;
  text-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  margin: 0;
  padding: 42px 34px;
}
.form-fields {
  padding: 0px 57px 70px;
}
.login-wrapper .cust-btn {
  border-color: #fff;
  text-transform: uppercase;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
}
.cust-form-control-login {
  border-radius: 0;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none;
  border-bottom: 1px solid #000 !important;
  height: 36px;
  font-size: 12px;
  line-height: 14px;
  color: #000 !important;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding-left: 0;
}
.cust-group-text {
  border-radius: 0;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none;
  border-bottom: 1px solid #000 !important;
  height: 36px;
  font-size: 12px;
  line-height: 14px;
  color: #000 !important;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 0;
  padding-left: 5px;
  padding-right: 10px;
}
.cust-form-control-login::placeholder,
.cust-form-control-login:-ms-input-placeholder,
.cust-form-control-login::-ms-input-placeholder {
  color: #000 !important;
  opacity: 1 !important;
}

p.first-time {
  text-align: center;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.05em;
  color: #000000;
  font-weight: 700;
  margin-bottom: 0;
  padding-top: 60px;
}

p.first-time a {
  color: #2f70d1;
}
.forgot-wrap a {
  font-size: 12px;
  font-weight: 700;
  color: #000;
}
.checkbox-wrap {
  display: block;
  position: relative;
  padding-left: 22px;
}
.checkbox-wrap label {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.checkbox-wrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid #000;
  background-color: #fff;
}
.checkbox-wrap input:checked ~ .checkmark {
  background-color: #000;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbox-wrap input:checked ~ .checkmark:after {
  display: block;
}
.checkbox-wrap .checkmark:after {
  left: 4px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Signup - wrapper */

.signup-wrapper {
  background-color: #7be6ac;
  position: relative;
}
.signup-wrapper .logo-wrapper {
  position: relative;
  width: 100%;
  padding: 33px 42px 0px;
}
.signup-wrapper .login-logo {
  width: 120px;
}
.signup-text {
  font-weight: 900;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  margin: 0;
  padding: 42px 34px 12px;
}
.user-image-wrapper {
  display: table;
  width: 100%;
  padding: 0px 10px;
}
.user-image {
  border: 3px solid #ffffff;
  box-sizing: border-box;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  display: table-cell;
  width: 84px;
  height: 84px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.user-image-wrapper .user-image a {
  display: block;
  width: 100%;
  height: 100%;
}
.user-image-wrapper .user-image a img {
  width: 50px;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}
.upload-text {
  display: table-cell;
  vertical-align: middle;
  padding-left: 18px;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0.05em;
  color: #000000;
  font-weight: 700;
}
.signup-wrapper .cust-btn {
  border-color: #fff;
  text-transform: uppercase;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
}
p.first-time.signup-time {
  padding-top: 37px;
}
.signup-wrapper .form-fields {
  padding: 0px 60px 104px;
}
/* Home Wrapper */

.home-wrapper {
  padding-top: 80px;
}

.home-wrapper .logo-wrapper .login-logo {
  width: 233px;
}

.home-text-wrapper {
  padding-top: 66px;
  text-align: center;
}
.p-text {
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
}

/* Email Section */

.email-wrapper {
  position: relative;
  padding: 20px 14px 0px;
}
.successToster {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 0;
  transition: 0.2s;
}
.successToster span {
  background: #7be6ac;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  display: block;
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  color: #000000;
  padding: 22px;
}
.successEmailToster,
.successFileToster {
  display: none;
}
.email-wrapper.emai-sent-wrapper {
  padding-top: 67px;
}
.email-wrapper .logo-wrapper {
  border: 14px solid #7be6ac;
  box-sizing: border-box;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
.email-wrapper .logo-wrapper:before {
  content: "";
  position: absolute;
  left: 35%;
  top: 25%;
  transform: translate(-50%, 50%);
  width: 65px;
  height: 70px;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../images/tic-1.svg');
}

.email-wrapper .logo-wrapper:after {
  content: "";
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 65px;
  height: 120px;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../images/tic-2.svg');
}

.email-wrapper .logo-wrapper .login-logo {
  width: 77px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
}
.email-text-wrapper {
  padding-top: 12px;
  text-align: center;
}
.p-text-large {
  font-weight: 500;
  font-size: 25px;
  line-height: 29px;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 15px;
}

.email-wrapper .modal-title {
  font-size: 40px;
  line-height: 47px;
  padding-bottom: 5px;
}
.email-wrapper .cust-btn-small {
  width: 100%;
}
.email-field-wrapper {
  background: #ffffff;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  width: 60%;
  margin: 0 auto;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 26px;
}
#emailFieldOutput.email-field-wrapper {
  width: 100%;
}
.email-field-wrapper .inputField {
  padding: 35px 5px 21px;
}

.email-btn {
  position: relative;
}

.email-btn .cust-btn {
  z-index: 2;
  position: relative;
}

.email-field-wrapper .inputField .cust-form-control-email {
  border: 1.5px solid #c4c4c4;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: none;
  outline: none;
  color: #000;
}

.email-field-wrapper .btnField {
  padding-bottom: 14px;
}

.email-field-wrapper .btnField .cust-btn {
  width: 96px;
  margin-right: -2px;
  border-radius: 8px 0px 0px 8px;
}
.cust-btn img {
  width: 9px;
  vertical-align: baseline;
  margin-left: 25px;
}
/* Download PDF Section */
.downlaod-pdf-wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 12px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/export-pdf.svg");
  background-color: #f2f1f6;
  margin: 0 auto;
}

section#download-pdf-section {
  background-color: #f2f1f6;
  overflow: hidden;
  padding: 6px;
}

.downlaod-pdf-btn {
  position: absolute;
  right: -10px;
  bottom: 40px;
}

.downlaod-pdf-btn .cust-btn-small {
  width: 136px;
}

/* garment Wrapper */

.garment-wrapper {
  position: relative;
}
.logo-wrapper a {
  display: block;
}

.garment-wrapper .logo-wrapper {
  position: relative;
  padding: 14px 18px 0px;
}
.garment-wrapper .logo-wrapper .login-logo {
  width: 233px;
}
.garment-text-wrapper {
  padding-top: 69px;
  text-align: center;
}
.garment-wrapper .p-text {
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  padding-bottom: 35px;
  margin-bottom: 0;
}
.logo-wrapper .setting-logo {
  width: 35px;
}
p.first-time.reference-card {
  padding-top: 5px;
}

/* Garment Detail Wrapper */

.garment-detail-wrapper {
  position: relative;
}
.logo-wrapper a {
  display: block;
}

.garment-detail-wrapper .logo-wrapper {
  position: relative;
  padding: 14px 18px 0px;
}
.garment-detail-wrapper .logo-wrapper .login-logo {
  width: 233px;
}
.garment-detail-wrapper .cust-btn-small {
  width: 118px;
}
.garment-detail-text-wrapper {
  padding-top: 15px;
  text-align: center;
}
.garment-detail-wrapper .p-text {
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  padding-bottom: 15px;
  margin-bottom: 0;
}
.logo-wrapper .setting-logo {
  width: 35px;
}
.change-garments {
  display: flex;
  padding: 0px 20px;
  align-items: center;
}

.change-garments .right-content {
  width: 200px;
  position: relative;
  height: 200px;
  margin: 0 auto;
}
.change-garments .right-content img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.garment-detail-text {
  position: relative;
  height: 185px;
}

.garment-detail-text ol {
  list-style-type: decimal;
  text-align: left;
  top: 20px;
  left: 68px;
  width: 260px;
  margin: 0 auto;
}

.garment-detail-text ol li {
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  padding-bottom: 5px;
  padding-left: 15px;
}

.cameraWrapper {
  padding: 4px !important;
}

/* Capture Section */
.help-wrapper img,
.setting-wrapper img,
.color-wrapper img,
.refresh-wrapper img {
  width: 35px;
}
.focus-wrapper img {
  width: 45px;
}
.camera-wrapper img {
  width: 60px;
}
.capture-wrapper {
  position: relative;
  /*height:calc(100vh - 150px);*/
}

.capture-wrapper .top-wrapper {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 45px;
  text-align: center;
}
.capture-wrapper .bottom-wrapper {
  /* position: absolute;
  bottom: 30px;
  left: 0;
  right: 0; */
  text-align: center;
  margin-top: 5px;
}
.camOverlayWrapper{
  width: 50%;
  position: absolute;
  text-align: center;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.overlayLabel{
  margin: 0;
}
label#overlayLabel {
  position: absolute;
  height: calc(100% - 95px);
  width: 65%;
  margin: 0px auto;
  left: 0;
  right: 0;
}
.camera-action {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 60px;
}
.capture-wrapper .camera-action .refresh-wrapper {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.capture-wrapper .camera-action .check-wrapper {
  /* position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%); */
}
.capture-wrapper .camera-action .check-wrapper  img {
  width: 75px;
}
.capture-wrapper .camera-action .camera-wrapper {
  position: absolute;
  left: 112px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
}

.capture-wrapper .camera-action .camera-wrapper a {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  top: 0;
}
.setting-open.modal-open .capture-wrapper .setting-wrapper {
  position: relative;
  z-index: 9999;
}
.capture-wrapper .setting-wrapper a img:last-child {
  display: none;
}
.setting-open.modal-open .capture-wrapper .setting-wrapper a img:last-child {
  display: block;
  margin: 0 auto;
}
.setting-open.modal-open .capture-wrapper .setting-wrapper a img:first-child {
  display: none;
}
.angel-wrapper .switch {
  position: relative;
  display: inline-block;
  width: 193px;
  height: 42px;
  margin-bottom: 0;
}
.angel-wrapper .switch input {
  display: none;
}
.angel-wrapper .slider {
  position: relative;
  cursor: pointer;
  background-color: #c4c4c4;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  display: table;
  border-radius: 5px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.31));
}
.angel-wrapper .on,
.angel-wrapper .off {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  border-radius: 5px;
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  padding: 5px;
}
.angel-wrapper input + .slider .on {
  background-color: #7be6ac;
  color: #000;
  border-radius: 5px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.angel-wrapper input + .slider .off {
  background-color: #c4c4c4;
  color: #fff;
  border-radius: 0px 5px 5px 0px;
}
.angel-wrapper input:checked + .slider .on {
  background-color: #c4c4c4;
  color: #fff;
  border-radius: 5px 0px 0px 5px;
}
.angel-wrapper input:checked + .slider .off {
  background-color: #7be6ac;
  color: #000;
  border-radius: 5px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.modal-color-picker {
  background-color: transparent;
  border: none;
  width: 230px;
  margin: 0 auto;
}

.modal-color-picker .modal-header {
  border: 1px solid #ffffff;
  border-radius: 12px;
  margin-bottom: 20px;
}

.modal-color-picker .modal-footer .cust-btn {
  width: 143px;
  height: 35px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
}
.color-picker-open.modal-open .capture-wrapper .color-wrapper {
  position: relative;
  z-index: 9999;
}

.help-open.modal-open .capture-wrapper .top-wrapper,
.capture-wrapper .bottom-wrapper {
  z-index: 1990 !important;
}
/* Capture Confirm Section */

.capture-confirm-wrapper {
  position: relative;
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../images/pants.png);
}

.capture-confirm-wrapper .bottom-wrapper {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #7be6ac;
  height: 120px;
}

.capture-confirm-wrapper .bottom-wrapper .wait-action {
  position: relative;
  top: 24px;
  width: 300px;
  margin: 0 auto;
}

.capture-confirm-wrapper .bottom-wrapper .wait-action .check-wrapper {
  position: absolute;
  left: 40px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s;
}

.check-wrapper img {
  width: 35px;
}

.wait-text span {
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
}

/* Output Section */

.output-wrapper {
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 0px;
  padding-left: 15px;
}

.output-wrapper .capture-image {
  width: 100%;
  height: 100%;
  /* height: 462px; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* background-image: url(../images/pants.png); */
  position: relative;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.output-wrapper .capture-image .action-wrapper {
  position: absolute;
  right: 16px;
  bottom: 16px;
  text-align: center;
}

.tab-wrapper .tab-top {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-right: 0px;
  padding-left: 0px;
  display: block;
}
.tab-wrapper .nav-tabs {
  justify-content: center;
  border-color: #d7d7d7;
  margin-bottom: 13px;
  background-color: #c4c4c4;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  padding: 0;
  width: 193px;
  margin: 0 auto;
  border-bottom: none;
  border-radius: 5px;
}
.tab-wrapper .nav-tabs .nav-item {
  width: 50%;
  text-align: center;
  margin-bottom: 0;
}
.tab-wrapper .nav-tabs .nav-item:first-child {
  border-radius: 5px 0px 0px 5px;
}
.tab-wrapper .nav-tabs .nav-item:last-child {
  border-radius: 0px 5px 5px 0px;
}
.tab-wrapper .nav-tabs .nav-link {
  border: none !important;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
  padding: 10px;
}
.tab-wrapper .nav-tabs .nav-item.show .nav-link,
.tab-wrapper .nav-tabs .nav-link.active {
  color: #000;
  background-color: #fff;
  background: #7be6ac;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  border-radius: 5px;
}

.bottom-wrapper .action-btn .cust-btn-small {
  width: 100%;
}
.list-wrapper  .list-header ul li span {
  font-style: italic;
  font-weight: bold;
  font-size: 17px;
  line-height: 20px;
}

.list-wrapper  .list-header ul li {
  padding: 13px 24px;
  border-top: 1px solid #d7d7d7;
}
.list-wrapper  .list-body ul li span {
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
}

.list-wrapper .list-body ul li:nth-child(2n + 1) {
  background-color: #f2f2f2;
}
.list-wrapper .list-body ul li {
  background-color: #fff;
  border-top: 1px solid #d7d7d7;
}
.list-wrapper .list-body ul li .d-table-cell {
  padding: 15px 30px;
}
.colorModeOn .color-7BE6AC {
  color: #7be6ac;
}
.colorModeOn .color-000000 {
  color: #000000;
}
.colorModeOn .color-E67BB5 {
  color: #e67bb5;
}
.colorModeOn .color-3E5310 {
  color: #3e5310;
}
.colorModeOn .color-D12F2F {
  color: #d12f2f;
}
.colorModeOn .color-2F70D1 {
  color: #2f70d1;
}
.colorModeOn .color-AE26B0 {
  color: #ae26b0;
}
.colorModeOn .color-F0AA21 {
  color: #f0aa21;
}
.color-wrapper a#colorMode img,
.default-color-wrapper a#defaultMode img {
  width: 26px;
}
.color-wrapper a#colorMode,
.default-color-wrapper a#defaultMode {
  display: block;
  border: 3px solid #d7d7d7;
  border-radius: 50%;
  transition: 0.2s;
}
.color-wrapper.active a#colorMode,
.default-color-wrapper.active a#defaultMode {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-color: #7be6ac;
}

/* Modals */

/*.modal-dialog {
  margin: 38px;
}
*/
.modal-wrapper {
  box-shadow: none;
}
.modal-wrapper .modal-content {
  padding: 30px;
  border: none;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  box-shadow: 2px 2px 4px rgb(0 0 0 / 25%);
  border-radius: 12px;
}

.modal-wrapper .modal-header,
.modal-wrapper .modal-footer {
  border: none;
  display: block;
  text-align: center;
}
.modal-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  color: #020202;
  text-align: center;
  margin-bottom: 18px;
}
.modal-text {
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  margin-bottom: 0;
  color: #000000;
}
.modal-wrapper .cust-btn {
  width: 193px;
}
.angel-wrapper {
  margin: 0;
  padding: 0px 0px 34px;
}
a.close-btn {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
  background: #7be6ac;
  border: 2px solid #7be6ac;
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 20px;
  position: absolute;
  top: -10px;
  right: -10px;
  opacity: 1 !important;
}

a.close-btn:before {
  -webkit-transform: rotate(44.42deg);
  -ms-transform: rotate(45deg);
  transform: rotate(44.42deg);
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 16px;
  height: 22px;
  border: solid #000;
  border-width: 0 2px 0px 0;
}

a.close-btn::after {
  content: "";
  position: absolute;
  transform: rotate(-45deg);
  left: 3px;
  top: 10px;
  width: 16px;
  height: 22px;
  border: solid #000;
  border-width: 0 2px 0px 0;
}

.modal.fade .modal-dialog.setting-modal-wrapper {
  -webkit-transform: translate(0, 28%);
  transform: translate(0, 28%) !important;
}

.modal.fade .modal-dialog.colorPicker-modal-wrapper {
  -webkit-transform: translate(0, 60%);
  transform: translate(0, 60%) !important;
}
.openHelp-modal-wrapper {
  height: calc(100vh - 270px );
  margin: 0;
  transform: none !important;
}
.openHelp-modal-wrapper .modal-content {
  background-color: transparent;
  box-shadow: none;
  filter: none;
  height: 100%;
  border-radius: 0;
}

.helpWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.helpWrapper .help-content {
  background: #000000;
  border: 1px solid #7be6ac;
  box-shadow: 0px 0px 4px 3px rgba(255, 244, 147, 0.25);
  border-radius: 3px;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.02em;
  color: #7be6ac;
  padding: 3px 4px;
  position: relative;
  display: block;
  width: 100%;
}
.helpWrapper .top-help {
  position: absolute;
  left: 82px;
  top: 30px;
}

.helpWrapper .top-help .help-content:before {
  content: "";
  position: absolute;
  left: -48px;
  top: 50%;
  width: 48px;
  height: 2px;
  background-color: #7be6ac;
}

.helpWrapper .top-help .focus-info .help-content:before {
  content: "";
  position: absolute;
  left: -41px;
  top: 50%;
  width: 41px;
  height: 2px;
  background-color: #7be6ac;
}

.helpWrapper .help-info {
  width: 36px;
  position: absolute;
  top: -1.3rem;
}

.helpWrapper .setting-info {
  position: absolute;
  top: 3rem;
  width: 74px;
  text-align: center;
}

.helpWrapper .focus-info {
  position: absolute;
  top: 6.3rem;
  width: 161px;
}

.helpWrapper .color-picker-info {
  position: absolute;
  top: 204px;
  width: 122px;
}
.helpWrapper .mid-help {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.helpWrapper .mid-help span {
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0px 1px 5px rgba(255, 244, 147, 0.5);
}
.helpWrapper .bottom-help {
  position: absolute;
  bottom: 120px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 280px;
}

.bottom-help .undo-info {
  width: 98px;
  position: absolute;
  left: 0;
  display: none;
}
.capture-done .bottom-help .undo-info,
.capture-done .bottom-help .capture-done-info {
  display: block;
}
.capture-done .bottom-help .capture-btn-info{
  display: none;
}
/* .capture-done .capture-wrapper .top-wrapper {
  display: none;
} */
.capture-done-info {
  width: 90px;
  position: absolute;
  left: 124px;
  top: 13px;
  display: none;
}
.bottom-help .capture-done-info .help-content:before {
  left: 10px;
  right: auto;
}
.capture-btn-info {
  width: 90px;
  position: absolute;
  left: 125px;
  top: 0;
}

.bottom-help .help-content:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -31px;
  margin: 0 auto;
  width: 1px;
  height: 30px;
  background-color: #7be6ac;
}

.bottom-help .capture-btn-info .help-content:before {
  left: 10px;
  right: auto;
}

.help-open.modal-open .setting-wrapper,
.help-open.modal-open .focus-wrapper,
.help-open.modal-open .color-wrapper,
.help-open.modal-open .bottom-wrapper {
  pointer-events: none;
}

.modal.fade .modal-dialog.export-modal-wrapper {
  -webkit-transform: translate(0, 195%);
  transform: translate(0, 195%) !important;
  margin: 0px 14px;
}

.modal-content.modal-export {
  border: none;
  filter: none;
  box-shadow: none;
  border-radius: 5px;
  background-color: transparent;
}

.modal-content.modal-export .modal-header {
  border: none;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  background-color: #fff;
  margin-bottom: 15px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  border: 1px solid #fff;
}

.cust-btn-export {
  width: 100%;
  border-bottom: 1px solid #d7d7d7;
  border-radius: 0;
  padding: 15px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #000;
  background-color: #fff;
}

.modal-content.modal-export .modal-header .cust-btn-export:last-child {
  border-bottom: none;
  border-radius: 0px 0px 5px 5px;
}

.modal-content.modal-export .modal-footer .cust-btn-export {
  border: 1px solid #fff;
  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  width: 100%;
  margin: 0;
}

.modal-content.modal-export .modal-header .cust-btn-export:first-child {
  border-radius: 5px 5px 0px 0px;
}
.email-as-wrapper {
  position: relative;
}
.email-as-wrapper .email-title span {
  background: #7be6ac;
  border: 1px solid #7be6ac;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0px;
  display: block;
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #000000;
  padding: 15px;
}

.email-as-wrapper .email-field-wrapper {
  position: absolute;
  z-index: 2;
  width: calc(100% + 4px) !important;
  left: -2px;
}
#emailAsPDFWrapper {
  top: -50px;
}

#emailAsJPEGWrapper {
  top: -97px;
}

#emailAsCSVWrapper {
  top: -144px;
}
.email-as-wrapper .email-field-wrapper .btnField .cust-btn {
  margin-right: -1px;
  width: 144px;
}
.email-as-wrapper .email-field-wrapper .btnField .cust-btn img {
  margin-left: 40px;
}

/* Exported File */

.export-file-wrapper {
  display: table;
  width: 930px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.export-file-wrapper .left-wrapper, .export-file-wrapper .right-wrapper {
  display: table-cell;
  vertical-align: top;
  width: 50%;
}

.export-file-wrapper .left-wrapper .capture-image {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('../images/pants.png');
  width: 100%;
  height: 450px;
}

#export-file-section {
  position: relative;
  width: 100%;
  height: 100vh;
}

.export-file-wrapper .left-wrapper {
  padding-right: 33px;
}

.export-file-wrapper .right-wrapper {
  padding-left: 33px;
}
/* Functional CSS */

#emailFieldCard {
  display: none;
}
#emailFieldCard.openEmailWrapper {
  display: block;
}
#emailAsPDFWrapper {
  display: none;
}
#emailAsPDFWrapper.openEmailWrapper {
  display: block;
}
#emailAsJPEGWrapper {
  display: none;
}
#emailAsJPEGWrapper.openEmailWrapper {
  display: block;
}
#emailAsCSVWrapper {
  display: none;
}
#emailAsCSVWrapper.openEmailWrapper {
  display: block;
}
.sectionWrapper {
  display: none;
}
.topsContent,
.shortsContent,
.skirtsContent,
.dressContent,
.pantsContent
 {
  opacity: 0;
  transition: 0.2s;
}
.topsContent.show,
.shortsContent.show,
.pantsContent.show,
.skirtsContent.show,
.dressContent.show {
  opacity: 1;
  transition: 0.2s;
}
#undoBtn{
  display: none;
}
#captureDone {
  display: none;
}
#sent-section-output {
  padding-bottom: 30px;
}

#sent-section,
#output-section,
#garment-detail-section,
#garment-section,
#home-section,
#login-section,
#signup-section {
  padding-bottom: 50px;
}
.onDesktop {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #7be6ac;
}
.desktop-wrapper .logo-wrapper .login-logo {
  width: 400px;
}
.desktop-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
.desktop-text-wrapper {
  padding-top: 30px;
}
.desktop-text-wrapper .desktop-text {
  font-size: 50px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #363636;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.desktop-text-wrapper .p-text-large {
  padding-bottom: 0;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.onMobile {
  display: none;
}
.noDisplay {
  display: none;
}
.onLandscape{
  display: none;
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #7be6ac;
}
.onPortrait{
  display: block;
}
 @media screen and (orientation: portrait) {
  .onLanscape{
    display: none;
  }
  .onPortrait{
    display: block;
  }
}

@media screen and (orientation: landscape) {
  .onLanscape{
    display: block;
  }
  .onPortrait{
    display: none;
  }
} 
@media only screen and (min-device-width: 320px) and (max-device-width: 1280px) {
  .onMobile {
    display: inherit;
    overflow-y: auto;
    height: 100%;
  }
  .onDesktop {
    display: none;
  }
}

.logout_btn_sm
{
  width: 25% !important;
  color: black;
}
.two_btns
{
  float: left;

}
.two_btns:first-child
{
  margin-left: 20%;
}
.two_btns:last-child
{
  margin-left: 10%;
}
.parallel_btns
{
  margin: 0 auto;
  width: 100% !important;
  float: left;
}

.barcode-text-wrapper {
  padding-top: 25px;
  text-align: center;
}
.barcode-text
{
  margin: 5%;
}

.sec-cam-btn
{
  display: none;
}
/*#barcode-reader__dashboard_section_swaplink
{
  display: none !important;
}*/
.reference-wrapper .switch {
  position: relative;
  display: inline-block;
  width: 220px;
  height: 42px;
  margin-bottom: 0;
}
.reference-wrapper .switch input {
  display: none;
}
.reference-wrapper .slider {
  position: relative;
  cursor: pointer;
  background-color: #c4c4c4;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  display: table;
  border-radius: 5px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.31));
}
.reference-wrapper .on,
.reference-wrapper .off {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  border-radius: 5px;
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  padding: 5px;
}
.reference-wrapper input + .slider .on {
  background-color: #7be6ac;
  color: #000;
  border-radius: 5px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.reference-wrapper input + .slider .off {
  background-color: #c4c4c4;
  color: #fff;
  border-radius: 0px 5px 5px 0px;
}
.reference-wrapper input:checked + .slider .on {
  background-color: #c4c4c4;
  color: #fff;
  border-radius: 5px 0px 0px 5px;
}
.reference-wrapper input:checked + .slider .off {
  background-color: #7be6ac;
  color: #000;
  border-radius: 5px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.reference-wrapper {
  margin: 0;
  padding: 0px 0px 15px;
}
.ref_wrap_setting
{
  padding-top: 15px;
}
.card_icon_home
{
  width: 40%;
}
.black_circle_opt
{
  display: none;
}
.garment_dropdown ul
{
  background-color: #7be6ac;
}
.garment_dropdown ul li
{
  padding: 7% 0%;
  border-bottom: 1px solid #a49292;
}
.garment_dropdown ul li:hover a {
  color: #595757;
}
.garment_dropdown ul li a
{
  color: black;
  padding-left: 10%;
}
.garment_dropdown ul
{
  padding: 0;
}
#GarmentDropdownButton
{
    text-align: center;
    width: 30%;
}