/* BA components. Based on Bootstrap 5.3. Jan 2023. */
/*	
	1.	main-navigation
	2.	project-status
	3.	panels
	5.	section-header
	6.	modals
	7.	pagination
	9.	tabs
	12.	tables
	21. tags-listing
*/



/* ************************* */
/* 1. MAIN NAVIGATION		 */
/* ************************* */

/* navbar */
#header{height:var(--header-height);}

#header .navbar{ position: fixed; top:0px; left:0; width:100vw; padding:0; background:#fff; z-index: 1030; transition:box-shadow 0.8s ease;}
.navbar-brand{width:6.25rem; padding:0; flex:none; margin:0.25rem 0; transition:width 0.8s ease; }
.navbar-brand:focus{outline:0;}
.navbar-brand img{width:100%;}

#header .navbar.affix{box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);}
.affix .navbar-brand{width:3rem;}

/*navigation */
#navigation{justify-content: flex-end;}
#navigation > .inner-wrap{height:var(--header-height); top:0; flex:none; display: flex; flex-direction: column-reverse; justify-content: center; align-items: flex-end; transition:height 0.8s ease; }
.affix #navigation > .inner-wrap{height:var(--header-height-sticky);}

.navbar-nav .placeholder-item {cursor: default;}
.navbar-nav li{display: flex; align-items: center;}
.navbar-nav > li > a{line-height:1.2; display: block; text-decoration: none;}
.navbar-nav .dropdown-toggle{z-index: 2; text-align: right;}
.navbar-nav .dropdown-toggle:after{content: '\f078'; font: var(--font-icon); transition:transform 0.4s ease; border:0;}
.navbar-nav .dropdown-toggle.show:after{ transform:rotate(-180deg);}

.navbar-nav .dropdown-menu{top:100%; background: #fff; min-width:14rem; max-width: 15rem; padding:0; margin:0; border:0; border-radius:var(--radius-normal); box-shadow: 0 1rem 3rem rgba(0,0,0,0.17);}
.navbar-nav .dropdown-menu > li{align-items: flex-start;}
.navbar-nav .dropdown-menu > li > a{line-height: 1.2; display: block; text-decoration: none; flex-grow:1;}
.navbar-nav .dropdown-menu.open-left {left:auto; right:-1px;}
.navbar-nav .dropdown-menu .dropdown-menu{left:100%;}
.navbar-nav .dropdown-menu .dropdown-menu.open-left{left:auto; right:100%;}
.navbar-nav .dropdown-menu .dropdown-toggle:after{transform:rotate(-90deg);}
.navbar-nav .dropdown-menu .dropdown-toggle.show:after{ transform:rotate(90deg);}

/* main-nav */
.main-nav{font-size: 0.875rem; font-weight: 500; letter-spacing: 0.035rem; text-transform: uppercase; gap:2.94rem; display: flex; align-items: center;}
.main-nav > .navbar-nav{gap:inherit;}
.main-nav > .navbar-nav + .navbar-nav:before{content: '|'; color:var(--color-input-border);}
.main-nav > .navbar-nav > li > a{padding:0.22rem 0; }
.main-nav .navbar-nav > .dropdown > a:not(.dropdown-toggle){padding-right:0.25rem;}
.main-nav .navbar-nav > .dropdown > .dropdown-toggle{padding-left:0;}
.main-nav .navbar-nav > .dropdown > .dropdown-toggle:after{font-size: 0.75rem; vertical-align: 10%;}

.main-nav .navbar-nav > li > a{color:var(--color-black);}
.main-nav .navbar-nav > .active > a{color:var(--color-active);}
.main-nav .navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .navbar-nav > .show > a{color:var(--color-hover);}

.main-nav .dropdown-menu{font-size:0.875rem; padding: 0.75rem 0;}
.main-nav .dropdown-menu > li > a{padding:0.75rem 3rem 0.75rem 1.5rem;}
.main-nav .dropdown-menu .dropdown-menu{top:-0.75rem;}
.main-nav .dropdown-menu .dropdown-menu > li > a{padding-right:1.5rem;}
.main-nav .dropdown-menu > .dropdown > a{padding-right:0.5rem;}
.main-nav .dropdown-menu > .dropdown > .dropdown-toggle{ padding-left:0.5rem; padding-right:1.5rem; flex:none;} 
.main-nav .dropdown-menu > .dropdown > .dropdown-toggle:after{font-size: 0.75rem; vertical-align: 10%;}

.main-nav .dropdown-menu > li > a{color:var(--color-black);}
.main-nav .dropdown-menu > .active > a{color:var(--color-active);}
.main-nav .dropdown-menu > li > a:hover, .main-nav .dropdown-menu > li > a:focus, .main-nav .dropdown-menu > .show > a{color:var(--color-hover);}
.main-nav .dropdown-menu > li:hover{background: var(--color-light-grey);}

.main-nav > .navbar-nav.account-nav{font-size: 1rem; font-weight: 300; letter-spacing: normal; text-transform: none;}
.main-nav > .navbar-nav.account-nav > li > a{display:flex; gap:0.25rem; align-items: center;}
.main-nav > .navbar-nav.account-nav > li > .username{font-weight: 700; gap:0.69rem;}

@media (max-width: 1399.98px) {
	.main-nav{gap:2.5rem;}
}
@media (max-width: 1199.98px) {
	.main-nav{gap:2rem;}
}
@media (max-width: 991.98px) {
	#header{height:var(--header-height-mobile);}
	
	.navbar-toggler {padding:0.7rem 1rem; color:inherit; margin:0.25rem 0; height:3.5rem; width:3.5rem; line-height:1; border:0; border-radius:var(--radius-normal); box-shadow:none!important; transition:color 0.2s ease, background-color 0.2s ease; }
	[aria-expanded='true'].navbar-toggler [class*='fa']:before{ content:'\f00d';}
	.navbar-toggler:hover, [aria-expanded='true'].navbar-toggler{ background-color:var(--color-hover); color:#fff;}
	.navbar-toggler:focus{ background-color:transparent; color:inherit;}
	[aria-expanded='true'].navbar-toggler:focus{ background-color:var(--color-hover); color:#fff;}

	#header .navbar{ position:relative; width:auto; padding:0;}
	#header .navbar > .container{display: flex; align-items: center; flex-wrap: nowrap; padding-left:calc(var(--bs-gutter-x)*0.5); padding-right:calc(var(--bs-gutter-x)*0.5);}
	
	#header .navbar.affix{transition: none; top:0; box-shadow:none;}
	.affix .navbar-brand, .navbar-brand{width:3rem; margin-top:0.25rem; transition: none;}

	#navigation{position:absolute; top:100%; width:100%; left:0; padding-left:0; padding-right:0; box-shadow:0 1rem 1rem rgba(0,0,0,0.3); background-color: #fff;}
	#navigation > .inner-wrap{height:auto; display: block;}
	.navbar-nav{margin:0;}
	.navbar-nav li{display: block;}
	.navbar-nav li a:not(.dropdown-toggle){margin-right:3.5rem; display: inline-block;}
	.navbar-nav .dropdown-toggle{margin-left:auto; position: absolute; top:0;}
	.navbar-nav .dropdown-toggle:after{content: '\2b';}
	.navbar-nav .dropdown-toggle.show:after{ transform:rotate(135deg);}
	.navbar-nav .dropdown-menu{width:100%; position:relative; padding:0; float:none; box-shadow:none; min-width:auto; max-width: none; background-color:transparent; margin-top:1px;}
	.navbar-nav .dropdown-menu .dropdown-toggle:after{transform:rotate(0);}
	.navbar-nav .dropdown-menu .dropdown-toggle.show:after{ transform:rotate(135deg);}
	.navbar-nav .dropdown-menu .dropdown-menu{left:0;}
	.navbar-nav .dropdown-menu.open-left {left:0; right:0;}
	.navbar-nav .dropdown-menu .dropdown-menu.open-left{left:0; right:0;}

	/* main-nav */
	.main-nav{padding:1rem 0.75rem; gap:0; font-size: 1.2rem; display: block; }
	.main-nav > .navbar-nav + .navbar-nav:before{content: ''; margin:1rem; height:1px; background:var(--color-input-border);}
	.main-nav .navbar-nav > li > a{padding:1rem; }	
	.main-nav .navbar-nav > .dropdown > a:not(.dropdown-toggle){padding-right:1rem;}
	.main-nav .navbar-nav > .dropdown > .dropdown-toggle{ width:3.5rem; padding-left:1rem; right:0; text-align: center;}
	.main-nav .navbar-nav > .dropdown > .dropdown-toggle::after{font-size: 1.2rem;}
	
	.main-nav .dropdown-menu{ font-size: 1rem; background-color: transparent; padding:0 0 0 2rem;}
	.main-nav .dropdown-menu > li:hover{background: transparent;}
	.main-nav .dropdown-menu > li > a{padding:1rem; flex:none;}
	.main-nav .dropdown-menu > .dropdown > a{padding-right:1rem;}
	.main-nav .dropdown-menu > .dropdown > .dropdown-toggle{ width:3.5rem; right:0; padding-left:1rem; padding-right:1rem; text-align: center;}
	.main-nav .dropdown-menu > .dropdown > .dropdown-toggle:after{font-size: 1rem;}
	.main-nav .dropdown-menu .dropdown-menu{top:0;}
	
	.main-nav .navbar-nav > li > a,
	.main-nav .dropdown-menu > li > a{color:var(--color-black);}
	
	.main-nav .navbar-nav > li > a:hover, 
	.main-nav .navbar-nav > li > a:focus,
	.main-nav .dropdown-menu > li > a:focus,
	.main-nav .dropdown-menu > li > a:hover{color:var(--color-hover);}
	
	.main-nav .navbar-nav > .active > a,
	.main-nav .dropdown-menu > .active > a{color:var(--color-active);}
	
	.main-nav > .navbar-nav.account-nav > li > .username{gap:0.25rem;}

}



/* ************************* */
/* 2. PROJECT STATUS 		 */
/* ************************* */
.project-status{display: flex; align-items: center; color:#fff; height:1.25rem; padding:0 0.37rem 0.05rem 0.37rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; line-height:1; letter-spacing: 0.015rem;}
.status-ordered .project-status{background: var(--color-green);}
.status-ordered .project-status:before{content: 'Ordered';}
.status-new .project-status{background: var(--color-indigo);}
.status-new .project-status:before{content: 'New';}
.status-approved .project-status{background: var(--color-status-approved);}
.status-approved .project-status:before{content: 'Approved';}
.status-red .project-status{background: var(--color-status-red);}
.status-red .project-status:before{content: 'Red';}
.status-quoted .project-status{background: var(--color-purple);}
.status-quoted .project-status:before{content: 'Quoted';}



/* ************************* */
/* 3. PANELS 		 */
/* ************************* */
.h-panel{padding:var(--margin-big) var(--h-panel-padding);}
.h-panel:before{content: ''; clip-path: polygon(0 0, calc(100% - (var(--margin-big) + 0.5rem)) 0, 100% calc(var(--margin-big) + 0.5rem), 100% 100%, 0 100%); position: absolute; top:0; right:0; bottom:0; left:0; background: #fff;}



/* ************************* */
/* 5. SECTION HEADER 		 */
/* ************************* */
.section-header{display: flex; align-items:baseline ; justify-content: space-between; gap:3.5rem;}
.section-header h2{margin-bottom:0;}
.section-header .options{display: flex; align-items: center; gap:1.5rem;}
.section-header .slick-arrow{position: relative;}
.section-header .slick-prev{order:10;}
.section-header .slick-next{order:11;}
@media (max-width: 767.98px) {
	.section-header{flex-direction: column; gap:var(--margin-small);}
}



/* ************************* */
/* 6. MODALS	   			 */
/* ************************* */
.modal-content{padding:var(--h-panel-padding); border-radius:var(--radius-normal); border:0; gap:var(--margin-normal); box-shadow: 0 1rem 5rem rgba(0,0,0,0.5);}
.modal-content > form{display: flex; width:100%; flex-direction: column; gap:var(--margin-normal);}
.modal-header{ border:0; padding:0; }
.modal .close{border:0; width:1.5rem; height:1.5rem; font-weight:300; color:var(--color-dark-grey); font-size: 1rem; line-height: 0.5; right:0.5rem; top:0.5rem; float:none; position:absolute; z-index:2; opacity:1; filter:alpha(opacity=100); text-shadow:none; transition:color 0.2s ease; background:transparent;}
.modal .close:hover, .modal .close:focus{color:var(--color-hover);}
.modal-body{padding:0;}
.modal-footer{border:0; padding:0.35rem 0; gap:2rem; justify-content: flex-start;}
.modal-footer .btn{margin:0;}

.modal-drawing .modal-content{padding:0;}
.modal-drawing .modal-header{font-size: var(--h5); font-weight: 600; line-height: 1.2; background: var(--color-grey); padding:1rem 2.5rem 1rem 2rem;}
.modal-drawing .modal-body img{width:100%; max-width: 100%;}
.modal-drawing .close{top:1rem;}

@media (max-width: 767.98px) {
    .modal-footer{gap:1.5rem;}
	.modal .close{right:0.25rem; top:0.25rem;}
	.modal-drawing .close{top:1rem;}
}
@media (max-width: 575.98px) {
	.modal-footer{flex-direction: column; gap:var(--margin-normal);}
	.modal-footer .btn:not(.btn-link){width:100%;}
}



/* ************************* */
/* 7. PAGINATION			 */
/* ************************* */
.pagination-wrap{ text-align:center; display:inline-flex; justify-content:center; background: #fff;}
.pagination > li > a, .pagination > li > span{color:var(--color-link); background-color:transparent; border:0; border-radius:var(--radius-normal); min-width:2rem; height:2rem; padding:0.5rem; display:flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; transition:border 0.2s ease, color 0.2s ease, background 0.2s ease;}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus{background-color:var(--color-hover); color:#fff;}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{color:var(--color-active); background-color:transparent; font-weight:bold; border-color:transparent;}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus{color:var(--color-grey); background-color:transparent; border-color:transparent;}



/* ************************* */
/* 9. TABS		   			 */
/* ************************* */
.tabs-wrap .tab-content{padding:var(--margin-big) var(--h-panel-padding); border:0; background:transparent; }
.tabs-wrap .tab-content:before{content: ''; background: #fff; position: absolute; top:0; right:0; bottom:0; left:0; clip-path: polygon(0 0, calc(100% - (var(--margin-big) + 0.5rem)) 0, 100% calc(var(--margin-big) + 0.5rem), 100% 100%, 0 100%);}
.tabs-wrap .tab-content.not-logged{padding-top:1.5rem;}
.tabs-wrap .nav-tabs{display: flex; border:0; align-items: stretch; gap:0.5rem; padding-right:4rem;}
.tabs-wrap .nav-tabs > li{margin-bottom:0; display: flex; align-items: stretch;}
.tabs-wrap .nav-tabs > li+li{margin-left:0;}
.tabs-wrap .nav-tabs > li > a,
.tabs-wrap .nav-tabs > li > div{min-height: 2.68rem; color:var(--color-black); clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%); padding:0.5rem 3.5rem; font-size: var(--text-lead); width:100%; background-color: var(--color-grey); border:0; transition:background 0.2s ease, border 0.2s ease, color 0.2s ease; display:flex; align-items:center; justify-content:center; text-align:center; margin-right:0; line-height: 1.2; text-decoration: none;}
.tabs-wrap .nav-tabs > li > a:hover,
.tabs-wrap .nav-tabs > li > div:hover, .tabs-wrap .nav-tabs > li > a:focus,
.tabs-wrap .nav-tabs > li > div:focus{ background-color: var(--color-hover); color:#fff; border-color:var(--color-hover);}
.tabs-wrap .nav-tabs > li > .active, .tabs-wrap .nav-tabs > li > .active:hover, .tabs-wrap .nav-tabs > li > .active:focus{ background-color: #fff; border-color:var(--color-grey); border-bottom-color:transparent; color:inherit; cursor: default;}

@media (max-width: 1399.98px) {
	.tabs-wrap .nav-tabs > li > a,
.tabs-wrap .nav-tabs > li > div{padding-left:3rem; padding-right:3rem;}
}
@media (max-width: 1199.98px) {
	.tabs-wrap .nav-tabs > li > a,
.tabs-wrap .nav-tabs > li > div{padding-left:2rem; padding-right:2rem;}
}
@media (max-width: 991.98px) {
	.tabs-wrap .nav-tabs > li > a,
.tabs-wrap .nav-tabs > li > div{padding-left:1.5rem; padding-right:1.5rem;}
}
@media (max-width: 767.98px) {
	.tabs-wrap .nav-tabs{flex-wrap:wrap; gap:0.25rem; }
	.tabs-wrap .nav-tabs > li{float:none; display: block;}
	.tabs-wrap .nav-tabs > li+li{margin-left:0;}
	.tabs-wrap .nav-tabs > li > a,
.tabs-wrap .nav-tabs > li > div{display: block; text-align: center; padding:0.5rem 1rem;}
}



/* ************************* */
/* 12. TABLES				 */
/* ************************* */
.textbox table{background: #fff; font-size: inherit; max-width: 100%; width: 100%; border-top:1px solid var(--color-grey);}
.textbox table th{padding:0.5rem 1rem; background: #fff; border-bottom:1px solid var(--color-grey);}
.textbox table td{padding:1rem 1rem; border-bottom:1px solid var(--color-grey);}
.textbox table thead th{ vertical-align:bottom; font-weight: 300; color:var(--color-dark-grey); }
.textbox table td{ vertical-align:top;}
.textbox table tr{transition:background 0.2s ease;}
.textbox table tbody tr:hover{background-color:var(--color-table-grey);} 
.textbox table th{position: sticky; top:calc(var(--header-height-sticky)); z-index: 2;}

@media (max-width: 991.98px) {
	.textbox table th{top:0;}
}
@media (max-width: 767.98px) {
	.textbox table{border-top:1px solid var(--color-grey);}
	.textbox table, .textbox table tbody, .textbox table tfoot, .textbox table tr, .textbox table caption{ display: block;}
	.textbox table thead {display: none;}
	.textbox table tr{ padding-top:0.5rem; padding-bottom:0.5rem; margin:0; border-bottom:1px solid var(--color-grey);}
	.textbox table td {display: flex; padding:0.5rem; text-align: left; border:0; margin:0;}
	.textbox table td:before{ content: attr(data-th); display: block; font-weight: bold; padding-right:1rem; width:40%; flex:none;}
	
}



/* ************************* */
/* 21. TAGS LISTING 		 */
/* ************************* */
.tags-listing{display: flex; flex-wrap:wrap; gap:0.25rem; line-height: 1.2;}
.tags-listing a{font-size: var(--text-small); height:1.37rem; display: flex; align-items: center; padding:0.13rem 0.5rem; background: var(--color-light-grey); text-decoration: none; border-radius:var(--radius-small);}
.text-center .tags-listing, .tags-listing.text-center{justify-content:center;}
.color-white .tags-listing a:not(.btn):not(:hover):not(:focus){color:var(--color-link);}