.info-icon {
    --iron-icon-height: 42px;
    --iron-icon-width: 42px;
    color: #3186e2;
}

.div-content-margin
{
    margin-top:20px;
    margin-left:5px;
    margin-bottom:5px;
    max-height:150px;
    overflow-y:auto;
}

.div-header-margin
{
    margin-left:5px;
    margin-right:5px;
    width: 100%;
}

.info-dialog-message {
    font-size: 16px;
}

.info-icon {
    bottom: 3px;
}

.btn-ok {
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: 10px;
    padding: 0.5em;
    color: black;
    font-weight:bold;
    width: 60%;
    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 14%), 0 2px 5px 0 rgb(0 0 0 / 12%), 0 4px 2px -2px rgb(0 0 0 / 20%);
}

#dlgInfoMessage
{
    max-width:400px;
    border:1px solid black;
}

/* For the layout */

.layout-horizontal 
{
    @apply(--layout-horizontal);
}

.layout-vertical 
{
    @apply(--layout-vertical);
}

.layout-start-justified
{
    @apply(--layout-start-justified);
}

.layout-center-justified
{
    @apply(--layout-center-justified);
}

.layout-end-justified
{
    @apply(--layout-end-justified);
}

.layout-around-justified
{
    @apply(--layout-around-justified);
}

.layout-horizontal-reverse
{
    @apply(--layout-horizontal-reverse);    
}

.layout-vertical-reverse
{
    @apply(--layout-vertical-reverse);
}

.layout-start
{
    @apply(--layout-start);
}

.layout-center
{
    @apply(--layout-center);
}

.layout-end
{
    @apply(--layout-end);
}


.layout-flex
{
    @apply(--layout-flex);
}

.layout-flex-2
{
    @apply(--layout-flex-2);
}

.layout-flex-3
{
    @apply(--layout-flex-3);
}

.layout-flex-none
{
    @apply(--layout-flex-none);
}

.layout-flex-auto
{
    @apply(--layout-flex-auto);
}

.layout-wrap
{
    @apply(--layout-wrap);
}