/* canvas and canvas buttons */
#canvas-container
{
    position: relative;
}

#canvas-zoombuttons-container
{
    position: absolute;
    top: 5%;
    left: 95%;
    transform: translate(-50%, -50%);
}

@media (max-width: 1600px) {
    #canvas-zoombuttons-container
    {
        left: 90%;
    }
}
@media (max-width: 900px) {
    #canvas-zoombuttons-container
    {
        left: 85%;
    }
}
@media (max-width: 600px) {
    #canvas-zoombuttons-container
    {
        left: 50%;
    }
}

#canvas-undoredo-container
{
    position: absolute;
    top: 7.7%;
    left: 95%;
    transform: translate(-50%, -50%);
}

@media (max-width: 1600px) {
    #canvas-undoredo-container
    {
        left: 90%;
    }
}
@media (max-width: 900px) {
    #canvas-undoredo-container
    {
        left: 85%;
    }
}
@media (max-width: 600px) {
    #canvas-undoredo-container
    {
        left: 50%;
    }
}

#canvas-generate-container
{
    position: absolute;
    top: 10.8%;
    left: 95%;
    transform: translate(-50%, -50%);
}

@media (max-width: 1600px) {
    #canvas-generate-container
    {
        left: 90%;
    }
}
@media (max-width: 900px) {
    #canvas-generate-container
    {
        left: 85%;
    }
}
@media (max-width: 600px) {
    #canvas-generate-container
    {
        left: 50%;
    }
}

.canvas-menubutton.primary
{
    background-image: linear-gradient(var(--button-primary1) , var(--button-primary2)) !important;
    border-color: var(--button-border) !important;
}

.canvas-menubutton.primary:hover
{
    background-image: linear-gradient(var(--button-hover1) , var(--button-hover2)) !important;
    border: 1px solid var(--button-border) !important;
    color: var(--secondary-lighter) !important;
}

.canvas-menubutton.primary:active
{
    background-image: linear-gradient(var(--button-clicked1) , var(--button-clicked2)) !important;
    border: 1px solid var(--button-clicked-border) !important;
    color: var(--secondary-lighter) !important;
}

.canvas-menubutton
{
    background-color: var(--button-secondary-solid) !important;
    border-color: var(--button-secondary-solid-border) !important;
}

.canvas-menubutton:hover
{
    background-image: none;
    background-color: var(--button-secondary-solid-hover) !important;
    color: var(--secondary-lighter) !important;
}

.canvas-menubutton:active
{
    background-image: none;
    background-color: var(--button-secondary-solid-clicked) !important;
    color: var(--secondary-lighter);
}

.canvas-menubutton.flat
{
    border-radius: 0px !important;
}

.tabs.flat
{
    border-radius: 0px;

}

.canvas-menubutton.flatbottom
{
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.tabs.flatbuttom
{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.canvas-menubutton.flattop
{
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.tabs.flattop
{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}