.section-personal{padding: 0 15px;max-width: 1230px;margin: auto; margin-bottom: 20px}
.section-personal .container-inner{ }


.section-personal h4{ font-weight: 700}

.personal-content {display: flex;flex: 1;flex-direction: column}
 .personal-section-item-wrap{ flex-basis: 50%; box-sizing: border-box; padding: 10px; }
.personal-section-item-link{ display: block; box-sizing: border-box; padding: 10px; background: #fff; border-radius: 4px;
    box-shadow: 0px 2px 8px rgba(5, 9, 1, 0.06);}
.personal-section-item-title{ font-size: 13px; text-align: center;}
.personal-section-item-icon{ display: block; text-align: center; margin: 10px 0}
.personal-section-item-icon i{ display: inline-block; width: 50px;height: 50px;
    background-image: url(images/icons_personal.png); background-repeat: no-repeat; background-size: auto 100%}
.personal-section-item-icon i.cur_orders{background-position: 0px 0px;}
.personal-section-item-icon i.personal{background-position: -100px 0px;}
.personal-section-item-icon i.filter_orders {background-position: -150px 0px;}
.personal-section-item-icon i.profile {background-position: -200px 0px;}
.personal-section-item-icon i.cart {background-position: -250px 0px;}
.personal-section-item-icon i.subscribe {background-position: -300px 0px;}
.personal-section-item-icon i.contact {background-position: -350px 0px;}


.section-personal .page-tabs { display: flex;   }
.section-personal .page-tab-title{display: flex; align-items: center;  margin-right: 20px  }
.section-personal .page-tab-title a{ display: block; width: 100%; height: 100%;   text-align: center; color: #5a5a5a; font-weight: bold; position:relative;cursor:pointer; font-size: 12px;  border-bottom: 1px solid #bcbcbc; }
.section-personal .page-tab-title a:hover{ background:#f5f5f7}
.section-personal .page-tab-title.is-open a{ background: var(--color-light-blue); border-color:var(--color-light-blue);  color: #fff}
.section-personal .page-tab-title a.selected{ color:  var(--color-light-blue); border-bottom: 2px solid  var(--color-light-blue); }


.section-personal .block-row { display: flex; margin: 15px 0;   }
.section-personal .block-row-title{ margin-right: 10px; flex-basis:40%; padding: 5px 0; display: flex;  align-items: center;line-height: 1.2em; max-width: 200px }
.section-personal .block-row-title.bold{ font-weight: 600}
.section-personal .block-row-wrap, .section-personal .block-row-value
{  display: flex;  align-items: center; flex-basis: 60%; max-width: 300px;  }
.section-personal .block-row-wrap .block-row-value{ flex-basis: 100%; margin: 5px 0; width: 100%}
.section-personal .block-row-wrap._balans{ flex-direction: column}
.section-personal .block-row-value.bold{ font-weight: 600 }
.section-personal .box-value{ padding: 10px; border: 1px solid #eee; border-radius: 4px; width: 100%;   }
.section-personal.box-value.bg{  background: #F7F7F7 }

.section-personal .massage-box{ margin: 20px 0; padding: 30px 20px; text-align: center; border: 1px solid #eee}
.section-personal .message-text{  text-align: center;}
.section-personal .message-text.attention{ font-size: 16px; color: #DC143C; font-weight: bold }

.section-personal table.referal-list{ width: 100%; border-collapse: collapse;}
.section-personal table.referal-list th{  text-align: center; padding: 5px; background: #eee; border: 1px solid #ccc}
.section-personal table.referal-list td{  text-align: center; padding: 5px;  border: 1px solid #eee}

.section-personal table.referal-list td.status-1{ text-decoration: line-through}
.section-personal table.referal-list tr.status-1 td{opacity:.6}

.section-personal .referal-payout-form{ text-align: center; border: 1px solid #eee; padding: 20px 0; }
.section-personal .referal-payout-form .block-row{ justify-content: center}
.section-personal .referal-payout-form input{ width: 180px !important; display: block; box-sizing: border-box; text-align: center; background: none !important; font-weight: bold; font-size: 16px !important;}


.order-status{  border-bottom: 1px dashed var(--color-light-blue); color: var(--color-light-blue); }
.order-status.success{color: #6ea56e;}
.order-status.cancel{color: #cb6e6e;}
.order-status.not-paid{color: #cb6e6e;}
.order-status.paid{color: #6ea56e;}


.orders-list{ padding: 15px 0;}
.orders-list .order-item-wrap{ margin: 15px 0; border-radius: 4px; box-shadow: 0px 2px 8px rgba(5, 9, 1, 0.06); border: 1px solid var(--color-light-grey);  overflow: hidden; background: #fff}
.orders-list .order-item-header{  background: #f1f1f6; padding: 10px 15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;border-bottom: 1px solid #a7a7ac; }
.orders-list .order-item-title{ font-family: 'King', serif; flex: 1; font-size: 18px;}
.orders-list .order-item-title span{font-size: 14px; opacity: .7}
.orders-list .order-item-title-status{ }
.orders-list .order-item-title-total{ flex-basis: 100%}
.orders-list .order-item-title-total > span{font-weight: 700;display: inline-block;padding-left: 15px;}

.orders-list .order-item-body{ padding: 15px;}
.orders-list .order-item-pay-info{ margin-bottom: 10px;}
.orders-list .order-item-info-title{ display: block; font-weight: 600; }
.orders-list .order-item-detale-link{ margin-top: 10px; text-align: right}
.orders-list .order-item-detale-link a{text-decoration: underline; opacity: .7}
.orders-list .order-item-detale-link a:hover{opacity: 1}
.orders-list .order-item-info-item{ display: flex; flex-wrap: wrap; align-items: center}
.orders-list .order-item-info-title{ flex-basis: 100%}
.orders-list .order-item-info-desc{ margin-right: 10px;}

.orders-list .order-item-pay-info .tmg_pk_form_container{ margin-left: auto; margin-right: 0; flex: 1  }

.personal-sidebar{ margin: 15px -15px 10px -15px}
.personal-sidebar .left_menu{ display: flex; padding: 0; margin: 0; list-style: none; overflow: auto;}
.personal-sidebar .left_menu li{ margin-left: 15px; flex-shrink: 0; padding-bottom: 12px}
.personal-sidebar .left_menu li:last-child{ margin-right: 15px;}
.personal-sidebar .left_menu li a{border: 1px solid #eee; display: block; font-size: 13px; padding: 5px 15px; border-radius: 5px; background: #fff}
.personal-sidebar .left_menu li.current a{background: var(--color-backgroung-light-blue); border: 1px solid var(--color-light-blue)}
.personal-sidebar .left_menu .item.hide-mobile {display: none }


.orders-detail{ padding-top: 15px;}
.orders-detail .order-item-wrap{ margin: 15px 0; background: #fff; border-radius: 4px; box-shadow: 0px 2px 8px rgba(5, 9, 1, 0.06); border: 1px solid var(--color-light-grey);  overflow: hidden}
.orders-detail .back-link{ margin-bottom: 15px; color: var(--color-light-blue)}
.orders-detail .order-item-header{  background: #f1f1f6; padding: 10px 15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center }
.orders-detail .order-item-title{font-family: 'King', serif; flex: 1; font-size: 18px; }
.orders-detail .order-item-title span{font-size: 14px; opacity: .7}
.orders-detail .order-item-title-status{ }
.orders-detail .order-item-title-total{ flex-basis: 100%;display: flex; justify-content: space-between; align-items: center; margin-top: 5px}
.orders-detail .order-item-title-total span:last-child{ font-weight: 600; font-size: 18px;}

.orders-detail .order-item-body{ padding: 20px 15px; border-bottom: 1px solid var(--color-light-grey);  }
.orders-detail .order-item-pay-info{ margin-bottom: 10px; width: 100%}
.orders-detail .order-item-info-title{ display: block; font-weight: 600}
.orders-detail .order-item-detale-link{ margin-top: 10px; text-align: right}
.orders-detail .order-item-detale-link a{ color: var(--color-light-blue); text-decoration: underline}
.orders-detail .order-item-info-item{ display: flex; flex-wrap: wrap; align-items: center;     justify-content: space-between;}
.orders-detail .order-item-info-title{ flex-basis: 100%}
.orders-detail .order-item-info-desc{ margin-right: 10px;}
.orders-detail .order-item-info-price{flex-basis: 100%; display: flex; justify-content: space-between; align-items: center}
.orders-detail .order-item-info-price span:last-child{ font-weight: 600; font-size: 16px}
.orders-detail .order-item-info-item .mb-4{ margin-top: 10px }

.orders-detail .info-block-title{font-size: 16px;margin: 0 0 10px 0;font-weight: 900;}
.orders-detail .info-block-row{ display: flex; margin-bottom: 5px; font-size: 13px }
.orders-detail .info-block-row-name{ margin-right: 10px; font-weight: 600}
.orders-detail .order-item-list{ width: 100%}
.orders-detail .basket-item-description{display: flex; align-items: center;padding-bottom: 10px;margin-bottom: 10px;border: 1px solid #eee; padding: 10px; }
.orders-detail .basket-item-description-image{  flex-shrink: 0; margin-right: 10px}
.orders-detail .basket-item-description-image img{ width: 70px; height: 70px; object-fit: contain}
.orders-detail .basket-item-description-info{flex-grow: 1}
.orders-detail .basket-item-description-title{ font-weight: 600}
.orders-detail .basket-item-description-price{ display: flex; margin-top: 10px; justify-content: space-between}
.orders-detail .basket-item-price > span{   margin-right: 5px}
.orders-detail .basket-item-summ{ margin-left: 30px; font-weight: 700}
.orders-detail .order-total-item{ display: flex; justify-content: flex-end; margin-bottom: 5px}
.orders-detail .order-total-item.-bold{ font-weight: 800 }
.orders-detail .order-total-name{ font-weight: 600}
.orders-detail .order-total-value{margin-left: 20px;  flex-basis: 60px;  text-align: right;}
.orders-detail .order-total{ width: 100%}

.section-profile-description{ text-align: center; font-size: 14px; max-width: 600px;  margin: 20px auto;}

.personal-form form{ max-width: 500px; margin: auto;     padding: 0 15px;  }
.personal-form .button{ width: 220px}

.personal-form .form-row{ margin-bottom: 15px;}
.personal-form .form-row label{ display: block; margin-bottom: 5px; }
.personal-form .form-row input{ display: block; box-sizing: border-box; height: 40px; line-height: 40px; padding: 0 15px; width: 100%; border: 1px solid var(--color-grey); border-radius: 4px;}
.personal-form .form-row-checkbox,
.personal-form .form-row-radio{ display: flex; align-items: center; cursor: pointer}
.personal-form .form-row-checkbox input,
.personal-form .form-row-radio input{display: block; width: 18px; height: 18px; background: #f7f7f7; border:1px solid #E5E5E5; border-radius: 2px; box-sizing: border-box;
    padding: 0; cursor: pointer; margin: 0}
.personal-form .form-row-checkbox input:checked,
.personal-form .form-row-radio input:checked{border:4px solid #E5E5E5; background: var(--color-light-blue)}
.personal-form .form-row-checkbox label,
.personal-form .form-row-radio label{ display: block; font-weight: normal; margin: 0 0 0 10px; cursor: pointer}
.personal-form .personal-form-addon{ padding-top:20px; padding-bottom: 20px; margin-top: 20px; border-top:  1px solid var(--color-easy-grey)}

.personal-form .row-description { font-size: .9em;  padding: 3px;}


.form-setting .form-row-radio-row{ display: flex; align-items: center}
.form-setting .form-row-radio-row span{ display: inline-flex; margin: 0 10px; font: 16px;}
.form-setting .form-row-buttons{ display: flex; justify-content: space-between}
.form-setting .form-row-buttons .button{ margin: unset}

.subscribe-status .status-item{ display: flex; flex-wrap: wrap; margin-bottom: 10px }
.subscribe-status .status-item .item-name{ flex-basis: 60%}
.subscribe-status .status-item .item-value{ flex-basis: 40%}
.subscribe-status .status-item .item-desc{ flex-basis: 100; margin-bottom: 10px; color: var(--color-grey); font-size: 12px; padding: 5px 15px;}


.profile__container {  background-color: var(--color-text-white); border-radius: 4px;   }
.bx_profile .main-profile-block-date-info { padding: 20px 0 20px; }
.bx_profile .main-profile-form-password-annotation { color: grey;font-weight: lighter;font-size: 12px;margin-top: 15px;margin-bottom: 0; }
.bx_profile .main-profile-block-date-info, .bx_profile .form-group {overflow-y: hidden; }
.bx_profile .main-profile-social-block { margin-top: 40px; }
.section-profile h1 {font-size: 18px;line-height: 1.2em;text-align: center;margin: 0;padding: 15px 0;  border-bottom: 1px solid #eee; }
.profile__times {font-size: 12px;margin: 0; }
.profile__input {margin-bottom: 20px; }
.profile__input .form-control {height: 38px;border-color: var(--color-border-grey);background: 0;border-radius: 2px;box-shadow: none;line-height: inherit;
    padding: 14px 15px 11px;}
.profile__password-change-title h2 {font-size: 16px !important;margin: 0;padding: 0 0 10px; }
.profile__form {max-width: 355px;margin: auto;padding-bottom: 20px; }
.profile__button--save {color: var(--color-text-white);background-color: var(--color-light-blue);border: 0; }
.profile__button--save:hover, .profile__button--save:focus{ color:  var(--color-text-white); }
.profile__button--reset {color: var(--color-light-blue);background-color: var(--color-text-white);border: 1px solid var(--color-light-blue); }
.profile__buttons {display:flex; justify-content: space-between; }
.profile__button { display:flex; align-items:center; justify-content: center; text-align: center; border-radius: 3px;height: 40px;font-size: 12px;width: 48%;  line-height: 1; transition: .3s}
/*.profile__button:hover{ box-shadow: 0 5px 15px -10px rgb(0 0 0 / 15%)}*/

.message{ padding: 15px; text-align: center; background: var(--color-easy-grey);    margin-top: 15px; }
.message p:last-child{ padding-bottom: 0;margin-bottom: 0  }
.message.error{ padding: 15px; text-align: center;   color: var(--color-text-red);}

/***/
.subscribe-edit{background: #fff; border-radius: 4px}
.subscribe-edit .personal-form{ max-width: none; box-shadow: 0px 8px 8px -5px rgba(5, 9, 1, 0.06); }
.subscribe-edit .row-description{ padding: 5px; font-size: 13px; opacity: .7 }
.subscribe-edit  h5{ font-weight: 600}
.subscribe-edit .personal-form{ max-width: 500px; margin: auto; padding: 30px 0; box-sizing: border-box }
.subscribe-edit .personal-form-title{ text-align: center; font-size: 22px; font-weight: bold; margin-bottom: 10px}
.subscribe-edit .personal-form-subtitle{ text-align: center; font-size: 13px;  margin-bottom: 20px}
.subscribe-edit .personal-form .button{ width: 160px; margin: auto}
.subscribe-edit .personal-form-addon {padding:10px 0; text-align: center; }
.subscribe-edit .personal-form-addon p{ margin: 5px 0; }

/**/
.auth-form .password-forgot{display: flex; justify-content: flex-end; margin-top: 5px;}
.auth-form .password-forgot a{ font-size: 12px; color: var(--color-light-blue) }
.auth-form .password-forgot a:hover{ text-decoration: underline}
.auth-form .personal-form-addon{ text-align: center; }
.auth-form .profile__button--auth{ display: block; margin: auto; padding: 15px 25px; color: var(--color-light-blue); background-color: var(--color-text-white);border: 1px solid var(--color-light-blue);}
.auth-form .profile__buttons{justify-content: center}
.auth-form .message{ margin: 20px 0}

/**/
.forgot-form{padding-bottom: 20px;}
.forgot-form .profile__buttons{justify-content: center; margin: 20px 0}

/**/
.change-password-form{ padding: 25px 0}
.change-password-form .profile__buttons{ justify-content: center; margin: 20px}

/**/
.register-form{ padding: 25px 0}
.register-form .profile__buttons{ justify-content: center; margin: 20px}



@media only screen and (min-width: 480px) {
    .section-personal .block-row-wrap._balans {flex-direction: row; justify-content: space-between}
    .section-personal .block-row-wrap._balans .block-row-value{ flex-basis: calc(50% - 10px)}
}
@media only screen and (min-width: 600px) {

.personal-sidebar .left_menu{ display: flex; padding: 0; margin: 0; list-style: none; overflow: auto; justify-content: space-between}
.personal-sidebar .left_menu li{ flex-shrink: 1; flex-grow: 1;  }
    .personal-sidebar .left_menu li a{ padding: 5px 0; width: 100%; text-align: center  }
}
@media only screen and (min-width: 768px) {
    .personal-section-item-wrap{ flex-basis: 33.33%;  }
    .personal-section-item-link{ padding: 20px;}
    .personal-section-item-title{ font-size: 14px; }

    .orders-list .order-item-info-title{ flex-basis: auto; margin-right: 10px;}
    .orders-detail .order-item-info-title{ flex-basis: auto; margin-right: 10px;}
    .orders-detail .order-item-header{ padding: 10px 25px;}
    .orders-detail .order-item-body{ padding: 20px 25px;}
    .orders-detail .order-info-block{ display: flex; flex-wrap: wrap; width: 100%}
    .orders-detail .info-block-title{ flex-basis: 100%}
    .orders-detail .info-block-row{ margin-right: 40px}

    .orders-detail .order-item-info-desc{ margin-right: 30px}
    .orders-detail .order-item-info-price{flex-basis: auto; margin-right: 20px}

    .orders-detail .basket-item-description-info{ display: flex; align-items: center; justify-content: space-between; width: 100%}
    .orders-detail .basket-item-description-price{ margin: 0; flex-basis: 260px; justify-content: flex-end}
}

@media only screen and (min-width: 1024px) {
    .container-inner{display: flex; justify-content: space-between; padding-top: 20px}


    .personal-sidebar {display: block; flex-basis: 220px;  background:none; margin: 0;  margin-right: 20px; }
    .personal-sidebar .left_menu{ padding: 0; margin: 0; list-style: none; flex-direction: column; position: sticky; top: 20px; border-radius: 4px; overflow: hidden;}

    .personal-sidebar .left_menu .item {  border-bottom: 1px solid var(--color-light-grey); margin: 0; padding: 0; border-radius: 0; transition: all 0.3s ease;}
    .personal-sidebar .left_menu .item:last-child { margin-right: 0; border: 0}
    .personal-sidebar .left_menu .item  a{ display: block;  font-size: 14px; padding: 15px 20px 15px; border-radius: 0;border: none;}
    .personal-sidebar .left_menu .item.current  a{ color: var(--color-blue); font-size: 14px; font-weight: 600}
    .personal-sidebar .left_menu .item.current  {border-bottom: 1px solid var(--color-light-blue); background: var(--color-backgroung-light-blue) }
    .personal-sidebar .left_menu .item:hover {border-bottom: 1px solid var(--color-light-blue);}
    .personal-sidebar .left_menu .item.hide-mobile {display: block }

    .section-personal .page-tab-title{}
    .section-personal .page-tab-title.selected{   background: var(--color-backgroung-light-blue); }

    .section-personal .page-tab-title a{ display: block; width: 100%; height: 100%; padding:10px 35px; text-align: center; border:1px solid #eee; box-sizing:border-box; background: #F7F7F7;   color: #5a5a5a; font-weight: bold; position:relative;cursor:pointer; font-size: 14px; font-size: 14px; border-bottom: none; background: #fff; border-radius: 4px 4px  0 0}
    .section-personal .page-tab-title a:hover{ background:#f5f5f7}


    .section-personal .page-tabs {    border-bottom: 2px solid var(--color-light-blue);overflow: hidden;}
    .section-personal .block-row-title{ font-size: 14px; max-width: 220px;}
    .section-personal .block-row-wrap, .section-personal .block-row-value{ max-width: 340px;}

    .section-personal .cabinet-sections h1{ margin-top: 0}

    .block-colum-row {   flex-direction: row  }

    .orders-list .order-item-header .price{ font-size: 16px; margin-left: 30px;}
    .orders-list .order-item-title{font-size: 18px;   margin-right: 30px;  }
    .orders-list .order-item-title span{font-size: 14px;}
    .orders-list .order-item-title-total{ flex: 1;text-align: right;}

    .orders-detail{ padding-top: 0}
    .orders-detail .order-item-header .price{ font-size: 14px}
    .orders-detail .order-item-title{font-size: 22px; flex: unset; flex-basis: auto; margin-right: 20px; flex-grow: 1  }
    .orders-detail .order-item-title-total{ flex: 1;text-align: right; min-width: 220px}
    .orders-detail .order-item-title-status {flex-grow: 1;text-align: center;}
    .orders-detail .info-block-row{ margin-right: 60px}
    .orders-detail .order-item-shipment-info{ flex-basis: 100%;}
    .orders-detail .order-item-title-total{ margin: 0 0 0 20px; justify-content: flex-end;}
    .orders-detail .order-item-title-total span.price{ margin-left: 30px}
    .orders-detail .order-item-info-desc{ margin-right: 50px}
    .orders-detail .order-item-info-price{flex-basis: auto; margin-right: 0px;}
    .orders-detail .order-item-info-price span.price{ margin-left: 30px}


    /**/
    .text-md-right {text-align: right; }
    .form-group {  display: table;  width: 100%; }
    .main-profile-form-label.text-md-right, input[class*="col-"] {  float: none !important;  display: table-cell; vertical-align: middle; }
    .section-profile h1 {font-size: 22px;     padding: 26px 0 23px; }
    .profile__form {padding-bottom: 50px; }

}

@media only screen and (min-width: 1600px) {
    .personal-sidebar {flex-basis: 300px; }
    .personal-section-item-wrap{ flex-basis: 25%;  }
    .personal-section-item-link{ padding: 30px 20px;}

    .personal-section-item-title{ font-size: 16px; }

    .orders-list .order-item-title{ font-size: 18px}
    .orders-list .order-item-header .price{ font-size: 16px}
    .orders-list .order-item-body{ display: flex; flex-wrap: wrap;}
    .orders-list .order-item-pay-info, .orders-list .order-item-shipment-info{ flex-basis: 50%;}

    .orders-detail .order-item-header { padding: 15px 35px;}
    .orders-detail .order-item-header .price{ font-size: 16px}
    .orders-detail .order-item-body{ display: flex; flex-wrap: wrap; padding: 20px 35px;}

}

