
fieldset label
{
	color:#000;
}

fieldset input 
{
	height:30px;
	border:2px solid #000;
	border-radius:5px;
	padding:0 10px;
}

/**************************************************************/
/*************************** HEADER ***************************/
/**************************************************************/
#header 
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height:116px;
	font-size:20px;
	font-weight:600;
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.3);
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: none;
	grid-template-columns: none;
	-ms-grid-rows: 54px 60px;
	grid-template-rows: 54px 60px;
	z-index:88888888;
	border-bottom:2px solid #000;
}

#header-row-1 
{
	background-color:var(--red);
	border-bottom:2px solid #000;
}

#header-row-1 div
{
	height:54px;
	color:#fff;
}

#header .row-1 a 
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	color: #FFF;
}

#header-row-2
{
	background-color:#fff;
}

#main-menu 
{
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: calc(50vw - 75px) 150px calc(50vw - 75px);
	grid-template-columns: calc(50vw - 75px) 150px calc(50vw - 75px);
}

#header ul li 
{
	position: relative;
	height: 60px;
	margin: 0;
	padding: :0;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

#header li span, #header a 
{
	font-size:var(--font-8-18);
	color:#000;
}

#get-a-quote-info 
{
	position: absolute;
	top:-25px;
	left:0;
	width:250px;
	background-color:var(--red);
	color:#fff !important;
	font-size: 12px;
	padding:8px;
	border:2px solid #000;
	border-radius: 5px;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: auto;
	z-index:2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 0 0 0;
	transform-origin: 0 0 0;
	transition: all 0.3s ease 0s;
}

#get-a-quote-info::after 
{
	content: '';
	position: absolute;
	left: calc(50% - 5px);
	top: calc(100% - 5px);
	width: 10px;
	height: 10px;
	z-index: 1;
	transform: rotate(45deg);
	background-color: var(--red);
	border-bottom:2px solid #000;
	border-right:2px solid #000;
}

#get-a-quote-info.active
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    filter:alpha(opacity=1);
    -webkit-transform:scaleY(1);
    transform:scaleY(1);     
}
/**************************************************************/
/*************************** HEADER ***************************/
/**************************************************************/

/******************************************************************/
/****************************** HOME ******************************/
/******************************************************************/
#home-section 
{
	width:100vw;
	height:calc(100vh - 114px);
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:calc(50% - 1px) 2px calc(50% - 1px);
	grid-template-columns:calc(50% - 1px) 2px calc(50% - 1px);
	transition:all 500ms;
}

#home-section .col-1-container, 
#home-section .col-3-container 
{
	height:120px;
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:none;
	grid-template-columns:none;
	-ms-grid-rows:60px 60px 60px;
	grid-template-rows:60px 60px 60px;
}

#home-section .col-2 
{
	position:relative;
	top:20%;
	width:2px;
	height:60%;
	background-color:#000;
}

#home-section.leftactive 
{
	-ms-grid-columns: 101vw 10vw 10vw;
	grid-template-columns: 101vw 10vw 10vw;
}

#home-section.rightactive 
{
	-ms-grid-columns: 0px 0px 100vw;
	grid-template-columns: 0px 0px 100vw;
}

#home-section.rightactive .col-1, 
#home-section.rightactive .col-2 
{
	opacity: 0;
}

#home-section .col-1-container, 
#home-section .col-3-container 
{
	height: 120px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: none;
	grid-template-columns: none;
	-ms-grid-rows: 60px 60px 60px;
	grid-template-rows: 60px 60px 60px;
}

#home-section .col-1-container .row-3, 
#home-section .col-3-container .row-3 
{
	opacity:0;
}

#home-section .col-1-container.active .row-3, 
#home-section .col-3-container.active .row-3 
{
	opacity:1;
}

#home-section.rightactive .col-3-container 
{
	-ms-grid-rows: 60px 60px 60px;
	grid-template-rows: 60px 60px 60px;
}

#home-section.leftactive .col-1-container .row-3, 
#home-section.rightactive .col-3-container .row-3 
{
	opacity:1;
}

#home-renew-left, 
#home-renew-right 
{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 32px;
	color: #000;
	border-radius: 60%;
	z-index: 9;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
/******************************************************************/
/****************************** HOME ******************************/
/******************************************************************/

/***************************************************************/
/*************************** SIGN IN ***************************/
/***************************************************************/

#sign-in,
#sign-up
{
	position: fixed;
	top:-200vh;
	left: 25vw;
	width: 50vw;
	height: auto;
	background-color: #A5070B;
	padding-bottom: 50px;
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.3);
	border:2px solid #000;
	border-radius:10px;
	z-index:999999999;
	transition:top 0.5s ease;
}

.login-row .col-50 img {
   width: 100%;
  height: 100vh;
  object-fit: cover; /* ensures it fills nicely without distortion */
}
#sign-in-wrap {
  max-width: 600px;
  margin: auto;
}
#sign-in.active,
#sign-up.active
{
 top:0px;
  display: none !important;
}
.login-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.login-row .col-50 {
  width: 50%;
}
.col-50.sign-in-col {
  padding: 20px 20px 30px;
  align-content: center;
}
/*.login-container {*/
/*  width: 100%;*/
/*  max-width: 980px;*/
/*  margin: auto;*/
/*  background: #fff;*/
/*  border-radius: 7px;*/
/*  border: 1px solid rgba(209, 213, 220, 0.29);*/
/*  box-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);*/
/*  position: absolute;*/
/*  left: 50%;*/
/*  top: 40%;*/
/*  transform: translate(-50%, 40%);*/
/*}*/
fieldset {
  border: 0 !important;
}
#sign-in-wrap fieldset,
#forgot-password-wrap fieldset
{
    display:block;
    widht:100%;
    padding:5px;
    border:0;
}

#sign-in-wrap label
{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start;
    font-size: 14px;
  margin-bottom: 7px;
}

.login-title-wrap .title {
  font-size: 18px;
  line-height: 1.2em;
  color: rgba(107, 105, 105, 0.96);
  margin-bottom: 7px;
}
.login-title-wrap {
  margin:20px 0;
}
.login-title-wrap .subtitle {
  font-size: 38px;
  line-height: 1.3em;
  color: #fb614e;
}
#sign-in-wrap input,
#forgot-password-wrap input
{
  width:100%;
  height: 50px;
  border-radius: 5px;
  border: 1px solid rgba(209, 213, 220, 0.99);
  opacity: 1;
  background-color: rgba(0, 0, 0, 0) !important;
  font-size: 14px;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  padding: 13px;
  color: rgba(0, 0, 0, 0.97) !important;
}

.sign-button {
  color:#fff;
  width: 100%;
  height: 50px;
  margin: 10px 5px;
  border-radius: 7px !important;
  background-color: #FB503B;
  opacity:0.9;
}
.sign-button:hover {
    transition-duration: .3s;
    opacity:1;
}
#sign-in-wrap.active,
#forgot-password-wrap.active
{
	top:80px;
}

#close-sign-in-dropdown,
#close-forgot-password-wrap
{
	position:absolute;
	left:calc(100% - 50px);
    top: 15px;
    width: 20px;
}
#sign-in-dropdown,
#forgot-password-dropdown{
    display:none;
}
/***************************************************************/
/*************************** SIGN IN ***************************/
/***************************************************************/

/**********************************************************************/
/****************************** SERVICES ******************************/
/**********************************************************************/
#services 
{
	padding-top:80px;
	padding-bottom:80px;
	margin-bottom:120px;
}

#our-services-title 
{
	position: relative;
	height: 50px;
	margin-top:-100px;
	margin-bottom: 50px;
	background-color: #fff;
	padding-left: 20px;
	padding-right: 20px;
	z-index: 2;
}

.single-service::after 
{
	content: '';
	display: block;
	width: 80%;
	height: 1px;
	margin: 20px 10%;
	background-color: rgba(5, 60, 94, 0.25);
}

.single-service:last-child::after 
{
	margin: 0px 10%;
	background-color: rgba(5, 60, 94, 0);
}

.single-service:nth-child(odd) a 
{
	direction:rtl;
}

.single-service:nth-child(even) a 
{
	direction: ltr;
}
/**********************************************************************/
/****************************** SERVICES ******************************/
/**********************************************************************/

/*********************************************************************/
/****************************** SERVICE ******************************/
/*********************************************************************/
#slider-container
{
	position:relative; 
	min-height:calc(100vh - 260px);
	padding-bottom:30px;
}

.service-slide
{
	position:absolute;
	top:20px;
	opacity:0;
	transition:opacity 1s ease;
	border:2px solid transparent;
}

.service-slide.active
{
	opacity:1;
	z-index:2;
}

#prev-service
{
	position:fixed;
	left:20px;
	top:200px;
	width:250px;
	z-index:3;
}

#next-service
{
	position:fixed;
	left:calc(100vw - 285px);
	top:200px;
	width:250px;
	z-index:3;
}

.service-links 
{
	z-index:2;
}
/*********************************************************************/
/****************************** SERVICE ******************************/
/*********************************************************************/

/*************************************************************************/
/****************************** PARTNERSHIP ******************************/
/*************************************************************************/
#partnership
{
	padding-top: 80px;
	padding-bottom: 80px;
	margin-bottom: 120px;
}

#partnership-title 
{
	position: relative;
	height: 30px;
	margin-top: -95px;
	margin-bottom: 20px;
	z-index: 2;
}

#partnership-title div 
{
	background-color: #fff;
	padding: 0 10px;
}
/*************************************************************************/
/****************************** PARTNERSHIP ******************************/
/*************************************************************************/

/************************************************************************/
/****************************** INVITATION ******************************/
/************************************************************************/
#invitation-section
{
	margin-bottom: 120px;	
}

#invitation-section a 
{
	display: block;
}

#invitation-title 
{
	position:relative;
	height:90px;
	margin-top:-40px;
	z-index:2;
}

#invitation-title div 
{
	background-color: #fff;
	padding: 0 10px;
}

#invitation-images
{
	padding-top: 80px;
	padding-bottom: 80px;
}

.invitation-image-container
{
	width:300px;
	min-width:300px;
	max-width:300px;
	height:100px;
	min-height:100px;
	max-height:100px;
	margin:20px;
	opacity:0;
}

.invitation-image-container.active
{
	opacity:1;
}

.invitation-image
{
	width:300px;
	min-width:300px;
	max-width:300px;
}
/************************************************************************/
/****************************** INVITATION ******************************/
/************************************************************************/

/**********************************************************************/
/****************************** PARTNERS ******************************/
/**********************************************************************/
#partners 
{
	border: 1px solid rgba(5, 60, 94, 0.25);
	border-radius: 25px;
}

#partners-animations
{
	position:relative;
	display:-webkit-box;
    display:-ms-flexbox;
	display:flex;
	overflow: hidden;
}

#partners-animations::before,
#partners-animations::after
{
	content:'';
	position:absolute;
	top:0;
	width:100px;
	height:100%;
	z-index:2;
}

#partners-animations::before
{
	left:0;
	border-top-right-radius:50%;
	border-bottom-right-radius:50%;
	background:linear-gradient(to left, rgba(255,255,255,0.1), #ffffff );
}

#partners-animations::after
{
	right:0;
	border-top-left-radius:50%;
	border-bottom-left-radius:50%;
	background:linear-gradient(to right, rgba(255,255,255,0.1), #ffffff );
}

.partners-images-container
{
	display:-webkit-box;
    display:-ms-flexbox;
	display:flex;
	white-space:nowrap; 
	animation: pic linear infinite 50s;
}

@keyframes pic
{
	from
	{
		transform:translateX(0%);
	}
	to 
	{
		transform:translateX(-100%);
	}
}

.partners-images-container div
{
	width:300px;
	max-width:300px;
	min-width:300px;
	max-height:120px;
}

.partners-images-container img
{
	max-width:220px;
	max-height:120px;
}

#partners-title
{
	height:40px;
	margin-top:-20px;
}

#partners-title span
{
	padding-left:50px;
	padding-right:50px;
	background-color:#fff;
	z-index:2;
}
/**********************************************************************/
/****************************** PARTNERS ******************************/
/**********************************************************************/

/*********************************************************************************/
/****************************** PACKING TO TRACKING ******************************/
/*********************************************************************************/
#packing-to-tracking 
{
	font-weight: 700;
}

.packing-to-tracking-box 
{
	border-radius: 20px;
}

.packing-to-tracking-box-container 
{
	position: relative;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid rgba(5, 60, 94, 0.25);
	border-radius: 10px;
	opacity:0;
}

.packing-to-tracking-box-container.active
{
	opacity:1;
}

.packing-to-tracking-title 
{
	margin-top: 10px;
	height: 42px;
	margin-bottom: 20px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 48px calc(100% - 48px);
	grid-template-columns: 48px calc(100% - 48px);
}

.packing-to-tracking-box img 
{
	margin-top: 40px;
	margin-bottom: 40px;
}

.packing-to-tracking-box-container img 
{
	max-width: 400px;
	max-height: 240px;
}

#packing-to-trackings-container
{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:300px calc(100% - 600px) 300px;
    grid-template-columns:300px calc(100% - 600px) 300px;	
}

#packing-to-trackings-container .col-1,
#packing-to-trackings-container .col-2,
#packing-to-trackings-container .col-3
{
	position:relative;
	min-height:calc(100vh - 150px);
}

#packing-to-trackings-container .col-1
{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;	
}

.packing-to-tracking-container
{
	position:absolute;
	top:0;
	opacity:0;
}

.packing-to-tracking-container.active
{
	opacity:1;
}

#prev-packing-to-tracking-item,
#next-packing-to-tracking-item
{
	margin-top:150px;
}
/*********************************************************************************/
/****************************** PACKING TO TRACKING ******************************/
/*********************************************************************************/

/*********************************************************************/
/****************************** VENDORS ******************************/
/*********************************************************************/
#weekly-departures-box 
{
	position:relative;
	display:-webkit-box;
    display:-ms-flexbox;
	display:flex;	
	overflow: hidden;
}

#weekly-departures-box::before,
#weekly-departures-box::after
{
	content:'';
	position:absolute;
	top:0;
	width:100px;
	height:100%;
	z-index:2;
}

#weekly-departures-box::before
{
	left:0;
	border-top-right-radius:50%;
	border-bottom-right-radius:50%;
	background:linear-gradient(to left, rgba(255,255,255,0.1), #ffffff );
}

#weekly-departures-box::after
{
	right:0;
	border-top-left-radius:50%;
	border-bottom-left-radius:50%;
	background:linear-gradient(to right, rgba(255,255,255,0.1), #ffffff );
}

.weekly-departures-container
{
	display:-webkit-box;
    display:-ms-flexbox;
	display:flex;
	white-space:nowrap; 
	animation:pic linear infinite 45s;
}

.weekly-departures-container div
{
	width:380px;
	max-width:380px;
	min-width:380px;
	max-height:160px;	
}

.weekly-departures-container img
{
	max-width:260px;
	max-height:160px;
}
/*********************************************************************/
/****************************** VENDORS ******************************/
/*********************************************************************/

/*************************************************************************/
/****************************** CDA DETAILS ******************************/
/*************************************************************************/
.cda-detail 
{
	width:400px;
	max-width:400px;
	min-width:400px;
	height:175px;
	max-height:175px;
	min-height:175px;	
	border: 1px solid rgba(5, 60, 94, 0.25);
  	border-radius: 10px;
  	margin:20px 0;
}

.cda-detail a
{
	display:block;
	width:400px;
	max-width:400px;
	min-width:400px;
	height:175px;
	max-height:175px;
	min-height:175px;
	display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
}

.cda-detail img
{
	max-width:350px;
	max-height:125px;
}

#cda-details-container
{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:400px calc(100% - 800px) 400px;
    grid-template-columns:400px calc(100% - 800px) 400px;	
}

#cda-details-container .col-1,
#cda-details-container .col-2,
#cda-details-container .col-3
{
	position:relative;
	min-height:calc(100vh - 150px);
}

#cda-details-container .col-1
{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;	
}

.cda-detail-container
{
	position:absolute;
	top:0;
	opacity:0;
}

.cda-detail-container.active
{
	opacity:1;
}

#prev-cda-detail-item,
#next-cda-detail-item
{
	width:350px;
	margin-top:150px;
}
/*************************************************************************/
/****************************** CDA DETAILS ******************************/
/*************************************************************************/

/************************************************************************/
/****************************** CONTACT US ******************************/
/************************************************************************/
#contact-us-container
{
	min-height:calc(100vh - 114px);
	background-image: url('../images/contact-us-bg.png');
	opacity:0.7;
	padding:150px 0;
	background-repeat: no-repeat;
	background-size:cover;
}

#contact-us-section input,
#contact-us-section textarea
{
	border:2px solid black;
	z-index:2;
}

#contact-us-section input
{
	height:40px;
}

#contact-us-section label
{
	color:#000;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;	
}

#contact-us-section fieldset.textarea
{
	display:block !important;
}

#contact-us-section textarea
{
	position:relative;
	width:90%;
	min-height:200px;
	border-radius:10px;
	padding:10px;
	margin-left:10%;
}

#contact-us-section i
{
	width:75px;
	height:75px;
	background-color:var(--red);
	color:#FFF;
	font-size:32px;
	border-radius:5px;
	cursor: auto;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;	
}

#contact-us-section .row
{
	margin-top:20px;
	margin-bottom:20px;
	margin-left:20PX;

    display:-ms-grid;
    display:grid;
    -ms-grid-columns:100px calc(100% - 100px);
    grid-template-columns:100px calc(100% - 100px); 

}

#contact-us-section .col-2
{
	padding-left:50px;
	color:#000;
	font-weight:700;
	font-size:20px;
}
/************************************************************************/
/****************************** CONTACT US ******************************/
/************************************************************************/

/*********************************************************************************/
/****************************** ADDITIONAL FEATURES ******************************/
/*********************************************************************************/
.additional-feature
{
	width:250px;
	min-width:250px;
	max-width:250px;

	height:250px;
	min-height:250px;
	max-height:250px;

	border:1px solid rgba(5, 60, 94, 0.25);
	border-radius:25px;
	padding:10px;	
}

.additional-feature a
{
	width:230px;
	min-width:230px;
	max-width:230px;
	height:230px;	
	min-height:230px;	
	max-height:230px;	
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-align: center;
  	-ms-flex-align: center;
  	align-items: center;
  	-webkit-box-pack: center;
  	-ms-flex-pack: center;
  	justify-content: center;
}
/*********************************************************************************/
/****************************** ADDITIONAL FEATURES ******************************/
/*********************************************************************************/

/*********************************************************************/
/****************************** SIGN UP ******************************/
/*********************************************************************/

#body {
  display: block !important;
  padding-top: 80px;
}
#body.login,
#body.sign-up,
#body.password-reset{
    padding:0;
}
#sign-up-section {
  margin: 120px auto 70px;
  width: 100%;
  min-height: auto;
}

.sign-up-home-container {
  box-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
  width: 500px !important;
  margin: auto;
  background: #fff;
  border-radius:7px;
  padding: 34px 0;
  border: 1px solid rgba(209, 213, 220, 0.29);
}
.sign-up-container{
    padding:10px 25px;
}
.sign-up-container fieldset {
  padding: 4px 0 !important;
}
#sign-up-section .error-message 
{
	margin-top:-10px !important;
}

#sign-up-form fieldset 
{
	display: -ms-grid !important;
	display: grid !important;
	-ms-grid-columns: none !important;
	grid-template-columns: none !important;
	-ms-grid-rows: auto auto !important;
	grid-template-rows: auto auto !important;
	border:0;
}

#sign-up-form fieldset label 
{
	margin-bottom: 10px;
	display: -webkit-box;
 	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-align: center;
  	-ms-flex-align: center;
  	align-items: center;
  	-webkit-box-pack: start;
  	-ms-flex-pack: start;
  	justify-content: flex-start;	
}

.sign-up-wrapper {
  transform: translate(-50%, 15%);
}
.sign-up-wrapper .login-row img {
  min-height: 560px;
}
#sign-up-form fieldset input 
{
  height: 50px;
  border-radius: 5px;
  border: 1px solid rgba(209, 213, 220, 0.99);
  opacity: 1;
  background-color: #0000 !important;
  font-size: 14px;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  padding: 13px;
  color: #000000f7 !important;
}
/*#sign-up-button {*/
/*  width: 100%;*/
/*  border-radius: 7px;*/
/*  height: 50px;*/
/*  padding: 0;*/
/*  margin-top: 5px;*/
/*  background: #DD1212FC !important;*/
/*  opacity: .9;*/
/*  color:#fff;*/
/*}*/
/*#sign-up-button:hover{*/
/*   transition-duration: .3s;*/
/*    opacity:1;*/
/*}*/

.sign-up-home-container .subtitle {
  font-size: 24px;
  line-height: 1.3em;
}
.sign-up-home-container .title {
  font-size: 18px;
  line-height: 1.2em;
  color: #6b6969f5;
  margin-bottom: 7px;
}

.login-link {
 display: flex;
  margin: 10px;
  font-size: 14px;
  justify-content: space-between;
}
.login-link > a {
  color: #FB503B;
}
/*********************************************************************/
/****************************** SIGN UP ******************************/
/*********************************************************************/

/********************************************************************/
/****************************** FOOTER ******************************/
/********************************************************************/
#footer
{
    margin:0 !important;
    width:100vw;
    padding-top:30px;
    background-color:#000;
    color:#FFF;
}

#footer ul li
{
    display:-webkit-box !important;
    display:-ms-flexbox !important;
    display:flex !important;
    -webkit-box-align:center !important;
    -ms-flex-align:center !important;
    align-items:center !important;
    -webkit-box-pack:start !important;
    -ms-flex-pack:start !important;
    justify-content:flex-start !important;
}

#footer h5:after
{
    content:'';
    display:block;
    position:relative;
    left:0;
    top:5px;
    width:100%;
    height:2px;
    background-color:#A5070B;
}

#footer .col-1 i
{
    margin-right:10px;
    color:#C01F25;
}

#footer .col-3 i
{
    margin-right:10px;
}

#footer-logo
{
    width:100px;
}

#logo-info
{
    color:#C01F25; 
    font-size:16px; 
    font-weight:900; 
    margin-top:-5px;
}

#footer a
{
    color:#fff !important;
}

.footer-title
{
    margin-bottom:10px;
    letter-spacing:1px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
/********************************************************************/
/****************************** FOOTER ******************************/
/********************************************************************/


.un-code
{
	border:2px solid #000;
	border-radius:5px;
	margin-top:20px;
	margin-bottom:20px;
	padding:10px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.un-code.active
{
	background-color:green;
}

.un-code.inactive
{
	background-color:var(--red);
}

.un-code-description,
.un-code-classification
{
	width:90%;
	height:30px;
	padding:5px;
	border:2px solid #000;			
	border-radius:5px;
}

input[name=tracking_number]
{
	border:2px solid #000;
	border-radius:5px;
	width:250px;
}

#success-message,
#error-message
{
	position:fixed;
	left:30vw;
	top:-100vh;
	width:40vw;
	height:200px;
	color:#fff;
	z-index:9999999;
}

#success-message
{
	background-color:var(--green);
}

#error-message
{
	background-color:var(--red);
}

#success-message.active,
#error-message.active
{
	top:116px;
}

/*Responsive css*/
@media(max-width:720px){
#sign-in-wrap,
#forgot-password-wrap {
  width: 100%;
  padding: 10px 20px;
}
.login-container {
  margin: 10px;
}
.login-title-wrap{
    margin: 10px;
}

.sign-up-home-main {
  margin: 10px;
}
.sign-up-home-container {
  width: 100% !important;
}
}
.field-error.text-danger {
  color: red;
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.no-record-row.quote-row {
  display: block;
  text-align: center;
}
/**************************/
/* Global Popup box */
/**************************/
.cda-popup-overlay {
  display: none; /* stays hidden until JS opens it */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.cda-popup-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 420px;
  max-width: 90%;
  padding: 28px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  transform: scale(0.85);
  opacity: 0;
}
.cda-popup-box input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: normal;
  height: 40px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid rgba(209, 213, 220, 0.99);
}
.cda-popup-wrapper {
    padding:10;
}
.cda-popup-actions {
  margin: 15px 0 0 0;
}
.cda-popup-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #1e1e1e;
}
.cda-popup-close {
  position: absolute;
  top: -14px;
  right: -14px;
  background: #ff6b6b;
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background 0.25s ease, transform 0.2s ease;
}
.cda-popup-close:hover {
  background: #e64b4b;
  transform: rotate(90deg);
}
.cda-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.cda-popup-actions button {
 min-width: 100px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.25s ease;
}

/* Open animation */
.cda-popup-overlay.open .cda-popup-box {
  animation: macPopupIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
}
/* Close animation */
.cda-popup-overlay.closing .cda-popup-box {
  animation: macPopupOut 0.25s ease forwards;
}

@keyframes macPopupIn {
  0%   {opacity: 0; transform: scale(0.8) translateY(-10px);}
  60%  {opacity: 1; transform: scale(1.05) translateY(0);}
  100% {opacity: 1; transform: scale(1);}
}
@keyframes macPopupOut {
  0%   {opacity: 1; transform: scale(1);}
  100% {opacity: 0; transform: scale(0.85) translateY(-10px);}
}

/*************************************/
/*LOGIN / SIGN / FORGET PASS */
/*************************************/
.cdaAuth-login-container {
    display: flex;
    min-height: 100vh; /* instead of height:100vh */
    width: 100%;
    overflow: hidden;
    margin-top:-80px;
}

.cdaAuth-login-row {
  display: flex;
  flex: 1;
}

.cdaAuth-col-50 {
  flex: 1;
}

.cdaAuth-image-side {
  position: relative;
}

.cdaAuth-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(85%);
}

.cdaAuth-sign-in-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: #fff;
}

#cdaAuth-sign-in-wrap {
  width: 100%;
  max-width: 500px;
}

.cdaAuth-login-title-wrap {
  margin-bottom: 25px;
}

.cdaAuth-subtitle {
  font-size: 28px;
  color: #f96363;
  margin: 0;
}

.cdaAuth-title {
  color: #555555c9;
  font-size: 18px;
}

.cdaAuth-fieldset {
  border: none;
  margin-bottom: 20px;
  padding: 0;
}

.cdaAuth-fieldset label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 14px;
}

.cdaAuth-fieldset input {
  width: 100%;
  padding: 15px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  height:50px;
  font-weight: normal;
}

.cdaAuth-sign-button {
  background-color: #f96363;
  border: none;
  padding: 12px 0;
  width: 100%;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.cdaAuth-sign-button:hover {
  background-color: #e65555;
}

.cdaAuth-login-link {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.cdaAuth-small-dark-red-text {
  color: #f96363;
  font-size: 14px;
  text-decoration: none;
}

.cdaAuth-small-dark-red-text:hover {
  text-decoration: underline;
}

/* ----------- Responsive ----------- */
@media (max-width: 768px) {
  .cdaAuth-login-row {
    flex-direction: column;
    height: auto;              /* let row shrink */
  }

  .cdaAuth-image-side {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .cdaAuth-image-side img {
    /*width: 100%;*/
    /*height: auto;*/
    /*object-fit: cover;         /* always covers screen */
    /*object-position: center;*/
    filter: brightness(60%);
  }
    .cdaAuth-fieldset input {
      width: 100%;
      height:45px;
    }
    .cdaAuth-sign-button {
       padding: 10px;
    font-weight: normal;
    font-size: 14px;
    text-transform: capitalize;
    }
    .cdaAuth-fieldset {
        margin-bottom:15px;
    }
    .cdaAuth-title {
        font-size:14px;
    }
  .cdaAuth-sign-in-col {
    display:block;
    padding: 25px 20px;
    width: 90%;
    max-width: 380px;
    margin:  auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    max-height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
