@import url('_Color.css');

/**************************************************************/
/* toolbar                                                    */
/**************************************************************/

.Section {
	position: relative;
	padding: 12px 0px 0px 0px;

}

.SectionRight {
	float: right;
}

.SectionLeft {
	float: left;
	visibility: hidden;
	position: absolute;
}

/**************************************************************/
/**************************************************************/

a.ToolButton,
button.ToolButton {
    background-color: var( --color-bright );
    cursor: pointer;
    float: left;
    display: flex;
    padding: 12px;
    margin: 3px 8px 0px 0px;
    align-items: center;
    border-radius: 28px;
    border:0px;
}

.FrameElementItem a.ToolButton {
    border-radius: 20px;
    padding: 10px;
    margin: 0px 0px 0px 10px;
}

/*
a.ToolButton:hover:enabled,
button.ToolButton:hover:enabled
{
	background-color: var(--color-light-hover);
}*/

button.ToolButton:hover:enabled
{
	background-color: var(--color-light-hover);
}

a.ToolButton:hover
{
	background-color: var(--color-light-hover);
}

a.ToolButton:disabled,
a.Tile:disabled,
button.ToolButton:disabled
{
    background-color: gray;
}

a[disabled=disabled].ToolButton,
a[disabled=disabled].Tile
{
    /*background-color: gray;*/
    filter: grayscale(90%);   
}

a.ToolButton:hover .svgicon,
button.ToolButton:hover:enabled .svgicon {
    cursor: pointer;
    stroke: var(--color-light);
}

span.ToolButton {
    padding: 0px 22px;
}

span.ToolButtonSmall {
    visibility: hidden;
    
}


@media ( max-width: 900px ) 
{
    span.ToolButton {
        visibility: hidden;
        width:0px;
        height:0px;
        padding: 0px;
    }
}