/*  

PROJECT: HERTZ FREERIDER
AUTHOR: JIM at POOL.SE
CREATED: 20051108

Heavily modified by tom at netigrate.se

Modified by Hampus at afconsult.com
...and by Johan Bryntesson at afconsult.com, map solution


And modified yet again 2017 by Oskar Zaar - Hertz / FOGA.nu



-------------------------//------------------------------

*/


/*
---------------------------------------------------------------------
General layout
---------------------------------------------------------------------
*/

/* Normalize */
@import 'normalize.css';

@import url('https://images.hertz.com/font/css/family/Ride.css');

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}



/*  Typface   */


* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
}

body, html {
    background: #000;
    font: normal 14px/16px;
    font-family: Ride, 'Ride', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222
}

body {
    margin: 20px 20px 20px 0px;
}

p {
    font-size: 14px;
}


#bdy table {
    margin: auto;
}


#first_td {
    vertical-align: top;
}

#second_td {
    vertical-align: top;
    padding-left: 10px;
}

.margin_bottom--small {
    padding-bottom: 10px;
}


/* Panelen till höger med reklam */
.adpanel {
    float: left;
    width: 250px;
    vertical-align: top;
    display: none;
}

.ad {
    padding: 10px 0 10px 0;
}


    .ad:first-of-type {
        padding-top: 0;
    }


/* Den stora behållaren för hemsidans innehåll.
   Reklampanelen ligger utanför */
#wrap {
    /*margin: 0 10px 0 30px; 0 30px auto;*/
    width: calc(90vw - 300px);
    margin: auto;
}

#PrintContent {
    /*background-color: #fff;
    overflow: auto;
    overflow: visible;
    height: auto;
    width: 764px;
    display: inline-block;*/
    text-align: left;
    /*overflow:hidden;*/
    margin: 0 auto;
    background: #fff;
    /*overflow-x:scroll;*/
    /*overflow: auto;*/
    overflow: hidden;
    height: auto;
}

.OuterContentPane {
    background: #fff;
}



#branding {
    height: 275px;
}

    #branding img {
        width: 100% !important;
    }



/*.block
{
    padding: 10px 0 10px 0; 
    margin:0 2px 0 0; 
    overflow: auto;
    overflow: visible;
    background-color: #fff;
    height: auto;   
    display: inline-block;
}*/

.slicktoggle_container {
    width: 400px;
    margin: 30px auto;
}

form[action^="./edit_order.aspx"] em {
    font-size: 80%;
}


.ContentPane .indent {
    padding: 12px 12px 20px 12px;
    margin: 0 !important;
}

.ContentPane h2 {
    padding: 6px 16px 30px 30px;
}

.ContentPane hr#faq {
    margin: 6px 0px 6px 0px;
}

.shade {
    background: #fff;
}

.round_box {
    background: #ededed;
    width: 415px; /* the gap on the right edge of the image (not content padding) */
}

    .round_box div {
        background: #ededed;
    }

        .round_box div div {
            background: #ededed;
        }

            .round_box div div div {
                background: #ededed;
                padding: 20px 15px 15px 15px;
                font: 14px Ride, 'Ride',verdana,serif;
                font-style: italic;
                color: black;
            }

#intro {
    float: left;
    width: 415px;
    margin: 20px 0 10px 20px;
}

* html #intro {
    display: inline;
}

#sign_up_now {
    font-size: 16px;
    color: #222;
}

#share {
    padding: 20px 0 10px 10px;
    margin: 0 2px 0 0;
    font-size: 12px;
    color: #222;
}

a.shareicon {
    margin: 0 0 0 15px;
    border: none;
}

    a.shareicon img {
        border: 0;
    }

.leftframe {
    float: left;
    width: 360px;
    background: url('../bilder/body_vertical_divider_bgr.png') repeat-y bottom right;
    overflow: auto;
}

.rightframe {
    float: left;
    width: 360px;
    overflow: auto;
    padding-left: 12px;
}

#offers {
    float: right;
    width: 304px;
    margin: 0 0 20px 0;
}

#filter_offers_width_from_and_to_stationGroup {
    width: 294px;
    padding: 10px 0 15px 0;
    margin: 10px 0 15px 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: bold;
    background-color: #E5E5E5;
    border-bottom: 1px solid #D5D5D5;
    border-top: 1px solid #D5D5D5;
    text-align: center;
}

#offers_list {
    height: 360px;
}

.leftcolumn, .rightcolumn {
    width: 381px;
    float: left;
    padding-bottom: 20px;
    padding-right: 30px;
}


    .leftcolumn div.block, .rightcolumn div.block {
        padding: 0px 0px 0px 30px;
    }

.leftcolumn {
    background: url('../bilder/body_vertical_divider_bgr.png') repeat-y bottom right;
}

#footer {
    color: #fff;
    background-color: #000;
    margin: 0 auto;
    width: 100%;
    clear: both;
    float: left;
    font-size: 14px;
    font-weight: bold;
}

/* MENU ny */

#main_menu {
    height: 50px;
}


.menu {
    background: #ffd100;
    height: 50px;
}


nav {
    float: right;
    padding: 0;
    width: 100%;
}


#menu-icon {
    display: none;
    width: 26px;
    height: 26px;
    background: url(../bilder/menuvit.svg) center no-repeat;
    background-size: contain;
    margin: 5vw;
    z-index: 60;
    position: fixed;
    top: 0;
    right: 0;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

    #menu-icon.active {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
    }

.menu ul {
    list-style: none;
}

.menu li {
    display: inline-block;
    float: left;
    padding: 10px;
    margin-top: 8px;
    border-left: 1px solid #fff;
    height: 15px;
}

/*
---------------------------------------------------------------------
Offerlist
---------------------------------------------------------------------
*/

#offers_list table {
    border-collapse: collapse;
    width: 100%;
}

    #offers_list table tr td {
        padding: 2px 2px 2px 2px;
        font-size: 14px;
        line-height: 16px;
        color: #000;
    }

    #offers_list table td + td {
        padding: 2px 15px 2px 2px;
        text-align: right;
    }

    #offers_list table tr.highlight td {
        border-top: 1px solid #D5D5D5;
        color: #000;
    }

    #offers_list table tr.highlight td {
        font-weight: bold;
    }

    #offers_list table a.book {
        float: right;
        display: block;
        height: 25px;
        width: 57px;
        text-align: center;
        color: #222;
        font-size: 14px;
        line-height: 25px;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
        margin-bottom: 15px;
    }

        #offers_list table a.book:hover {
            color: #fff;
        }

a.book {
    float: right;
    display: block;
    text-align: center;
    color: #222;
    font-size: 14px;
    line-height: 25px;
    font-weight: bold;
    text-transform: uppercase;
    background: url(../bilder/boka-trans.png) no-repeat top left;
    cursor: pointer;
}

    a.book:hover {
        color: #fff;
    }

img.heading {
    padding: 0 10px 0 30px;
}


/*
---------------------------------------------------------------------
Topography
---------------------------------------------------------------------
*/

h1 {
    font-size: 28px;
    line-height: 32px;
    font-weight: normal;
    margin: 0 0 12px 0;
    padding: 0;
    color: #222;
}

h2 {
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
    margin: 0 0 12px 0;
    padding: 0;
    color: #222;
}

h3 {
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
    margin: 0 0 12px 0;
    padding: 0;
    color: #222;
}

em {
    font-style: normal;
    color: #222;
}


/*
---------------------------------------------------------------------
Links
---------------------------------------------------------------------
*/

a {
    text-decoration: none;
    color: #737373;
    border: none;
}

    a img {
        border: 0;
    }

    a:hover {
        text-decoration: none;
        color: #ffd100;
    }

#footer a {
    text-decoration: none;
    color: #737373;
    font-weight: bold;
}

    #footer a:hover {
        text-decoration: none;
        color: #ffd100;
    }

#offers_list a.showall {
    border-top: 5px solid #fc0;
    color: #737373;
    background-color: #ededed;
    text-align: right;
    padding: 6px 30px 6px 0;
    display: block;
    clear: both;
}

#offers_list a.showall {
    text-decoration: none;
    color: #737373;
    font-weight: bold;
}

    #offers_list a.showall:hover {
        text-decoration: none;
        color: #222;
    }

a.lnkRegister {
    background: url(../bilder/button_big.gif);
    font-size: 12px;
    line-height: 45px;
    font-weight: bold;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}


/*
---------------------------------------------------------------------
Forms
---------------------------------------------------------------------
*/


.leftcolumn input[type=text], .rightcolumn input[type=text], .leftcolumn input[type=password], .rightcolumn input[type=password] {
    width: 155px;
}

.leftcolumn input.long, .rightcolumn input.long {
    width: 328px;
}

form, .leftcolumn input, .rightcolumn input {
    margin: 0;
    padding: 0;
}

    form .leftcolumn p, form .rightcolumn p, form.ContentPane p {
        padding: 6px 16px 10px 30px;
    }

    form .leftcolumn h2, form .rightcolumn h2 {
        padding: 6px 16px 30px 30px;
    }

/*
---------------------------------------------------------------------
Other
---------------------------------------------------------------------
*/

form, table, tr, td {
    margin: 0;
    padding: 0;
}

.left {
    float: left;
    margin-right: 16px;
}

.right {
    float: right;
    margin-left: 16px;
}

.margin-bottom {
    margin-bottom: 15px;
}

/*
---------------------------------------------------------------------
Netigrate special
---------------------------------------------------------------------
*/

fieldset table td {
    padding-left: 6px;
}

fieldset {
    padding-left: 6px;
    padding-bottom: 6px;
}

.Validator {
    color: red;
    font-size: 14px;
    font-weight: bold;
}

.ErrorMessage {
    font-size: 14px;
    color: red;
}

.FilterPane {
    background-color: #B9C5CC;
}

.ngFilterPaneExpanded {
    z-index: 1000;
    border-style: outset;
    padding: 5px 5px 5px 5px;
    background-color: #B9C5CC;
    position: absolute;
    top: 340px;
    left: 190px;
    visibility: hidden;
}

.ngFilterPaneCollapsed {
    position: absolute;
    top: 200px;
    left: 33px;
    width: 100px;
    visibility: visible;
    text-decoration: underline;
    font-size: 14px;
    position: absolute;
    font-weight: bold;
    cursor: pointer;
}

.label {
    font-size: 12px;
}


/*
---------------------------------------------------------------------
Form styles / Input fields
---------------------------------------------------------------------
*/

.FormText {
    color: #333333;
}

.FormInputText {
    font-family: Ride,'Ride',verdana,serif;
    color: #000000;
    padding-left: 3px;
    background-color: #fff;
    border: 1px solid #ededed;
    width: 100% !important;
    padding: 5px !important;
    float: left;
    font-weight: normal;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 15px;
}

.FormInputText-sm {
    width: 30% !important;
}

.FormInputText-m {
    width: 50% !important;
}

.FormInputText-l {
    width: 80% !important;
}

.FormInputText-xl {
    width: 100% !important;
}

.FormInputTextArea {
    font-family: Ride,'Ride',verdana,serif;
    color: #000000;
    padding-left: 3px;
    margin-bottom: 15px;
    border: 1px solid #ededed;
    width: 100%;
}

.FormCheckbox {
    color: #000000;
}

.FormRadio {
    color: #000000;
}


.FormButton {
    font-family: Ride,'Ride',verdana,serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
    color: black;
    font-weight: bold;
    background: #ffd100;
    cursor: hand;
    -webkit-appearance: none;
    border: none;
    padding: 15px !important;
}


.FormSelect {
    background-color: #fff;
    border: 1px solid #ededed;
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    padding: 5px;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.rightcolumn .FormSelect {
    float: left;
}

/*#filter_offers_width_from_and_to_stationGroup select, .rightcolumn .FormSelect {
    background-color: #fff;
    border: 1px solid #ededed;
    width: 100% !important;
    padding: 5px;
    float: left;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}*/

#filter_offers_width_from_and_to_stationGroup table {
    width: 100%;
}


    #filter_offers_width_from_and_to_stationGroup table tr td {
        width: 100%;
        float: left;
    }



/*
---------------------------------------------------------------------
Contact
---------------------------------------------------------------------
*/

.contactInfoHeader {
    font-weight: bold;
    font-size: 14px;
}

.contactInfo {
    font-size: 12px;
    font-weight: bold;
}

.contactInfoData {
    font-size: 12px;
}


/*
---------------------------------------------------------------------
display_stations
---------------------------------------------------------------------
*/

.stationName {
    font-weight: bold;
    font-size: 14px;
}

.stationLabel {
    font-size: 12px;
    font-weight: bold;
}

.stationDataLabel {
    font-size: 12px;
}

table.displayDriverData {
    width: 100%;
}

    table.displayDriverData tr td {
        padding: 5px 0px 5px 30px;
    }

table.displayTable {
    background-color: #fff;
    width: 850px !important;
}

tr.displayTableHeader {
    color: black;
    background: #ffd100;
    padding: 2px 5px 2px 5px;
}

tr.displayTableHeader th {
    text-align: left;
}

tr.displayTableHeader a {
    color: black;
    text-decoration: underline;
}

tr.displayTableCell td {
    font-size: 11px;
    padding: 2px 5px 2px 5px;
    white-space: nowrap;
}

tr.displayTableHover {
    background-color: silver;
}

    tr.displayTableHover td {
        color: black;
        font-size: 11px;
        background: #ffd100;
        padding: 2px 5px 2px 5px;
        white-space: nowrap;
    }

        tr.displayTableHover td a:hover {
            color: Black;
            text-decoration: underline;
        }

table.ngTable tr td {
    padding: 2px 2px 2px 2px;
    white-space: nowrap;
}

tr.c1 td {
    background-color: Silver;
}

.StandardMenu {
    border: solid 1px black;
    background-color: Lime;
    font-size: 11px;
    line-height: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

    .StandardMenu tr td {
        margin: 0px 0px 0px 0px;
        padding: 0px 5px 0px 5px;
        background-color: #ffd100;
        color: black;
    }

.StandardMenuHover {
    background-color: silver;
}

.StandardMenuSelected {
    background-color: Fuchsia;
}



ul {
    list-style-position: outside;
    vertical-align: top;
}

ol {
    list-style-position: outside;
}



#insurance_options a {
    cursor: pointer;
}

.insurance_info {
    border: 1px solid gray;
    padding: 2px;
    margin-bottom: 5px;
    width: 95%;
    background-color: #fbfabc;
}

/* Map */
#map-canvas {
    width: 100%;
    height: 600px;
}

/*
---------------------------------------------------------------------
default
---------------------------------------------------------------------
*/
.how-it-works-list {
    list-style-type: none;
}

.how-it-works-listitem {
    margin-top: 10px;
    display: flex;
}

    .how-it-works-listitem i {
        min-width: 40px;
        margin-bottom: 5px;
    }

.register-btn-container {
    text-align: center;
    padding: 10px 0 0 0;
}

/* ----------  DESKTOP -------------------------------------- */
/* ----------  DESKTOP -------------------------------------- */
/* ----------  DESKTOP -------------------------------------- */
/* ----------  DESKTOP -------------------------------------- */
@media screen and (min-device-width:521px) {
    html, #bdy, body, p {
        font-size: 16px;
    }

    /*#ctl00_ContentPane {
    display: flex;
    flex-flow: column;
}*/

    #PrintContent {
        overflow: hidden;
        height: auto;
    }

    #bdy table {
        width: 100%;
    }

    .ContentPane div.indent {
        padding: 12px 12px 20px 12px;
        margin: 0 auto !important;
    }

    .ContentPane .block.indent p {
        width: 850px;
        margin: auto;
    }

    form[action^="./default.aspx"] h1 {
        background: url('../bilder/bg1.jpeg');
        background-size: cover;
        background-position-y: center;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 40px;
        line-height: 32px;
        font-weight: bold;
        letter-spacing: .6px;
        padding: 0;
        width: 100%;
        height: 60vh;
        top: 0;
        text-align: center;
        padding-top: 40vh;
        margin-bottom: 20px;
        text-shadow: 1px 2px 10px rgba(0,0,0,0.7);
    }

    form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder1 p {
        margin: 10px 10% 0 10%;
    }

        form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder1 p:after {
            content: ' ';
            display: inline-block;
            min-width: 100vw;
        }


    .ctl00_ContentPlaceHolder1_List_transport_offers1_gwOffers {
        width: 80%;
    }


    .displayTable .displayTableHeader th {
        padding: 0 5px;
    }


    #branding {
        display: none;
        order: 2;
        width: 100%;
    }

        #branding img {
            display: none;
        }

    #sign_up_now {
        width: 80%;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #offers_list a.showall {
        border-top: 5px solid #ffd100;
        background-color: #fff;
    }

    #filter_offers_width_from_and_to_stationGroup {
        width: 100%;
    }

        #filter_offers_width_from_and_to_stationGroup table {
            width: 70% !important;
        }

            #filter_offers_width_from_and_to_stationGroup table tr td {
                width: 40%;
                float: left;
                margin-left: 10%;
            }

    #footer {
        padding: 40px;
        margin-top: 20px;
    }


    #offers_list {
        height: auto;
        margin-bottom: 20px;
    }

    #main_menu {
        order: 1;
        width: 100%;
        background: #000;
        color: #fff;
        position: relative;
        height: auto;
    }

        #main_menu a {
            color: #fff;
        }

            #main_menu a:hover {
                color: #ffd100;
            }

    .menu {
        background: #000;
        height: auto;
        display: flex;
        align-items: center; /* Vertical center alignment */
    }

        .menu li {
            border-left: none;
            margin: none;
            height: auto;
            padding-left: 4vw;
        }

    #second_td {
        padding: 0;
        width: 0;
    }

    .round_box {
        width: auto;
    }

    #intro, #offers {
        width: 80%;
        margin: auto;
        float: none;
        margin-top: 20px;
    }

    #intro {
        width: 100%;
        margin-top: 0;
    }

    ol {
        font-size: 14px;
        list-style-position: inside;
    }


    .round_box, .round_box div div div {
        background: #fff;
        padding: 0;
    }

    #share {
        display: none;
    }



    #ctl00_MenuNew1_menu::before {
        content: '';
        width: 25%;
        height: 70px;
        margin: 20px;
        float: left;
        /* z-index: 10; */
        background: url(../bilder/logo/loggul.svg) center center no-repeat;
        background-size: contain;
    }

    #PrintContent {
        order: 3;
    }

    #wrap {
        width: 100%;
    }

    body {
        margin: 0 !important;
    }

    .FormButton, a.book, a.lnkRegister {
        color: #000;
        background: #ffd100;
        cursor: hand;
        text-decoration: none;
        margin: auto;
        /*width: 40% !important;*/
        padding: 15px;
        border: none;
        text-align: center;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        background: #ffd100;
        cursor: pointer;
        /*margin-left: 15%;*/
        height: auto !important;
    }

    a.book, a.lnkRegister {
        width: 90% !important;
        padding: 10px;
        font-size: 120%;
        font-weight: bold;
        margin-left: 0;
    }

    a.lnkRegister {
        width: 30% !important;
    }

    #second_td {
        background: #fff;
    }

    #first_td {
        background: #fff;
    }

    #ctl00_ContentPlaceHolder1_panelOk .leftcolumn {
        margin-left: 0;
    }

    form[action^="./stationInfo.aspx"] body {
        margin: 0 !important;
    }

    form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder2 ul {
        list-style: none;
    }

        form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder2 ul li {
            margin-top: 10px;
        }

            form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder2 ul li i {
                float: left;
                margin-right: 15px;
                width: 40px;
            }

    form[action^="./default.aspx"] .round_box div div div {
        padding-top: 0 !important;
        font-style: normal;
        color: #222;
    }

    .leftcolumn {
        margin-left: 10%;
    }

    .label {
        font-size: 14px;
    }

    .leftcolumn, .rightcolumn {
        width: 40%;
        font-size: 14px;
        margin-top: 30px;
    }

    .ContentPane hr#faq {
        margin: 20px 0px 20px 0px;
    }

    form[action^="./display_faq.aspx"] h2 {
        margin-top: 30px;
    }

    form[action^="./display_faq.aspx"] .ContentPane {
        width: 70%;
        margin: auto;
    }

    form[action^="./mySettings.aspx"] .leftcolumn .FormButton {
        width: 40% !important;
        margin: 5px !important;
    }

    form[action^="./mySettings.aspx"] .leftcolumn .ctl00_ContentPlaceHolder1_Button2 {
        width: 40%;
        background: #308dff;
        color: white;
    }

    form[action^="./mySettings.aspx"] .FormSelect, form[action^="./mySettings.aspx"] .FormInputText, form[action^="./mySettings.aspx"] textarea {
        margin-bottom: 10px;
    }

    #edit_TransportOffer .rightcolumn .FormInputText {
        margin: 4px 0 16px;
    }

    #edit_user .FormSelect, #edit_user .FormInputText, #edit_user .FormInputTextArea, #transportOfferIntrest_block .FormSelect {
        margin-bottom: 10px !important;
        width: 100%;
    }

    .tripsNow br {
        display: none;
    }

    .tripsNowNum {
        margin-right: 2px;
    }

    .tripsNow {
        text-transform: lowercase;
    }

    form[action^="./list_transport_offer.aspx"] .leftcolumn h2 {
        width: 100%;
        text-align: center;
        background: url(../bilder/bg2.jpeg);
        background-size: cover;
        color: #fff;
        padding-top: 15vh !important;
        text-transform: lowercase;
        height: 50vh;
        background-position: center;
    }

        form[action^="./list_transport_offer.aspx"] .leftcolumn h2 .tripsNowNum {
            font-size: 52px;
        }


    form[action^="./list_transport_offer.aspx"] .leftcolumn div.block, form[action^="./list_transport_offer.aspx"] .rightcolumn div.block {
        padding: 0;
        width: 80%;
        margin: auto;
    }

    form[action^="./list_transport_offer.aspx"] .leftcolumn, form[action^="./list_transport_offer.aspx"] .rightcolumn {
        background: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }


    form[action^="./edit_order.aspx"] #ctl00_ContentPlaceHolder1_Button2, form[action^="./mySettings.aspx"] #ctl00_ContentPlaceHolder1_Button1 {
        background: #f15757 !important;
    }

    form[action^="./edit_order.aspx"] .leftcolumn {
        padding: 0;
        padding-right: 30px;
    }

    form[action^="./edit_order.aspx"] .rightcolumn {
        padding: 0;
        padding-left: 30px;
    }

    form[action^="./edit_order.aspx"] table.displayDriverData tr td {
        padding: 2px;
    }

    form[action^="./edit_order.aspx"] #ctl00_ContentPlaceHolder1_DisplayStationBusinessHours1_table + table tr td {
        padding: 10px;
    }

    form[action^="./newuser.aspx"] .rightcolumn .FormSelect {
        margin-bottom: 15px;
    }

    form[action^="./newuser.aspx"] .FormInputText, form[action^="./newuser.aspx"] textarea {
        margin-bottom: 10px;
    }

    form[action^="./newuser.aspx"] .rightcolumn .block table tr td:first-child {
        width: 10%;
    }

    form[action^="./newuser.aspx"] .leftcolumn, form[action^="./login.aspx"] .leftcolumn, form[action^="./mySettings.aspx"] .leftcolumn {
        padding-right: 30px !important;
    }

    form[action^="./newuser.aspx"] #ctl00_ContentPlaceHolder1_Spara {
        margin-left: 15%;
    }

    form[action^="./list_transport_offer.aspx"] #PrintContent, form[action^="./list_transport_offer.aspx"] #first_td {
        width: 100% !important;
    }

    form[action^="./list_orders.aspx"] #ctl00_ContentPlaceHolder1_List_orders1_gwOrders {
        width: 80%;
    }

        form[action^="./list_orders.aspx"] #ctl00_ContentPlaceHolder1_List_orders1_gwOrders th {
            font-size: 80%;
        }

    form[action^="./list_orders.aspx"] #PrintContent, form[action^="./list_orders.aspx"] #first_td {
        width: 100% !important;
    }

    form[action^="./popupAgreement.aspx"] ul {
        margin-left: 20px;
    }

        form[action^="./popupAgreement.aspx"] ul li {
            width: 50%;
        }

        form[action^="./popupAgreement.aspx"] ul span {
            width: 50%;
            float: right;
        }

    form[action^="./car_status.aspx"] #ctl00_ContentPlaceHolder1_Car_status1_Button1 {
        width: 80%;
        margin-left: 20px;
    }

    form[action^="./stationInfo.aspx"] #ctl00_ContentPlaceHolder1_MapMessage {
        margin: 0 !important;
        padding: 5px !important;
    }

    #ctl00_ContentPlaceHolder1_Edit_station1_MapMessage {
        padding: inherit;
    }
}


/* end big screens */

/* **************                                   ************** */
/* **************             MOBILE                ************** */
/* **************                                   ************** */


@media only screen and (min-device-width : 200px) and (max-device-width : 520px) {

    /* Mobile */

    /* Layout generellt */

    tbody, tr, td {
        display: block;
    }

    #second_td {
        display: none;
        width: 0;
        padding: 0;
    }

    #first_td {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        margin: 0;
        padding: 0;
        min-width: auto;
    }

    html, #bdy, body {
        background: #fff;
        width: 100vw;
        padding: 0;
        margin: 0;
    }

        #bdy table {
            margin: 0;
            width: 100% !important;
            display: block;
            overflow-x: hidden;
            font-size: small;
        }

    #wrap {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    #branding img {
        display: none;
    }

    .OuterContentPane {
        background: #fff;
        width: 100vw;
        height: 100vh;
    }

    #branding {
        background: #000;
        float: left;
        width: 100%;
        height: 10vh;
        z-index: 20;
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.4);
    }

        #branding::before {
            content: '';
            width: 75vw;
            height: 8vh;
            top: 10px;
            position: fixed;
            background: url(../bilder/logo/loggul.svg) center center no-repeat;
            background-size: contain;
        }

    #intro {
        width: auto;
        float: none;
        margin: 0;
    }

    .round_box {
        background: #E5E5E5;
        width: auto;
    }

    #share {
        display: none;
    }


    a.lnkRegister {
        text-decoration: none;
        width: 75% !important;
        height: auto !important;
        max-height: 61px;
        max-width: 586px;
        padding: 6px 0px;
        margin-bottom: 50px;
        text-align: center;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        background: #ffd100;
        cursor: pointer;
    }

    /*offerlist */

    #filter_offers_width_from_and_to_stationGroup {
        width: auto;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 0px;
        background: rgba(237, 237, 237, 0.32);
    }

        #filter_offers_width_from_and_to_stationGroup table {
            width: 90% !important;
            text-align: left !important;
            text-indent: 10px;
        }

    #offers_list table tr td {
        padding: 2px 2px 2px 2px;
        color: #222;
        width: 100%;
        float: left;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }

    .leftcolumn div.block, .rightcolumn div.block {
        padding: 0px;
    }

    form[action^="./list_transport_offer.aspx"] .leftcolumn div.block, form[action^="./list_transport_offer.aspx"] .rightcolumn div.block {
        margin: -20px;
        text-align: center;
    }

    form[action^="./mySettings.aspx"] .FormButton {
        width: 70% !important;
        margin-left: 15% !important;
        font-weight: bold;
        margin-bottom: 30px !important;
    }

    form[action^="./mySettings.aspx"] #ctl00_ContentPlaceHolder1_Login1_HyperLink1 {
        margin-left: 15%;
    }

    form[action^="./mySettings.aspx"] input {
        width: auto;
    }


    #sign_up_now p img {
        display: none;
    }


    #offers_list {
        height: auto;
        margin-top: -5px;
    }


    #ctl00_ContentPlaceHolder1_notifyByEmail, #ctl00_ContentPlaceHolder1_notifyBySMS {
        float: left;
        margin-right: 10px !important;
    }

    span[id$="_offerDescription1"] {
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder2 ul {
        list-style: none;
    }

        form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder2 ul li {
            margin-top: 10px;
            width: 100%;
            text-align: center;
        }

            form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder2 ul li i {
                width: 100%;
                text-align: center;
                margin-bottom: 5px;
            }


    form[action^="./edit_order.aspx"] table.displayDriverData tr td {
        padding: 10px;
    }

    form[action^="./edit_order.aspx"] #ctl00_ContentPlaceHolder1_Button2 {
        background: #f15757 !important;
    }

    #offers {
        width: auto;
        float: none;
    }

    .offer_header {
        font-size: 16px;
    }


    #offers h3 {
        padding-left: 20px;
    }


    #offers_list table a.book {
        float: none;
        margin: auto;
        display: block;
        height: auto;
        width: 60%;
        padding: 10px 0px;
        margin-bottom: 10px;
        margin-top: 10px;
        text-align: center;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        background: #ffd100;
        cursor: pointer;
    }

    .offer_header {
        font-size: 16px;
    }

    .highlight span {
        font-size: 16px;
        font-weight: bold;
        word-wrap: break-word;
    }

    .highlight td {
        max-width: 85%;
        margin-left: 30px;
    }
    
    /* agreement */

    form[action^="./popupAgreement.aspx"] ul {
        margin-left: 10px;
    }

        form[action^="./popupAgreement.aspx"] ul li {
            width: 100%;
        }

        form[action^="./popupAgreement.aspx"] ul span {
            width: auto;
            float: none;
            margin-left: 10px;
        }


    /* boka */

    .leftcolumn, .rightcolumn {
        width: 100%;
        padding: 20px;
        background: none;
        padding-top: 0;
    }

    form .leftcolumn h2, .ContentPane h2 {
        padding: 6px 16px 30px 30px;
        margin: 30px 0;
        font-size: 24px;
    }

    form .leftcolumn h2, .ContentPane h2 {
        padding: 6px 16px 30px 30px;
        margin: 30px 0;
        font-size: 24px;
        background: url(../bilder/bg2.jpeg);
        background-size: cover;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
        line-height: 32px;
        font-weight: normal;
        padding: 0;
        width: 100vw;
        margin: 0px -20px 10px -20px;
        height: 30vh;
        top: 0;
        text-align: center;
        padding-top: 15vh;
        margin-bottom: 20px;
    }

    form[action^="./list_transport_offer.aspx"] h2 {
        padding-top: 15vh !important;
    }

    .ContentPane h2 {
        margin: 0;
        font-size: 24px;
        background: url(../bilder/bg3.jpeg);
        background-size: cover;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
        line-height: 32px;
        font-weight: normal;
        padding: 0;
        width: 100vw;
        height: 30vh;
        top: 0;
        text-align: center;
        padding-top: 20vh;
        margin-bottom: 20px;
    }


    form[action^="./stationInfo.aspx"] #ctl00_ContentPlaceHolder1_MapMessage {
        margin: 0 !important;
        padding: 5px !important;
    }

    form[action^="./stationInfo.aspx"] .leftcolumn {
        padding: 0px !important;
        margin: 0px !important;
    }

    form[action^="./stationInfo.aspx"] .leftcolumn h2, form[action^="./stationInfo.aspx"] .ContentPane h2 {
        margin: 0;
        padding: 0;
        background: black;
        background-size: cover;
        color: #ffd100;
        font-size: 24px;
        line-height: 32px;
        font-weight: normal;
        padding: 10px;
        width: 100vw;
        height: 10vh;
        top: 0;
        margin: 0;
        text-align: center;
        margin-bottom: 20px;
    }

    form[action^="./stationInfo.aspx"] table.displayDriverData tr td {
        padding: 10px 0px 0px 0px;
    }

    form[action^="./default.aspx"] .round_box div div div {
        padding-top: 0 !important;
        background: #fff;
        font-style: normal;
        color: #222;
    }

    form[action^="./default.aspx"] h1 {
        background: url('../bilder/bg1.jpeg');
        background-size: cover;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
        line-height: 32px;
        font-weight: normal;
        padding: 0;
        width: 100vw;
        height: 37vh;
        top: 0;
        text-align: center;
        padding-top: 20vh;
        margin-bottom: 20px;
    }

    form[action^="./myOrders.aspx"] h2 {
        background: url('../bilder/bg-bokningar.jpeg') !important;
        background-size: cover !important;
    }


    form[action^="./mySettings.aspx"] .leftcolumn h2, form[action^="./mysettings.aspx"] .leftcolumn h2 {
        background: url('../bilder/bg-min-sida.jpeg') !important;
        background-size: cover !important;
    }

    form[action^="./mySettings.aspx"] .rightcolumn h2 {
        display: none !important;
    }

    form[action^="./newuser.aspx"] .leftcolumn h2 {
        background: url('../bilder/bg-registrera.jpeg') !important;
        background-size: cover !important;
        color: black !important;
    }

    form[action^="./newuser.aspx"] tr td {
        display: inline;
    }

    form[action^="./login.aspx"] .leftcolumn h2 {
        background: url('../bilder/bg-login.jpeg') !important;
        background-size: cover !important;
        color: black !important;
    }

    .tripsNowNum {
        font-size: 40px;
        font-weight: bold;
    }

    form[action^="./list_transport_offer.aspx"] #ctl00_ContentPlaceHolder1_Label2 {
        text-transform: lowercase;
    }

    /* rubrik top sidor */
    /*
h1, h2{

    background: url('../bilder/bg1.jpeg');
    background-size: cover;
    width: 100vw;
    height: 30vh;
    color: #fff;
    margin-left: -30px;
    margin-top: -40px;
    text-align: center;
    line-height: 30px;
}



*/
    /* text-sidor */


    .ContentPane div.block {
        margin: 10px 15px 20px 15px;
    }

    #offers_list a.showall {
        text-align: center;
        background: none;
        border: none;
        font-size: 14px;
    }


    #PrintContent {
        float: left;
        width: 100%;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .round_box div div div {
        padding: 0;
    }

    .placeholder {
        background-color: #fff;
        padding: 20px 15px 20px 15px !important;
    }


    .block strong {
        margin-bottom: 20px;
        float: left;
        width: 100%;
    }

    form[action^="./list_transport_offer.aspx"] .block strong {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_placeholder2 h3 {
        text-align: center;
    }

    #ctl00_ContentPlaceHolder1_placeholder h3 {
        margin-top: 10px;
    }

    #ctl00_ContentPlaceHolder1_placeholder p, #ctl00_ContentPlaceHolder1_placeholder span, #ctl00_ContentPlaceHolder1_placeholder em, #ctl00_ContentPlaceHolder1_placeholder p span, #ctl00_ContentPlaceHolder1_placeholder strong, #ctl00_ContentPlaceHolder1_placeholder font {
        font-size: 14px !important;
        font-weight: normal !important;
        text-decoration: none !important;
        font-family: Ride, 'Ride' !important;
        color: black !important;
    }

    #ctl00_ContentPlaceHolder1_placeholder strong, #ctl00_ContentPlaceHolder1_placeholder em {
        margin-bottom: 30px !important;
        float: left !important;
        width: 100% !important;
        margin-top: 10px !important;
        font-weight: bold !important;
    }


    #ctl00_ContentPlaceHolder1_EditTransportOfferIntrest1_to3, #ctl00_ContentPlaceHolder1_EditTransportOfferIntrest1_to2, #ctl00_ContentPlaceHolder1_EditTransportOfferIntrest1_to1 {
        margin-right: 5px !important;
    }

    #ctl00_ContentPlaceHolder1_EditTransportOfferIntrest1_from3, #ctl00_ContentPlaceHolder1_EditTransportOfferIntrest1_from2, #ctl00_ContentPlaceHolder1_EditTransportOfferIntrest1_from1 {
        margin-right: 5px !important;
        margin-left: 10px !important;
    }

    /* footer */

    #footer {
        font-size: 10px;
        padding: 0 10px;
    }

        #footer .left {
            font-size: 10px;
            text-align: center;
        }

        #footer p:nth-child(6), #footer p:nth-child(4) {
            display: none;
        }

    #ctl00_Link1:before {
        content: "\A";
        white-space: pre;
    }


    ol {
        font-size: 14px;
        list-style-position: inside;
    }
    /*nav mobile */


    .menu {
        background: none;
        /*height: 40px;*/
    }

    nav {
        width: auto;
        background: none;
    }

    #main_menu {
        height: 10vh;
        z-index: 40;
    }

    #menu-icon {
        display: inline-block;
    }

    nav ul, .menu ul {
        display: none;
        position: fixed;
        padding: 0;
        background: #ffd100;
        border: 1px solid #c5c2c2;
        right: 0px;
        top: 10vh;
        border-radius: 0;
        font-size: 20px;
        line-height: 40px;
        padding-top: 10px;
    }

    nav li, .menu li {
        text-align: center;
        width: 100%;
        padding: 0;
        margin: 0;
        margin-top: 0;
        border-left: none;
        height: auto;
    }


    nav li a, .menu li a {
        color: #000;
        text-transform: uppercase;
    }


    #offers p:last-of-type {
        margin: 20px;
        text-align: center;
    }

    .leftcolumn input[type=text], .rightcolumn input[type=text], .leftcolumn input[type=password], .rightcolumn input[type=password] {
        border: 1px solid #737373;
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        font-size: 100%;
    }

    .leftcolumn input.long, .rightcolumn input.long {
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        font-size: 100%;
    }

    table.ngTable tr td {
        padding: 10px 0px;
        white-space: nowrap;
        width: 100%;
        float: left;
    }

    table.ngTable .label, .rightcolumn .label {
        font-size: 14px;
        line-height: 16px;
    }


    #filter_offers_width_from_and_to_stationGroup select, .rightcolumn .FormSelect {
    margin-bottom: 7%;
    float: left;
    font-weight: normal;
    border: 1px solid #737373;
    width: 100%;
    border-radius: 3px;
    margin-top: 5px;
    padding: 5px;
    font-size: 100%;
    }

    .FormButton {
        color: #000;
        background: #ffd100;
        cursor: hand;
        text-decoration: none;
        margin: auto;
        width: 100% !important;
        padding: 25px;
        border: none;
        text-align: center;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        background: #ffd100;
        cursor: pointer;
        margin-left: 15%;
        margin-bottom: 30px;
    }

    /* avbryt */
    form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_Button2 {
        width: 40% !important;
        float: left;
    }

    /* bekräfta */
    form[action^="./default.aspx"] #ctl00_ContentPlaceHolder1_Button1 {
        width: 40% !important;
        float: right;
    }

    table.ngTable {
        width: 100% !important;
        margin: auto !important;
    }

    .rightcolumn .block table td {
        width: 100% !important;
    }

    .StandardMenu {
        visibility: hidden;
    }

    #sign_up_now {
        padding: 18px;
    }

    .displayTable .displayTableHeader th {
        padding: 0 5px;
    }

    .slicktoggle_container {
        margin: 30px;
    }
}



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    /* Tablet */

    #second_td {
        display: none;
    }
}

@media only screen and (min-device-width : 1024px) {

    /* Desktop */



}


.container {
    width: 100%;
}

    .container > .block {
        width: 80%;
        margin: auto;
    }