@charset "UTF-8";

/* --- Page scroll default --------------------------------------- */
html{
  overflow-y:scroll; }

/* --- Set stepContents on top --------------------------------------- */
#stepContents .container-wrap .container{
  justify-content: flex-start; }

/* --- Step1 --------------------------------------- */
.octm-apply-step1-section .trademark-type-wrapper {
  display: flex;
  margin: 0.5rem 0;
  flex-direction: row;
  align-items: center;
   }
  .octm-apply-step1-section .trademark-type-wrapper .trademark-type {
    display: flex;
    margin-right: 3.5rem; 
    align-items: center; }
    .octm-apply-step1-section .trademark-type-wrapper .trademark-type label {
      cursor: pointer; }
    .octm-apply-step1-section .trademark-type-wrapper .trademark-type .label_trademark_type {
      margin: 0 0.5rem; }
      
  .octm-apply-step1-section .trademark-input-wrapper {
    display: none;
    flex-direction: column;
    width: 50%;
    margin: 1.5rem 0; }
    @media screen and (max-width: 991.98px) {
      .octm-apply-step1-section .trademark-input-wrapper {
        width: 100%; }}
  .octm-apply-step1-section .trademark-input-wrapper.on {
    display: flex; }
    
  .octm-apply-step1-section .trademark-input-wrapper.words #tm-text-area {
    height: 3rem; }

  .octm-apply-step1-section .trademark-input-wrapper.logo #file-drop-area {
    display: flex;
    width: 100%;
    height: 3rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 1px dashed var(--bs-gray-400);
    font-size: 0.9rem;
    color: var(--octm-color-darkgray); }
  .octm-apply-step1-section .trademark-input-wrapper.logo #file-drop-area.highlight {
    border: 3px dashed var(--octm-color-yellow); }
    
  .octm-apply-step1-section .trademark-input-wrapper.logo #file-drop-area .file-label {
    width: fit-content;
    margin: 0 0.5rem;
    color: var(--octm-color-white); }
  
  .octm-apply-step1-section .trademark-input-wrapper.logo #file-drop-area .upload-file-btn {
    display: none; }

.octm-apply-step1-section .trademark-input-wrapper .form-control.is-invalid {
  border-color: #dc3545 !important; }
.octm-apply-step1-section .trademark-input-wrapper .form-control.is-valid {
  border-color: #198754 !important; }
.octm-apply-step1-section .trademark-input-wrapper.logo .sub-text {
  display: flex;
  color: var(--octm-color-darkgray);
  font-size: 0.7rem; }
  .octm-apply-step1-section .trademark-input-wrapper.logo .sub-text.invalid-feedback {
    color: #dc3545; }

/* --- trademark preview --------------------------------------- */
.trademark-preview-wrapper {
  display: flex;
  flex-direction: column;
  margin: 2rem 0; }
  .trademark-preview-wrapper .label-trademark-preview {
    display: flex;
    margin: 0.5rem 0; }
  .trademark-preview-wrapper #div-trademark-preview {
    display: flex;
    width: 50%;
    height: 7rem;
    border: 1px solid var(--bs-gray-400);
    border-radius: 5px;
    padding: 0 0.75rem }
    @media screen and (max-width: 991.98px) {
      .trademark-preview-wrapper #div-trademark-preview {
        width: 100%; }}
  .trademark-preview-wrapper #div-trademark-preview.text {
    font-size: 2rem;
    font-weight: 900;
    align-items: center;
    overflow: auto; }
    .trademark-preview-wrapper #div-trademark-preview .preview-image {
      max-width: 100%;
      object-fit: contain; }
  
  
/* --- Step2 --------------------------------------- */
 .octm-apply-step2-section {
  display: flex;
  flex-direction: row;
  margin: 0 0 2rem 0; }
  @media screen and (max-width: 991.98px) {
  .octm-apply-step2-section {
    flex-direction: column; }}
  .octm-apply-step2-section #left-section {
    display: flex; 
    flex-direction: column; 
    width: 65%;
    padding: 0 1rem 0 0; }
    @media screen and (max-width: 991.98px) {
      .octm-apply-step2-section #left-section {
        width: 100%;
        padding: 1rem; }}
    .octm-apply-step2-section #left-section .search-info-content #search-wrapper {
     height: 3rem; 
     margin: 0 0 0.5rem 0; }
    .octm-apply-step2-section #left-section .search-info-content #search-wrapper #search-btn {
      height: 100%;
      margin: 0;
      border-radius: 0 5px 5px 0; }
    .octm-apply-step2-section #left-section .search-info-content .classes-wrapper {
      display: flex;
      flex-direction: column;
      margin: 0.5rem 0; }
    .octm-apply-step2-section #left-section .search-info-content .classes-wrapper .class-item .class-middle {
      width: 100%;
      max-height: 7.6rem;
      overflow: hidden;
      flex-flow: wrap; }
    .octm-apply-step2-section #left-section .search-info-content .classes-wrapper .class-item.show-more .class-middle {
      max-height: fit-content;
      overflow: visible; }
    .octm-apply-step2-section #left-section .search-info-content .classes-wrapper .class-item .class-bottom {
      justify-content: end;
      font-size: 0.7rem; }
      .octm-apply-step2-section #left-section .search-info-content .classes-wrapper .class-item .class-bottom .show-more-btn {
        cursor: pointer;
        text-decoration: underline; }
      .octm-apply-step2-section #left-section .search-info-content .classes-wrapper .class-item .class-bottom .show-more-btn::before {
        content: 'Show more ' ; }
      .octm-apply-step2-section #left-section .search-info-content .classes-wrapper .class-item.show-more .class-bottom .show-more-btn::before {
        content: 'Show less ' ; }
      .octm-apply-step2-section #left-section .search-info-content .classes-wrapper .class-item .class-bottom .show-more-btn::after {
        content: '\f0d7';
        font-family: 'FontAwesome'; }
      .octm-apply-step2-section #left-section .search-info-content .classes-wrapper .class-item.show-more .class-bottom .show-more-btn::after {
        content: '\f0d8';
        font-family: 'FontAwesome'; }
      
  .octm-apply-step2-section #right-section {
    display: flex; 
    flex-direction: column;
    width: 35%;
    padding: 0 0 0.5rem 1rem; } 
    
#mobile-cart-wrapper {
  display: flex;
  position: sticky;
  top: 0;
  bottom: 70px;
  width: 100%;
  background: var(--octm-color-yellow);
  border-radius: 5px 5px 0 0;
  box-shadow: 0px -3px 3px var(--octm-color-gray);
  z-index: 3; }
  

/* --- Classes style --------------------------------------- */
.class-item {
  display: flex;
  flex-direction: column;
  padding: 1rem; 
  border: 1px solid var(--bs-gray-400);
  border-radius: 5px; }
  .class-item div {
    display: flex; }
    .class-item .class-top {
    align-items: center;
    flex-direction: row; }
  .class-item .class-no {
    color: var(--octm-color-navy);
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 6rem; }
    .class-item .class-no::before {
      content: ">"; 
      margin-right: 5px; 
      color: var(--octm-color-yellow);
      font-size: 1.2em;
      line-height: 1.2rem;
      font-weight: bolder;
      align-self: center;
      padding: 0px; }
      
  .class-item .heading-text {
    color: var(--octm-color-darkgray);
    font-size: 0.9em;
    padding-left: 0.5em; }
    .class-item .heading-text::before {
      content: "｜"; 
      color: var(--octm-color-darkgray);
      font-size: 0.9em;
      line-height: 1.2rem;
      font-weight: bolder;
      align-self: center;
      padding: 0px; }
      
    .class-item .gNs-item {
      display: flex;
      cursor: pointer;
      height: fit-content;
      max-width: 97%;
      padding: 0.5rem 1rem;
      margin: 0.5rem;
      font-size: 1rem;
      border: 1px solid var(--bs-gray-400);
      border-radius: 17px;
      align-items: center; }
    .class-item .gNs-item::after {
      content: "\f061"; 
      font-family: "FontAwesome";
      margin-left: 0.5em; 
      color: var(--bs-gray-400);
      font-weight: normal;
      font-size: 1em; }
      .class-item .gNs-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
    .class-item .gNs-item:hover {
      background: var(--octm-color-navy);
      color: var(--octm-color-white); }
    .class-item .gNs-item.selected {
      background: var(--octm-color-yellow);
      color: var(--octm-color-navy); }
    .class-item .gNs-item.selected::after {
      content: "\f00d"; 
      font-family: "FontAwesome";
      color: var(--octm-color-navy); }

@media screen and (max-width: 991.98px) {
	#left-section .class-item .class-top {
	    align-items: flex-start;
	    flex-direction: column;
	}}
     
/* --- cart-info: desktop, mobile --------------------------------------- */
.cart-info #cart-button {
  display: none; }
.cart-info.mobile #cart-button {
  display: flex;
  justify-content: center;
  height: 0.5rem; }
.cart-info.mobile #cart-button::after {
  display: flex;
  content: "\f106"; 
  color: var(--octm-color-darkgray);
  font-size: 1.5rem;
  font-family: "FontAwesome"; }
#mobile-cart-wrapper.active .cart-info.mobile #cart-button::after {
  content: "\f107"; }
.cart-info #cart-wrapper {
  display: flex;
  flex-direction: row;
  background: var(--octm-color-yellow);
  height: 6rem;
  width: 100%;
  align-items: center;
  padding: 0.5rem 1rem; }
.cart-info.desktop #cart-wrapper {
  margin: 0 0 0.5rem 0;
  border-radius: 5px;
  box-shadow: 3px 3px 3px var(--octm-color-darkgray); }
  .cart-info #cart-wrapper>div {
    display: flex; }
  .cart-info #cart-wrapper #cart-left {
    flex: 0 0 auto;
    width: 12%; }
    .cart-info #cart-wrapper #cart-left i {
      font-size: 1.4rem; }
  .cart-info #cart-wrapper #cart-center {
    flex-direction: column;
    flex: 1 1 0%;  }
    .cart-info #cart-wrapper #cart-center .cart-title {
      font-size: 1.2rem;
      display: flex;
      font-weight: 900; }
    .cart-info #cart-wrapper #cart-center .cart-items-info .selected-items {
      color: var(--octm-color-blue);
      font-size: 0.9rem; }
    .cart-info #cart-wrapper #cart-center .octm-info-mobile {
      color: var(--octm-color-navy);
      font-size: 0.9rem; }
  .cart-info #cart-wrapper #cart-right {
    flex: 0 0 auto;
    width: 40%; 
    font-size: 2.5rem;
    font-weight: bold;
    justify-content: end; }
    
.cart-info #selected-classes-wrapper {
  display: flex;
  flex-direction: column; }
  .cart-info.mobile #selected-classes-wrapper {
    display: flex;
    height: 0.1px;
    overflow: hidden;
    background: var(--octm-color-white);
    -webkit-transition: height .6s ease-in-out;
    -o-transition: height .6s ease-in-out;
    transition: height .6s ease-in-out; }
  #mobile-cart-wrapper.active .cart-info.mobile #selected-classes-wrapper {
    height: 240px;
    overflow-y: scroll; }
  .cart-info #selected-classes-wrapper #selected-classes-title {
    font-size: 1.2rem; 
    font-weight: 900;
    margin: 1rem 0 0.5rem 0; }
  .cart-info #selected-classes-wrapper #selected-classes-title span {
    display: none; }
  .cart-info #selected-classes-wrapper #selected-classes-title.active span {
    display: flex; }
  .cart-info.mobile #selected-classes-wrapper #selected-classes-title {
    display: none; }
   .cart-info #selected-classes-wrapper #selected-classes-body {
    margin: 0.5rem 0 0 0;
    border: none; }
   .cart-info #selected-classes-wrapper #selected-classes-body.active {
    border: 1px solid var(--bs-gray-400);
    border-radius: 5px; 
    box-shadow: 3px 3px 3px var(--octm-color-darkgray); }
   .cart-info.mobile #selected-classes-wrapper #selected-classes-body {
    border:0; 
    box-shadow: none; }
    .cart-info #selected-classes-wrapper #selected-classes-body .classes-wrapper {
      margin: 0 1rem; }
      .cart-info #selected-classes-wrapper #selected-classes-body .classes-wrapper .class-item {
        border: 0;
        border-bottom: 1px solid var(--bs-gray-400);
        border-radius: 0;
        padding: 0.5rem 0; }
		  #mobile-cart-wrapper.active .cart-info.mobile #selected-classes-wrapper #selected-classes-body .classes-wrapper .class-item {
        padding: 0.3rem 0; }
        .cart-info #selected-classes-wrapper #selected-classes-body .classes-wrapper:last-child .class-item {
          border: 0; }
        .cart-info #selected-classes-wrapper #selected-classes-body .classes-wrapper .class-item .class-top {
          justify-content: space-between; }
        .cart-info #selected-classes-wrapper #selected-classes-body .classes-wrapper .class-item .class-top .delete-class {
          padding: 0.5rem 0 0.5rem 0.5rem; 
          cursor: pointer;
          color: var(--octm-color-darkgray); }
        .cart-info #selected-classes-wrapper #selected-classes-body .classes-wrapper .class-item .class-middle {
          width: 98%;
          flex-flow: wrap; }

#mobile-step4-cart-wrapper .cart-info.mobile .cart-info-content {
  margin: 0 0.25em; }
#mobile-step4-cart-wrapper .cart-info.mobile .cart-mobile-group {
  background: var(--octm-color-yellow);
  border-radius: 5px;
  box-shadow: 3px 3px 3px var(--octm-color-darkgray); }
#mobile-step4-cart-wrapper .cart-info.mobile #cart-wrapper {
  background: none; }
#mobile-step4-cart-wrapper .cart-info.mobile .payment-wrapper .payment-info-wrapper{
  padding: 1em 0;
  border-bottom: none;
  border-top: 1px solid var(--octm-color-white);
  border-radius: 0;
  font-weight: 900; }
  
/* --- no result search --------------------------------------- */
.nodata-wrapper {
  display: flex;
  flex-direction: column;
  padding: 3rem 2em; 
  border: 1px solid var(--bs-gray-400);
  border-radius: 5px; }
  .nodata-wrapper .nodata-header {
    color: var(--octm-color-navy); }
  .nodata-wrapper .nodata-description {
    font-size: 0.9em; }
    
  
/* --- Step3 --------------------------------------- */
.octm-apply-step3-section-wrapper{
  margin: 2em 0; }

      
/* --- Applicant --------------------------------------- */
.applicants-wrapper .applicant-info-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 2em 1em 2em;
  margin-bottom: 1em;
  border: 1px solid var(--bs-gray-400);
  border-radius: 5px; }
.applicants-wrapper .active{
    max-height: 68px; /* 68px; 118*/
    overflow: hidden; }
.applicant-info-heading{
  display: flex;
  padding: 0.7em 0;
  /* margin-bottom: 1em; */}
  .applicant-info-heading .applicant-info-heading-label{
    color: var(--octm-color-navy);
    font-size: 1.4rem;
    font-weight: bold;
    min-width: 6em; }
  .applicant-info-descript .applicant-type {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1em; }
    .applicant-info-descript .applicant-type label {
      cursor: pointer; }
    .applicant-info-descript .applicant-type .label_applicant-type {
      margin: 0 0.5rem;
      font-size: 0.9em; }
    .applicant-info-heading .applicant_btn::after{
       display: flex;
       content: "\f106";
       color: var(--octm-color-blue);
       font-size: 1.5rem;
       font-family: "FontAwesome"; 
       margin-left:0.5em; }
    .active .applicant-info-heading .applicant_btn::after{
       content: "\f107"; }
      
      
.applicants-btn-wrapper{
  display: flex; }
.applicants-btn-wrapper .applicants-add-btn {
    background: var(--octm-color-yellow);
    color: var(--octm-color-navy);
    display: flex;
    cursor: pointer;
    height: fit-content;
    max-width: 97%;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--bs-gray-400);
    border-radius: 17px;
    align-items: center; }
  .applicants-btn-wrapper .applicants-add-btn::after {
    content: "+";
    margin-left: 0.5em;
    font-family: "FontAwesome";
    color: var(--octm-color-navy);
    font-weight: normal;
    font-size: 1em; }
.applicants-btn-wrapper .applicant-del-btn {
    background: var(--octm-color-orange);
    color: var(--octm-color-navy);
    display: flex;
    cursor: pointer;
    height: fit-content;
    max-width: 97%;
    padding: 0.2rem 1rem;
    margin: 0.5rem 0;
    font-size: 1rem;
    border: 1px solid var(--octm-color-navy);
    border-radius: 17px;
    align-items: center; }
  .applicants-btn-wrapper .applicant-del-btn::after {
    content: "\f068";
    margin-left: 0.5em;
    font-family: "FontAwesome";
    color: var(--octm-color-navy);
    font-weight: normal;
    font-size: 1em; }
    
.applicant-info-descript .apply3-form-group{
  display: flex;
  flex-direction: row;
  margin-left: 0.5em; 
  min-height: 4.5em; }
  .applicant-info-descript div{
    display: flex; }
    .applicant-info-descript .apply3-form-group  .label-wrapper{
      flex: 1.5 1 0;
      flex-wrap: wrap; }
      .applicant-info-descript .apply3-form-group .label-wrapper label{
        color: var(--octm-color-black);
        font-size: 1em;
        font-weight: 900; }
    .applicant-info-descript .apply3-form-group .field-wrapper{
      flex: 3 1 0;
      flex-direction: column; }
    .applicant-info-descript .note-wrapper{
      justify-content: flex-end;
      /* margin-bottom: 0.5em; */}
      
.field-wrapper select{
  width: 60%; }

@media screen and (max-width: 991.98px) { 
  .applicant-info-descript .apply3-form-group{
    flex-direction: column;
    margin-left: 0.5em; 
    min-height: 4.5em; }
  .applicant-info-descript .applicant-type {
    margin-bottom: 0; }
  .octm-apply-step3-section-wrapper .applicants-btn-wrapper .applicants-add-btn{
    width: 100%; 
    display:block;
    text-align: center; }
  .octm-apply-step3-section-wrapper .applicants-btn-wrapper .applicant-del-btn{
    width: 100%; 
    display:block;
    text-align: center; }
}
 
/* --- Step4 --------------------------------------- */
.octm-apply-step4-section {
  display: flex;
  flex-direction: row;
  margin: 0 0 2rem 0; }
  @media screen and (max-width: 991.98px) {
  .octm-apply-step4-section {
    flex-direction: column; }}
  .octm-apply-step4-section #left-section {
    display: flex; 
    flex-direction: column; 
    width: 65%;
    padding: 0 1rem 0 0; }
    @media screen and (max-width: 991.98px) {
      .octm-apply-step4-section #left-section {
        width: 100%;
        padding: 1rem; }}
     
.octm-apply-step4-section #right-section {
  display: flex; 
  flex-direction: column;
  width: 35%;
  padding: 0 0 0.5rem 1rem; } 
    
.step-info-group {
  padding: 0.5em 1em; }
  .step-info-group .step-info-heading {
    display: flex;
    padding: 1em 0 0.5em 0; }
    .step-info-group .step-info-heading .label-wrapper label{
      color: var(--octm-color-navy);
      font-size: 1.4rem;
      font-weight: bold;
      min-width: 6rem; }
    
.step-info-group .step-info-content.border{
   display: flex;
   flex-direction: column;
   margin-bottom: 1em;
   padding : 0 0.5em;
   border: 1px solid var(--bs-gray-400);
   border-radius: 5px; }

.apply-step1-wrapper .trademark-preview-wrapper {
  margin: 0;
  padding: 0 1em; }
  .apply-step1-wrapper .trademark-preview-wrapper #div-trademark-preview {
    border: 0;
    width: 100%; }

.step-info-content .apply-step2-wrapper .class-item {
  border: 0;
  border-bottom: 1px solid var(--bs-gray-400);
  border-radius: 0;
  padding: 1rem 0;
  margin: 0 1em; }
  .step-info-content .apply-step2-wrapper .class-item:last-child {
    border: 0; }
    
.apply-step3-wrapper .applicants-wrapper .active{
    max-height: 68px;
    overflow: hidden; }
.apply-step3-wrapper .applicants-wrapper .applicant-info-wrapper{
  padding: 1em; }
.apply-step3-wrapper .applicant-info-heading{
  padding: 0; 
  margin-bottom: 1em; } 

.apply-step3-wrapper .applicant-info-content{
  padding: 0 0.5em; }
  .apply-step3-wrapper .applicant-info-content .content-type{
    color: var(--octm-color-blue);
    font-size: 1.1rem;
    padding-bottom: 0.5em; }
    
.step-info-heading .btn-wrapper{
  display: flex;
  justify-content: center; }
	.step-info-heading .btn-wrapper .previous-step-btn{
	  display: flex;
	  color: var(--octm-color-blue);
	  padding-right : 0.5rem;
	  align-items: center;
    vertical-align: middle;
    cursor: pointer;
    margin-top: auto; }

.payment-wrapper{
  padding: 0 1em; }
  .payment-wrapper .payment-info-wrapper{
    padding: 1em 0;
    border-bottom: 1px solid var(--bs-gray-400);
    border-radius: 0;
    font-weight: 900; }
    .payment-wrapper .payment-info-wrapper .payment-info-title span{
      color: var(--octm-color-navy);
      font-size: 1.2rem;
      margin: 1rem 0 0.5rem 0; }
  .payment-wrapper .fee-wrapper{
    display: flex;
    color: var(--octm-color-navy);
    font-size: 1rem; }
    .payment-wrapper .fee-wrapper:first-child{
      padding: 1em 0; }
    .payment-wrapper .fee-wrapper .amount{
      color: var(--bs-gray-500); }
.payment-total{
  display: flex; }
  .payment-total #totalFee span{
    color: var(--octm-color-black);
    font-size: 1rem; }
    
.agreement-wrapper{
  padding: 1em; }
  .agreement-wrapper .agreement-info{
    display: flex; }
  .agreement-wrapper .label_agreement {
    padding-left: 1rem; }
  .agreement-wrapper .label_agreement span{
    height: fit-content;
    margin: 1.5em 0 1.5em 0;
    color: var(--octm-color-blue);
    font-weight: 900; }
    
.paypal-wrapper .papal-logo-wrapper{
  display: flex;
  background: var(--octm-color-blue);
  color: var(--bs-white);
  font-size: 2em;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  margin: 0 0 0.5rem 0;
  border-radius: 5px;
  box-shadow: 3px 3px 3px var(--octm-color-darkgray); }   
.paypal-wrapper .papal-logo-wrapper .left-wrapper{
  flex-direction: column;
  flex: 0 0 150px; }
.paypal-wrapper .papal-logo-wrapper .left-wrapper .left-first{
  display: flex;
  color: var(--octm-color-yellow);
  font-size: 1em; }
.paypal-wrapper .papal-logo-wrapper .left-wrapper .left-middle{
  display: flex;
  flex-direction: column;
  color: var(--bs-white);
  font-size: 0.7em;
  padding-left: 1rem; }
.paypal-wrapper .papal-logo-wrapper .right-wrapper{
  display: flex;
  color: var(--bs-white);
  font-style: italic;
  font-size: 1.6em;
  font-weight: 900; }
.paypal-wrapper .papal-logo-wrapper .right-wrapper .right-first .comment-block2{
  color: var(--bs-gray-600); }
    
.paypal-wrapper .label-wrapper {
  color: var(--bs-gray-600);
  float: right; }

.apply-step1-wrapper .trademark-type-wrapper{
  display: none; }
.apply-step1-wrapper .trademark-input-wrapper{
  display: none; }
.apply-step3-wrapper .applicant-info-content-validation{
  display: none; }
  
  
@media screen and (max-width: 991.98px) { 
  .octm-apply-step4-section #right-section{
	  width:100%;
	  padding: 1em 2em; }
  
  .paypal-wrapper .label-wrapper{
    text-align: center;
    margin: 1em 2em; }
}

/* --- Modal --------------------------------------- */
#modal{
	z-index: 9999;
	overflow: hidden;
}