/**
 * Variables
 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

:root {
    --color-1: #0BA6FF;
    --color-2: #078fdd;
    --color-3: #001425;
    --color-4: #daeeff;
    --transition: .2s ease-in-out all;
    --font: 'Cairo', sans-serif;
}

/**
 * Fonts
 */
body.ez-rent-out {
    font-family: var(--font);
}

/**
 * Buttons 
 */
.ez-rent-out .btn.btn-bold, 
.ez-rent-out .btn.btn-primary,
.ez-rent-out .cart-nav span.badge {
    background-color: var(--color-1);
    transition: var(--transition);
}

.ez-rent-out .btn.btn-bold:hover, 
.ez-rent-out .btn.btn-primary:hover {
    background-color: var(--color-2);
}

.ez-rent-out a {
    color: var(--color-1);
    transition: var(--transition);
}

.ez-rent-out a:hover {
    color: var(--color-2);   
}

/* 
* Header
*/
.ez-rent-out .header-fixed,
.ez-rent-out nav.navbar-default {
    background-color: var(--color-3);
}

.ez-rent-out .cart-nav span.badge {
    border: 1px solid var(--color-3);
}

.ez-rent-out nav.navbar-default {
    border-bottom: 2px solid var(--color-1);
}

.ez-rent-out .nav-main .cart-nav {
    padding-bottom: 5px;
}

.ez-rent-out .navbar-default .navbar-nav > li > a {
    transition: var(--transition);
}

.ez-rent-out .navbar-default .navbar-nav > li > a:hover {
    color: var(--color-1);
}

.glyphicon-chevron-down:before {
    color: var(--color-3);
}

.ez-rent-out .header-buttons > .account, .ez-rent-out .header-buttons>.account a {
    color: var(--color-4)!important;
}

.ez-rent-out .header-buttons > .account a:hover {
    color: var(--color-1)!important;
}

.ez-rent-out path {
    stroke: var(--color-4) !important;
    color: var(--color-4) !important;
}

.ez-rent-out path:hover {
    stroke: var(--color-1) !important;
    color: var(--color-1) !important;
}

.ez-rent-out .navbar-toggle.collapsed.pull-left {
    color: #FFF!important;
    background-color: var(--color-2)!important;
}

/**
 * Body on HP
 */
.cart-duration-messaging {
    padding-top: 20px;
}

/**
 * HP Slider
 */
.carousel-indicators li + li {
    margin-left: 5px;
}

.carousel-indicators li {
    border-color: var(--color-3);
    background-color: var(--color-3);
    transition: var(--transition);
}

.carousel-indicators li.active {
    border-color: var(--color-1);
    background-color: var(--color-1);
}