:root{
    --primary: #3b3a6d;
    --secoundary: #b12134;
    --light: #ffffff;
    --dark: #000000;
    --green: #1da50f;
    --warning: #ff9000;
    --shadow: 0px 0px 25px -18px;
    --bgLight: #f3f3f9;
    --gray: #898989;
    --gray: #898989;
}
body{
    font-family: 'Roboto', sans-serif;
    background-color: var(--bgLight);
}
main{
    min-height: 99vh;
    display: flex;
    flex-direction: column;
}
.header{
    background-color: var(--light);
    box-shadow: var(--shadow);
}
.logo img{
    width: 160px;
}
.nav_link{
    padding: 0 1rem !important;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--dark) !important;
}
.nav-link.active{
    color: var(--primary) !important;
}
.login_btn{
    background-color: var(--primary);
    color: var(--light) !important;
    padding: 5px 25px !important;
    border-radius: 25px;
    transition: .6s;
}
.login_btn:hover{
    background-color: var(--secoundary);
}
.main{
    padding: 50px 0;
}
/* wish */
.wish h3{
    font-size: 27px;
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 5px;
}
.wish p{ 
    font-size: 20px;
    font-weight: 400;
    color: var(--primary); 
}
.bg_primary{
    background-color: var(--primary) !important;
}
.wish{
    margin-bottom: 2rem;
}
.table{
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 3rem;
}
.table_head{
    padding: 0px 5px;
}
.table_icon img{
    width: 38px;
    height: 38px;
    object-fit: contain;
    margin-right: 12px;
}
.table_heading h3{
    font-size: 20px;
    font-weight: 400;
    color: var(--light);
    margin-bottom: 0;
}
.table_badge{
    margin-top: 2px;
    margin-left: 12px;
}
.table_badge span{
    background-color: var(--light);
    padding: 3px 7px;
    border-radius: 25px;
    color: var(--secoundary);
    font-size: 14px;
}
.table>:not(:first-child){
    border-top: 0;
}
.table_body{
    background-color: var(--light) !important;
}
.table_body th{
    padding: 0.5rem 1rem;
    font-size: 17px;
    font-weight: 500;
}
.table_body td{
    padding: 0.5rem 1rem;
    vertical-align: middle;
}
.table_body p{
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 5px;
}
.table_body a{
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 5px;
    text-decoration: none;
}
.table_body span{
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--primary);
}
.danger_text{
    color: var(--secoundary) !important;
    font-weight: 500;
}
.warning_text{
    color: var(--warning) !important;
    font-weight: 500;
}
.success_text{
    color: var(--green) !important;
    font-weight: 500;
}

/* Shipments */
.shipment_options{
    margin-bottom: 1rem;
}
.shipment_heading h3{
    font-weight: 400;
    font-size: 30px;
    color: var(--primary);
    margin-bottom: 0;
}
.shipment_table th{
    padding: 15px 1rem;
    color: var(--light);
    font-weight: 400;
}
.shipments_tabs{
    margin-bottom: 2rem;
}
.shipments_filter{
    margin-bottom: 1rem;
}
.ship_link{
    color: var(--primary);
    font-size: 16px;
    font-weight: 500;
    padding: 0.5rem 2rem;
    border-radius: 25px;
    transition: .6s;
}
.ship_link.active{
    background-color: var(--secoundary) !important;
    color: var(--light) !important;
    border-radius: 25px;
}
.ship_link:hover{
    background-color: var(--secoundary) !important;
    color: var(--light) !important;
    border-radius: 25px;
}
.form-group{
    margin-bottom: 1.5rem;
}
.custom_input{
    border: 2px solid var(--primary);
    border-radius: 7px;
}
.custom_input:focus{
    border-color: var(--primary);
}
.custom_input::placeholder{
    color: var(--gray);
    font-weight: 400;
}
.btn_primary{
    background-color: var(--primary);
    color: var(--light) !important;
    border-radius: 25px;
    font-size: 16px;
    padding: 7px 1.5rem;
    transition: .6s;
}
.btn_primary:hover{
    background-color: var(--secoundary);
    color: var(--light);
}
.btn_secondary{
    background-color: var(--secoundary);
    color: var(--light) !important;
    border-radius: 25px;
    font-size: 16px;
    padding: 7px 1.5rem;
    transition: .6s;
}
.btn_secondary:hover{
    background-color: var(--primary);
    color: var(--light);
}
.btn_outline_dark{
    background-color: var(--light);
    border: 1px solid var(--primary);
    font-size: 16px;
    padding: 7px 1.5rem;
    color: var(--primary);
    transition: .6s;
}
.btn_outline_dark:hover{
    background-color: var(--primary);
    border: 1px solid var(--primary);
    font-size: 16px;
    padding: 7px 1.5rem;
    color: var(--light);
}
.dropdown_menu{
    margin-top: 5px !important;
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.dropdown_item{
    padding: 0.5rem 1.5rem;
    transition: .6s;
}
.dropdown_item:hover{
    background-color: var(--secoundary);
    color: var(--light);
}
.dropdown_item:focus{
    background-color: var(--secoundary);
    color: var(--light);
}
.btn_sm{
    font-size: 14px !important;
}
.shipment_overview_head p{
    color: var(--gray);
    margin-bottom: 3px;
}
.shipment_overview_head h3{
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 3px;
}
.shipment_refrance p{
    color: var(--gray);
    margin-bottom: 3px;
}
.shipment_refrance h4{
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 3px;
}
.shimpent_tags p{
    color: var(--gray);
    margin-bottom: 3px;
}
.shimpent_tags h4{
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 3px;
}
.steamship_line p{
    color: var(--gray);
    margin-bottom: 3px;
}
.steamship_line h3{
    font-size: 22px;
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 3px;
}
.steamship_line span{
    font-size: 22px;	
    color: var(--dark);
    margin-bottom: 3px;
}
.overview{
    margin-top: 2rem;
}
.overview_head h3{
    font-size: 25px;
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 0;
    position: relative;
    width: fit-content;
}
.overview_head h3::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: -9px;
    z-index: 1; 
    background-color: var(--secoundary);
}
.overview_head i{
    font-size: 20px;
    font-weight: normal;
}
.overview_head{
    position: relative;
}
.overview_head::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
    bottom: -8px;
    opacity: 0.2;
}
.order-tracking{
	text-align: center;
	width: 50%;
	position: relative;
	display: block;
}
.order-tracking .is-complete{
	display: block;
	position: relative;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	border: 0px solid #AFAFAF;
	background-color: #f7be16;
	margin: 0 auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
	z-index: 2;
} 

.order-tracking .is-complete:after {
	display: none;
	position: absolute;
    content: '\f041 ';
    font-family: "Font Awesome 6 Free"; 
	width: 7px;
	top: -2px;
	bottom: 0;
	left: 5px;
	margin: auto 0;  
    color: var(--light);
}
.order-tracking.completed .is-complete{
	border-color: #27aa80;
	border-width: 0px;
	background-color: #27aa80;
} 
.order-tracking p {
	color: #A4A4A4;
	font-size: 16px;
	margin-top: 8px;
	margin-bottom: 0;
	line-height: 20px;
}
.order-tracking p span{font-size: 14px;}
.order-tracking.completed p{color: #000;}
.order-tracking::before {
	content: '';
	display: block;
	height: 3px;
	width: calc(100% - 40px);
	background-color: #f7be16;
	top: 8%;
	position: absolute;
	left: calc(-50% + 20px);
	z-index: 0;
}
.order-tracking:first-child:before{display: none;}
.order-tracking.completed:before{background-color: #27aa80;}
footer{
    background-color: var(--light);
    padding: 12px;
    box-shadow: var(--shadow);
}
.overview_track{
    background-color: var(--light);
    margin: 2rem 0;
    padding: 2rem 0;
}
.gray_text{
    color: var(--gray);
}
.a{
    cursor: pointer;
}
.heading_table{
    color: var(--primary);
}
.btn_group{
    background-color: var(--light);
} 
.add_shipment_heading{
    margin-bottom: 1rem;
}
.add_shipment_heading h3{
    font-weight: 400;
    font-size: 30px;
    color: var(--primary);
    margin-bottom: 0;
}
.shipment_card{
    background-color: var(--light);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.ship_import_heading{
    margin-bottom: 2.5rem;
}
.import_option h4{
    font-size: 20px;
    margin-bottom: 1rem;
}
.btn_file{
    background-color: var(--secoundary);
    border: 1px solid var(--secoundary);
    padding: 7px 1.5rem;
    color: var(--light);
    transition: .6s;
}
.btn_file:hover{
    background-color: var(--light);
    color: var(--secoundary);
}
.btn_file input[type="file"] {
    display: none;
}
.card_import{
    padding: 1rem;
}
.modal_report{
    padding: 0.2rem 1rem;
}
.modal_report span{
    background-color: var(--bgLight);
}
.notification_link{
    position: relative;
}
.notification_card{
    position: absolute;
    width: 303px;
    height : 387px;
    background-color: var(--bgLight);
    top: 40px;
    right: 0;
    box-shadow: var(--shadow);
    z-index: 123;
    border-radius: 5px;
    border: 1px solid #ddd;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}
.notification_header{
    background-color: var(--light);
    padding: .5rem 1rem;
}
.notification_header p, a{
    margin-bottom: 0;
    font-size: 15px;
}
.notifi_footer{
    background-color: var(--light);
    padding: .5rem 1rem;
    text-align: center;
    margin-top: 229px;
}
.notifi_footer p{
    margin-bottom: 0;
} 
.read_link{
    font-size: 15px;
    color: var(--secoundary);
}
.read_link:hover{
    color: var(--secoundary);
}
.notifi_card{
    padding: 12px 5px;
    border-bottom: 1px solid #ddd;
}
.notfi_icon img{
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.notifi_card p{
    font-size: 15px;
    color: var(--primary);
    margin-bottom: 0;
}
.notifi_card span{
    color: var(--green);
}
.notifi_card .mark{
    color: var(--primary);
}
.notifi_card a{
    color: var(--primary);
}
.accordion_body{
    padding: 1rem;
}
.main{
    min-height: 80vh;
}
.all_notifi{
    position: relative;
    background-color: var(--light);
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: .4s;
}
.all_notifi:hover{
    transform: scale(1.02);
    border-color: var(--secoundary);
}
footer p{
    margin-bottom: 0;
    color: var(--primary);
    font-size: 17px;
    font-weight: 500;
    text-align: center;
}
footer a{
    font-weight: 500;
    color: var(--secoundary);
}
footer a:hover{
    color: var(--green);
}




@media only screen and (max-width: 767px) {
    .nav_link{
        padding: 0.5rem 1rem !important;
    }
    .notification_card{
        width: 350px;
    }
    .login_btn{
        width: fit-content;
        margin-top: .5rem;
    }
}