/*I'm not certain if it's necessary for popupHelpers to exist now, came across from V3 dashboards, but we may want to switch to using Kendo Dialog boxes?*/
/*#region MAIN / CONTENT */
.floatingContainer {
    z-index: 200;
    position: absolute;
    left: 200px;
    top: 250px;
    /*border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #353B72;*/
    background-color: #fff;
    box-shadow: #2c3e5080 1px 1px 2px 1px;
    min-width: 50px;
    max-width: 600px;
}

/*more substantial than a general floating container.*/
.floatingContainerWindow {
    min-width: 500px;
    max-width: 1000px;
}

.floatingContainerWithHeader {
    border-radius: 10px 10px 4px 4px;
    border-width: 2px;
}

.floatingContainer:focus {
    z-index: 300;
    outline: none; /*override outline for the floating container that mysteriously appears when focused - probably caused by default browser styling*/
}
/*#endregion*/
/*#region FADER*/
.fader {
    animation: fadeIn forwards 0.25s; /*When changing the time value don't forget that popupHelper.closePopup will also need to be changed.*/
}

.floatingDisabled {
    /*pointer-events: none;*/
    color: rgb(84, 84, 84);
    cursor: default;
    background-color: rgb(235, 235, 228);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        pointer-events: none;
    }

    100% {
        opacity: 0;
        pointer-events: none;
    }
}
/*#endregion*/
/*#region HEADER */
.floatingHeader {
    cursor: move;
    min-width: 0;
    min-width: 50px;
    max-width: 600px;
    background-color: #BBEDFB;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 24px;
    margin: 4px;
    border-radius: 5px;
    box-shadow: 0 0 3px #353B72;
}

.floatingTitle {
    font-family: Arial;
    font-weight: bold;
    font-size: 1.4em;
    line-height: 1.05;
    word-break: break-word;
    flex-grow: 1; /*makes it roughly centred no matter what size text is.*/
}
/*#endregion*/
/*#region CONTENT*/
.floatingContent {
    overflow-y: scroll;
    overflow: auto;
    width: auto;
    display: flex;
    border-bottom: inherit;
    border-bottom-width: 1px;
    justify-content: space-around;
    align-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    min-height: 20px;
    max-height: 400px;
    padding: 3px;
    margin: 2px;
}

    .floatingContent:last-child {
        border-bottom: none;
    }

.floatingContainer p {
    /*max-width: 250px;*/
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 2px;
    margin-bottom: 0;
    text-align: center;
}

/*#endregion*/
/*#region FOOTER*/

.floatingFooter:empty {
    padding: 0;
}

.floatingFooter {
    padding: 3px;
    display: flex;
}
/*#endregion*/
/*#region BUTTONS*/
.floatingCloseButton {
    transition-duration: 0.25s;
    border-radius: 5px;
    /*margin: 3px;*/
    width: auto;
    width: 18px;
    height: 18px;
}

    .floatingCloseButton:hover {
        background-color: #353b72;
    }

.floatingContainer button, .floatingContainer input[type=button] {
    color: #000000;
    background-color: transparent;
    flex-grow: 1;
    border: none;
    transition: background-color 0.18s, color 0.18s;
    padding: 3px;
}

    .floatingContainer button:hover, .floatingContainer input[type=button]:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .floatingContainer button:focus, .floatingContainer input[type=button]:focus {
        background-color: rgba(0, 0, 0, 0.2);
        outline: none;
    }



/*stuff specific to button group: */
.floatingButtonGroup {
    padding: 0;
    margin: 0;
}

    /*.floatingButtonGroup:only-child > *:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .floatingButtonGroup:only-child > *:last-child {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }*/

    .floatingButtonGroup button, .floatingButtonGroup input[type=button] {
        /*height: 100%; temporarily removed, not sure why it was here before.*/
        width: 100%;
        font-size: 1.2em;
    }

/*#endregion*/