@import '../js/Codemirror/codemirror.min.css';
@import '../js/Quill/quill.css';

html, body, app {
    width: 100%;
    height: 100%;
}

.card-header {
    background-color: rgb(45,86,149);
    color: white;
    font-weight: bold;
    font-size: 150%;
    padding: .15rem 0.5rem;
}

.card-footer {
    background-color: rgb(45,86,149);
    color: white;
    padding: .25rem 1.25rem;
}

.round-icon {
    border-radius: 10rem !important;
}

/*
    Reference: <link href="_content/RazorClassLibrary/css/sharedcomponents.css" rel="stylesheet" />
*/

/*#region BetfredLayout.razor*/
/*#region Outer Structure*/
/*
    The display set to flex and the min-height set to 0px is in place to force the elements on the page to respect the max height they are supposed to be when rendering. See: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
*/
.wrapper {
    flex: 1 1 auto !important;
    overflow: auto;
}

/*#region Sections [Components]*/
/*Sections are assumed to be component wrappers. They will always try to fill the height of their parent wrapper.*/
section {
    /*0px required so there is a defined basis for the flex process to go off. Using auto will mean the child elements cannot figure out what the height is.*/
    flex: 1 1 0px;
}
/*#endregion*/

/*#region General Formatting*/
a:not(.reload) {
    color: white;
}

a:hover {
    color: white;
    text-decoration: none;
}
/*#endregion*/

/*#region Buttons*/
/*Razor component: SiteButton.razor*/
.bf_button, .bf_buttongroup > button, .bf_buttongroup > a {
    display: block;
    padding: 5px 25px;
    border: 0px;
    font-weight: bold;
    text-align: center;
    color: white;
    cursor: pointer;
}

    .bf_button:focus, .bf_buttongroup > button:focus, .bf_buttongroup > a:focus {
        outline: 0px;
    }

    .bf_button:hover, .bf_buttongroup > button:hover, .bf_buttongroup > a:hover {
    }

.bf_buttongroup > * {
    margin: 0px 5px;
}
/*#endregion*/


/*#region Button Configuration*/
.bf_btngrp_slim > button, .bf_btngrp_slim > a, .bf_btn_slim {
    padding-top: 0px;
    padding-bottom: 0px;
}
/*#endregion*/

/*#region Custom Button Icons
        - Format of button component adds 'oi-' to the beginning to conform with other style sheets. So required for here.
        - Images for icons required in the css subfolder as the top level root when using url's in this css stylesheet is: _context/RazorClassLibrary/css
    */
.bf_icon::before {
    display: block;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    content: "";
}

.oi-clone::before {
    background-image: url("icons/clone.png");
}
/*#endregion*/
/*#endregion*/

/*#region Input Boxes / Dropdown Lists*/
/*Standard InputText needs type=text manually put on, otherwise the html render will behave properly but not include it, thus not being targetted by the css.*/
input[type=text], input[type=number], input[type=datetime], select {
    border: 2px solid rgb(45,86,149);
    outline: transparent;
    padding: 0px 5px;
    border-radius: 5px;
}

    input[type=text]:focus, input[type=number]:focus, input[type=datetime]:focus, select:focus {
        border-color: #3581cb;
    }

/*#region DDL*/
select {
    cursor: pointer;
}
/*#endregion*/
/*#endregion*/

/*#region Checkbox List*/
/*
    <div class="bf_checkboxlist"
        foreach <EditForm class="bf_checkbox"
            <input type="checkbox"
            <label for="CheckboxId" class="bf_button"_(optional)
*/

.bf_checkboxlist {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    margin-top: 5px;
    flex-direction: column;
    justify-content: unset;
    height: 50vh;
}

    .bf_checkboxlist > form {
        min-width: 150px;
        margin: 10px 5px;
    }

        .bf_checkboxlist > form > * {
            margin: 1px 0px;
        }

/*#region Checkbox*/
.bf_checkbox {
    display: flex;
    flex-direction: column;
    position: relative;
}

    /*The checkbox needs to come before (above) the label.*/
    .bf_checkbox > input[type=checkbox] {
        position: absolute;
        display: none;
    }

    .bf_checkbox label {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        padding-left: 35px; /*To match the (width + left) of the label::after content.*/
    }

        .bf_checkbox label::after {
            display: block;
            width: 25px;
            height: 100%;
            max-height: 25px;
            position: absolute;
            left: 5px;
            top: 50%;
            transform: translateY(-50%);
        }

    .bf_checkbox .bf_btngrp_slim::after, .bf_checkbox .bf_btn_slim::after {
        left: 0px;
    }

    .bf_checkbox > input[type=checkbox]:checked + label {
        border: 2px solid rgb(45,86,149);
        background-color: rgba(53, 129, 203, 1);
        border-radius: 5px;
    }

        .bf_checkbox > input[type=checkbox]:checked + label::after {
            content: "-";
            background-color: rgba(45, 86, 149, 1);
        }

    .bf_checkbox > input[type=checkbox]:not(:checked) + label {
        background-color: rgba(53, 129, 203, 0.25);
    }

        .bf_checkbox > input[type=checkbox]:not(:checked) + label::after {
            content: "+";
            background-color: rgba(45, 86, 149, 0.75);
        }

/*#endregion*/
/*#endregion*/

/*#region Data Grid*/
/* - A grid to hold a list of controls or data in a table like structure, but also allows for form controls.
    <div class="bf_datagrid"> Wrapper
        <span> Title
        <div> Table
            <div>Rows
                <span/label> Cell Title
                <?> Cell Content
            <div>
                <span/label>
                <?>
            <div>
                <span/label>
                <?>

    ? = A singular tag or a div element wrapping multiple tags.
*/
.bf_datagrid {
    flex-direction: column;
}

    .bf_datagrid .bf_button > span {
        line-height: 10px;
    }

    .bf_datagrid > span, .bf_datagrid > label {
        font-weight: bold;
    }

    .bf_datagrid > div {
        display: table;
    }

        .bf_datagrid > div > div, .bf_datagrid > div > form {
            display: table-row;
        }

            .bf_datagrid > div > div > p, .bf_datagrid > div > form > p {
                text-align: center;
            }

                .bf_datagrid > div > div > p:empty::before, .bf_datagrid > div > form > p:empty::before {
                    content: "-";
                    display: block;
                    margin: 0px 15px;
                    text-align: center;
                }

            .bf_datagrid > div > div > *, .bf_datagrid > div > form > * {
                display: table-cell;
                font-size: 15px;
                line-height: 15px;
            }

                .bf_datagrid > div > div > *:not(div), .bf_datagrid > div > div > div > *, .bf_datagrid > div > div > div:empty::before,
                .bf_datagrid > div > form > *:not(div), .bf_datagrid > div > form > div > *, .bf_datagrid > div > form > div:empty::before {
                    height: 25px;
                }

            .bf_datagrid > div > div > div > *, .bf_datagrid > div > form > div > * {
                display: inline;
            }

/*#region Grid Config: Right Buttons*/
.bf_datagrid_StackButtonsRight > button, .bf_datagrid_StackButtonsRight > div > button {
    float: right;
}
/*#endregion*/
/*#endregion*/
/*#endregion*/

/*#region Header*/
header {
    flex: 0 0 45px;
    background-color: rgb(45,86,149);
}

/*#region Details*/
.betfredlayout_header_details > a {
    display: block;
    height: 100%;
}

.betfredlayout_header_details img {
    height: 100%;
    max-width: 180px;
}

.betfredlayout_header_details span {
    margin-left: 15px;
    font-size: 1pc;
    font-weight: bold;
    color: white;
}
/*#endregion*/

/*#region Navigation*/
.betfredlayout_header_navigation {
    flex: 1 1 auto;
}

    .betfredlayout_header_navigation > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        max-height: 100%;
        margin: 0px;
        padding: 0px;
        list-style: none;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

        .betfredlayout_header_navigation > ul > li {
            height: 30px;
            margin: 0px 10px;
        }

            .betfredlayout_header_navigation > ul > li > a {
                display: block;
                width: 100%;
                height: 100%;
                padding: 0px 10px;
                cursor: pointer;
                font-size: 1pc;
                line-height: 30px;
            }

                .betfredlayout_header_navigation > ul > li > a:hover, .betfredlayout_header_currentpage {
                    background-color: rgba(255, 255, 255, 0.10);
                }

                    .betfredlayout_header_currentpage:hover {
                        background-color: rgba(255, 255, 255, 0.20) !important;
                    }
/*#endregion*/

/*#region Login*/
.betfredlayout_header_login {
    padding: 5px;
}

    .betfredlayout_header_login a {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
/*#endregion*/
/*#endregion*/

/*#region Main Body*/
/*Each main page or component needs to be wrapped with a section tag. Preferably with a class named after the file name for the page. This is not required for sub-components of a page.*/
main > section:not(.tabgroup), main > .tabgroup > .tabgroup_page > section > .tabpage {
    padding: 15px 45px;
}

/*#region No Auth*/

/*#endregion*/
/*#endregion*/

/*#region Footer*/
footer {
    flex: 0 0 2vh;
    background-color: #002c5c;
}
/*#endregion*/
/*#endregion*/

/*#region SearchRegion.razor*/
/*#region Search*/
.searchregion_search {
    display: flex;
    height: 30px;
    margin-bottom: 10px;
}

    .searchregion_search > * {
        margin: 0px 5px;
    }

    .searchregion_search select {
        height: 100%;
    }
/*#endregion*/

/*#region Controls*/
.searchregion_controls {
}

    .searchregion_controls > * {
        height: 100%;
    }
/*#endregion*/

.searchregion_error {
    display: block;
    color: red;
}

/*#region Data*/
.searchregion_data {
    flex-direction: column;
    padding: 5px;
}

.datasearch {
    margin: 10px 0px;
    padding: 5px;
    border-radius: 5px;
}

    .datasearch:last-child {
        margin-bottom: 0px;
    }

    .datasearch > strong {
        font-size: 1pc;
        font-weight: bold;
    }
/*#endregion*/
/*#endregion*/

/*#region Loading.razor*/
/*.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

    .lds-ellipsis div {
        position: absolute;
        top: 27px;
        width: 1vh;
        height: 1vh;
        border-radius: 50%;
        background: #004990;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            left: 6px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 6px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 26px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 45px;
            animation: lds-ellipsis3 0.6s infinite;
        }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(19px, 0);
    }
}

.lds-dual-ring {
    display: inline-block;
    width: 64px;
    height: 64px;
    position: relative;
    left: 42%;
    padding-top: 1%;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 92px;
        height: 92px;
        margin: 1px;
        border-radius: 50%;
        border: 15px solid #004990;
        border-color: #d0233b transparent #d0233b transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}*/
/*#endregion*/

/*#region DataTable.razor*/
.datatable {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 175px;
}

/*#region Header Controls & Details*/
.datatable_details {
    display: flex;
}

/*#region Modal Column Toggle*/
.datatable_toggles {
    display: flex;
    flex-wrap: wrap;
}

.datatable_modal_control {
    cursor: pointer;
    padding: 5px;
    margin: 0px;
    font-size: 0.8pc;
}

.datatable_modal_open {
    position: relative;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    height: 100%;
    line-height: 6px;
    font-size: 0.65pc;
    background: rgb(29, 99, 167);
}

.datatable_modal_checkbox {
    opacity: 0;
}

    /*#region Modal Block*/
    .datatable_modal_checkbox:checked + .datatable_modal {
        display: flex;
    }

.datatable_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    width: 40vw;
    max-height: 80vh;
    padding: 10px;
    background-color: white;
    border: 5px solid black;
    z-index: 999;
}
/*#endregion*/

.datatable_modal_close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border: 3px solid black;
    background-color: white;
    text-align: center;
    line-height: 15px;
}

    .datatable_modal_close:hover {
        font-weight: bold;
        background-color: #d02139;
    }

.datatable_custombuttons > button {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 15px;
    line-height: 6px;
    font-size: 0.65pc;
}
/*#endregion*/
/*#endregion*/

/*#region Table Data*/
.datatable_table_container {
    width: 100%;
    position: relative;
    overflow-y: auto;
}

.datatable_table {
    width: 100%;
}

    .datatable_table tr > * {
        padding: 5px;
        white-space: nowrap;
        font-size: 15px;
    }

    /*#region Header*/
    .datatable_table > thead {
        font-size: 0.75pc;
    }

        .datatable_table > thead > tr:first-child {
            cursor: pointer;
        }

    .datatable_table tr > th {
        position: sticky;
        top: 0px;
        background-color: white;
        z-index: 2;
    }

/*#region Sort Arrows*/
.datatable_sortarrows {
    padding-right: 15px !important;
}

    .datatable_sortarrows > div {
        display: flex;
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);
    }
/*#endregion*/
/*#endregion*/

/*#region Body*/
.datatable_table > tbody {
    font-size: 0.65pc;
}

    .datatable_table > tbody > tr:nth-child(odd) {
        background-color: rgba(0,73,144,0.25);
    }

    .datatable_table > tbody > tr:nth-child(even) {
        background-color: rgba(0,73,144,0.4);
    }

.datatable_table tbody tr td:empty::after {
    content: "-";
    display: block;
    width: 100%;
}

/*#region Action Buttons*/
.datatable_action[title=Refresh] {
    color: #218838;
}

.datatable_action[title=Edit] {
    color: #0069d9;
}

.datatable_action[title=Delete] {
    color: #dc3545;
}
/*#endregion*/

/*#region Row Click*/
.datatable_row_click_enabled > tbody {
    cursor: pointer;
}

    .datatable_row_click_enabled > tbody > tr:hover {
        background-color: #17A2B8 !important;
    }
/*#endregion*/
/*#endregion*/
/*#endregion*/
/*#endregion*/

/*#region [TabGroup|TabPage].razor*/
/*Wrapping the child TabPage components inside a section tag, rather than the TabGroup itself, will turn that implementation of a TabGroup into a bar at the top of the page rather than an inner page component.*/
.tabgroup {
}

section > .tabgroup, div > .tabgroup, form > .tabgroup {
    border: 1px solid lightgray;
    border-radius: 10px;
}

.tabgroup_options {
    display: flex;
    flex-direction: row;
    padding: 0px;
    background-color: rgba(45,86,149, 0.1);
    border-bottom: 1px solid lightgray;
    list-style: none;
}

    .tabgroup_options > li {
        margin: 0px 10px;
        background-color: transparent;
        cursor: pointer;
    }

.tabgroup_active {
    font-weight: bold;
}

.tabgroup_page {
    overflow: auto;
}

section > .tabgroup .tabpage, div > .tabgroup .tabpage {
    padding: 15px;
}

    section > .tabgroup .tabpage:not(:first-child), div > .tabgroup .tabpage:not(:first-child) {
        padding-top: 0px;
        margin-top: 5px;
    }
/*#endregion*/

/*#region Toast.razor*/
.toast {
    display: none;
    color: #fff;
    z-index: 5;
    position: fixed;
    width: 100%;
    bottom: 5px;
    border-radius: 20px;
    opacity: 1;
    justify-content: center;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: large;
}

.toast-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
}

    .toast-body p {
        margin-bottom: 0;
    }

.toast-visible {
    display: flex;
    flex-direction: row;
}
/*#endregion*/

/*#region StreamLogger.razor*/
.streamlogger_azure {
    height: 100px;
}

.streamlogger_azure_controls, .streamlogger_azure_search {
    flex-direction: column;
}

    .streamlogger_azure_controls > button {
        height: 50%;
        padding: 0px 5px;
        border-radius: 0px;
        box-shadow: 0px 0px 0px 0px black !important;
    }

.streamlogger_azure_search {
    flex: 1 1 auto;
    padding: 0px 5px;
    max-width: 250px;
}

    .streamlogger_azure_search > form {
        height: 33%;
        display: flex;
        justify-content: space-between;
    }

        .streamlogger_azure_search > form > span {
            font-weight: bold;
            width: 60px;
            position: relative;
            top: 60%;
            transform: translateY(-50%);
        }

        .streamlogger_azure_search > form > select {
            flex: 1 1 auto;
            border: 0px;
        }

.streamlogger_feed {
    display: block;
    width: 100%;
    overflow-y: auto;
    font-size: 0.75pc;
    font-family: Consolas;
}
/*#endregion*/

/*#region [EventsFilter|EventFilter].razor*/
.eventsfilter {
}

.eventsfilter_filters {
    flex-direction: column;
}

    .eventsfilter_filters select {
        width: 500px;
    }

.eventsfilter_controls {
    justify-content: space-between;
}

.eventsfilter_results {
    flex-direction: column;
}

    .eventsfilter_results > div {
        flex-direction: column;
    }

        .eventsfilter_results > div:first-child {
            flex: 0 0 130px;
        }

        .eventsfilter_results > div:last-child {
            flex: 1 1 auto;
        }
/*#endregion*/

/*#region ConfirmationBox.razor*/
.confirmationbox {
    position: absolute;
    width: 100%;
    height: 100%;
}

.confirmationbox_background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.confirmationbox_content {
    height: 150px;
    width: 250px;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: white;
    box-shadow: 0px 0px 15px 10px rgba(0, 73, 144, 0.35);
    border-radius: 5px;
}

.confirmationbox_title {
    font-weight: bold;
}

.confirmationbox_message {
    font-size: 0.9pc;
    flex: 1 1 auto;
    overflow-y: auto;
}

.confirmationbox_content > .bf_buttongroup {
    justify-content: space-between;
}
/*#endregion*/