/* All tablets and mobiles  */
@media screen and (max-width: 1024px) {
    input[data-type=text], select {
        margin-left: 0;
        margin-right: 0;
    }

    div.payment-content fieldset.ferry {
        background-image: none;
        padding-right: 14px;
        height: auto;
    }

    #account-information input[type=email],
    #account-information input[type=password],
    #account-information input[type=text] {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.7em;
    }

    #account-information input[type=button] {
        float: right;
    }

    .tooltip p {
        margin-bottom: 1.6em;
        padding-right: 0;
    }

    .tooltip a {
        position: static;
    }

    div#container {
        width: auto;
        padding: 0;
        margin: 0;
    }

    div#header {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    div#header h2 img, div.logo img {
        margin: 0 auto;
    }

    div.logo {
        float: none;
        text-align: center;
    }

    div#header p.phone-lines, div#header p.no-ddi, #nav-contact {
        display: none;
    }

    ol.booking-breadcrumbs li {
        width: 45%;
        margin: 5px 2%;
    }

    div#footer-base {
        margin: 20px 0 0 0;
    }

    div#footer-base p.reg-no {
        float: none;
    }

    div#footer-bottom p, div#footer-base p, div#footer-base p.copyright {
        text-align: center
    }

    div#footer-bottom {
        width: 100%;
    }

    div#footer-top {
        display: none;
    }

    div.wrap {
        width: 94% !important;
        padding-top: 0;
        padding-left: 3%;
        padding-right: 3%;
    }

    fieldset p.row {
        margin-bottom: 14px;
    }

    div#cant-provide-insurance {
        margin-top: 1em;
    }

    table#removed-cover td {
        padding: 9px 10px 9px 0;
    }

    table#removed-cover label {
        display: block;
    }

    input[data-type="text"], select {
        padding: 5px;
    }

    form#personal-details-form input[data-type="text"], form#personal-details-form select,
    form#new-personal-details-form input[data-type="text"], form#new-personal-details-form .rr-your-details select {
        width: 100%;
    }
}

/* Landscape and portrait tablets */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    form#personal-details-form table,
    form#new-personal-details-form table {
        width: 100%;
    }

    form#personal-details-form td:first-child,
    form#new-personal-details-form td:first-child {
        width: 200px;
    }

    form input[type="submit"],
    input[type="button"] {
        font-size: 18px;
    }
}

/* Landscape tablets only */
@media screen and (min-width: 901px) and (max-width: 1024px) {
    iframe#sagePayIframe {
        width: 590px;
    }

    .step-x-of-x-container {
        width: 590px;
    }

    div.payment-content {
        width: calc(97% - 230px);
    }

    table#removed-cover tr td:first-child {
        width: 57%;
    }
}

/* Portrait tablets only */
@media screen and (min-width: 641px) and (max-width: 900px) {
    iframe#sagePayIframe {
        width: 580px;
    }

    .step-x-of-x-container {
        width: 580px;
    }

    form#personal-details-form table td:first-child,
    form#new-personal-details-form table td:first-child {
        padding-right: 5px;
    }

    form#personal-details-form table td label, 
    form#new-personal-details-form table td label{
        width: auto;
        padding-right: 0;
    }
}

/* Portrait tablets and mobiles */
@media screen and (max-width: 900px) {
    div.payment-content {
        float: none;
        width: 100%;
        margin-bottom: 20px;
    }

    form#personal-details-form table,
    form#new-personal-details-form table {
        width: 100%;
    }

    form#personal-details-form table td,
    form#new-personal-details-form table td {
        padding: 4px 2%;
    }

    table#removed-cover tr td:first-child {
        width: 70%;
    }

    table.summary-table {
        width: 100%;
    }

    div.sykes-card {
        width: auto;
        margin-right: 0;
        clear: both;
        display: none;
    }

    div.need-help-booking{
        clear: both;
        width: 100%;
        border-radius: 0.25rem;
        box-shadow: 0 0.25rem 0.9375rem 0 rgba(0, 0, 40, 0.15);
        border: solid 1px #eaeaea;
        background-color: white;
        margin-bottom: 1.5rem;
    }

    div.sykes-card h2 {
        background-image: none;
    }

    div#right-col {
        width: auto;
    }

    div.safe-secure, div.slick-slider {
        display: none;
    }

    div#booking-summary img {
        margin: 0 auto;
        display: block
    }
}

/* Mobiles only */
@media screen and (max-width: 640px) {
    div#header {
        zoom: 1;
        padding: 6px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        border: none;
        background: #ffffff;
    }

    iframe#sagePayIframe {
        width: 360px;
    }

    .step-x-of-x-container {
        width: 360px;
    }

    /* Display table with labels above fields */
    form#personal-details-form table td,
    form#new-personal-details-form table td {
        display: block;
    }

    tr#get-address-row td:first-child {
        display: none;
    }

    form#personal-details-form table td label,
    form#new-personal-details-form table td label {
        width: auto;
        text-align: left;
    }

    fieldset p.row {
        overflow: hidden;
    }

    fieldset#make-payment p.row{
        overflow: initial;
    }
    
    fieldset p.row select {
        float: right;
    }

    fieldset#travel-insurance span.tilabel,
    #voucher-code-details label {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    fieldset#currency-selector td {
        display: block;
    }

    fieldset#currency-selector td:first-child {
        width: 100%;
    }

    fieldset#currency-selector td:nth-child(2) {
        float: left;
        width: 60%;
    }

    fieldset#currency-selector td#currency-flag {
        float: right;
        text-align: right;
        padding-top: 0;
        width: 30%;
        padding-right: 10px;
    }

    .payment-content input[type=button],
    .wrap-width-content fieldset input[type=button] {
        padding: 4px 5px;
    }

    #confirmation-has-account li {
        float: none;
        width: 100%;
        margin-bottom: 0.5em;
    }

    #confirmation-has-account p.submit-wrapper {
        float: none;
        width: auto;
    }
}

/* jQuery Dialog popup mobile fix */
@media screen and (max-width: 605px) {
    div.ui-dialog {
        margin: 0;
        left: 0.25% !important;
        width: 99% !important;
        padding-left: 0.5%;
        padding-right: 0.5%;
        border-left: 0;
        border-right: 0;
    }

    /* Hide the bottom view account button on mobiles; there's not enough room for it */
    input#view-account-2 {
        display: none;
    }

    div#return-to-site-2 input {
        margin-left: 0;
    }
}

@media screen and (max-width: 480px) {
    fieldset#ferry-selector select {
        width: 100%;
    }
}

/* Portrait mobiles only */
@media screen and (max-width: 400px) {
    iframe#sagePayIframe {
        width: 300px;
    }

    .step-x-of-x-container {
        width: 300px;
    }

    div#booking-summary img, img#card-property-image, div#header h2 img, div.logo img {
        /*This was affecting the Logo width for the white labels*/
        /*width: 98%;*/
        height: auto;
    }
}