/***************************************************************************************/
/*          APAN css file appbuttondropclick.css 
/*          Author: Shawn Parrish
/*          Purpse: Supports the "on-click" action of the drop down button via css only
/*                  without the need for javascript.
/*          Date:   06/03/2024
/*
/*
 /***************************************************************************************/


/* dd container  means drop down container*/
.dropdown {
    /*position: relative;*/
    /*margin: 5px; */
    /*background-color: #861cb9;*/
    background-color: transparent;
    /*margin:10px;*/
}

/* button */
.dropbtn {
    background-color: transparent;
    /*display: inline-block;*/
    /*padding: 12px 16px;*/
    /*color: white;*/
    /*cursor: pointer;*/
    /*background-color: #861cb9;*/
    transition: 0.85s ease-out;
}

    .dropbtn:hover {
        background-color: #691692;
    }


.dropdown .dropdown-content {
    position: fixed;
    top: 0%;
    visibility: hidden;
    opacity: 0;
    z-index: 100000;
    /* background-color: #f7f7f7; */
    min-width: 175px;
    padding: 5px 3px 5px 8px;
    font-size: 16px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    transition: 1.05s ease-out;
}



/* style link menu item , mi*/
.dropdown-content .mi {
    /*display: block;*/
    /*color: black;*/
    text-decoration: none;
    padding: 8px 0;
    position: relative;
    border-radius: 5px; /*shape and size of highlight bubble around selection in drop down menu */
    border-width: 1px;
    /* vertical-align: middle; */
}



    .dropdown-content .mi::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient( 90deg, rgba(240, 242, 244, 0) 0%, rgba(223, 223, 223, 1) 30%, rgba(240, 242, 244, 0) 100% );
        opacity: 0;
        z-index: -1;
        transition: 1.4s ease-out;
    }

    .dropdown-content .mi:hover::before {
        opacity: 1;
    }



/* show dd content */
.dropdown:focus .dropdown-content {
    outline: none;
    visibility: visible;
    opacity: 1;
    transform: translateY(20px);
}


/* mask to close menu by clicking on the button */
.dropdown .db2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    display: none;
}

.dropdown:focus .db2 {
    display: inline-block;
}

.dropdown .db2:focus .dropdown-content {
    outline: none;
    visibility: hidden;
    opacity: 0;
}




/*************************************************************  END OF FILE ************************************************************/