body
{
   color: #000000;
   font-family: "Century Gothic";
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
body:after
{
   background-color: #4B0181;
   background-image: url('../images/Transportation and Distribution Service.jpg');
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   content: "";
   height: 100vh;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
   z-index: -1;
}
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
input:focus, textarea:focus, select:focus
{
   outline: none;
}
#preloader
{
   background: #FFFFFF url("../images/pulsate.gif") no-repeat center center;
   bottom: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 99999;
}
#wb_footer_label 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: right;
}
#wb_footer_label
{
   color: #FFFFFF;
   font-family: "Century Gothic";
   font-weight: normal;
   font-size: 11px;
}
#wb_footer_label div
{
   text-align: right;
}
#wb_footer_label
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_main_layout
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-clip: padding-box;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
   box-sizing: border-box;
   margin: -5px 0 0 0 ;
}
#main_layout
{
   box-sizing: border-box;
   padding: 20px 20px 20px 20px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1200px;
}
#main_layout > .row
{
   margin-right: -20px;
   margin-left: -20px;
}
#main_layout > .row > .col-1, #main_layout > .row > .col-2, #main_layout > .row > .col-3
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 20px;
   padding-left: 20px;
   position: relative;
}
#main_layout > .row > .col-1, #main_layout > .row > .col-2, #main_layout > .row > .col-3
{
   float: left;
}
#main_layout > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 8.33333333%;
   text-align: center;
}
#main_layout > .row > .col-2
{
   background-clip: padding-box;
   background-color: rgba(25,25,112,0.60);
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 22px;
   width: 83.33333333%;
   text-align: left;
}
#main_layout > .row > .col-3
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 8.33333333%;
   text-align: left;
}
#main_layout:before,
#main_layout:after,
#main_layout .row:before,
#main_layout .row:after
{
   display: table;
   content: " ";
}
#main_layout:after,
#main_layout .row:after
{
   clear: both;
}
@media (max-width: 0px)
{
#main_layout > .row > .col-1, #main_layout > .row > .col-2, #main_layout > .row > .col-3
{
   float: none;
   width: 100% !important;
}
}
#wb_email_layout
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
}
#email_layout
{
   box-sizing: border-box;
   padding: 5px 10px 5px 10px;
   margin-right: auto;
   margin-left: auto;
}
#email_layout > .row
{
   margin-right: -10px;
   margin-left: -10px;
}
#email_layout > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 10px;
   padding-left: 10px;
   position: relative;
}
#email_layout > .row > .col-1
{
   float: left;
}
#email_layout > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 100%;
   text-align: left;
}
#email_layout:before,
#email_layout:after,
#email_layout .row:before,
#email_layout .row:after
{
   display: table;
   content: " ";
}
#email_layout:after,
#email_layout .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#email_layout > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_email_label 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 20px 0 2px 0;
   margin: 0;
   text-align: left;
}
#wb_email_label div
{
   text-align: left;
}
#wb_email_label
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#username
{
   border: 1px solid #FFFFFF;
   border-radius: 4px;
   background-color: #FFFFFF;
   background-image: none;
   color: #000080;
   font-family: "Century Gothic";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
   box-sizing: border-box;
   line-height: 16px;
   padding: 10px 5px 10px 5px;
   margin: 0;
   text-align: center;
}
#username:focus
{
   border-color: #FFFFFF;
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(255,255,255,0.60);
   outline: 0;
}
#username::placeholder
{
   color: #191970;
   opacity: 1;
}
#username::-ms-input-placeholder
{
   color: #191970;
}
#wb_Title 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0 0 5px 0;
   margin: 50px 0 0 0 ;
   text-align: center;
}
#wb_Title div
{
   text-align: center;
}
#wb_Title
{
   display: block;
   margin: 50px 0 0 0 ;
   box-sizing: border-box;
   width: 100%;
}
#wb_password_layout
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
}
#password_layout
{
   box-sizing: border-box;
   padding: 5px 10px 5px 10px;
   margin-right: auto;
   margin-left: auto;
}
#password_layout > .row
{
   margin-right: -10px;
   margin-left: -10px;
}
#password_layout > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 10px;
   padding-left: 10px;
   position: relative;
}
#password_layout > .row > .col-1
{
   float: left;
}
#password_layout > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 100%;
   text-align: left;
}
#password_layout:before,
#password_layout:after,
#password_layout .row:before,
#password_layout .row:after
{
   display: table;
   content: " ";
}
#password_layout:after,
#password_layout .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#password_layout > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_password_label 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0 0 2px 0;
   margin: 0;
   text-align: left;
}
#wb_password_label div
{
   text-align: left;
}
#wb_password_label
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#password
{
   border: 1px solid #FFFFFF;
   border-radius: 4px;
   background-color: #FFFFFF;
   background-image: none;
   color: #000080;
   font-family: "Century Gothic";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
   box-sizing: border-box;
   line-height: 16px;
   padding: 10px 5px 10px 5px;
   margin: 0;
   text-align: center;
}
#password:focus
{
   border-color: #FFFFFF;
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(255,255,255,0.60);
   outline: 0;
}
#password::placeholder
{
   color: #191970;
   opacity: 1;
}
#password::-ms-input-placeholder
{
   color: #191970;
}
#wb_button_layout
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
}
#button_layout
{
   box-sizing: border-box;
   padding: 0 10px 20px 10px;
   margin-right: auto;
   margin-left: auto;
}
#button_layout > .row
{
   margin-right: -10px;
   margin-left: -10px;
}
#button_layout > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 10px;
   padding-left: 10px;
   position: relative;
}
#button_layout > .row > .col-1
{
   float: left;
}
#button_layout > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 100%;
   text-align: right;
}
#button_layout:before,
#button_layout:after,
#button_layout .row:before,
#button_layout .row:after
{
   display: table;
   content: " ";
}
#button_layout:after,
#button_layout .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#button_layout > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#sigin_button
{
   border: 1px solid #E0FFFF;
   border-radius: 4px;
   background-color: #E0FFFF;
   background-image: none;
   color: #2E2770;
   cursor: pointer;
   font-family: "Century Gothic";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 20px 0 0 0 ;
}
#wb_mgs 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0 0 5px 0;
   margin: 0;
   text-align: center;
}
#wb_mgs
{
   color: #FFFFFF;
   font-family: "Century Gothic";
   font-weight: normal;
   font-size: 13px;
}
#wb_mgs div
{
   text-align: center;
}
#wb_mgs
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#Button2
{
   box-sizing: border-box;
   line-height: 37px;
   text-decoration: none;
   vertical-align: top;
   border: 0px solid #FFFFFF;
   border-radius: 10px;
   background-color: transparent;
   background-image: none;
   color: #E0FFFF;
   cursor: pointer;
   font-family: "Century Gothic";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
   padding: 1px 6px 1px 6px;
   text-align: right;
   -webkit-appearance: none;
   margin: 10px 0 0 0 ;
}
#Button2:hover
{
   color: #FFA500;
   -webkit-transform: translate(0px,5px) rotate(0deg) ;
   transform: translate(0px,5px) rotate(0deg) ;
   -webkit-transition: color 500ms linear 0ms, transform 500ms linear 0ms;
   transition: color 500ms linear 0ms, transform 500ms linear 0ms;
}
#wb_footer_layout
{
   clear: both;
   position: fixed;
   left: 0;
   bottom: 0;
   z-index: 7777;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: #30A8DC;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
}
#footer_layout
{
   box-sizing: border-box;
   padding: 10px 15px 10px 15px;
   margin-right: auto;
   margin-left: auto;
}
#footer_layout > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#footer_layout > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#footer_layout > .row > .col-1
{
   float: left;
}
#footer_layout > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 100%;
   text-align: center;
}
#footer_layout:before,
#footer_layout:after,
#footer_layout .row:before,
#footer_layout .row:after
{
   display: table;
   content: " ";
}
#footer_layout:after,
#footer_layout .row:after
{
   clear: both;
}
@media (max-width: 320px)
{
#footer_layout > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
 #main_layout{
   width: 400px;  
   text-align: center;
   background-image: none; 
   box-sizing: border-box;
   margin-right: auto;
   margin-left: auto; 
   -webkit-flex-basis: 100% !important;
   flex-basis: 100% !important;
   max-width: 100% !important;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
 } 
 @media (min-width:100px)
{
#main_layout
{ 
   padding: 40px 20px 4px 20px;
}


body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; 
  color: #4B0082;
  font-family: "Century Gothic"; 
  padding: 0px 10px 0px 10px; 
}

*{
  margin: 0;
  padding: 0; 
  box-sizing: border-box;
  text-decoration: none; 
}

/* Login & Signup Form CSS Start */
.form{ 
  opacity: 10;  
}
.form header{
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.form form{
  margin: 20px 0;
}
.form form .wb_mgs{
  color: #721c24;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  margin-bottom: 10px;
  display: none;
}
.form form .name-details{
  display: flex;
}
.form .name-details .field:first-child{
  margin-right: 10px;
}
.form .name-details .field:last-child{
  margin-left: 10px;
}