$panel-title-color:#36b7b9;

.mdl-card__supporting-text{
   overflow: visible !important;
}

@mixin busy {
    &::after {
        content: '';
        position: absolute;
        top:0;
        left: 0;
        right:0;
        bottom: 0;
        background-color: transparent;
    }
    [data-focus="panel-content"] {
        position: relative;
        &::after {
            content: '';
            position: absolute;
            top:0;
            left: 0;
            right:0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.73);;
        }
    }
}


[data-focus='panel'] {
    width: 100% !important;
    margin-bottom: 30px;
    z-index: auto !important;
    border: 0;

    [data-focus="mdl-progress"] {
        width: inherit;
        margin-top: inherit;
        position: absolute;
    }

    &.mdl-card {
        overflow: inherit;
    }

    [data-focus='panel-title'] {
        display: flex;
        justify-content: space-between;
    }
    &[data-loading='true'] {
        @include busy;
    }
    &[data-saving='true'] {
        @include busy;
    }

    [data-focus='panel-title'] {
        padding: 8px 16px;
        h1,h2,h3,h4 {
            margin: 0;
            margin-right: 20px;
            padding: 2px 0;
            font-size: 22px;
            color:$panel-title-color;
            display: inline-block;
        }
        .help-button {
            position: absolute;
            right: 20px;
        }
    }
    .actions {
        display: none;
    }

    .buttons {
        text-align: right;
        button {
            margin: inherit 10px;
        }
    }

    &:hover {
        .actions {
            display: block;
        }
    }
}