/*

blue            #212445
pale green      #e4edd4
grey            #8b8e90
black           #17191B
white  ƒ     ƒ    #ffffff
warm grey       #cfceca

warm grey 50%   #e7e6e4 

*/

/*Variables*/
:root {
    --e_screen-size-0: 0px;
    --e_screen-size-SM: 576px;
    --e_screen-size-MD: 767px;
    --e_blue: #212445;
    --e_warm-gray: #e7e6e4;
    --e_light_gray: #cfceca;
    --e_pale-green: #e4edd4;
}



/* Overrides the standard bootstrap font   */
@font-face {
    /* Entryphone brand font - Uncut sans */
    font-family: 'UncutSans-Regular';
    src: url('../fonts/uncutsans/Webfonts/UncutSans-Regular.woff2') format('woff2');
}

body {
    /* Entryphone brand font - Uncut sans */
    font-family: 'UncutSans-Regular', sans-serif !important;
    font-size: 14px !important;
    color: black !important;
}

/*Overrides the bootstrap page width - was done for the Q series door panel menu*/
.container {
    max-width: 1450px !important;
    margin: 0 auto;
}


a {
    color: var(--e_blue);
    font-size: 16px;
    text-decoration: none !important;
}

    a:hover {
        text-decoration: underline !important;
    }



th {
    font-weight: bold;
    font-size: 14px !important;
}


h1 {
}


p {
    font-size: 1rem !important;
}



/* DevExpress styles */
/* CustomTreeViewStyles.css */
.dxTV .dxTVCheckBox {
    display: none;
}




/* entryphone styles - all start with e_ */


/* Used on home page */
.e_advert h2 a {
    color: var(--e_blue);
    font-size: 42px;
    margin-bottom: 16px;
    font-weight: 800;
    line-height: 50.4px;
}


.e_advert p {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 0;
}



/* entryphone styles */
.e_explanation-text-below-heading {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--e_blue);
}

.e_heading1 {
    margin-bottom: 6px;
    font-size: 32px !important;
    font-weight: 500;
    color: var(--e_blue);
}


.e_heading2 {
    margin-top: 32px;
    margin-bottom: 6px;
    font-size: 24px !important;
    font-weight: 500;
    color: var(--e_blue);
}



/* typically used from Griview numeric columns where we need to right align a heading */
.e_right {
    text-align: right;
}




.e_backgroundcolour {
    background-color: black !important;
}

.e_alternative_backgroundcolour {
    background-color: var(--e_light_gray);
}


/* <asp:RadioButtonList */
.e_radiostyle {
    line-height: 24px;
}

    /* <asp:RadioButtonList distance between radio button and text */
    .e_radiostyle label {
        margin-left: 10px !important;
    }



.e_vertical_spacing {
    position: relative;
    z-index: 2;
    margin-top: 10vh;
    background: rgba(255, 255, 255, 0.5);
    padding: 20px;
}


.e_bigbold_message {
    font-size: 52px;
    font-style: normal;
    font-weight: 300;
    line-height: 66px;
   
}


/* main menu items need to be in white as video is playing in background */
.nav-link {
    color: white !important;
}


.e_homepage-banner-overlay {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 750px;
    z-index: 0;
    overflow: hidden;
}

.e_non-homepage-banner-overlay {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 110px;
    z-index: 0;
    overflow: hidden;
    background-color: var(--e_blue);
}


.e_image-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.e_zoom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoomIn 6s ease forwards;
}

@keyframes zoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}




/* Bootstrap overrides */


.btn-secondary {
    background-color: var(--e_blue) !important;
    color: white !important;
}


.bi {
    font-size: 18px !important; /* Adjust the size as needed */
}

.alert-success {
    background-color: var(--e_pale-green) !important; /* Blue background */
}


.e_icon-24px {
    font-size: 24px !important;
}

/* Specically for menus used in MasterPageWithMenu */
/* Mobile devices */
@media (min-width: 0px) and (max-width: 767px) {

    /* TOP menu area  - on mobile it is the dropdown area that displays when you click the hamburger */
    .navbar-collapse {
        background-color: var(--e_blue);
        padding: 24px !important;
    }

    /* TOP menu popup items hover behaviour */
    .navbar-nav .nav-item:hover > .nav-link {
        color: #fff !important;
    }

    /* SUB menu popup area including the menu items themselves */
    .navbar-nav .nav-item:hover .dropdown-menu {
        display: block;
        border: 0px none black;
    }


    .dropdown-menu ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }


    /* Only used on Checkout trolley icon    */
    .dropdown-menu.e_trolley_dropdown {
        /*No need for modification on mobile*/
        /*transform: translateX(-75%) !important;*/

        background-color: var(--e_pale-green) !important;
    }
}

/* Specically for menus used in MasterPageWithMenu */
/* Everything larger than a mobile */
@media (min-width: 768px) {

    /* TOP menu area  - on mobile it is the dropdown area that displays when you click the hamburger */
    .navbar-collapse {
    }

    /* TOP menu popup items hover behaviour */
    .navbar-nav .nav-item:hover > .nav-link {
        color: #fff !important;
        text-decoration: underline;
        text-underline-offset: 12px;
        text-decoration-thickness: 2px;
    }

    /* SUB menu popup area including the menu items themselves */
    .navbar-nav .nav-item:hover .dropdown-menu {
        display: block;
        padding: 12px;
    }

    /* the box that appears containing the dropdown menu items  */
    .dropdown-menu {
        border: 6px;
        margin-top: 0px;
    }

        .dropdown-menu ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }


    /* The menu items dropdown but not the checkout  */
    .e_menuitems {
        /*Popup box width*/
        width: 700px;
        /*Popup box height*/
        height: 600px;
    }


    .nav-link {
        /* Spacing between main menu items */
        margin-right: 18px;
        margin-left: 18px;
        /*Pushes text down so that it lines up with bottom of Entryphone logo */
        margin-top: 18px;
        display: block;
    }

    /* Bootstrap overrides */


    /* Sub menu items */
    .dropdown-item {
        margin-top: 18px;
    }

        /* sub menu items e.g. Telephones, Releases */
        .dropdown-item:hover {
            text-decoration: underline;
            text-underline-offset: 5px;
        }

        .dropdown-item:focus {
            background-color: var(--e_pale-green) !important;
        }


    .nav-link, .dropdown-item, .dropdown-header {
        font-size: 1.25rem !important;
    }

    .dropdown-menu.e_trolley_dropdown {
        transform: translateX(-75%) !important;
        background-color: var(--e_pale-green) !important;
    }
}



footer {
    padding: 18px;
    border-left: 0px solid lightgray;
    border-right: 0px solid lightgray;
    border-top: 1px;
    border-bottom: 1px;
    border-style: solid;
    border-color: lightgray;
}


    footer a {
        color: var(--e_blue);
    }





/* FOR TESTING SCREEN SIZE BREAKPOINTS  */

@media (min-width: 0px) and (max-width: 575px) {
    .e_custom-background {
        /* background-color: red!important;*/
    }
}
/* Custom styles for small screens (sm) */
@media (min-width: 576px) and (max-width: 767px) {
    .e_custom-sm-background {
        background-color: orange;
    }
}
/* Custom styles for medium screens (md) */
@media (min-width: 768px) {
    .e_custom-md-background {
        background-color: green;
    }
}