/**
 * Copyright (c) 2019 Oracle and/or its affiliates. All rights reserved.
 */

/* NOTE: Do NOT change any styles in this file as it will change the look and feel of this Custom 
    Component across ALL Themes/Sites.

    Instead, copy the specific styles being overridden into the designs.css file of the Theme and 
    prefix it with .navMenu-default-style.
        Example
            Add the following to your Theme's design.css file to override the dropdown menu 
            background color:
                .navMenu-default-style .dropdown-menu {
                    background-color: blue;
                }

    Or create a new style(s) and prefix by that name instead, allowing the default style to remain 
    untouched. But this new style name also needs to be added to the design.json file for it to be 
    exposed/selectable by the end user in the Sites editor.
        Example
            Add the following to your Theme's design.css file to allow for the dropdown menu 
            background color to be manually overridden:
                .navMenu-blue-style .dropdown-menu {
                    background-color: blue;
                }
            Add the following in your Theme's design.json file to expose this new style in the Sites 
            editor:
                "navMenu": {
                    "styles": [
                        {
                            "name": "Blue",
                            "class": "navMenu-blue-style"
                        }			
                    ]
                }        
            In this case, once the navMenu component has been dropped onto a Site page the user can 
            go into the styles of the component and select "Blue" to change the background color.
*/

.navMenu {
    /*font-weight: bold;*/
    font-size: 12px;
    font-family: "Montserrat";
}
.navMenu li {
    list-style-type: none;
    float: left;
}
.navMenu li:hover {
    color: #ff8200;
   
}
.navMenu li a.active:hover {
    color: rgb(250, 4, 4);
}            
.navMenu li a:hover:not(.active) {
    color: #fff;
    font-weight:bold;
    background: #69aec9 ;
    
}            
.navMenu ul {
    padding-left: 0;
}
.navMenu .menuItems {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    z-index: 99;
}
.navMenu li a {
    display: block;
    color: #0092CB;
    padding: 14px 16px;
    text-align: center;    
    text-decoration: none;
    
}
.navMenu a.active {
    color: #000/*hsl(202, 97%, 49%)*/;
    font-size: 12px;
    font-weight:bold;
    background: #0178a7;
}
.navMenu .menuButton {
    display: none;                
    font-size: 26px;
    padding: 8px 16px;               
    font-weight: bolder;
    cursor: pointer;
    color: #e97800;
}
.navMenu.active .menuButton {
    color: #0178a7         
}  
.navMenu .menuButton:hover {
    color: rgb(252, 214, 4);
}
.navMenu .subMenu {
    display: none;
    z-index: 99;
}
.navMenu .subMenu .menuItems {
    display: grid;
    position: absolute;
}            
.navMenu .subMenu a {
    text-align: left;
}            
.navMenu li:hover .subMenu {
    display: block;
}     
.navMenu .subMenu li:hover,            
.navMenu .subMenu li a.active:hover,
.navMenu .subMenu li a:hover:not(.active) {
    color: hsl(31, 98%, 63%); /**color de la fuente cuando se pasa el cursor**/
}
.navMenu .subMenu li {
    float: none;
}
.navMenu .menuItems>li>.subMenu {
    position: absolute;
    border-width: 2px;
    border-style: solid;
    border-color: #0092CB;
    background-color: #fff;  /**fondo del desplegable**/ 
   /**background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(211,195,110,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); **/
}            

@media screen and (max-width: 1023px) {
    .navMenu {
        text-align: right;
        
    }    
    .navMenu li {
        float: none;
        min-width: 218px;   
        /*border-bottom: 1px solid #0074a1;*/     
    }
    .navMenu .menuItems {
        position: absolute;
        background-color: #fff; 
        /* NOTE: Matching dropdown menu up to what the right margin is set to in the Component so that it stays in line with the dropdown button */
        right: 0;    
    }
    .navMenu .menuItems {
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        z-index: 99;
    }    
    .navMenu .menuButton {
        display: inline-block;
    }
    .navMenu li a {
        text-align: left;
        font-size: 12px; /*fuente de las letras*/
    }
    .navMenu .menuItems {
        display: none;
        border-width: 2px;
        border-style: solid;
        border-color: #0277a5;  
           
    }
    .navMenu.active .menuItems {
        display: block;
    }
    .navMenu .subMenu{
        display: block;
    }
    .navMenu .menuItems>li>.subMenu {
        position: inherit;
        border: none;
        /* Having to do in order to clean up the right side border in the dropdown menu */
        background-color: transparent; 
        
        
               
    }
    .navMenu .subMenu div {
        margin-left: 20px;
    }
}


@media screen and (max-width: 1200px) {
    .navMenu {
        text-align: right;
        font-size: 9px;
    }
}

/*nuevo codigo*/
/*
@media screen and (max-width: 767px) {
    .navMenu {
        background: #000;
        position: absolute;
        top: 0px;
        left:0;
        width: 100%;
        height: 0;
        border: 1px solid #eee;
        overflow:hidden;
        transition: .3s ease-out;

        /*text-align: center;
        font-size: 9px;
    } 
}**/