* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-size: small;
}

@font-face {
    font-family: "Roboto";
    src: url(resources/fonts/Roboto-Regular.ttf);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--msys-scrollbar-track);
    padding-left: 2px;
    padding-right: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #d3d3d3;
    border-radius: 4px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b8b8b8;
    }

body {
    font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif; 
    font-size: medium;  
}

table {
    width:100%; 
    border-collapse: collapse; 
}

h1 {margin-bottom: 6px; font-size:large;}

h2 {margin-bottom: 4px; font-size:small; color: gray; font-weight: normal; }

p {margin-bottom: 10px;}

:root {
    --msys-menu-bg-color: #1c1b20;
    --msys-menu-legend-color: gray;
    --msys-menu-item-bg-hover: #101014;
    --msys-border-color: #dcdcdc;
    --msys-section-bg-color: #1c1b20;
    --msys-main-bg-color: #f7f7f7;
    --msys-main-box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    --msys-input-border-color-focus: #dcdcdc;
    --msys-element-bg-color: #e2e2e2;
}

#layout {
    display:flex;
    align-items: stretch;  
    height:100vh; 
}

.flex {display:flex;}

.small {font-size: small;}

.w100p {width: 100%;}

.w300 {width: 300px;}

.w400 {width: 400px;}

.w500 {width: 500px;}

.w600 {width: 600px;}

.mh400 {min-height: 400px}

.mh500 {min-height: 500px}

.p10 {padding: 10px;}
.p20 {padding: 20px;}
.p30 {padding: 30px;}

.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

.link {text-decoration:none;}


#logo {
    
}

#nav {
    background-color: var(--msys-menu-bg-color);
    width:20%;
    min-width: 240px; 
}

#brand {
    border-bottom-style: solid;
    border-bottom-color: var(--msys-menu-bg-color);
    border-bottom-width: 1px;
    display: flex;
    gap: 10px;
    font-size: small;
    color: gainsboro;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 20px 20px 0px 20px;
}
    

    #brand img {
        height:34px; 
    }

    #brand .identity {
        padding:6px;
        text-align:center;  
    }

#menu {
    overflow: auto;
    height: calc(100vh - 60px);
    width: 100%;
    padding: 0px 20px 20px 20px;
}

#menu .legend {
    color: gainsboro;
    padding: 10px 0px 10px 0px;
    color: var(--msys-menu-legend-color);
    font-size:small; 
}

#menu .section {
    color: #a2a2a2;
}

#menu .item, #menu .disabled {
    padding: 10px 10px 10px 10px;
    border-radius:10px; 
}

#menu .item:hover {
    background-color: var(--msys-menu-item-bg-hover);
    color:white; 
}

    #menu .item a, #menu .disabled a {
        text-decoration: none;
        color: #a2a2a2;
    }

    #menu .active {
        background-color: black;
        color: white;
    }
        #menu .active a {
            
        }

    #menu .disabled a {
        cursor: not-allowed; 
    }



#menu .footer {

}

#single {
    width: 900px;
    margin: auto;
    padding: 6px;
    border-radius: 10px; 
}

#main {
    background-color: var(--msys-main-bg-color);
    width: 100%;
}


    #main .header {
        height:60px;
        display: flex;
        align-items: center;
        justify-content: space-between;  
        padding: 0px 20px 0px 20px;
    }

        #main .header .search {
            border-radius: 10px;
            background-color: white;
            width: 400px;
            box-shadow: var(--msys-main-item-shadow);
        }

        #main .header .search input {
            width: 100%;
            border-style: none;
            padding: 10px;
            border-radius: 10px;
            border-style: solid;
            border-width: 1px;
            border-color: gainsboro;
            background-image: url(resources/images/search_l.png);
            background-position-x: calc(100% - 6px);
            background-position-y: center;  
            background-repeat: no-repeat;  
        }

            #main .header .search input:focus {
                border-style: solid;
                border-color: var(--msys-input-border-color-focus);
                outline: none;
                border-color: gray;
                background-image: url(resources/images/search_g.png);
            }

        #main .header .user {
            font-size: small;
            background-color: var(--msys-element-bg-color);
            border-radius: 10px;
            padding: 10px 10px 10px 30px;
            display: flex;
            gap: 10px;
            background-image: url(resources/images/user_b.png);
            background-repeat: no-repeat;
            background-position: 6px center;
            background-size: 20px;
            box-shadow: var(--msys-main-item-shadow);
        }

            #main .header .user a {
                text-decoration:none; 
                color:black;
            }

            #main .header .user:hover {
                background-color: black;
                background-image: url(resources/images/user_w.png);
                color: white;
            }

                #main .header .user:hover a {
                    color: white; 
                }


    #main .content {
        height: calc(100vh - 100px); 
        padding:20px;
        overflow: auto;  
    }

       


    #main .footer {
        height: 30px;
        display: flex;
        font-size: small;
        align-items: center;
        justify-content: space-between;
        background-color: var(--msys-element-bg-color);
        padding: 0px 20px 0px 20px;
        border-radius: 10px;
        margin: 0px 10px 0px 10px;
    }

        #main .footer .label {
            color:gray; 
            margin-right:10px; 
        }

        #main .footer img {
            height: 16px;
        }