/* Account layout */
.section503 .layoutmiddle, .section595 .layoutmiddle, .section596 .layoutmiddle, .section597 .layoutmiddle, .section605 .layoutmiddle{display: flex; max-width: 1200px; margin: 0px auto 0px auto;}
.section503 .layoutleft, .section595 .layoutleft, .section596 .layoutleft, .section597 .layoutleft, .section605 .layoutleft{min-width: 120px; margin: 30px 20px 0 20px; }
.section503 .layoutleft .right-menu, .section595 .layoutleft .right-menu, .section596 .layoutleft .right-menu, .section597 .layoutleft .right-menu, .section605 .layoutleft .right-menu{display: none;}
.section503 .layoutleft .left-menu a, .section595 .layoutleft .left-menu a, .section596 .layoutleft .left-menu a, .section597 .layoutleft .left-menu a, .section605 .layoutleft .left-menu a{ font-size: 0.7rem; margin-bottom: 5px; font-weight: 500;}
.section503 .layoutright, .section595 .layoutright, .section596 .layoutright, .section597 .layoutright, .section605 .layoutright{min-width: 90px; margin: 0 20px;}

@media (max-width: 950px){
   .section597 .layoutmiddle{flex-direction: column;}
   .section597 .layoutleft{margin-top: 0;}
   .section597 .layoutleft_inner{display: flex; justify-content: space-between;}
   .section597 .layoutleft .right-menu{display: block;}
   .section597 .layoutright{display: none;}
}

@media (max-width: 750px){
   .section503 .layoutmiddle, .section595 .layoutmiddle, .section596 .layoutmiddle, .section597 .layoutmiddle, .section605 .layoutmiddle{flex-direction: column;}
   .section503 .layoutleft, .section595 .layoutleft, .section596 .layoutleft, .section597 .layoutleft, .section605 .layoutleft{margin-top: 0;}
   .section503 .layoutleft_inner, .section595 .layoutleft_inner, .section596 .layoutleft_inner, .section597 .layoutleft_inner, .section605 .layoutleft_inner{display: flex; justify-content: space-between;}
   .section503 .layoutleft .right-menu, .section595 .layoutleft .right-menu, .section596 .layoutleft .right-menu, .section597 .layoutleft .right-menu, .section605 .layoutleft .right-menu{display: block;}
   .section503 .layoutright, .section595 .layoutright, .section596 .layoutright, .section597 .layoutright, .section605 .layoutright{display: none;}
}


/* Toolbar */

.toolbar:has(div){ margin-bottom: 25px; min-height: 34px;}
.toolbar:not(:has(.toolbar_inner)){display: flex; justify-content: end; align-items: center;}
.toolbar h1{margin: 0;font-size: 1.55rem;}
.toolbar .links{ display: flex; gap:10px;}
.toolbar .links .connect_grey a,  .toolbar .links .message_grey a, .toolbar .links .lookbook_grey a,  .toolbar .links .appointments_grey a, .toolbar .links i{border: 1px solid white; background-color: var(--grey-font); color: var(--grey)}
.toolbar .links .connect_grey.connected, .toolbar .links .message_grey, .toolbar .links .lookbook_grey,  .toolbar .links .appointments_grey{display: none;}
.toolbar .links .connect_grey a:hover, .toolbar .links .message_grey a:hover, .toolbar .links .lookbook_grey a:hover, .toolbar .links .appointments_grey a:hover{background-color: var(--grey-font) !important;}
.toolbar .photo { display: none;}

/* .memb_userprofile .toolbar_inner {position: relative; display: flex; justify-content: center; flex-direction: row-reverse;}
.memb_userprofile .toolbar .links{position: absolute; right: 0; top: 6.5px;} */
.memb_userprofile .toolbar_inner {display: flex; flex-direction: column; align-items: center; text-align: center;}
.memb_userprofile .toolbar .links{align-self: end;}

@media (max-width: 850px){
   .memb_userprofile .toolbar_inner {gap:15px;}
}

.shop_purchaseorders .toolbar h2, .collections .toolbar h2, .memb_lookbookeditor .toolbar h2, .memb_userconnections .toolbar h2, .database_reports .sectiontitle, .shop_shopify h2{font-size:1.5rem; border-bottom: 1px solid black; padding-bottom: 5px; margin-bottom: 40px; max-width: 200px; width: 100%;}
.memb_lookbookeditor .toolbar h2{margin-bottom: 0;}
.shop_shopify h2{max-width: 250px;}


/* Social buttons */
.social .icons li { display: inline-block; width: 40px; height: 40px; cursor: pointer; margin: 5px 0px 0px 0px; background-repeat: no-repeat; }
.social .icons li.facebook { background-image: url(/images/KvHrNDg9jA2eX6DRFXTN.svg); }
.social .icons li.twitter { background-image: url(/images/r7cSKXtss2lkzg37m3Uk.svg); }
.social .icons li.instagram { background-image: url(/images/cRPSs9IcLzX0EqKm9N9l.svg); }
.social .icons li.linkedin { background-image: url(/images/PnbY8FSZa0CxeuQlX5WR.svg); }


/*********************************************************************************/
/* My account */
/*********************************************************************************/

.my-account .top { display:grid; grid-template-columns:90px auto 90px; align-items:baseline; gap:20px;}
.my-account .top h2 { grid-column:2; text-align:center; margin: 0; font-size: 1.5rem;}
.toplinks { grid-column:3; justify-self:end; display: flex; flex-direction: column;}
.toplinks a{font-size: 0.7rem;}
.toplinks>a{ font-weight: 600;}
.toplinks ul{margin-top: 10px;}
.toplinks ul li{line-height: 1.1;}

.my-account .links{margin-top: 25px; display: flex; flex-wrap: wrap; gap:15px 1%;}
.my-account .links li{width: 32.5%;}
.my-account .links li a{display: inline-block; width: 100%; min-height: 90px; border-radius: 10px; padding: 20px; background-color: white;  font-family: "EB Garamond", serif; }

@media (max-width: 600px){
   .my-account .top {grid-template-columns: auto 90px;}
   .my-account .top h2 { grid-column:1; text-align: start;}
   .toplinks { grid-column:2;}
   .my-account .links{gap: 15px 2%;}
   .my-account .links li{width: 49%;}
}

/*********************************************************************************/
/* Account settings  */
/*********************************************************************************/

.memb_profileeditor .accountsettings .formbuilder>.field_group { border-top: solid #7f7f7f 1px; padding: 20px 0; }
.memb_profileeditor .accountsettings .formbuilder>.field_group>.label {font-family: EBGaramondVariable; font-size: 1.2rem; padding: 0px 20px 10px 20px; }
.memb_profileeditor .accountsettings .formbuilder .field_section .label{ font-weight: 500; font-size: 0.85rem;}
.memb_profileeditor .accountsettings .field_group .input>.field{ padding: 10px 20px 10px 20px; }
.memb_profileeditor .accountsettings .field_section{ padding: 20px 0 0 20px !important;}

.memb_profileeditor .accountsettings input, .memb_profileeditor .accountsettings select { display: inline-block; }
.memb_profileeditor .accountsettings select, .memb_profileeditor .accountsettings input[type=text] { width: 100%; max-width: 460px; }
.memb_profileeditor .accountsettings .inactive input, .memb_profileeditor .accountsettings .inactive select { border: 0px; color: #7f7f7f; padding: 0px; background: none; }
.memb_profileeditor .accountsettings .field_checkbox label{font-size: 0.75rem;}
.memb_profileeditor .accountsettings .field_checkbox .label{float: unset; padding: 0;}
.memb_profileeditor .accountsettings input[type=checkbox] + label:before { content: ''; border: none; width: 47px; height: 20px; background-color: transparent; background-image: url(/images/p03AmpHYPdZDRriTFENl01b00k.png); box-shadow: none; cursor: pointer; margin: 0 10px -5px 0; }
.memb_profileeditor .accountsettings input[type=checkbox]:checked + label:before { background-color: transparent; background-image: url(/images/FJJpdDGXMc1luEAhN90w01b00k.png); }

.memb_profileeditor .accountsettings input[type=number] { width: 50px; }
.memb_profileeditor .accountsettings .input-group-addon { padding: 0 5px; display: inline-block;}

.memb_profileeditor .accountsettings .errors { padding: 0px 0px 20px 0px; }
.memb_profileeditor .accountsettings .success { padding: 0px 0px 20px 0px; }
.memb_profileeditor .accountsettings .field_readonly{font-size: 0.75rem;} 

.memb_profileeditor .accountsettings .general>.input{display: flex; gap:100px;}
.memb_profileeditor .accountsettings .basic, .memb_profileeditor .accountsettings .notify { width: 50%; padding: 0 !important;}
.memb_profileeditor .accountsettings .basic .field_text, .memb_profileeditor .accountsettings .basic .field_group { background-image: url(/images/synBWTM7ENSjDJUrZ89Q00d00e.png); background-position: top 10px right 20px; }
.memb_profileeditor .accountsettings .basic .field_text:hover, .memb_profileeditor .accountsettings .basic .field_group:hover { background-color: white; }
.memb_profileeditor .accountsettings .basic .field_password { padding: 5px 0px; }
.memb_profileeditor .accountsettings .basic .field_group.inactive .field_password { display: none; }

.memb_profileeditor .accountsettings .notify .field { display: block; }
.memb_profileeditor .accountsettings .notify .field_checkbox {padding: 10px 0 !important;}

.memb_profileeditor .accountsettings .delete{border: 2px solid  #B55252; margin-top: -10px;}
.memb_profileeditor .accountsettings .delete:hover{background-color: #B55252 !important;}

@media( max-width: 750px )
{
   .memb_profileeditor .accountsettings .general>.input{flex-direction: column; gap:0;}
   .memb_profileeditor .accountsettings .basic, .memb_profileeditor .accountsettings .notify { width: 100%; }
   .memb_profileeditor .accountsettings select, .memb_profileeditor .accountsettings input[type=text] {max-width: 700px;}

   .memb_profileeditor .accountsettings .field_group .input>.field { padding: 10px 10px;}
   .memb_profileeditor .accountsettings .formbuilder>.field_group>.label{ padding: 0px 0px 10px 10px;}
   .memb_profileeditor .accountsettings .field_section {padding: 20px 0 0 0 !important;}
}


/*********************************************************************************/
/*Brands page*/
/*********************************************************************************/

/* Collections section */

.memb_userprofile .feat_carousel .carousel { overflow: hidden; max-width: 1200px; height: calc(100vh - 250px);  position: relative; margin: 0 auto;}
.memb_userprofile .feat_carousel .carousel ul { width: 20000em; position: relative;}
.memb_userprofile .feat_carousel .carousel li {float: left;max-width: 1200px !important; width: 100%; height: calc(100vh - 250px); /* background-size: cover; border-radius: 14px !important; */ }
.memb_userprofile .feat_carousel .carousel li img{border-radius: 14px; max-height: 100%; height: 100%; width: 100%; object-fit: cover;}

.memb_userprofile .show { display: flex; flex-direction: column; padding-bottom: 50px;}
.memb_userprofile .show .projects{ margin-top: 50px; }

.memb_userprofile .show .project {margin-bottom: 40px; margin-top: 100px; width: 100%; max-width: 1200px;}
.memb_userprofile .show .project:first-child{margin-top: 0;}
.memb_userprofile .show .project .projectinfo{display: flex; gap:20px; width: 100%; margin-bottom: 40px;}
.memb_userprofile .show .project .projectinfo>div{width: 50%; padding-right: 20px;}
.memb_userprofile .show .project .projectinfo .cover{width: 50%; height: 290px; background-size: cover; border-radius: 14px;}
.memb_userprofile .show .project .projectinfo .name{font-family: EBGaramondVariable; font-size: 1.3rem; margin-bottom: 20px; text-transform:capitalize;}
.memb_userprofile .show .project .projectinfo .description{max-height: 245px; overflow-y: auto; position: relative;}
.memb_userprofile .show .project .projectinfo .description.has-overflow::after {content: "";position: sticky;bottom: 0;display: block;height: 30px;margin-top: -30px;background: linear-gradient( rgba(255,255,255,0), #F1F1F1);pointer-events: none;}


.memb_userprofile .show .project .viewall{ width: 100%; text-align: center;margin-top: 20px; text-decoration:underline; text-underline-offset: 2px;}

.memb_userprofile .show .projects .products ul.productsmore.hidden { display: none; }
/*.memb_userprofile .show .projects .products ul{display: flex; flex-wrap: wrap; align-items: stretch; gap: 15px;}
 .memb_userprofile .show .projects .product{ flex: 1 1 300px; max-width: 390px; width: 100%; position: relative;} */
.memb_userprofile .show .projects .products ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px;}
.memb_userprofile .show .projects .product{ width: 100%; position: relative;}

.memb_userprofile .show .projects .product img{display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background-color: white; border-radius: 14px; display: inline-block;transition: filter 0.3s ease;}
.memb_userprofile .show .projects .product .name { font-family: Geist; font-size: 1rem; word-wrap: break-word; margin-bottom: 10px;}
.memb_userprofile .show .projects .product .price-basket{display: flex; align-items: center; gap: 20px; }
.memb_userprofile .show .projects .product .price{ font-family: Geist; font-size: 1rem; font-weight: 600;}
.memb_userprofile .show .projects .product .product-inner { position: relative; overflow: hidden;}
.memb_userprofile .show .projects .product:hover .product-inner:has(.product-hover) .product-hover {opacity: 1;}
.memb_userprofile .show .projects .product:hover .product-inner:has(.product-hover) img{filter: blur(5px);}
.memb_userprofile .show .projects .product .product-hover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; white-space: nowrap; cursor: pointer; border-radius: 15px; transition: opacity 0.3s ease;}
.memb_userprofile .show .projects .product .product-hover .text { text-align: center; }
.memb_userprofile .show .projects .product .product-hover .text p {margin: 0; font-family: EBGaramondVariable; font-size: 0.82rem;}
.memb_userprofile .show .projects .product .button {  font-family: 'Geist', serif !important; }

.memb_userprofile .show .showmore { text-align: center;  }
.memb_userprofile .show .showmore a { text-decoration: underline; text-transform: uppercase; text-underline-offset: 2px;}


/* About section */

.memb_userprofile .tell{display: flex; flex-direction: column; gap:40px; padding-top: 50px;}
.memb_userprofile .tell .tell_inner{display: flex; gap:60px;}

.memb_userprofile .tell .left{width: 35%; display: flex; gap:20px;}
.memb_userprofile .tell .left .photo{width: 150px;}
.memb_userprofile .tell .left .photo img { width:100%; min-width: 150px; height: auto; border-radius: 14px;}
.memb_userprofile .tell .left .contact>div{font-size: 1rem; padding-bottom: 4px;}
.memb_userprofile .tell .left .contact a{ text-decoration: underline; text-underline-offset: 2px;}
.memb_userprofile .tell .left .abuse a{margin-top: 10px; font-size: 0.75rem; display: inline-block;}

.memb_userprofile .tell .right{width: 55%;max-width: 690px;}
.memb_userprofile .tell .right .biog{font-size: 1rem; font-family:  "EB Garamond"; }
.memb_userprofile .tell .right .biog-toggle{font-size: 1rem; font-family:  "EB Garamond"; text-decoration: underline;text-underline-offset: 2px; margin-top:20px; display: inline-block;}
.memb_userprofile .tell .right .statement .expandtitle{font-family: Geist; font-size: 0.82rem; font-weight: 500; display: flex; flex-direction: row-reverse; justify-content: space-between; border-bottom: 1px solid black; padding-bottom: 5px; width: 220px;}
.memb_userprofile .tell .right .statement .extrellist{flex-direction: column; gap:2px;}
.memb_userprofile .tell .right .statement .extrellist li{all:unset; font-size: 0.7rem;}

@media (max-width: 1000px)
{
   .memb_userprofile .tell .tell_inner{flex-direction: column;}
   .memb_userprofile .tell .left, .memb_userprofile .tell .right{width: 100%;}
}

@media (max-width: 600px)
{
   .memb_userprofile .show .projects .product{flex: unset; max-width: 100%;}
   
   .memb_userprofile .tell .left .photo img{width: 100px;}
}



/* action Preview tell and action Preview show*/
.memb_userprofile .toolbar .preview h1 {font-size: 1.875rem; margin: 2rem 0; }
.memb_userprofile .toolbar .preview .buttons, .memb_userprofile .preview_footer .buttons{display: flex; flex-wrap: wrap; align-items: center; gap:20px;}
.memb_userprofile .preview_footer { margin: 50px 0px 0px 0px; border-top: solid #7f7f7f 1px; padding: 20px 0px 0px 0px;}


/* action Create Purchase Order */
.memb_userprofile .createpo-header{display: flex; align-items: center; gap:40px; width: 100%; margin-bottom: 40px;}
.memb_userprofile .createpo .searchstore{width: 40%;}
.memb_userprofile .createpo .searchstore input{width: 100%;}
.memb_userprofile .createpo .searchstore i { position: absolute; margin: 0px 0px 0px -26px;font-size: 14px; line-height: 35px; color: #7f7f7f; }

.memb_userprofile .createpo>ul { display: flex; flex-wrap: wrap; justify-content: center;gap:10px}
.memb_userprofile .createpo>ul li {min-height: 230px; flex: 1 1 214px; padding: 0 8px 25px 8px; display: flex; flex-direction: column; align-items: stretch; }
.memb_userprofile .createpo>ul li .image {height: 160px !important;background-size: cover;background-position: center center;border-radius: 10%; background-color: white;} 
.memb_userprofile .createpo>ul li .name { padding: 10px 0px 5px 0; font-family: GeistVariable; font-size: 0.88rem; }
.memb_userprofile .createpo>ul li .category{display: none;}
.memb_userprofile .createpo>ul li .location { font-size: 0.75rem; border-top: solid black 1px; padding: 8px 0px 0px 0px; }

.memb_userprofile .createpo .linesheets h1{font-size: 1.5rem;margin: 1.75rem 0 0.875rem;}


@media (max-width: 650px)
{
  .memb_userprofile .createpo-header{flex-direction: column; gap:15px; align-items: start;}
  .memb_userprofile .createpo .searchstore{width: 100%;}
}


/* action Linesheets */
.memb_userprofile .linesheets{display: flex; flex-direction: column;}
.memb_userprofile .linesheets ul { display: flex; flex-wrap: wrap;}
.memb_userprofile .linesheets li {width: 20%; padding: 10px;}
.memb_userprofile .linesheets li .image { width: 100%;aspect-ratio: 1; background-size: cover; border-radius: 14px;}
.memb_userprofile .linesheets li .name { padding: 10px 0px 0px 0px; font-family: GeistVariable; font-size: 1rem; }
.memb_userprofile .linesheets li:hover { cursor: pointer; }
 
@media (max-width: 800px){
   .memb_userprofile .linesheets li {width: 33%; }
}

@media (max-width: 500px){
   .memb_userprofile .linesheets li {width: 50%; }
}


/* Linesheet products */
.memb_lookbookeditor .preview_lookbook .landed{font-size: 0.85rem; margin-bottom: 10px;}
.memb_userprofile>.products ul, .memb_lookbookeditor .preview_lookbook ul { padding: 40px 0px ; }
.memb_userprofile>.products li, .memb_lookbookeditor .preview_lookbook li {display: flex; align-items: center; gap:15px; padding: 15px; border-bottom: solid #b7b7b7 1px; padding: 15px 10px;}
.memb_userprofile>.products li .image, .memb_lookbookeditor .preview_lookbook li .image { width: 80px; aspect-ratio: 1; background-size: cover; background-position: center center; border-radius: 8px;}
.memb_userprofile>.products li .details, .memb_lookbookeditor .preview_lookbook li .details{flex:1; }
.memb_userprofile>.products li .code, .memb_lookbookeditor .preview_lookbook li .code { font-size: 0.75rem; }
.memb_userprofile>.products li .name, .memb_lookbookeditor .preview_lookbook li .name {font-size: 0.85rem; padding: 5px 0px 0px 0px; font-weight: 500;}
.memb_userprofile>.products li .metal, .memb_lookbookeditor .preview_lookbook li .metal { font-size: 0.75rem; padding: 5px 0px 0px 0px; }
.memb_userprofile>.products li .stones, .memb_lookbookeditor .preview_lookbook li .stones { font-size: 0.75rem; padding: 5px 0px 0px 0px; }
.memb_userprofile>.products li .price, .memb_lookbookeditor .preview_lookbook li .price { display: flex; flex-direction: column; align-items: end; gap:5px; }
.memb_userprofile>.products li .price .actual, .memb_lookbookeditor .preview_lookbook li .price .actual{ font-size: 0.85rem }
.memb_userprofile>.products li .price .rrp, .memb_lookbookeditor .preview_lookbook li .price .rrp { font-size: 0.85rem }


@media( max-width: 600px )
{
   .memb_userprofile>.products li, .memb_lookbookeditor .preview_lookbook li {flex-direction: column; align-items: start; padding: 15px 0; position: relative;}
   .memb_userprofile>.products li .image, .memb_lookbookeditor .preview_lookbook li .image {align-self: center;}
   .memb_userprofile>.products li .price, .memb_lookbookeditor .preview_lookbook li .price{align-items: start;}
   .memb_userprofile>.products li .quantity{position: absolute; right:0; bottom: 15px;}

}


/*********************************************************************************/
/* My Orders */
/*********************************************************************************/

.shop_purchaseorders {font-size: 0.85rem;}
.shop_purchaseorders .section{font-weight: 500; font-family: "Geist"; font-size: 1.1rem; color: black !important; }
.shop_purchaseorders .description{font-size: 0.85rem; padding-bottom: 0;}
.shop_purchaseorders .helptext { clear: both; padding: 5px 0px 0px 0px; color: grey; font-size: 0.8rem;}
.shop_purchaseorders .buttons{display: flex; flex-wrap: wrap;gap:5px;}
.shop_purchaseorders button[type=submit]{margin-right: 10px;}

.shop_purchaseorders table { width: 100%; margin: 20px 0; font-size: 0.85rem;}
.shop_purchaseorders table th, .shop_purchaseorders table td{ text-align: left; padding: 15px 10px; }
.shop_purchaseorders table th{font-size: 0.8rem;}
.shop_purchaseorders table td, .shop_purchaseorders table tfoot th{ border-top: solid #b7b7b7 1px;}
.shop_purchaseorders input[type=number]{height: 35px; max-width: 100px;}
.shop_purchaseorders .checkbox label{font-size: 0.85rem;}

.shop_purchaseorders .formbuilder{display: flex; }
.shop_purchaseorders .shipment .formbuilder, .shop_purchaseorders .invoice .formbuilder{display: block; padding-bottom: 30px;}
.shop_purchaseorders .formbuilder .field { padding: 0px 0px 10px 0px;}
.shop_purchaseorders .formbuilder input, .shop_purchaseorders .formbuilder textarea, .shop_purchaseorders .formbuilder select{width: 100% !important;}
.shop_purchaseorders .edit .formbuilder .left { width: 50%; padding: 0px 60px 0px 0px;}
.shop_purchaseorders .edit .formbuilder .left .field_group .input{display: flex; gap:20px;}
.shop_purchaseorders .edit .formbuilder .left .field_group .input .field_date{display: flex; align-items: center; gap:10px;}
.shop_purchaseorders .edit .formbuilder .right { width: 50%; border-left: solid #b7b7b7 1px; padding: 0px 0px 0px 60px; }
.shop_purchaseorders .edit div.basket { padding: 20px 0px; }


.shop_purchaseorders table.basket td{vertical-align: middle;}
.shop_purchaseorders table.basket td.item { display: grid; grid-template-columns: auto 1fr;
   grid-template-areas:
    "image code"
    "image name"
    "image notes";
}
.shop_purchaseorders table.basket .item>div{display: flex; align-items: center;}
.shop_purchaseorders table.basket .item .image{grid-area: image; width: 80px; aspect-ratio: 1; margin-right: 15px; border-radius: 8px; background-size: cover; background-position: center center;}
.shop_purchaseorders table.basket .item .code{grid-area: code; font-size: 0.75rem;}
.shop_purchaseorders table.basket .item .name{grid-area: name; font-weight: 500; margin-top: 5px;}
.shop_purchaseorders table.basket .item .notes{grid-area: notes; font-size: 0.75rem; margin-top: 5px;}
.shop_purchaseorders table.basket .item .notes input[type=text]{height: 26px;}
.shop_purchaseorders table.basket .price { width: 15%; text-align: right; }
.shop_purchaseorders table.basket .price input { text-align: right; }
.shop_purchaseorders table.basket .quantity { width: 15%; text-align: right; }
.shop_purchaseorders table.basket .total { width: 15%; text-align: right; }


@media( max-width: 600px ) {
   .shop_purchaseorders .formbuilder{flex-direction: column;}
   .shop_purchaseorders .edit .formbuilder .left, .shop_purchaseorders .edit .formbuilder .right { width: 100%; padding: 0; border-left: none;}

   .shop_purchaseorders table.basket td.item { display: grid; grid-template-columns: 1fr;;
   grid-template-areas:
    "image"
    "code"
    "name"
    "notes";
   }


  .shop_purchaseorders table.basket thead {display: none;}
  .shop_purchaseorders table.basket tbody tr {display: flex; flex-wrap: wrap; gap:10px;  border-top: solid #b7b7b7 1px;padding: 15px 0px;}
  .shop_purchaseorders table.basket tbody td {display: block; border-top: none; padding: 0;}

  .shop_purchaseorders table.basket tr>td {display: flex; flex-direction: column; min-width: 70px; }
  .shop_purchaseorders table.basket td.item {margin-bottom: 10px; width: 100%;}
  .shop_purchaseorders table.basket td.item .image{margin: 0 0 15px 0; }
  .shop_purchaseorders table.basket td.price, .shop_purchaseorders table.basket td.quantity, .shop_purchaseorders table.basket td.total {flex: 1;text-align: right !important; width: auto !important;}
  .shop_purchaseorders .edit table.basket td.total::before  {padding-bottom: 7px;}
  .shop_purchaseorders table.basket tr td::before {content: attr(data-label);font-size: 0.72rem; margin-bottom: 5px; text-transform:capitalize; text-align: right; color: var(--dark-grey)}
  .shop_purchaseorders table.basket td.item::before{display: none;}
  
  .shop_purchaseorders input[type=number]{ max-width: unset;} 
  .shop_purchaseorders table.basket .quantity select{text-align: end;}

  .shop_purchaseorders table.basket tfoot tr {display: flex; gap:10px; border-top: solid #b7b7b7 1px;}
  .shop_purchaseorders table tfoot th{border: none; flex:1; width: auto !important;padding: 15px 0;}

  .shop_purchaseorders table.basket td.item::before { display: none; }
} 

.shop_purchaseorders .view{display: flex; flex-direction: column; }
.shop_purchaseorders .view .documents { align-self: end; margin-bottom: 20px; min-width: 300px;}
.shop_purchaseorders .view .documents h3{margin-top: 0px; }
.shop_purchaseorders .view .documents .buttons{display: flex; flex-wrap: wrap; gap: 20px 5px;}
.shop_purchaseorders .view .documents a{background-color: var(--grey-button); color: black;font-family: EBGaramondVariable;font-size: 0.75rem;text-align: center; padding: 9px 15px;border: none;border-radius: 8px;cursor: pointer;transition: all 0.3s ease-in;}
.shop_purchaseorders .view .documents a:hover{background-color: var(--grey-button-hover)}
.shop_purchaseorders .view .header {margin-top: 60px; font-size: 0.85rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: start;
   grid-template-areas:
    "details supplier store"
    "payment payment payment"
    "bank bank bank";
}
.shop_purchaseorders .view .header .details { grid-area: details; }
.shop_purchaseorders .view .header .supplier { grid-area: supplier; padding-left: 80px; position: relative; }
.shop_purchaseorders .view .header .store { grid-area: store; padding-left: 80px; position: relative; }
.shop_purchaseorders .view .header .paymentterms { grid-area: payment; }
.shop_purchaseorders .view .header .bankdetails { grid-area: bank; }
.shop_purchaseorders .view .header .supplierlogo { grid-area: supplier; justify-self: start; align-self: start; position: relative; }
.shop_purchaseorders .view .header .storelogo { grid-area: store; justify-self: start; align-self: start; position: relative; }
.shop_purchaseorders .view .header .supplierlogo img, .header .storelogo img  { width: 70px; height: auto; border-radius: 8px; }


@media (max-width: 1000px) { 

   .shop_purchaseorders .view .documents {align-self: start; margin: 30px 0 20px 0;}
   .shop_purchaseorders .view  .header {margin-top: 40px; grid-template-columns: 1fr; grid-template-areas: "details" "supplier" "store" "payment" "bank"; gap:40px;} 
}

.shop_purchaseorders .index table {background-color: white; border-radius: 14px;}
.shop_purchaseorders .index table .reference { width: 10%; }
.shop_purchaseorders .index table .ponumber { width: 15%; }
.shop_purchaseorders .index table .created { width: 16%; }
.shop_purchaseorders .index table .brand { width: 22%; }
.shop_purchaseorders .index table .store { width: 22%; }
.shop_purchaseorders .index table .total { width: 15%; text-align: right; }
.shop_purchaseorders .index table tbody tr:hover, .database_reports .index table tbody tr:hover  { background: var(--grey-button-hover); cursor: pointer; }

@media (max-width: 700px) {
  .shop_purchaseorders .index table, .shop_purchaseorders .index thead, .shop_purchaseorders .index tbody, .shop_purchaseorders .index th, .shop_purchaseorders .index td, .shop_purchaseorders .index tr { display: block; width: 100%; }
  .shop_purchaseorders .index thead { display: none; }
  .shop_purchaseorders .index tr { border-top: 1px solid #b7b7b7; padding: 10px; }
  .shop_purchaseorders .index tr:first-of-type{border: none;}
  .shop_purchaseorders .index td { display: flex; justify-content: space-between; padding: 4px 0; width: 100% !important; border: none; }
  .shop_purchaseorders .index td::before { content: attr(class);  text-transform: capitalize; font-size: 0.8rem;}
  .shop_purchaseorders .index table { width: 100%; table-layout: fixed; }
  .shop_purchaseorders .index table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.shop_purchaseorders .invoice .amountbtn{margin-bottom: 10px;}
.shop_purchaseorders .invoice .amountbtn.active{ background-color: black; color: white;}


/*********************************************************************************/
/* Reports*/
/*********************************************************************************/

.database_reports .sectiontitle{margin-bottom: 20px !important;}
.database_reports .pageheader, .database_reports .nav_dhtmlpopup .toggle{ display: none; }

.database_reports .nav_dhtmlpopup {display: grid;grid-template-columns: repeat(3, 130px);column-gap: 0; }
.database_reports .nav_dhtmlpopup div {background-color: unset !important;}
.database_reports .nav_dhtmlpopup div h3{margin: 0 0 20px 0;}
.database_reports .nav_dhtmlpopup div h3 a{font-weight: 500; font-family: "Geist"; font-size: 1rem; color: var(--dark-grey) !important;}
.database_reports .nav_dhtmlpopup div.selected1 a{color: black !important;}
.database_reports .nav_dhtmlpopup div:hover a{ color: black !important;}

.database_reports .quickfilters{display: flex; flex-wrap: wrap; gap: 5px;}
.database_reports .quickfilters .button{padding: 9px 30px !important;}
.database_reports .quickfilters .active{background-color: #7F7F7F; color: white;}

.database_reports .filters {margin: 40px 0px; display:block;  max-width: 400px;}
.database_reports .filters label { clear: both; font-size: 0.75rem; width: 100px; display:inline-block; line-height: 40px; height: 40px; }
.database_reports .filters input[type=text], .database_reports .filters select{ width: calc(100% - 100px);}
.database_reports .filters button {clear: left; margin: 20px 0px 0px 0px; display: block; }

.database_reports .buttons {margin: 40px 0px; float: right;}
.database_reports .dataTables_filter, .database_reports .dataTables_length, .database_reports .dataTables_info, .database_reports .pagination{font-size: 0.85rem; margin-bottom: 20px;}
.database_reports .form-select-sm {width: 80px !important;}
.database_reports .paginate_button:hover{  background: unset !important; }
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before { background-color:  #ffffff  !important; color: #000000 !important; }

.database_reports table { width: 100% !important; font-size: 0.85rem; }
.database_reports table th{font-size: 0.8rem; font-weight: 400 !important; padding-top: 20px;}
.database_reports table th, .database_reports table td { text-align: left; border-bottom: solid #b7b7b7 1px; background-color:var(--background) !important; box-shadow: unset !important; padding: 15px 10px !important; vertical-align: middle; }
.database_reports .image { width: 80px; height: 80px; border-radius: 8px; background-size: cover; background-color: #ffffff;}

.database_reports .back { margin-bottom: 20px; display:inline-block; }


@media screen and (max-width: 767px) {
    div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
        text-align: start !important;
    }
}

@media( max-width: 500px ){
   .database_reports .nav_dhtmlpopup{grid-template-columns: repeat(3, 90px);}
   .database_reports .quickfilters input[type=button]{width: 100%;}
}