/*Initial CSS Start*/
*, html
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    vertical-align: middle;/*This is mainly added for the image in between text to align in the middle*/
}
/*Initial CSS End*/

/*General CSS Start*/
.light
{
    color: beige;
}
/*General CSS End*/

/*Nav Start*/
#nav
{
    /*height: 25px;*/
    margin: 0;
    padding: 0;
    background : linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
    background-size: 400% 400%;
    -webkit-animation: gradientBG 10s ease infinite;
            animation: gradientBG 10s ease infinite;
}

@-webkit-keyframes gradientBG
{
    0%
    {
        background-position: 0% 50%;
    }
    50%
    {
        background-position: 100% 50%;
    }
    100%
    {
        background-position: 0% 50%;
    }
}
@keyframes gradientBG
{
    0%
    {
        background-position: 0% 50%;
    }
    50%
    {
        background-position: 100% 50%;
    }
    100%
    {
        background-position: 0% 50%;
    }
}

#logo-img
{
    padding-top: 4px;
    margin: 0px;
    height: auto;
    width: 40px;
}

#logo
{
    margin-left: 10px;
    background: white;
    width: 40px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid blueviolet;
}

#logo:hover
{
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(167, 85, 245, 0.671);
}

#td-logo
{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 40px;
}

/*    box-shadow: 2px 2px 1px 1px rgba(255, 255, 255, 0.1);*/

#burg-img
{
    padding-top: 5px;
    padding-left: 5px;
    margin: 0px;
    height: auto;
    width: 30px;
}

#burg
{
    margin-right: 10px;
    background: white;
    width: 40px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid blueviolet;
}

#burg:hover
{
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(167, 85, 245, 0.671);
}

#td-burg
{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 40px;
}

#td-header
{
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: 'Courier New', Courier, monospace;
}
/*Nav End*/

/*Button Start*/
.button
{
    width:max-content;
    margin: 8px auto 8px auto;
    padding: 5px; 
    border: 1px solid blueviolet;
    border-radius: 5px;
}

.button:hover
{
    background: linear-gradient(65deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
    color: beige;
}

a
{
    font-family: sans-serif, monospace;
    font-style: normal;
}

a:link
{
    color: black;
}

a:visited
{
    color: black;
}

/*
a:hover
{
    color: beige; 
        I commented it because this changed the text color even if the mouse was on directly
        over the text
        That is the text color changes if the mouse goes to same row as the link
        This caused the link to change to white color and this caused the text to become invisible
        Because the background was alo white
    
}
*/

a:active
{
    color: black;
}
/*Button End*/

/*Container Start*/
.container
{
    width: 700px;
    border: 1px solid blueviolet;
    border-radius: 5px;
    padding: 5px;
    margin: 8px auto 8px auto;
    text-align: left;
}
/*Container End*/

/*Font Size for id form1 and class sub starts*/

#form1
{
    font-size: small;
}

#result-text
{
    font-size: small;
}

.sub
{
    font-size: small;
}

/*Font Size for id form1 and class sub starts*/

/*loadspinanimate style start*/
.spin
{
    /*display: flex;*/
    width: 50px;
	height: 50px;
    border: 3px solid rgba(137, 43, 226, 0.1);
    border-radius: 50%;
    border-top-color: blueviolet;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin
{
    to
    {
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin
{
    to
    {
        -webkit-transform: rotate(360deg);
    }
}
/*loadspinanimate style end*/

/*Grade table customizations starts*/

#grade-table td
{
    border: 1px;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    
}

#grade-table td#marigin-bottom
{
    border-width: 0px;
}

#grade-table
{
    border: none;
}

.sub-gd
{
    border-style: none;
    box-sizing: content-box;
    background-color: rgba(252, 244, 252, 0.829);
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.sub-cd
{   
    border-style: none;
    box-sizing: content-box;
    background-color: rgba(252, 244, 252, 0.829);
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;  
}

/*Grade table customizations starts*/

/*Emp Styles Start*/
#img-emp
{
    width: 24px;
    height: auto;
    border: 1px solid blueviolet;
    border-radius: 3px;
    background-color: rgba(137, 43, 226, 0.1);
}
em
{
    border: 1px solid blueviolet;
    background-color: rgba(137, 43, 226, 0.1);
    border-radius: 3px;
    height: max-content;
    width: max-content;
    padding-left: 2px;
    padding-right: 2px;
    font-style: normal;
}
/*Emp Styles End*/

/*Popup Style Start*/
.popup
{
    position: absolute;
/*    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    background-color: transparent;
    border-radius: 3px;
    border: 1px solid blueviolet;
    
}
/*Not that we set the 'position' of body to relative
  And the 'position' of div as absolute to place it on-top of the body
  
  Note that 'display :flex or grid' should have it's parent element's position 'set' to relative*/
h5#popup-h5
{
    padding: 5px 0px 0px 0px;
    font-weight: 100;
}

/*

These are example for flex and grid
.popup2
{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    height: 9px;
    width: 9px;
}

.popup3
{
    display: grid;
    place-items: center;
}

*/

/*Pop Style End*/

/*Footer Start*/
.footer
{
    background: rgb(78, 78, 78);
    height: 100px;
}

/*
#id-footer-left
{

}

#id-footer-right
{

}

#id-footer-copyright
{

}
*/

/*Footer End*/