/* ----------------------------------------------------
   Hertz Cars Sales - Modern UI
-----------------------------------------------------*/

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f5f5;
    color: #222;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.hz-container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================
   Hide the old mobile menu for now.
========================================== */

.hz-mobile-menu{

    display:none;

}

/* =====================================================
   Modern Hertz Header
===================================================== */

#headerContainer.hz-header {
    background: #fff !important;
    border-bottom: 1px solid #e6e6e6;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#headerContainer .hz-header-wrapper {

    max-width: 1360px;

    margin: 0 auto;

    min-height: 95px;

    padding: 18px 36px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;
}

#headerContainer .hz-logo {

    display:flex;

    align-items:center;
}

#headerContainer .hz-logo img {

    height:56px;

    width:auto;

    display:block;
}

#headerContainer .hz-right {

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    justify-content:flex-start;

    padding-top:8px;
}

/* =====================================================
   LogOnUserControlDDC
===================================================== */

.hz-account-panel{

    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;

}

.hz-status-line{

    font-size:13px;
    color:#666;
    margin-bottom:2px;

}

.hz-user-name{

    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-size:15px;
    font-weight:600;
    margin-bottom:4px;

}

.hz-user-icon{

    font-size:18px;
    margin-right:8px;

}

.hz-links{

    display:flex;
    align-items:center;
    gap:10px;

}

#headerContainer .hz-links a,
#headerContainer .hz-links a:visited,
#headerContainer .hz-links a:link{

    color:#333 !important;
    text-decoration:none;
    font-size:14px;
    font-weight:500;

}

#headerContainer .hz-links a:hover{

    text-decoration:underline;
    color:#000 !important;
}

#headerContainer .divider{

    color:#999;

}


/* =====================================================
   MODERN MOBILE HEADER
===================================================== */

@media (max-width: 767px) {

    /* -------------------------------------------------
       HEADER
    ------------------------------------------------- */

    #headerContainer.hz-header {
        position: relative !important;
        width: 100% !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e5e5e5 !important;
        z-index: 9999 !important;
    }


    /* -------------------------------------------------
       HEADER WRAPPER
    ------------------------------------------------- */

    #headerContainer .hz-header-wrapper {
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;

        padding: 10px 18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        background: #ffffff !important;
    }


    /* -------------------------------------------------
       LOGO
    ------------------------------------------------- */

    #headerContainer .hz-logo {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    #headerContainer .hz-logo img {
        display: block !important;

        height: 42px !important;
        width: auto !important;
        max-width: 180px !important;
    }


    /* -------------------------------------------------
       HIDE DESKTOP ACCOUNT AREA
    ------------------------------------------------- */

    #headerContainer .hz-right {
        display: none !important;
    }


    /* =================================================
       MOBILE MENU WRAPPER
    ================================================= */

    #headerContainer .hz-mobile-menu {

        display: block !important;

        position: absolute !important;

        top: 0 !important;
        right: 0 !important;

        width: 58px !important;
        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        z-index: 10000 !important;
    }


    /* -------------------------------------------------
       HAMBURGER AREA
    ------------------------------------------------- */

    #headerContainer .hz-mobile-menu .header-mob,
    #headerContainer .hz-mobile-menu .header-ddc {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 58px !important;
        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    /* -------------------------------------------------
       HAMBURGER BUTTON
    ------------------------------------------------- */

    #headerContainer .hz-mobile-menu
    .icons-mob-menu-icon-ddc {

        position: relative !important;

        display: block !important;

        width: 44px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        box-shadow: none !important;

        cursor: pointer !important;
    }


    /* -------------------------------------------------
       HAMBURGER THREE LINES
    ------------------------------------------------- */

    #headerContainer .hz-mobile-menu
    .icons-mob-menu-icon-ddc::before {

        content: "" !important;

        position: absolute !important;

        left: 12px !important;
        top: 14px !important;

        width: 20px !important;
        height: 2px !important;

        background: #333333 !important;

        box-shadow:
            0 7px 0 #333333,
            0 14px 0 #333333 !important;
    }


    #headerContainer .hz-mobile-menu
    .icons-mob-menu-icon-ddc::after {

        display: none !important;
    }


    /* =================================================
       IMPORTANT:
       MENU IS CLOSED BY DEFAULT
    ================================================= */

    #headerContainer .hz-mobile-menu .mob-menu {

        position: absolute !important;

        top: 72px !important;
        right: 0 !important;

        width: 220px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-top: 0 !important;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

        z-index: 10001 !important;

        /* Closed state */
        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(-8px) !important;

        transition:
            opacity 0.22s ease,
            transform 0.22s ease,
            visibility 0.22s ease !important;
    }


    /* =================================================
       MENU OPEN STATE
    ================================================= */

    #headerContainer .hz-mobile-menu.menu-open .mob-menu {

        opacity: 1 !important;

        visibility: visible !important;

        transform: translateY(0) !important;
    }


    /* -------------------------------------------------
       MENU CONTAINER
    ------------------------------------------------- */

    #headerContainer #mobMenuContainer {

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }


    #headerContainer #mobMenuContainer dl {

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }


    /* -------------------------------------------------
       MENU ITEMS
    ------------------------------------------------- */

    #headerContainer #mobMenuContainer dd {

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        border-bottom: 1px solid #eeeeee !important;
    }


    #headerContainer #mobMenuContainer dd:last-child {

        border-bottom: 0 !important;
    }


    /* -------------------------------------------------
       MENU LINKS
    ------------------------------------------------- */

    #headerContainer #mobMenuContainer .mobMenuItemDDC {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        min-height: 54px !important;

        padding: 0 18px !important;

        background: #ffffff !important;

        color: #222222 !important;

        font-family: Arial, Helvetica, sans-serif !important;

        font-size: 15px !important;
        font-weight: 500 !important;

        text-decoration: none !important;
    }


    #headerContainer #mobMenuContainer
    .mobMenuItemDDC:hover {

        background: #f7f7f7 !important;

        color: #000000 !important;
    }


    /* -------------------------------------------------
       ARROW
    ------------------------------------------------- */

    #headerContainer #mobMenuContainer
    .icons-ft_arrow_right {

        display: inline-block !important;

        margin-right: 10px !important;

        color: #333333 !important;

        font-size: 14px !important;
    }


    /* -------------------------------------------------
       KEEP HEADER WHITE WHEN MENU IS OPEN
    ------------------------------------------------- */

    #headerContainer.hz-header,
    #headerContainer.hz-header .hz-header-wrapper,
    #headerContainer.hz-header .hz-mobile-menu,
    #headerContainer.hz-header .header-mob,
    #headerContainer.hz-header .header-ddc,
    #headerContainer.hz-header
    .icons-mob-menu-icon-ddc {

        background-color: #ffffff !important;
        background-image: none !important;
    }

}