/* =====================================
   NAV DROPDOWN COMPLETE CSS
===================================== */


/* parent menu item */

.dropdown_details{

    position:relative;

    display:flex;

    align-items:center;

}



/* keep dropdown area active */

.dropdown_details::after{

    content:"";

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    height:20px;

}



/* =====================================
   DROPDOWN BOXES
===================================== */


.dropdown-items,
.dropdown-items2,
.dropdown-items3,
.dropdown-items4,
.dropdown-items7{


    position:absolute;


    top:45px;


    left:50%;


    transform:translateX(-50%);



    background:rgb(2,60,2);


    border-radius:10px;


    padding:15px;



    z-index:9999;



    opacity:0;

    visibility:hidden;

    pointer-events:none;



    transition:all .2s ease;



    box-shadow:0 10px 25px rgba(0,0,0,.25);



}



/* normal dropdown width */


.dropdown-items,
.dropdown-items2,
.dropdown-items4{


    width:450px;

    min-width:450px;


    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:8px;


}





/* big dropdowns */


.dropdown-items3,
.dropdown-items7{


    width:750px;

    min-width:750px;


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;


}






/* SHOW DROPDOWN */


.dropdown_details:hover > .dropdown-items,
.dropdown_details:hover > .dropdown-items2,
.dropdown_details:hover > .dropdown-items3,
.dropdown_details:hover > .dropdown-items4,
.dropdown_details:hover > .dropdown-items7{


    opacity:1;


    visibility:visible;


    pointer-events:auto;


}







/* dropdown content */


.dropdown-items p,
.dropdown-items2 p,
.dropdown-items3 p,
.dropdown-items4 p,
.dropdown-items7 p{


    margin:0;

}




.dropdown-items a,
.dropdown-items2 a,
.dropdown-items3 a,
.dropdown-items4 a,
.dropdown-items7 a{


    display:block;


    color:white;


    text-decoration:none;


    padding:8px;


    font-size:13px;


    border-radius:5px;


}






.dropdown-items a:hover,
.dropdown-items2 a:hover,
.dropdown-items3 a:hover,
.dropdown-items4 a:hover,
.dropdown-items7 a:hover{


    background:#0b8f0b;


}







/* =====================================
   MENU LINKS
===================================== */


.dropdown_menu_link{


    text-decoration:none;

    color:green;

    font-size:14px;

    font-weight:600;

}



.dropdown_icon img{

    width:8px;

}






/* =====================================
   REPORT BUTTON
===================================== */


#reportgov{

    display:flex;

    align-items:center;

}



#reportgov img{

    width:75px;

}







/* =====================================
   MOBILE
===================================== */


@media(max-width:900px){



.dropdown-items,
.dropdown-items2,
.dropdown-items3,
.dropdown-items4,
.dropdown-items7{


    position:fixed;


    top:120px;


    left:5%;


    transform:none;


    width:90%;


    min-width:auto;



    max-height:70vh;


    overflow-y:auto;


}



.dropdown-items,
.dropdown-items2,
.dropdown-items4{


    grid-template-columns:1fr;

}



.dropdown-items3,
.dropdown-items7{


    grid-template-columns:1fr;

}



}

.livechat-section   {background-color: green;padding: 10px;}

.admin-logo      {font-family: 'Questrial'; color: white; font-weight: bolder;font-size: large;}
.admin-logo    img     {width: 50px;}


/* livesession section  */

.livechat-box-section   {border: 1px solid rgb(231, 230, 230);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}

.admin-chatbox      {border: 1px solid gray;background-color: rgb(235, 233, 233);
                    width: 70%; border-radius: 15px;padding: 10px;font-family: 'Questrial';
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}

.user-chatbox        {border: 1px solid gray;background-color: rgb(238, 247, 245);
                    width: 70%; border-radius: 15px;padding: 10px;font-family: 'Questrial';justify-self: right;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}

.chattime    {font-size: smaller;}

#livechat-form    {display: grid ; grid-template-columns: 1fr 50px;grid-gap: 5px;} 
#livechat-form  textarea  {width: 90%;justify-self: center;border-radius: 10px;height: 80px; resize: none;} 

#livechat-form button     {border: none;background: none;justify-self:start;}

#livechat-form img     {width: 30px;text-align: left;}


/* livechatbox section  */

.livechat-text-form-section   {border: 1px solid rgb(231, 230, 230);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}

.admin-chatbox       {border: 1px solid rgb(178, 177, 177);background-color: rgb(235, 233, 233);
                    width: 70%; border-radius: 15px;padding: 10px;font-family: 'Questrial';
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}

 .user-chatbox       {border: 1px solid rgb(206, 240, 15);background-color: rgb(238, 247, 245);
                    width: 70%; border-radius: 15px;padding: 10px;font-family: 'Questrial';justify-self: right;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}

.chattime    {font-size: smaller;}

#livechat-text-form    {display: grid ; grid-template-columns: 1fr 50px;grid-gap: 5px;} 
#livechat-text-form  textarea  {width: 90%;justify-self: center;border-radius: 10px;height: 80px; resize: none;} 

#livechat-text-form button     {border: none;background: none;justify-self:start;}

#livechat-text-form img     {width: 30px;text-align: left;}