* {
    box-sizing: border-box
}

/* Style the tab */
.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 20%;
    height: auto; /*550px;*/
}


    /* Style the buttons that are used to open the tab content */
    .tab .buttonlink {
        display: block;
        background-color: inherit;
        border-radius: 10px;
        color: black;
        padding: 10px 10px;
        width: 100%;
        border: none;
        outline: none;
        text-align: center;
        cursor: pointer;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .tab .buttonlink:hover {
            background-color: #ddd;
        }

        /* Create an active/current "tab button" class */
        .tab .buttonlink.active {
            background-color: #ccc;
        }

.button {
    background-color: Green; /*#4CAF50;*/
    border: none;
    color: white;
    width: 100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 4px 0px 20px;
    cursor: pointer;
    border-radius: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.buttonX {
    background-color: blueviolet; /*#4CAF50;*/
    border: none;
    color: white;
    width: 100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 4px 0px 20px;
    cursor: pointer;
    border-radius: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button1:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 12px;
    /*border: 1px solid #ccc;*/
    width: 80%;
    border-left: none;
    height: auto; /*300px;*/
}

div.scroll {
    margin: 4px, 4px;
    padding: 4px;
    /*background-color: #08c708;*/
    width: 300px;
    height: 400px;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
}

#thecanvas {
    border: 1px solid black;
    /*direction: ltr;*/
    display:none;
}


ul {
    padding: 0;
    list-style: none;
    /*background: green;*/
}

    ul li {
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }

        ul li a {
            display: block;
            padding: 5px;
            color: #33334d; /*font color*/
            text-decoration: none;
        }

            ul li a:hover {
                color: #fff;
                background: gray; /*#000;*/
            }

        ul li ul.dropdown {
            min-width: 100%; /* Set width of the dropdown */
            /*background: green;*/
            display: none;
            position: absolute;
            z-index: 999;
            left: 0;
        }

        ul li:hover ul.dropdown {
            display: block; /* Display the dropdown */
            background: #ffffff; /*#000;*/ /*grey*/
        }

        ul li ul.dropdown li {
            display: block;
        }