/*
Compile-Minify: true
Compile-Area: account
Compile-OutputGroup: headtag
Compile-Exports: account
Compile-Dependencies: 
*/

.account-main-section span {
  line-height: 12px;
}

.account-navigation  button{
  width: 339px;
  height: 78px;
  padding: 27px 67px 27px 67px;
  border-radius: 16px;
  border: 2px solid #383634;
  gap: 10px;
}

.account-personal-data {
  width: 37.7%;
  margin-left: 100px;
}

.account-personal-data h1 {
  font-family: Oswald;
  font-size: 54px;
  font-weight: 500;
  line-height: 59px;
}

.account-personal-data p {
  font-family: Inter;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.account-personal-data input {
  width: 100%;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid #383634;
}

.account-personal-data button {
  width: 100%;
  background-color: #383634;
  padding: 27px 67px 27px 67px;
  border-radius: 10px;
  border: 1px;
  gap: 10px;
  margin-top: 20px;
  color: #F2F0EA;
  margin-bottom: 80px;
}

/* account-order-data */

.orders-list-main,
.border-line {
  width: 66%;
  margin-left: auto;
}

.account-order-data h1 {
  font-family: Oswald;
  font-size: 54px;
  font-weight: 500;
  line-height: 59px;
}

.border-line img {
  width: 100%;
}

.orderd-item-acc {
  border-left: 10px solid #8bb980;
  padding-left: 10px;
  border-radius: 5px;
}

.orderd-item-can {
  border-left: 10px solid gray;
  padding-left: 10px;
  border-radius: 5px;
}

.account-order-data form {
  height: 78px;
  border: 2px solid #383634;
  border-radius: 16px;
}

.account-order-data form input {
  border: none;
  outline: none;
  background-color: #F2F0EA;
}

.account-order-data select {
  height: 78px;
  padding: 27px 67px 27px 67px;
  border-radius: 10px;
  border: 2px solid #383634;
}

.orders-list-main-left a {
  text-decoration: none;
  color: #383634;
  font-family: Inter;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.orders-list-main-left summary {
  font-family: Inter;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.orders-list-main-left .accomplished,
.orders-list-main-left .price {
  font-family: Oswald;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.general-summary {
  width: 50%;
  margin-left: auto;
  align-self: flex-end;
}

.general-summary p {
  font-family: Oswald;
  font-size: 40px;
  font-weight: 500;
  line-height: 41px;
}

.general-summary a {
  font-family: Oswald;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #383634;
  text-decoration: none;
  border: 1px solid #383634;
  padding: 15px 15px;
  border-radius: 10px;
  background-color: #8bb980;
}

/* Media query start here */

@media screen and (max-width: 992px) {
  .account-main-section {
    flex-direction: column;
  }

  .account-personal-data {
    width: 65%;
    margin: 30px auto;;
  }

  .account-navigation button {
    width: 65%;
    margin: auto auto;
  }

  .orders-list-main {
    width: 65%;
    margin: auto auto;
  }

  .account-order-data h1 {
    padding: 30px 0;
  }
}

@media (min-width: 500px) and (max-width: 768px) {
  .account-main-section {
    flex-direction: column;
  }
  .orders-list-main {
    width: 80%;
    margin: auto auto;
  }

  .account-navigation button {
    width: 80%;
    margin: auto auto;
  }

  .account-personal-data {
    width: 80%;
    margin: 30px auto;;
  }

  .general-summary  {
    order: 1;
    width: 100%;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .general-summary a {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 500px) {
  .account-main-section {
    flex-direction: column;
  }

  .orders-list-main {
    width: 100%;
    margin: auto auto;
  }

  .account-navigation button {
    width: 100%;
  }

  .account-personal-data {
    width: 100%;
  }
}
.order-fields{
    margin-left:80px;
}

.personal-data-btn,
.change-password-btn,
.my-order-btn,
.address-btn {
    padding: .938rem .75rem .938rem 0;
    border-bottom: .063rem solid #CCCCCC;
    width: 17.188rem;
    font-size: 20px;
    color: #383634;
    text-decoration: none;
    font-weight: 400;
}

.personal-data-btn:hover,
.change-password-btn:hover,
.my-order-btn:hover,
.address-btn:hover {
    background-color: #f3f3f1;
    border-left: .188rem solid #4aa629;
    padding-left: .75rem;
    text-decoration: none;
    padding-left: .75rem;
    font-weight: 600;
    color: #000;
}

.dashboard-data,
.orders-list-main,
.address-book-data {
    width: 66%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.account-personal-data {
    width: 37.7%;
    margin-left: auto;
    margin-right: auto;
}

.divMyDashboardHeader h4,
.divAddressBookHeader h4 {
    font-family: 'Oswald';
    font-size: 54px;
    font-weight: 500;
    line-height: 59px;
}


/* my dashboard page only */

.contact-info-parent-div {
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin: 27px 0;
    font-family: 'Inter';
    font-weight: 500;
}

.dashboard-square {
    background-color: #fff;
    padding: 27px 27px;
    border-radius: 16px;
    margin-bottom: 16px;
}

/*
    File: sb-addressbook.hbs
    Used with address book primary-billing and primary-shipping buttons to gray-out all other addresses except the primary
*/
#address-list .primary-disabled {
    color: #b5b2ab !important;
}

/* Order list page */

.order-fields {
    margin-left: 5vw;
}

/* Address book */

.address-card-main {
    width: 100% !important;
}

.address-list > :nth-child(even) {
    background-color: #f2f0fa;
}

.address-list > :nth-child(odd) {
    background-color: #fff;
}

.divAddressBook {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (min-width: 768px) and (max-width: 992px) {
    .personal-data-btn,
    .change-password-btn,
    .my-order-btn,
    .address-btn {
        width: 80%;
        margin: 0 auto;
    }

    .dashboard-data,
    .address-book-data,
    .account-personal-data {
        width: 80%;
    }

    .orders-list-main {
        width: 100% !important;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .personal-data-btn,
    .change-password-btn,
    .my-order-btn,
    .address-btn {
        width: 90%;
        margin: 0 auto;
    }

    .dashboard-data,
    .address-book-data,
    .account-personal-data {
        width: 90%;
    }

    .orders-list-main {
        width: 100% !important;
    }
}

@media screen and (max-width: 576px) {
    .personal-data-btn,
    .change-password-btn,
    .my-order-btn,
    .address-btn {
        width: 100% !important;
        margin: 0 auto;
    }

    .dashboard-data,
    .orders-list-main,
    .address-book-data,
    .account-personal-data {
        width: 100% !important;
    }
}

.view-order-data {
    width: 66%;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Oswald';
}