.tab-nav {

	display: flex;

	gap: 10px;

	flex-wrap: wrap;

}

.tab-nav li {

	list-style: none;

}

.tab-nav li a {

	display: block;

	padding: 12px 22px;

	background: #69bd4e;

	color: #fff;

	border-radius: 4px;

	text-decoration: none;

	font-weight: 600;

}

.tab-nav li.active a {

	background: #0056b3;

}

.technical-sub-tabs {

	margin-top: 15px;

	display: flex;

	gap: 10px;

}

.technical-sub-tabs a {

	padding: 10px 18px;

	background: #f3f3f3;

	text-decoration: none;

	border-radius: 4px;

}

.technical-sub-tabs a.active {

	background: #0056b3;

	color: #fff;

}

/* ==========================================================
   CIRCULAR FILTER DESIGN
========================================================== */

.view-filters {
    margin: 35px 0;
}

/* Filter Box */

.view-filters form {
    background: #fff;
    padding: 25px;
    border: 1px solid #e4e4e4;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}

/* ==========================================================
   Desktop Layout
========================================================== */

.view-filters .d-flex.flex-wrap{
    display:flex !important;
    align-items:flex-end;
    flex-wrap:nowrap;
    gap:20px;
    width:100%;
}

/* Remove bootstrap spacing */

.view-filters .mb-3{
    margin-bottom:0 !important;
}

.view-filters .js-form-item,
.view-filters .form-actions{
    margin:0;
}

/* ==========================================================
   Search
========================================================== */

.view-filters .js-form-item-title{
    flex:0 0 560px;
    max-width:560px;
}

/* ==========================================================
   Department
========================================================== */

.view-filters .js-form-item-field-department-target-id{
    flex:0 0 235px;
    max-width:235px;
}

/* ==========================================================
   Labels
========================================================== */

.view-filters .js-form-item label{
    display:block;
    margin-bottom:10px;
    font-size:15px;
    font-weight:600;
    color:#1f2d3d;
}

/* ==========================================================
   Search Input
========================================================== */

.view-filters input.form-control,
.view-filters input.form-text{

    width:100%;
    height:48px;

    border:1px solid #d7dce2;
    border-radius:10px;

    padding:0 16px;

    font-size:15px;

    box-sizing:border-box;

    transition:.3s;

}

.view-filters input.form-control:focus,
.view-filters input.form-text:focus{

    outline:none;

    border-color:#69bd4e;

    box-shadow:0 0 0 3px rgba(105,189,78,.18);

}

/* ==========================================================
   Select
========================================================== */

.view-filters select.form-select{

    width:100%;
    height:48px;

    border:1px solid #d7dce2;
    border-radius:10px;

    padding:0 42px 0 15px;

    font-size:15px;

    background:#fff;

    box-sizing:border-box;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 15px center;

}

.view-filters select.form-select:focus{

    outline:none;

    border-color:#69bd4e;

    box-shadow:0 0 0 3px rgba(105,189,78,.18);

}

/* ==========================================================
   Buttons
========================================================== */

.view-filters .form-actions{

    display:flex;

    align-items:flex-end;

    gap:10px;

    margin-top:26px;

    flex-shrink:0;

}

.view-filters .form-submit{

    min-width:90px;

    height:44px;

    padding:0 24px;

    border:none;

    border-radius:8px;

    background:#2d74ea;

    color:#fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.3s;

}

.view-filters .form-submit:hover{

    background:#135ed8;

}

/* Reset button */

#edit-reset{

    background:#6c757d;

}

#edit-reset:hover{

    background:#565e64;

}

/* ==========================================================
   Laptop
========================================================== */

@media (max-width:1199px){

    .view-filters .d-flex.flex-wrap{

        flex-wrap:wrap;

    }

    .view-filters .js-form-item-title{

        flex:1 1 100%;

        max-width:100%;

    }

    .view-filters .js-form-item-field-department-target-id{

        flex:0 0 250px;

        max-width:250px;

    }

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width:991px){

    .view-filters .d-flex.flex-wrap{

        display:grid !important;

        grid-template-columns:1fr 1fr;

        gap:20px;

    }

    .view-filters .js-form-item-title,

    .view-filters .js-form-item-field-department-target-id{

        max-width:100%;

    }

    .view-filters .form-actions{

        grid-column:1 / -1;

        margin-top:0;

    }

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:767px){

    .view-filters form{

        padding:20px;

    }

    .view-filters .d-flex.flex-wrap{

        display:block !important;

    }

    .view-filters .js-form-item{

        width:100%;

        margin-bottom:18px !important;

    }

    .view-filters .js-form-item-title,

    .view-filters .js-form-item-field-department-target-id{

        max-width:100%;

    }

    .view-filters .form-actions{

        width:100%;

        margin-top:0;

    }

    .view-filters .form-submit{

        width:100%;

        margin-bottom:10px;

    }

}