html {

    font-size: 14px;
}

.head {
    display: table;
}

.head .caption {
    font-size: 50px;
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
    color: black;
}

.head img {
    height: 10vh;
    fill: #8a21c4;
}

.head .logo {
    position: absolute;
    right: 20px;
    height: 6vh;
    top: 3vh;
}

.disabled {
    pointer-events: none;
    opacity: 0.2;
}

.disabled-item {
    opacity: 0.2
}


.tab {
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIyLjg4IDcwLjUyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMjIuODggNzAuNTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0zNS43OCwyMS44OGgxNi42NnY0LjY0aC01LjZ2MTQuMTJoLTUuNDdWMjYuNTFoLTUuNlYyMS44OEwzNS43OCwyMS44OHogTTE0Ljg5LDBoOTMuMWM0LjA5LDAsNy44MSwxLjY4LDEwLjUxLDQuMzggYzIuNywyLjcsNC4zOCw2LjQzLDQuMzgsMTAuNTF2NDAuNzRjMCw0LjA4LTEuNjgsNy44LTQuMzksMTAuNWMtMi43LDIuNy02LjQzLDQuMzktMTAuNSw0LjM5aC05My4xYy00LjA4LDAtNy44MS0xLjY4LTEwLjUxLTQuMzggQzEuNjgsNjMuNDQsMCw1OS43MiwwLDU1LjYzVjE0Ljg5YzAtNC4xLDEuNjctNy44Miw0LjM3LTEwLjUyQzcuMDcsMS42NywxMC43OSwwLDE0Ljg5LDBMMTQuODksMHogTTEwNy45OSwzLjIxaC05My4xIGMtMy4yMSwwLTYuMTMsMS4zMS04LjI1LDMuNDNjLTIuMTIsMi4xMi0zLjQzLDUuMDQtMy40Myw4LjI1djM1LjIxYzAuNTYsMi4wOSwxLjY2LDMuOTYsMy4xNSw1LjQ1YzIuMTksMi4xOSw1LjIxLDMuNTUsOC41NCwzLjU1IGg5My4xYzAuMTMsMCwwLjI2LDAsMC40LTAuMDFsMC44Mi0wLjA2YzIuODQtMC4yOSw1LjQtMS41Nyw3LjMyLTMuNDljMS40OS0xLjQ5LDIuNTktMy4zNiwzLjE1LTUuNDRWMTQuODkgYzAtMy4yLTEuMzItNi4xMi0zLjQ0LTguMjVDMTE0LjExLDQuNTMsMTExLjE5LDMuMjEsMTA3Ljk5LDMuMjFMMTA3Ljk5LDMuMjF6IE01Ny44MywzMS40NGwtNC43LTAuNTIgYzAuMTgtMC44NywwLjQzLTEuNTYsMC43Ny0yLjA2YzAuMzMtMC41LDAuODEtMC45MywxLjQ0LTEuM2MwLjQ1LTAuMjcsMS4wNy0wLjQ3LDEuODYtMC42MmMwLjc5LTAuMTQsMS42NC0wLjIyLDIuNTYtMC4yMiBjMS40NywwLDIuNjUsMC4wOSwzLjU1LDAuMjZjMC44OSwwLjE3LDEuNjQsMC41NCwyLjIzLDEuMWMwLjQyLDAuMzgsMC43NSwwLjkzLDAuOTksMS42M2MwLjI0LDAuNywwLjM2LDEuMzcsMC4zNiwyLjAydjYuMDEgYzAsMC42NCwwLjA0LDEuMTQsMC4xMiwxLjUxYzAuMDcsMC4zNiwwLjI0LDAuODMsMC41LDEuMzloLTQuNjFjLTAuMTktMC4zNS0wLjMxLTAuNjEtMC4zNi0wLjc5Yy0wLjA1LTAuMTgtMC4xMS0wLjQ3LTAuMTctMC44NiBjLTAuNjQsMC42NS0xLjI4LDEuMTItMS45MiwxLjRjLTAuODcsMC4zOC0xLjg4LDAuNTYtMy4wMywwLjU2Yy0xLjUzLDAtMi43LTAuMzgtMy40OS0xLjEzYy0wLjgtMC43NS0xLjE5LTEuNjgtMS4xOS0yLjc4IGMwLTEuMDMsMC4yOC0xLjg5LDAuODYtMi41NWMwLjU3LTAuNjcsMS42My0xLjE3LDMuMTctMS40OWMxLjg1LTAuMzksMy4wNC0wLjY3LDMuNTktMC44M2MwLjU1LTAuMTYsMS4xMy0wLjM2LDEuNzQtMC42MiBjMC0wLjY0LTAuMTItMS4wOS0wLjM4LTEuMzRjLTAuMjUtMC4yNi0wLjY5LTAuMzgtMS4zMS0wLjM4Yy0wLjgxLDAtMS40MSwwLjE0LTEuODEsMC40MUM1OC4yNywzMC40NCw1OC4wMiwzMC44NCw1Ny44MywzMS40NCBMNTcuODMsMzEuNDR6IE02Mi4wOSwzNC4xNmMtMC42OCwwLjI2LTEuMzgsMC40OC0yLjEyLDAuNjljLTEsMC4yOC0xLjYzLDAuNTYtMS45LDAuODRjLTAuMjgsMC4yOC0wLjQxLDAuNjEtMC40MSwwLjk3IGMwLDAuNDEsMC4xNCwwLjc2LDAuNCwxLjAyYzAuMjcsMC4yNiwwLjY3LDAuMzksMS4xOSwwLjM5YzAuNTUsMCwxLjA2LTAuMTQsMS41NC0wLjQzYzAuNDctMC4yOCwwLjgtMC42MywxLTEuMDQgYzAuMi0wLjQxLDAuMy0wLjk0LDAuMy0xLjZWMzQuMTZMNjIuMDksMzQuMTZ6IE03MC4xLDIxLjg4aDQuOTh2Ni40OGMwLjQ5LTAuNTUsMS4wNS0wLjk1LDEuNjgtMS4yMyBjMC42Mi0wLjI3LDEuMzEtMC40MSwyLjA3LTAuNDFjMS41NiwwLDIuODYsMC41OSwzLjg4LDEuNzljMS4wMiwxLjE5LDEuNTQsMi45LDEuNTQsNS4xM2MwLDEuNDgtMC4yNCwyLjc5LTAuNywzLjkzIGMtMC40NywxLjEzLTEuMTEsMS45OC0xLjk0LDIuNTRjLTAuODMsMC41Ni0xLjc0LDAuODQtMi43NSwwLjg0Yy0wLjg2LDAtMS42NS0wLjItMi4zNy0wLjU5Yy0wLjU0LTAuMzEtMS4xMy0wLjg5LTEuNzctMS43NHYyLjAxIEg3MC4xVjIxLjg4TDcwLjEsMjEuODh6IE03NS4wNCwzMy43OGMwLDEuMTcsMC4yMSwyLjAzLDAuNjIsMi41NWMwLjQxLDAuNTMsMC45NCwwLjc5LDEuNTcsMC43OWMwLjU5LDAsMS4wOC0wLjI2LDEuNDgtMC43OCBjMC40LTAuNTIsMC42LTEuMzksMC42LTIuNjFjMC0xLjA4LTAuMTktMS44Ny0wLjU5LTIuMzdjLTAuMzktMC41MS0wLjg2LTAuNzYtMS40Mi0wLjc2Yy0wLjY3LDAtMS4yMSwwLjI2LTEuNjMsMC43OSBDNzUuMjUsMzEuOTEsNzUuMDQsMzIuNzEsNzUuMDQsMzMuNzhMNzUuMDQsMzMuNzh6Ii8+PC9nPjwvc3ZnPg==);*/
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc4IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMxMiIgLz4KICA8cGF0aAogICAgIGQ9Ik0gMjIsMjAuNSBIIDIgQSAxLjUsMS41IDAgMCAxIDAuNSwxOSBWIDUgQSAxLjUsMS41IDAgMCAxIDIsMy41IEggMjIgQSAxLjUsMS41IDAgMCAxIDIzLjUsNSBWIDE5IEEgMS41LDEuNSAwIDAgMSAyMiwyMC41IFoiCiAgICAgaWQ9InBhdGgyIgogICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDNjNDI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwIiAvPgogIDxwYXRoCiAgICAgZD0iTSAxMC40ODYxNCwxNi4wMzM4OTcgViAxMC42Njk0OSBhIDEuNjg1MTQ3NSwxLjc4ODEzNTggMCAxIDEgMy4zNzAyOTUsMCB2IDUuMzY0NDA3IE0gMTAuNDg2MTQsMTQuMjQ1NzYxIGggMy4zNzAyOTUgTSAzLjc0NTU1MTQsOC44ODEzNTU1IGggNS4wNTU0NDE1IG0gLTIuNTI3NzIwNywwIFYgMTYuMDMzODk3IE0gMTYuMzg0MTU1LDguODgxMzU1NSB2IDcuMTUyNTQxNSBoIDEuNjg1MTQ4IGEgMS42ODUxNDczLDEuNzg4MTM1NSAwIDEgMCAwLC0zLjU3NjI3MSBoIC0xLjY4NTE0OCAxLjY4NTE0OCBhIDEuNjg1MTQ3NSwxLjc4ODEzNTUgMCAxIDAgMCwtMy41NzYyNzA1IHoiCiAgICAgaWQ9InBhdGg0IgogICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDNjNDI7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwIiAvPgo8L3N2Zz4K);
    height: 25px;
    width: 30px;
    position: absolute;
    background-repeat: no-repeat;
}

@keyframes generating {
    0%, 100% {
        transform: scale(0.2);
        background-color: #30FFB7;
    }

    40% {
        transform: scale(1);
        background-color: #07DEFF;
    }

    50% {
        transform: scale(1);
        background-color: #0761FF;
    }
}

.generating {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    transform: scale(0);
    background-color: red;
    animation: generating 1.5s ease-in-out infinite;
    display: inline-block;
    margin: .05rem;
}

.generating:nth-child(0) {
    animation-delay: 0s;
}

.generating:nth-child(1) {
    animation-delay: 0.1s;
}

.generating:nth-child(2) {
    animation-delay: 0.2s;
}

.generating:nth-child(3) {
    animation-delay: 0.4s;
}

.generating:nth-child(4) {
    animation-delay: 0.6s;
}

.generating:nth-child(5) {
    animation-delay: 0.8s;
}

.toolbar {
    overflow: hidden;
}

    .toolbar button {
        background-color: white;
        color: black;
        float: left;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

        .toolbar button:hover {
            background-color: lightgray;
        }

.toolb1ar button svg {
    width: 24px;
    height: 24px;
    fill: white;
    margin-right: 5px;

}