#profile {

}



/* ------------------------- personal information --------------------- */
#profile #general-information {
  position: relative;
  font-size: 13px;
}
#profile #general-information .edit-button {
  position: absolute;
  right: 15px;
  bottom: 100%;
}
#profile #general-information .edit-button img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

#profile #general-information .info-block {
  margin-bottom: 40px;
}
#profile #general-information .info-block .block-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
#profile #general-information .info-block .block-heading h6 {
  font-weight: bold;
}
#profile #general-information .info-block .block-content label,
#profile #general-information .info-block .block-content p,
#profile #general-information .info-block .block-content .form-control {
  height: 24px;
  font-size: 13px;
  margin-bottom: 4px;
  padding: 0 0.5em;
}
#profile #general-information .info-block .block-content .form-control {
  margin-top: -1px;
  margin-left: -1px;
}
#profile #general-information .checkbox-option {
  padding-left: 30px;
  margin-bottom: 15px;
  position: relative;
}
#profile #general-information .checkbox-option .checkbox-wrapper {
  position: absolute;
  left: 0;
  top: 3px;
}
#profile #general-information .option-details .form-control {
  padding-top: 0;
  padding-bottom: 0;
  color: #000000;
  color: var(--black);
}
#profile #general-information .option-details .form-control::placeholder,
#profile #general-information .option-details .form-control.placeholder {
  text-transform: uppercase;
}
#profile #general-information .option-details .delete-option-button {
  position: absolute;
  right: -30px;
  top: -1px;
  font-size: 16px;
}
#profile #general-information .label-form {
  margin-left: -4px;
  margin-right: -4px;
}
#profile #general-information .label-form > div[class*=col] {
  padding-left: 4px;
  padding-right: 4px;
}
#profile #general-information .label-form label {
  padding: 0 0.5em;
  margin-bottom: 0;
}




/* -------------------- profil left (icon...) ----------------- */
#profile #general-information .profile-left .profile-icon{
  display: block;
  width: 200px;
  height: 200px;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  object-fit: cover;
  background-color: #f2f2f2;
  background-color: var(--default-grey);
  margin-bottom: 20px;
}
#profile #general-information .profile-left .profile-display-name{
  margin: 0;
  font-size: 18px;
  text-align: center;
}
#profile #general-information .profile-left .profile-interest{
  color: #58595b;
  color: var(--dark);
  text-align: center;
  text-transform: uppercase;
}
#profile #general-information .profile-left .profile-loyalty-level{
  display: block;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
}
#profile #general-information .profile-left .profile-member-id{
  text-align: center;
}
/* ---------- editing -----------*/
#profile #general-information .profile-left .account-type-select .selectList{
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  color: #58595b;
  color: var(--dark);
}
#profile #general-information .profile-left .selectList .dropdown-toggle-text{
  color: #58595b;
  color: var(--dark);
}
#profile #general-information .profile-left .selectList .dropdown-toggle-text{
  text-align: center;
}
#profile #general-information .profile-left .edit-text-wrapper{
    left: 50%;
    z-index: 1;
    width: 200px;
    height: 200px;
    cursor: default;
    margin-top: 100px;
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(124, 117, 129,0.3);
}

#profile #general-information .profile-left .edit-text-wrapper .edit-text{
    display: block;
    font-size: 24px;
    margin-top: 45%;
    margin-bottom: 55%;
    text-align: center;
    color: rgb(255,255,255);
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}



/* --------------------- account info ------------------- */
#profile #general-information .ac-info .col-12 {
  padding-left: 0;
}
#profile #general-information .ac-info .col-12 p {
  margin-bottom: 0;
}
#profile #general-information .ac-info .block-content label {
  padding-left: 0;
}


/* -------------------- change password ----------------- */
#profile #general-information .changePw-block h6 {
  cursor: pointer;
  padding-bottom: 3px;
  border-bottom: 2px solid;
  border-bottom-color: #3bbfad;
  border-bottom-color: var(--theme-green);
}
/* -------- change password modal ----- */
#change-pw .form-control{
  margin-bottom: 7px;
}
#change-pw .submit-btn{
  display: block;
  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}














































/* --------------------------- my wallet --------------------- */
#profile #my-wallet {
  font-size: 13px;
}
#profile #my-wallet hr.theme-green {
  border-color: #3bbfad;
  border-color: var(--theme-green);
  border-width: 1px;
  margin-top: 24px;
  margin-bottom: 24px;
}
#profile #my-wallet .mar-btn-default {
  width: 140px;
  margin-top: 5px;
  padding-left: 0;
  padding-right: 0;
  text-transform: unset;
  font-size: 14px;
}
#profile #my-wallet .figure-row {
  display: flex;
  width: 100%;
  margin-bottom: 7px;
}
#profile #my-wallet .label {
  width: 160px;
  font-weight: bold;
}
#profile #my-wallet .value {
  flex: 1;
}

#profile #my-wallet .points {
  padding-top: 20px;
}

#profile #my-wallet .spend-graph-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#profile #my-wallet #arc-wrapper {
  width: 250px;
  height: 250px;
}
#profile #my-wallet .spend {
  position: relative;
}
#profile #my-wallet .spend .spend-text-wrapper {
  display: flex;
  position: absolute;
  width: 100%;
  top: 54px;
  justify-content: center;
}
#profile #my-wallet .spend .spend-text {
  max-width: 150px;
  text-align: center;
}
#profile #my-wallet .spend .spend-text p {
  white-space: pre-wrap;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 10px;
}
#profile #my-wallet .spend .spend-text .total {

}
#profile #my-wallet .spend .spend-text .amount {
  font-size: 30px;
  color: #3bbfad;
  color: var(--theme-green);
}
#profile #my-wallet .spend .spend-text .more {

}

#profile #my-wallet .gift-certificate .figures .figure-row {
  margin-bottom: 13px;
}
#profile #my-wallet .history .history-list table {
  width: 100%;
}
#profile #my-wallet .history .history-list th,
#profile #my-wallet .history .history-list td {
  padding: 4px 15px;
}
#profile #my-wallet .history .history-list th:first-child,
#profile #my-wallet .history .history-list td:first-child {
  padding-left: 0
}
#profile #my-wallet .history .history-list thead th {
  font-size: 12px;
  border-top: 2px solid #b3b3b3;
  border-top: 2px solid var(--grey);
  border-bottom: none;
}
#profile #my-wallet .history .history-list tbody td {
  color: #58595b
  color: var(--dark)
}
#profile #my-wallet .history .history-list tbody tr:first-child td {
  border-top: none;
}

#profile #my-wallet .history .history-list .code {
  width: 15%;
  min-width: 85px;
}
#profile #my-wallet .history .history-list .amount {
  width: 20%;
  min-width: 115px;
  text-align: right;
}
#profile #my-wallet .history .history-list .date {
  width: 20%;
  min-width: 115px;
}
#profile #my-wallet .history .history-list .contributor {
  width: 45%;
  min-width: 170px;
}


/* -------- redemption modal -------- */
#redemption-modal .modal-header {
  padding-left: 15px;
  padding-right: 15px;
}
#redemption-modal form {
  font-size: 14px;
}
#redemption-modal .value-input {
  display: flex;
  height: 100px;
  padding-left: 15px;
  padding-right: 15px;
  align-items: center;
  justify-content: center;
  margin-bottom: 70px;
}
#redemption-modal .value-input .form-control {
  width: 110px;
  background-color: transparent;
  text-align: center;
  margin-right: 15px;
}
#redemption-modal .value-input label {
  margin-bottom: 0;
}


/* ---- get gift certificate modal ---- */
#get-gift-modal .modal-body {
  display: flex;
  flex-direction: column;
}
#get-gift-modal .modal-header {
  padding-left: 15px;
  padding-right: 15px;
}
#get-gift-modal form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;
}
#get-gift-modal .upper {
  padding-left: 15px;
  padding-right: 15px;
}
#get-gift-modal .invalid-msg {
  height: 50px;
}
#get-gift-modal .invalid-msg p {
  color: #ff1d25;
  color: var(--red);
  margin-bottom: 0;
}
#get-gift-modal .value-input {
  display: flex;
  height: 90px;
  align-items: center;
  justify-content: center;
}
#get-gift-modal .value-input .form-control {
  width: 100%;
  background-color: transparent;
  text-align: center;
  margin-right: 15px;
}
/* success */
#get-gift-modal .success {
  text-align: center;
}
#get-gift-modal .success img {
  width: 74px;
  margin-top: 25px;
  margin-bottom: 25px;
}
#get-gift-modal .success p {
  font-size: 17px;
}









































/* ------------------ purchase gift certificate -------------------- */
#profile #purchase-gift {
  padding-top: 20px;
  font-size: 15px;
}
#profile #purchase-gift .form-control {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#profile #purchase-gift .form-control::placeholder {
  font-size: 14px;
}
#profile #purchase-gift .mar-selectpicker {
  margin-top: 50px;
  margin-bottom: 60px;
}
#profile #purchase-gift .mar-selectpicker .dropdown-toggle-text,
#profile #purchase-gift .mar-selectpicker .mar-selectpicker-option {
  text-align: center;
}