/* Κομματι με λιστες στα αριστερα */
html.account-lists .col-md-10{
    padding: 0 35px;
}
.list-group a.new{
    background-color: transparent;
    border-radius: 0px!important;
    padding: 14px 60px!important;
    font-size: 14px!important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 500;
    color: #3E3E3E!important;
    line-height: 18px!important;
    text-align: center;
    border-color: #3E3E3E;
    border: 1px solid #3E3E3E!important;
    margin-bottom: 25px!important;
    font-weight: 300;
}
.list-group a.new:hover{
    background-color: #3E3E3E;
    font-weight: 300!important;
    text-shadow: unset;
    color: white!important;
}
#account-lists .list-group span{
    font-size: 16px;
    color: black;
    line-height: 25px;
    font-weight: 600;
    padding-bottom: 15px;
}
#account-lists .list-group a{
    font-size: 14px;
    color: black;
    line-height: 25px;
    border: unset;
    margin: unset;
    padding: unset;
    border-bottom: 1px solid #D8D8D8;
    padding: 3px 0;
    border-radius: 0;
}
#account-lists .list-group {
    display: flex;
    flex-direction: column;
}
/* header table με τα products */
#account-lists .header-table{
    padding-bottom: 35px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}
#account-lists .row.first{
    padding-bottom: 25px;
}
#account-lists .mass-add button{
    background-color: #3E3E3E;
    border-radius: 0px;
    border-color: #3E3E3E;
    padding: 14px 60px;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 500;
    color: white;
    line-height: 18px;
}
#account-lists .mass-add button:hover{
    background-color: transparent;
    color: #3E3E3E;
}
#account-lists .min,#account-lists .sum{
    display: flex;
    align-items: center;
    font-size: 15px;
    line-height: 18px;
    gap: 25px;
}
#account-lists .min b, #account-lists .sum b{
    font-size: 20px;
}
/* add new row */
#account-lists .add-new-row{
    cursor: pointer;
    width: 100%;
    background-color: #3E3E3E;
    padding: 20px 0;
    display: flex;
    gap: 30px;
    justify-content: center;
    color: white;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    align-items: center;
    margin-bottom: 30px;
}
/* table with products */
#account-lists input[type="checkbox"]{
    accent-color: #00A550;
    width: 20px;
    height: 20px;
}
#account-lists .stepper_section {
    display: flex;
    align-items: center;

    justify-content: center;

}
#account-lists .stepper_section .stepper_buttons {
    display: flex;
    align-items: center;
}
#account-lists .stepper_section label {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px;
    display: block;
    width: 170px;
}
#account-lists #input-quantity {
    height: 45px;
    width: 45px;
    min-width: 45px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: none !important;
    border-radius: 0px !important;
    text-align: center !important;
    padding: 0px;
    -moz-appearance: textfield;
}
#account-lists #input-quantity::-webkit-outer-spin-button,#account-lists #input-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#account-lists button.ctm-stepper {
    width: 45px;
    height: 45px;
    border-radius: 0px;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;
    background: none;
}
#account-lists button.ctm-stepper::before {
    font-size: 25px;
    font-weight: bold;
    display: block;
    background: none !important;
}
#account-lists button.ctm-stepper:first-of-type:before {
    content: "-";
    color: black;
    transform: scaleX(1.5);
}
#account-lists button.ctm-stepper:last-of-type:before {
    content: "+";
    color: black;
}
#account-lists .bottom-button{
    display: flex;
    justify-content: space-between;
} 
#account-lists .bottom-button .submit input{
    background-color: transparent;
    border-radius: 0px;
    border-color: #3E3E3E;
    padding: 14px 60px;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 500;
    color: black;
    line-height: 18px;
}
#account-lists .bottom-button .submit input:hover{
    background-color: #3E3E3E;
    color: white;
}
#account-lists td,#account-lists table{
    border:unset
}
#account-lists thead{
    border-bottom: 2px solid var(--accent2);
}
#account-lists tbody td{
    border-bottom:1px solid #D8D8D8;
}
#account-lists .live-search-div-list{
    position: absolute;
    display: block;
    width: 100%;
    background: white;
    padding: 10px;
    max-height: 200px;
    overflow-y: scroll;
}
#account-lists .live-search-div-list ul{
    padding: 0;
}
#account-lists .live-search-div-list li{
    list-style: none;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid #D8D8D8;
    padding: 10px;
}

#account-lists input[name='title_list']{
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0.8px;
    font-weight: 400;
    width: 350px;
    outline: unset;
    border: unset;
    border-bottom:1px solid #3E3E3E ;
}
#account-lists input[name='title_list']:focus-visible{
    outline: unset;
    border-bottom:1px solid #3E3E3E ;
}
#account-lists td .price{
    display: flex;
    gap: 5px;
    flex-direction: column;
}
 #account-lists tbody td > *{
    height: 65px;
} 
#account-lists tbody td.remove div,
#account-lists tbody td.price-disc div,
#account-lists tbody td.price-final div,
#account-lists tbody td.price-b2b div,
#account-lists tbody td.quantity div{
    display: flex;
    align-items: center;
    justify-content: center;
}
#account-lists tbody td.checkboxes div{
    display: flex;
    align-items: center;
    justify-content: right;
}
#account-lists .model-input input{
    box-shadow: unset;
    border-radius: 0;
    background-color: #f3f3f3;
    color: black;
    border:none;
}
#account-lists .table-responsive{
    padding-bottom: 150px;

}
#account-lists .search-cont-model{
    width: 100%;
    position: relative;
}
#account-lists  .model-input{
    padding-top: 20px;
}
#account-lists .table-hover>tbody>tr:hover{
    background-color: unset;
}
#account-lists thead td{
    font-size: 14px;
    color: black;
    font-weight: 600;
}

#account-lists input::-webkit-input-placeholder { /* Edge */
    color: black;
}
#account-lists input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: black;
}
#account-lists input::placeholder {
    color: black;
}
#account-lists .bottom-extra-info{
    display: flex;
    padding: 40px 30px;
    justify-content: space-between;
    background-color: #f2732317;
    margin-bottom: 30px;
}
#account-lists .remain{
    color: #00A550;
}
#account-lists.container{
    max-width: 1650px;
}


#account-lists{
    width: calc(100% - var(--menuWidth));
  margin-left: auto;
  margin-right: 0px;
  padding-right: var(--default_padding);
  padding-left: var(--default_padding);
  transition: all 0.4s;
}
html.account-lists .breadcrumb {
  display: block !important;
  margin-left: 0px !important;
  margin-bottom: 0px;
}


/*    -->                                                                                                                               RESPONSIVE > EXPRESS ORDER
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
@media(max-width: 1024px) {

  #account-lists .row.second {
    display: flex !important;
    flex-direction: column !important;
  }

  #account-lists .row.second>div {
    width: 100%
  }

  html.account-lists .col-md-10 {
    padding-left: 0px;
  }

}

@media(max-width: 768px) {
  #account-lists .add-new-row {
    margin-top: 20px;
  }

  html.account-lists .col-md-10 {
    padding-left: 0px !important;
  }
}


/*    -->                                                                    RESPONSIVE > EXPRESS ORDER > BOTTOM PANEL                         
[2]   =========================================================================================================== */

@media(max-width: 768px) {
  html.account-lists {
    padding-bottom: 60px !important;
  }

  #account-lists .bottom-button {
    z-index: 1;
    position: relative;
  }

  html.account-lists .bottom-extra-info {
    height: 0px !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0px !important;
  }
}

/*    -->               RESPONSIVE > EXPRESS ORDER > BOTTOM PANEL > SUM                      
[3]   ------------------------------------------------------------- */
@media(max-width: 768px) {


  #account-lists .sum {
    height: 60px !important;
    box-shadow: 0 -2px 17px 2px rgba(0, 0, 0, .17) !important;
    padding: 0px 15px !important;
    width: 55% !important;
    position: fixed !important;
    bottom: 0px !important;
    background: white !important;
    left: 0px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    justify-content: center !important;
    z-index: 2 !important;
    transition: all .2s !important;
    text-align: center !important;
  }

  #account-lists .sum span {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  #account-lists .sum b {
    font-size: 22px !important;

  }
}

/*    -->            RESPONSIVE > EXPRESS ORDER > BOTTOM PANEL  > BUTTON                     
[3]   ------------------------------------------------------------- */

@media(max-width: 768px) {

  #account-lists .mass-add button {
    position: fixed !important;
    height: 60px !important;
    bottom: 0px !important;
    right: 0px !important;
    width: 45% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: white !important;
    line-height: 1 !important;
    box-shadow: 0 -2px 17px 2px rgba(0, 0, 0, .17) !important;
    transition: all .2s !important;
    padding: 0px 15px !important;
    white-space: normal !important;
    z-index: 2;
  }
}

/*    -->                                                                       RESPONSIVE > EXPRESS ORDER > LIST NAME                         
[2]   =========================================================================================================== */
@media(min-width: 1024px) {
        .row.second .left{
        width: var(--menuWidth);
      position: fixed;
      top: var(--menuHeight);
      left: 0px;
      z-index: 5;
      height: calc(100vh - var(--menuHeight));
      overflow: auto;
      background: #fff;
      display: flex;
      padding:25px;
      flex-direction: column;
      box-shadow: 5px 2px 21px 0 rgba(112, 112, 112, 0.23);
    }
}
@media(min-width: 768px) {
        .onlymobile{
        display:none;
    }

}
@media(max-width: 768px) {
    
    #account-lists .row.first{
        padding-top:25px;
    }

  #account-lists .first:before,
  #account-lists .first:after {
    display: none !Important;
  }

  #account-lists input[name="title_list"] {
    font-size: 18px !important;
    font-weight: 600 !important;
    max-width: 100% !important;
    letter-spacing: normal !important;
    margin-right: auto !important;
    margin-left: 0px !important;
    max-width: calc(100vw - 30px) !important;
    color: black !important;

  }
}





/*    -->                                                                  RESPONSIVE > EXPRESS ORDER > NEW ORDER                         
[2]   =========================================================================================================== */
@media(max-width: 768px) {
  #account-lists .list-group a.new {
    padding: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: unset !important;
    line-height: 1 !important;
    height: 50px !important;
    transition: all .12s;
  }
}


/*    -->                                                              RESPONSIVE > EXPRESS ORDER > ADD PRODUCT BUTTON                         
[2]   =========================================================================================================== */

@media(max-width: 768px) {
  #account-lists .add-new-row {
    gap: 10px;
    padding: 20px 10px !important;
  }

  #account-lists .add-new-row span {
    display: flex !important;

  }


}

/*    -->                                                                RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION                         
[2]   =========================================================================================================== */


@media(max-width: 768px) {

  #account-lists .table-responsive {
    padding-bottom: 0px !important;
  }

  #account-lists #product-table {
    border: none !important;
  }

  #account-lists .second .table-responsive {
    border: none !important
  }

  #account-lists #product-table thead {
    display: none !important;
  }

  #account-lists #product-table tbody tr {
    width: calc(100vw - 30px) !important;
    border: 1px solid #D0D0D0 !important;
    padding: 0px 0px !important;
    margin-bottom: 20px !important;
    background: none !important;
    gap: 10px 0px !important;
    padding: 10px 10px !important;
    display: grid !important;
    grid-template-areas:
      "checkbox checkbox image image remove remove quantity quantity quantity quantity quantity quantity"
      "title title title title title title title title title title title title"
      "price-b2b price-b2b price-b2b price-b2b  sale sale sale sale price-final price-final price-final price-final"
      "tax-rate tax-rate tax-rate tax-rate tax-rate tax-rate price-special price-special price-special price-special price-special price-special" !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  #account-lists tbody td>* {
    height: unset !important;
  }

  #account-lists #product-table tbody tr td {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0px !important;
    border: none !important;
    font-size: 16px !important;
  }

  #account-lists #product-table tr>td:before {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1 !important;
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > CHECKBOX                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.checkboxes {
    grid-area: checkbox !important;
  }

  #account-lists #product-table tbody tr td.checkboxes input {
    margin: 0px !important;
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > IMAGE                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.image {
    grid-area: image !important;
    min-height: 85px !important;
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > REMOVE                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.remove {
    grid-area: remove !important;
  }

  #account-lists #product-table tbody tr td.remove img {
    opacity: .4 !important;
    height: 23px !important;
    width: auto !important;
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > STEPPER                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.quantity {
    grid-area: quantity !important;
    justify-content: flex-end !important
  }

  #account-lists button.ctm-stepper {
    width: 20px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #account-lists button.ctm-stepper:before {
    font-size: 20px !important;
  }

  #account-lists #product-table tbody tr td.quantity input {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
    padding: 0px !important;
    font-size: 13.5px !important
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > TITLE                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.model-input {
    grid-area: title !important;
  }

  #account-lists #product-table tbody tr td.model-input>div {
    width: 100% !important;
    min-width: 100% !important;
  }

  #account-lists #product-table tbody tr td.model-input>div>input {
    text-align: center !important;
    color: black !important;
    font-size: 16px !important;
    height: 100% !important;
    width: 100% !important;


    line-height: 26px !important;

    height: 70px !important;
    max-width: 100% !important;
    white-space: normal !important;
    white-space: normal !important;
    overflow-wrap: break-word !important
  }

  #account-lists #product-table tbody tr td.model-input .live-search-div-list {
    border: 1px solid #bbb !important;
    background: white !important;
    z-index: 2 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3) !important;
    white-space: normal !important
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > PRICE B2B                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.price-b2b {
    grid-area: price-b2b ! important;
    border-bottom: none ! important;
    flex-direction: column ! important;
    justify-content: flex-start !important;
    align-items: center ! important;
    text-align: center !important;
  }

  #account-lists #product-table tbody tr td.price-b2b .price {
    font-weight: 600 ! important;
  }

  #account-lists #product-table tbody tr td.price-b2b:before {
    /*content: "Χονδρική τιμή" ! important;*/
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > SALE                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.price-disc {
    grid-area: sale !important;
    border-bottom: none ! important;
    flex-direction: column ! important;
    justify-content: flex-start !important
  }

  #account-lists #product-table tbody tr td.price-disc .special-percent {
    font-weight: 600 ! important;
  }

  #account-lists #product-table tbody tr td.price-disc:before {
    /*content: "Έκπτωση";*/
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > PRICE FINAL                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.price-final {
    grid-area: price-final !important;
    border-bottom: none !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: flex-start !important;
  }

  #account-lists #product-table tbody tr td.price-final .price {
    font-weight: 600 !important;
  }

  #account-lists #product-table tbody tr td.price-final:before {
    /*content: "Σύνολο"*/
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > TAX RATE                                 
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.tax-rate {
    grid-area: tax-rate !important;
    border-bottom: none !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: flex-start !important;
  }

  #account-lists #product-table tbody tr td.tax-rate .price {
    font-weight: 600 !important;
  }

  #account-lists #product-table tbody tr td.tax-rate:before {
    /*content: "Φ.Π.Α. είδους"*/
  }

  /*    -->          RESPONSIVE > EXPRESS ORDER > PRODUCTS SECTION > ΤΕΛΙΚΗ ΤΙΜΗ                               
  [3]   ------------------------------------------------------------- */

  #account-lists #product-table tbody tr td.price-special {
    grid-area: price-special !important;
    border-bottom: none !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: flex-start !important;
  }

  #account-lists #product-table tbody tr td.price-special .price {
    font-weight: 600 !important;
  }

  #account-lists #product-table tbody tr td.price-special:before {
    /*content: "Τελική τιμή"*/
  }

}

/* @media(max-width: 350px) {
  #account-lists #product-table tbody tr {
    grid-template-areas:
      "checkbox image image image image remove quantity quantity quantity quantity quantity quantity"
      "title title title title title title title title title title title title"
      "price-b2b price-b2b price-b2b price-b2b  sale sale sale sale price-final price-final price-final price-final" !important;
  }
} */

/*    -->                                                                RESPONSIVE > EXPRESS ORDER > SAVE ORDER BUTTON                     
[2]   =========================================================================================================== */

@media(max-width: 768px) {
    
    #account-lists .table-responsive{
        overflow:unset!important;
    }

  #account-lists .bottom-button,
  #account-lists .bottom-button .submit,
  #account-lists .bottom-button .submit input {
    width: 100% !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    height: 50px !important;
    margin-top: 5px !important;
    display: block !important;
  }

}
