#channel-button {
	display:none !important;
}

html,body {background: #fafafa;}
.cf:before, .cf:after {
  content: ''; display: table;
}

.quoteprompt {
  font-size: 1.3rem;
  color: #002060;
  font-weight: bold;
}

select.form-control {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
}

.cf:after {clear: both;}
.fl {float: left;}
.fr {float: right;}
ul {margin: 0; padding: 0; list-style: none;}
img {max-width: 100%; height: auto;}
.container {
  max-width: 1200px; margin: 0 auto;
}
a {color: #306;}
a:hover {color: #306; text-decoration: none;}

.pcOnly {display: block!important;}
.mobOnly {display: none!important;}

.form-control {font-size: 1.2rem; padding: .5rem .8rem;}

h2 {font-size: 2rem;}
h2.purple {color: #432275; font-weight: bold; margin: 1rem 0;}
h3 {font-size: 2rem; color: #002060;}
h4 {color: #f39; position: relative; font-weight: bold;}
h4 img {max-height: 48px; width: auto; margin-right: 8px; position: relative; top: -2px;}

h4 .info {display: inline-block; margin: 0; top: -1px; padding: 0 10px; background: transparent; position: absolute;}
h4 .info em {position: relative; top: auto; left: auto; font-size: 16px; line-height: 24px; font-weight: bold;}
h4 .info span {font-size: 16px;}
.form-check input {clear: both;margin-left: 0;}
.form-check label { margin-left: 5px;}

.info {background: #ededed; padding: 5px 10px; margin: 10px 0;}
.info em {border: 1px solid #f39; display: inline-block; width: 24px; height: 24px; border-radius: 50%; font-style: normal; color: #f39; text-align: center;cursor:pointer}
.info > span {display: inline-block; transition: all ease-in-out .3s;}
.info:hover > span {display: inline-block;}

/* inner header */
.inner-header {margin: 1rem 0;}
.inner-header h2 {color: #f39; font-size: 2rem;}
.inner-header p {color: #555;}
.inner-header a {color: #f39; text-decoration: none;}
.inner-header a:hover {text-decoration: underline;}
.nav-bg {background: url(https://www.ecourier.co.uk/final_html/images/nav-bg.png) repeat-x; height: 60px; border-radius: 12px; padding: 0 1rem; box-sizing: border-box;}
.nav {margin: 10px 0;}
.nav.fl li {display: inline-block; position: relative; padding-right: 24px;}
.nav.fl li:after {content: '|'; color: #f39; padding: 0 5px; position: absolute; right: 4px; top: 8px;}
.nav.fl li:last-child::after {display: none;}
.nav.fl li a {color: #fff; text-decoration: none; display: block; line-height: 40px;}
.nav li a:hover {text-decoration: none; opacity: .8;}
.logout-link {background: url(https://www.ecourier.co.uk/final_html/images/ico-power.png) no-repeat; padding-left: 50px; color: #fff; text-decoration: none; height: 60px; display: inline-block; line-height: 60px;}
.logout-link:hover {text-decoration: none; opacity: .8; color: #fff;}

/**** HOME ****/
.select-arrow {background: #fff url(https://www.ecourier.co.uk/final_html/images/down-arrow.jpg) no-repeat 95% 50%;}
.filter-bar {background: #cbcbcb; padding: 15px; border-radius: 12px; margin: 1rem 0;}
.filter-bar input, .filter-bar select {border-radius: 12px;}

#myTab {border-bottom: 3px solid #f39;}
#myTab li {display: inline-block; cursor: pointer; background: #cbcbcb; min-width: 130px; font-size: 1.2rem; padding: 10px 0; margin-top: 1rem; text-align: center; color: #fff; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#myTab li.active {background: #f39;}

#myTabContent > div {display: none;}

/* table style */
.table-style {border-collapse: collapse; width: 100%;}
.table-style th {background: #306; padding: 5px 10px; color: #fff; border: 1px solid #fff; font-weight: normal;}
.table-style td {background: #e6e6e6; padding: 5px 10px; border: 1px solid #fff; vertical-align: top; color: #306; font-size: .9rem;}
.table-style .pink-btn {border: none; background-image: none; font-size: .8rem; line-height: 1.2; border-radius: 4px; padding: 3px 20px;}

/**** SAME DAY ****/
/* big icos */
.big-icos {text-align: center; margin: 0 auto;}
.big-icos li {display: inline-block; padding: 3rem 4vw;}
.big-icos li a {display: block; text-align: center; text-decoration: none;}
.big-icos li a span {display: block; color: #9a9a9a; margin: 1rem 0;}
.big-icos li a.active span {color: #311667;}

/* gray round */
.gray-round {background: #e8e8e8; padding: 1rem; border-radius: 8px; margin-bottom: 2rem;}
.gray-round h4 {color: #f39; font-weight: normal;}
.gray-round .row > div {margin: .25rem 0; position: relative;}
.gray-round .info {padding-left: 40px; background-color: transparent; position: relative;}
.gray-round .info em {position: absolute; left: 5px; top: 50%; transform: translateY(-50%);}

/* vehs */
.vehs {display: block; justify-content: center; margin-bottom: 2rem !important;}
.vehs > div {text-align: center; padding-left: 0; margin-right: 0; width: 16%; float: left; cursor: pointer;}
.vehs > div span {display: inline-block; text-align: center; font-weight: bold; color: #f39; margin-top: -20px; margin-bottom: 20px;}

.vehs > div.gray > span, .vehs > div.largericon > span {color: #dbdbdb;}

.vehs > div .gray, .vehs > div.sel .active, .vehs > div.sel.prem .pink, .vehs > div.hover .active {display: inline-block;}
.vehs > div .active, .vehs > div .pink, .vehs > div.sel .gray, .vehs > div.active .pink, .vehs.prem .gray, .vehs .prem.sel .gray, .vehs .prem.sel .active, .vehs > div.hover .gray, .vehs > div.hover .pink {display: none;}
.vehs > div.sel span, .vehs > div.hover span {color: #f39;}


.bikeicon img  {transform: scale(.5); height:150px;}
.cargoicon img  {transform: scale(.7); height:150px; }
.motorbikeicon  img  {transform: scale(.7);height:150px; }
.smallvanicon  img  {transform: scale(.9); height:150px; }
.largericon {cursor:auto !important; }
.largericon img {transform: scale(.8); padding-bottom:50px; height:150px; cursor:auto; }
.largevanicon img {height:150px; }

/*.vehs > div:nth-child(1) img {transform: scale(.5);}
.vehs > div:nth-child(2) img {transform: scale(.7);}
.vehs > div:nth-child(3) img {transform: scale(.7);}
.vehs > div:nth-child(4) img {transform: scale(.9);}
*/
.premium {display: inline-block; padding-right: 20px; cursor: pointer;}
.premium label {cursor: pointer; margin-left: -20px;}
.premium em {width: 14px; height: 14px; display: inline-block; border-radius: 10px; border: 1px solid #f39; background: #bdbdbd; position: relative;}
.premium img {transform: scale(.5); margin-right: -20px;}
.premium.active em, .premium.hover em {background: #fff;}
.premium.active em:before, .premium.hover em:before {width: 10px; height: 10px; display: inline-block; content: ''; border-radius: 10px; background: #f39; position: absolute; top: 1px; left: 1px;}
.premium img.active, .premium.active img.gray, .premium.hover img.gray {display: none;}
.premium img.gray, .premium.active img.active, .premium.hover img.active {display: inline-block;}

.wr {display: inline-block; padding-right: 20px; cursor: pointer;}
.wr label {cursor: pointer; margin-left: -20px;}

.wr em {width: 14px; height: 14px; display: inline-block; border-radius: 10px; border: 1px solid #f39; background: #bdbdbd; position: relative;}
.wr.active em, .wr.hover em {background: #fff;}
.wr.active em:before, .wr.hover em:before {width: 10px; height: 10px; display: inline-block; content: ''; border-radius: 10px; background: #f39; position: absolute; top: 1px; left: 1px;}
.wr img {transform: scale(.5); margin-right: -20px;}
.wr img.active, .wr.active img.gray {display: none;}
.wr img.gray, .wr.active img.active {display: inline-block;}

/* pick wrap */
.pick-wrap {position: relative;}
.purple-gradient {background: rgb(52,15,105); min-height: 225px; padding: 30px; border-radius: 12px; margin: 1rem 0; position: relative;
  background: linear-gradient(90deg, rgba(52,15,105,1) 0%, #563782 100%);}
.purple-gradient .close {position: absolute; right: 20px; top: 20px; cursor: pointer; z-index: 999;}
.purple-gradient .close img {max-width: 32px; height: auto;}
.purple-gradient h4 {font-size: 2rem; line-height: 48px;}
.purple-gradient .row > div {margin: .5rem 0; position: relative;}
.addr-row {position: relative;}
span.country_span > input.form-control {padding-right: 150px; padding-left: 40px !important;}
div.addr-row > input.form-control {padding-right: 150px; padding-left: 40px !important;}
.addr-row img {position: absolute; top: 8px; max-height: 32px; width: auto;}
.addr-row .ico-location {left: 20px;}
.addr-row .ico-home {right: 100px;}
.addr-row .ico-contact {right: 60px; cursor: pointer;}
.addr-row .ico-arrow-down {right: 20px; cursor: pointer;}
/* .deliver-wrap .addr-row .ico-home, #moreDeliver .addr-row .ico-home {right: 60px;} */
/* .deliver-wrap .addr-row .ico-contact, #moreDeliver .addr-row .ico-contact {right: 20px;} */
.datetime, .datetime2 {width: auto;}
.saveAddr {padding: 1rem 0;}
.saveAddr input {width: auto;}
.saveAddr label {display: inline-block; padding-left: 5px; color: #fff;}

.calendar-row {position: relative; padding-left: 68px;}
.calendar-row img {position: absolute; left: 0; height: 50px; width: auto;}
.calendar-row h5 {color: #f39; font-size: 1.25rem; line-height: 1; margin: .5rem 0;}
.calendar-row .radio-inline {padding-right: 10px; color: #fff;}
.calendar-row input[type='text'] {display: none; margin-top: 5px;}
.calendar-row.showcal input[type='text'] {display: block;}

.pick-instance, .deliver-instance {display: none;}

.add-more {position: relative; top: -80px; padding-right: 45px; right: 35px; text-align: right; height: 51px; line-height: 51px; cursor: pointer; color: #fff; background: url(https://www.ecourier.co.uk/final_html/images/ico-plus.png) no-repeat 100% 50%; background-size: 32px 32px; margin-bottom: -60px; width: 260px; float: right;}

.extras {display: block; margin: 0 auto 1rem; max-width: 800px;}
/*
.extras > div {text-align: center; cursor: pointer; padding-left: 0; margin-right: 0; width: 33%; float: left;}
*/
.extras > div {text-align: center; cursor: pointer; padding-left: 0; margin-right: 0; width: 50%; float: left;}

.extras > div span {display: block; text-align: center; color: #dbdbdb; margin-top: 10px; margin-bottom: 20px;}
.extras > div img.active, .extras > div.sel img.gray, .extras > div.hover img.gray {display: none;}
.extras > div img.gray, .extras > div.sel img.active, .extras > div.hover img.active {display: inline-block;}
.extras > div.sel span, .extras > div.hover span {color: #340f69;}
.extras > div:nth-child(1) img {transform: scale(.5);}
.extras > div:nth-child(2) img {transform: scale(.6);}
.extras > div:nth-child(3) img {transform: scale(.7);}
/* footer */
.foot {border-top: 3px solid #dbdbdb; padding: 2rem 0; padding-right: 200px; position: relative;}
.foot h4 {font-weight: bold;}
.cost {color: #340f69;}
.foot .pink-btn {position: absolute; right: 0; top: 30px; display: inline-block; min-width: 160px;}
.foot .purple-btn {position: absolute; right: 190px; top: 30px; display: inline-block; min-width: 160px;}
.pink-btn {border-radius: 12px; text-decoration: none; background: #f39 url(https://www.ecourier.co.uk/final_html/images/btn-bg.png) repeat-x; background-size: 100% 100%; color: #fff; padding: 5px 20px; font-size: 20px; height: 60px; line-height: 50px; text-align: center; cursor: pointer;}
.pink-btn:hover {opacity: .8; color: #fff;}
.purple-btn {border-radius: 12px; text-decoration: none; background: #432175 url(https://www.ecourier.co.uk/final_html/images/purple-bg.png) repeat-x; background-size: 100% 100%; color: #fff; padding: 5px 20px; font-size: 20px; height: 60px; line-height: 50px; text-align: center; cursor: pointer;}
.purple-btn:hover {opacity: .8; color: #fff;}

/**** MY ACCOUNT ****/
#account-wrap a {display: block; text-align: center; padding-top: 172px; text-decoration: none;
  background: url(https://www.ecourier.co.uk/final_html/images/ico-my-account-gray.png) no-repeat 50% 0; background-size: auto 160px;
}
#account-wrap a span {display: block; color: #9a9a9a; font-size: .8rem;}
#account-wrap .row > div.active a span, #account-wrap a:hover span {color: #352765;}
#my-account a:hover, #my-account.active a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-my-account.png);}
#historic-jobs a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-historic-jobs-gray.png);}
#historic-jobs a:hover, #historic-jobs.active a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-historic-jobs.png);}
#my-reports a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-my-reports-gray.png);}
#my-reports a:hover, #my-reports.active a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-my-reports.png);}
#create-report a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-create-report-gray.png);}
#create-report a:hover, #create-report.active a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-create-report.png);}
#invoices a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-invoices-gray.png);}
#invoices a:hover, #invoices.active a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-invoices.png);}
#credit-reports a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-credit-reports-gray.png);}
#credit-reports a:hover, #credit-reports.active a {background-image: url(https://www.ecourier.co.uk/final_html/images/ico-credit-reports.png);}

/* table style */
.table-style2 {border-collapse: collapse; width: 100%;}
.table-style2 th {padding: 5px 10px; color: #333; text-align: center;}
.table-style2 td {color: #333; font-size: .9rem; text-align: center; padding: 5px;}

/* table style3 */
.table-style3 {border-collapse: collapse; width: 100%; margin: 15px 0 0;}
.table-style3 th {padding: 5px 10px; color: #fff; text-align: center; background: rgb(52,15,105);}
.table-style3 td {color: #333; font-size: .9rem; text-align: center; padding: 10px 5px;}
.table-style3 tbody tr:nth-child(2n) {background: #f7f7f7;}
.table-style3 tbody tr td:last-child {text-align: center;}
.table-style3 tr:hover {background: #340f69!important;}
.table-style3 tr:hover td {color: #fff;}
.table-style3 button.useAddr {background: #f39!important;}

/**** NEXT DAY ****/
.pw {margin: 0 -0.5% 1rem;}
.pw li {float: left; width: 19%; margin: 0 0.5%;}
.pw-instance {display: none;}
.pw-wrap {position: relative; padding-bottom: 50px;}
.pw-wrap .info {width: calc(100% - 200px); position: absolute; left: 10px; bottom: -15px;}
.add-another {background: linear-gradient(90deg, rgba(52,15,105,1) 0%, #563782 100%); color: #fff; font-weight: bold; cursor: pointer; display: inline-block; border-radius: 8px; padding: 5px 15px; position: absolute; right: 10px; bottom: 10px;}
.times > div {text-align: center; cursor: pointer;}
.times > div.sel span, .times > div.hover span {color: #f39;}
.times > div img {margin: 1rem auto;}
.times > div .gray, .times > div.sel .active, .times > div.hover .active {display: block;}
.times > div .active, .times > div.sel .gray, .times > div.hover .gray {display: none;}

.modal {display: none;}
.modal.show {display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1060;}
.modal .mask {background: rgba(0,0,0,.3); position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.modal .popup-wrap {width: 800px; max-width: 100%; background: #fff; z-index: 10; border-radius: 12px; overflow: hidden; position: relative;}
.modal .modal-title {background: rgb(52,15,105); color: #fff; font-size: 24px; padding: 0 15px; line-height: 2;}
.modal .modal-body {padding: 15px;}
.modal .modal-body .row {margin-bottom: 15px;}
.modal .modal-body label {min-width: 100px; display: inline-block;}
.modal select, .modal input[type="text"] input[type="password"] {width: calc(100% - 130px); padding: 0 10px; font-size: 18px; line-height: 2; height: 36px;}
.modal .hideModal {position: absolute; top: 2px; right: 2px; cursor: pointer; transform: scale(.5);}
.modal button {background: rgb(52,15,105); border-radius: 6px; color: #fff; font-size: 16px; border: none; padding: 5px 10px;}
.modal button:hover {opacity: .85;}
.modal .search-row {text-align: right; padding: 15px 0;}
.modal .modal-footer {padding: 10px 0 0;}
.modal button.close-modal {background: #fff; border: 1px solid rgba(0,0,0,.6); color: rgba(0,0,0,.6);}

#deadlineWarning .popup-wrap {margin-top: 30vh; left: 50%; transform: translateX(-50%);}
#deadlineWarning .modal .modal-body {text-align: center;}

/**** CONFIRMATION ****/
.pickup-detail {color: #fff;}
.pickup-detail .info {background: transparent; padding-left: 0; margin-bottom: -10px; color: #f39;}
.pickup-detail .info em {margin-right: 10px;}
.vehs-detail {display: inline-block; text-align: center; margin-bottom: 1.5em;}
.vehs-detail > div {color: #f39; text-align: center; margin-top: -30px;}
.extras-detail li {list-style: none; display: inline-block; margin-right: 20px; text-align: center; color: #340f69; font-size: 14px;}
.extras-detail img {max-height: 100px; width: auto;}
.detail-foot {padding: 0 0 2em; border-top: none;}
.detail-foot .purple-btn {position: relative; top: auto; right: auto;}
.detail-foot .pink-btn {position: relative; display: inline-block; top: auto;}
.detail-foot h4 {margin-top: 15px; margin-right: 15px; font-weight: normal;}
.detail-foot h4 .cost {font-weight: bold;}

#confirmationModal .popup-wrap {overflow: auto; max-height: calc(100vh - 80px);}
/* #confirmationModal .modal-body {height: 100%; overflow-y: auto;} */
#confirmationModal h2 {margin-top: 20px;}
#confirmationModal h2 img {width: 60px; height: auto; position: relative; top: -3px;}
#confirmationModal .hideModal {top: 10px; left: calc(366px + 50vw); transform: scale(1); z-index: 9999;}
#confirmationModal p {color: #525252;}
#confirmationModal .num {font-weight: bold; color: #340f69;}
#confirmationModal h3 {font-size: 1.5rem;}
#confirmationModal .gray-block {background: #e6e6e6; padding: 15px 30px;}

.timeline {border-top: 1px solid #f39; padding-top: 15px;}
.timeline li {padding-left: 30px;}
.timeline h4 {color: #340f69; position: relative; margin: 0; font-size: 1rem; line-height: 24px;}
.timeline h4:before {content: ''; width: 24px; height: 24px; border-radius: 12px; background: #f39; display: inline-block; position: absolute; left: -30px;}
.timeline h4:after {content: ''; width: 1px; height: 100%; position: absolute; left: -18px; height: 100%; background: #f39;}
#confirmationModal .timeline p {position: relative; color: #340f69; margin: 0; font-size: .8rem; padding: 5px 0 15px;}
.timeline p:before {content: ''; width: 7px; height: 7px; border-radius: 4px; background: #340f69; display: inline-block; position: absolute; left: -21px; z-index: 10; top: calc(50% - 4px);}
.timeline p:after {content: ''; width: 1px; height: 100%; position: absolute; top: 0; left: -18px; height: 100%; background: #f39;}
.timeline li:last-child p:after {height: 50%;}

.files {margin: 1em -5px;}
.files li {width: 33.333%; float: left; padding: 0 5px;}
.files a {background: #340f69; border-radius: 4px; display: block; text-align: center; color: #fff; font-size: .8em; text-decoration: none; height: 40px; line-height: 40px;}
.files a:hover {opacity: .8;}

@media screen and (max-width: 767px) {
  .pcOnly {display: none!important;}
  .mobOnly {display: block!important;}
  .form-control {font-size: .9rem;}
  /* nav */
  .nav {margin: 5px 0;}
  .nav-bg {position: relative; padding: 0 .4rem; height: 50px; background-size: auto 50px;}
  .nav li {padding-right: 16px;}
  .nav li:after {right: 2px;}
  .nav li a {font-size: .8rem; letter-spacing: -1px;}
  .logout-link {position: absolute; background-size: 20px 30px; top: 10px; right: -18px;}

  /* big icos */
  .big-icos {margin:.3rem;}
  .big-icos li {padding: .5rem; min-width: 30%;}
  .big-icos img {max-height: 60px; width: auto;}
  .big-icos span {font-size: .8rem;}

  /* vehs */
  .vehs {transform: scale(.9);}
  .vehs > div {width: 50%;}
  h4 .info {top: auto; bottom: 1px;}

  /* pick wrap */
  .calendar-row {padding-bottom: 45px;}
  .purple-gradient h4 {font-size: 1.5rem;} 
  .purple-gradient {min-height: 220px; padding: 20px;}
  .addr-row input {padding-left: 30px;}
  .addr-row img {max-height: 24px;}
  .add-more {padding-right: 30px; background-size: 24px 24px;}
  /* extras */
  .extras img {max-height: 80px; width: auto;}
  .extras span {font-size: .8rem;}

  /* footer */
  .foot {padding-right: 0; margin-bottom: 2rem; text-align: center;}
  .foot .pink-btn {position: relative; margin: 0 auto;}

  /**** MY ACCOUNT ****/
  #account-wrap a {background-size: auto 100px; padding-top: 120px;}
  #account-wrap .row > div {margin-bottom: 1rem;}
}