.btn-toolbar
{
    display: block;

    width: 20px;
    height: 20px;
    padding: 10px;

    -webkit-transition: none;
         -o-transition: none;
            transition: none; 
    text-align: center;

    border-radius: 6px;
    background: #757575;
}

.btn-toolbar > i
{
    font-size: 16px; 

    color: #757575;
}

.btn-toolbar:hover
{
    cursor: pointer; 

    background: #5c6bc0;
}

.btn-toolbar:hover > i
{
    color: white;
}

.btn-toolbar-primary
{
    background-color: #3f51b5;
}

.btn-toolbar-primary.pressed
{
    background-color: #5c6bc0;
}

.btn-toolbar-primary:hover
{
    background-color: #5c6bc0;
}

.btn-toolbar-primary > i
{
    color: white;
}

.btn-toolbar-danger
{
    background-color: #f44336;
}

.btn-toolbar-danger.pressed
{
    background-color: #ef5350;
}

.btn-toolbar-danger:hover
{
    background-color: #ef5350;
}

.btn-toolbar-danger > i
{
    color: white;
}

.btn-toolbar-warning
{
    background-color: #ff9800;
}

.btn-toolbar-warning.pressed
{
    background-color: #ffa726;
}

.btn-toolbar-warning:hover
{
    background-color: #ffa726;
}

.btn-toolbar-warning > i
{
    color: white;
}

.btn-toolbar-info
{
    background-color: #00bcd4;
}

.btn-toolbar-info.pressed
{
    background-color: #26c6da;
}

.btn-toolbar-info:hover
{
    background-color: #26c6da;
}

.btn-toolbar-info > i
{
    color: white;
}

.btn-toolbar-success
{
    background-color: #4caf50;
}

.btn-toolbar-success.pressed
{
    background-color: #66bb6a;
}

.btn-toolbar-success:hover
{
    background-color: #66bb6a;
}

.btn-toolbar-success > i
{
    color: white;
}

.btn-toolbar-info-o
{
    background-color: #616161;
}

.btn-toolbar-info-o.pressed
{
    background-color: #757575;
}

.btn-toolbar-info-o:hover
{
    background-color: #757575;
}

.btn-toolbar-info-o > i
{
    color: white;
}

.btn-toolbar-light
{
    background-color: #eee;
}

.btn-toolbar-light.pressed
{
    background-color: #e0e0e0;
}

.btn-toolbar-light:hover
{
    background-color: #e0e0e0;
}

.btn-toolbar-light > i
{
    color: white;
}

.btn-toolbar-dark
{
    background-color: #757575;
}

.btn-toolbar-dark.pressed
{
    background-color: #616161;
}

.btn-toolbar-dark:hover
{
    background-color: #616161;
}

.btn-toolbar-dark > i
{
    color: white;
}

.tool-container
{
    position: absolute;

    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box; 

    border-radius: 6px;
    background-color: #e0e0e0;
    -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
}

.tool-container.tool-top,
.tool-container.tool-bottom
{
    height: 40px;

    border-bottom: 0 solid #beb8b8;
}

.tool-container.tool-top .tool-item,
.tool-container.tool-bottom .tool-item
{
    float: left;

    border-right: 0;
    border-left: 0;
}

.tool-item
{
    display: block;

    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    width: 20px;
    height: 100%;
    height: 20px;
    padding: 10px;

    -webkit-transition: none;
         -o-transition: none;
            transition: none; 
    text-align: center;
}

.tool-item > .icon
{
    color: #757575;
}

.tool-item.selected,
.tool-item:hover
{
    background: #5c6bc0;
}

.tool-item.selected > .icon,
.tool-item:hover > .icon
{
    color: white;
}

.tool-top .tool-item:first-child:hover,
.tool-bottom .tool-item:first-child:hover
{
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.tool-top .tool-item:last-child:hover,
.tool-bottom .tool-item:last-child:hover
{
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.tool-vertical-top .tool-item:first-child:hover,
.tool-vertical-bottom .tool-item:first-child:hover,
.tool-right .tool-item:first-child:hover,
.tool-left .tool-item:first-child:hover
{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.tool-vertical-top .tool-item:last-child:hover,
.tool-vertical-bottom .tool-item:last-child:hover,
.tool-right .tool-item:last-child:hover,
.tool-left .tool-item:last-child:hover
{
    border-bottom-right-radius: 6px; 
    border-bottom-left-radius: 6px;
}

.tool-container .arrow
{
    position: absolute;

    width: 0;
    height: 0;

    border-width: 7px;
    border-style: solid;
}

.tool-container.tool-top .arrow
{
    bottom: -14px;
    left: 50%;

    margin-left: -7px; 

    border-color: #e0e0e0 transparent transparent;
}

.tool-container.tool-bottom .arrow
{
    top: -14px;
    left: 50%;

    margin-left: -7px; 

    border-color: transparent transparent #e0e0e0;
}

.tool-container.tool-left .arrow
{
    top: 50%;
    right: -14px;

    margin-top: -7px; 

    border-color: transparent transparent transparent #e0e0e0;
}

.tool-container.tool-right .arrow
{
    top: 50%;
    left: -14px;

    margin-top: -7px; 

    border-color: transparent #e0e0e0 transparent transparent;
}

.toolbar-primary
{
    background-color: #5c6bc0;
}

.toolbar-primary.tool-top .arrow
{
    border-color: #5c6bc0 transparent transparent;
}

.toolbar-primary.tool-bottom .arrow
{
    border-color: transparent transparent #5c6bc0;
}

.toolbar-primary.tool-left .arrow
{
    border-color: transparent transparent transparent #5c6bc0;
}

.toolbar-primary.tool-right .arrow
{
    border-color: transparent #5c6bc0 transparent transparent;
}

.toolbar-primary .tool-item > .icon
{
    color: white;
}

.toolbar-primary .tool-item.selected,
.toolbar-primary .tool-item:hover
{
    color: white; 
    background: #3f51b5;
}

.toolbar-danger
{
    background-color: #ef5350;
}

.toolbar-danger.tool-top .arrow
{
    border-color: #ef5350 transparent transparent;
}

.toolbar-danger.tool-bottom .arrow
{
    border-color: transparent transparent #ef5350;
}

.toolbar-danger.tool-left .arrow
{
    border-color: transparent transparent transparent #ef5350;
}

.toolbar-danger.tool-right .arrow
{
    border-color: transparent #ef5350 transparent transparent;
}

.toolbar-danger .tool-item > .icon
{
    color: white;
}

.toolbar-danger .tool-item.selected,
.toolbar-danger .tool-item:hover
{
    color: white; 
    background: #f44336;
}

.toolbar-warning
{
    background-color: #ff9800;
}

.toolbar-warning.tool-top .arrow
{
    border-color: #ff9800 transparent transparent;
}

.toolbar-warning.tool-bottom .arrow
{
    border-color: transparent transparent #ff9800;
}

.toolbar-warning.tool-left .arrow
{
    border-color: transparent transparent transparent #ff9800;
}

.toolbar-warning.tool-right .arrow
{
    border-color: transparent #ff9800 transparent transparent;
}

.toolbar-warning .tool-item > .icon
{
    color: white;
}

.toolbar-warning .tool-item.selected,
.toolbar-warning .tool-item:hover
{
    color: white; 
    background: #ffa726;
}

.toolbar-info
{
    background-color: #00bcd4;
}

.toolbar-info.tool-top .arrow
{
    border-color: #00bcd4 transparent transparent;
}

.toolbar-info.tool-bottom .arrow
{
    border-color: transparent transparent #00bcd4;
}

.toolbar-info.tool-left .arrow
{
    border-color: transparent transparent transparent #00bcd4;
}

.toolbar-info.tool-right .arrow
{
    border-color: transparent #00bcd4 transparent transparent;
}

.toolbar-info .tool-item > .icon
{
    color: white;
}

.toolbar-info .tool-item.selected,
.toolbar-info .tool-item:hover
{
    color: white; 
    background: #26c6da;
}

.toolbar-success
{
    background-color: #4caf50;
}

.toolbar-success.tool-top .arrow
{
    border-color: #4caf50 transparent transparent;
}

.toolbar-success.tool-bottom .arrow
{
    border-color: transparent transparent #4caf50;
}

.toolbar-success.tool-left .arrow
{
    border-color: transparent transparent transparent #4caf50;
}

.toolbar-success.tool-right .arrow
{
    border-color: transparent #4caf50 transparent transparent;
}

.toolbar-success .tool-item > .icon
{
    color: white;
}

.toolbar-success .tool-item.selected,
.toolbar-success .tool-item:hover
{
    color: white; 
    background: #66bb6a;
}

.toolbar-info-o
{
    background-color: #616161;
}

.toolbar-info-o.tool-top .arrow
{
    border-color: #616161 transparent transparent;
}

.toolbar-info-o.tool-bottom .arrow
{
    border-color: transparent transparent #616161;
}

.toolbar-info-o.tool-left .arrow
{
    border-color: transparent transparent transparent #616161;
}

.toolbar-info-o.tool-right .arrow
{
    border-color: transparent #616161 transparent transparent;
}

.toolbar-info-o .tool-item > .icon
{
    color: white;
}

.toolbar-info-o .tool-item.selected,
.toolbar-info-o .tool-item:hover
{
    color: white; 
    background: #757575;
}

.toolbar-light
{
    background-color: #eee;
}

.toolbar-light.tool-top .arrow
{
    border-color: #eee transparent transparent;
}

.toolbar-light.tool-bottom .arrow
{
    border-color: transparent transparent #eee;
}

.toolbar-light.tool-left .arrow
{
    border-color: transparent transparent transparent #eee;
}

.toolbar-light.tool-right .arrow
{
    border-color: transparent #eee transparent transparent;
}

.toolbar-light .tool-item > .icon
{
    color: white;
}

.toolbar-light .tool-item.selected,
.toolbar-light .tool-item:hover
{
    color: white; 
    background: #e0e0e0;
}

.toolbar-dark
{
    background-color: #757575;
}

.toolbar-dark.tool-top .arrow
{
    border-color: #757575 transparent transparent;
}

.toolbar-dark.tool-bottom .arrow
{
    border-color: transparent transparent #757575;
}

.toolbar-dark.tool-left .arrow
{
    border-color: transparent transparent transparent #757575;
}

.toolbar-dark.tool-right .arrow
{
    border-color: transparent #757575 transparent transparent;
}

.toolbar-dark .tool-item > .icon
{
    color: white;
}

.toolbar-dark .tool-item.selected,
.toolbar-dark .tool-item:hover
{
    color: white; 
    background: #616161;
}

.animate-standard
{
    -webkit-animation: standardAnimate .3s 1 ease;
}

.animate-flyin
{
    -webkit-animation: rotateAnimate .5s 1 ease;
}

.animate-grow
{
    -webkit-animation: growAnimate .4s 1 ease;
}

.animate-flip
{
    -webkit-animation: flipAnimate .4s 1 ease;
}

.animate-bounce
{
    -webkit-animation: bounceAnimate .4s 1 ease-out;
}

@-webkit-keyframes rotateAnimate
{
    from
    {
        -webkit-transform: rotate(180deg) translate(-120px);
                transform: rotate(180deg) translate(-120px);

        opacity: 0;
    }
    to
    {
        -webkit-transform: rotate(0deg) translate(0px);
                transform: rotate(0deg) translate(0px);

        opacity: 1;
    }
}

@-webkit-keyframes standardAnimate
{
    from
    {
        -webkit-transform: translateY(20px);
                transform: translateY(20px);

        opacity: 0;
    }
    to
    {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);

        opacity: 1;
    }
}

@-webkit-keyframes growAnimate
{
    0%
    {
        -webkit-transform: scale(0) translateY(40px);
                transform: scale(0) translateY(40px);

        opacity: 0;
    }
    70%
    {
        -webkit-transform: scale(1.5) translate(0px);
                transform: scale(1.5) translate(0px);
    }
    100%
    {
        -webkit-transform: scale(1) translate(0px);
                transform: scale(1) translate(0px);

        opacity: 1;
    }
}

@-webkit-keyframes rotate2Animate
{
    from
    {
        -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;

        opacity: 0;
    }
    to
    {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);

        opacity: 1;
    }
}

@-webkit-keyframes flipAnimate
{
    from
    {
        -webkit-transform: rotate3d(2, 2, 2, 180deg);
                transform: rotate3d(2, 2, 2, 180deg);

        opacity: 0;
    }
    to
    {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
                transform: rotate3d(0, 0, 0, 0deg);

        opacity: 1;
    }
}

@-webkit-keyframes bounceAnimate
{
    0%
    {
        -webkit-transform: translateY(40px);
                transform: translateY(40px);

        opacity: 0;
    }
    30%
    {
        -webkit-transform: translateY(-40px);
                transform: translateY(-40px);
    }
    70%
    {
        -webkit-transform: translateY(20px);
                transform: translateY(20px);
    }
    100%
    {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);

        opacity: 1;
    }
}

.hidden
{
    display: none;
}