@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&family=Roboto:wght@400;700&display=swap');

/* 
* Variables 
*/
:root {
    --color-accent: #0073ff;
    --color-accent-hover: #0061d8;
    --color-accent-transparent: rgba(0, 115, 255, 0.3);
    --color-dark: #00171f;
    --color-light: #122938;
    --color-light-hover: #11354d;
    --color-bright: #03c4f7;
    --color-white: #ffffff;
    --color-green: #128a35;
    --color-green-hover: #1a6a31;
    --color-red: #f04770;
    --color-red-hover: #c72950;
    --color-dialog-gray: #b0bfc9;
    --font-family: 'Roboto', sans-serif;
    --font-family-headings: 'Poppins', sans-serif;
    --icon-size: 20px;
    --icon-margin: 5px;
}

/*
* Base
*/
body {
    background-color: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-family);
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    padding: 40px 15px;
    padding-bottom: 0;
}

button, .btn, input, .form-control {
    border: 0;
    border-radius: 0;
}

/*
* Typography
*/
a {
    transition: color 0.2s;
}

table h5 {
    font-family: var(--font-family-headings);
}

/* 
* Top bar 
*/
.navbar {
    background-color: var(--color-accent);
    border: none;
    color: var(--color-white);
}

.navbar-brand,
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
    color: var(--color-white);
}

.navbar-brand {
    font-family: var(--font-family-headings);
}

/* 
* Main table layout
*/
.table-responsive {
    border: 0;
}

    .table-responsive .table {
        background-color: transparent;
    }

        .table-responsive .table td,
        table td {
            border: 0;
            padding: 0;
            padding-right: 15px;
        }

            .table-responsive .table td:nth-child(2n) {
                padding: 8px 40px 0px 40px;
            }

.files-header {
    display: flex;
    border-bottom: 1px solid var(--color-accent) !important;
}

.files-buttons {
    display: flex;
    margin-left: auto;
    margin-right: 0;
}

/*
* Bottom options
*/
.table-bottom-options {
    align-items: center;
    border-top: 1px solid var(--color-accent);
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    padding-top: 15px;
    width: 100%;
}

.table-bottom-save {
    display: flex;
    flex-direction: column-reverse;
}

.table-bottom-saved-info {
    margin-bottom: 40px;
    margin-top: 40px;
    text-align: center;
}

    .table-bottom-saved-info p {
        margin-bottom: 0;
    }

.table-bottom-default-settings {
    display: flex;
    align-items: center;
}

@media (min-width: 770px) {
    .table-bottom-options,
    .table-bottom-save {
        flex-direction: row;
    }

    .table-bottom-saved-info {
        margin-bottom: 0;
        margin-top: 0;
        text-align: right;
    }

    #Julkaisu {
        margin-left: 40px;
    }
}

/*
* Forms & inputs
*/
form input,
form select,
form textarea {
    max-width: 280px;
}

.form-horizontal .form-group .btn-default {
    background-color: var(--color-accent);
    color: var(--color-white);
    height: 50px;
    transition: background-color 0.2s;
    width: 100%;
}

    .form-horizontal .form-group .btn-default:hover {
        background-color: var(--color-accent-hover);
    }

.form-horizontal .form-group input.form-control {
    background-color: var(--color-light);
    color: var(--color-white);
}

.form-horizontal hr {
    border-color: var(--color-accent);
}

/* Validation helpers */
.field-validation-error {
    color: var(--color-red);
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid var(--color-red);
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: var(--color-red);
}

.validation-summary-valid {
    display: none;
}

/* Common utility classes */
.floatleft {
    float: left;
    margin-right: 10px;
}

.visibility {
    visibility: hidden;
}

/* Column layout */
.column {
    float: left;
    width: 40%;
    padding: 10px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.testi {
    z-index: 999999999;
}

/* Tab styles */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }

        .tab button:hover {
            background-color: #ddd;
        }

        .tab button.active {
            background-color: #ccc;
        }

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.button_tallennamuutokset {
    margin: 10px;
    float: right;
}

.height {
    height: 400px;
    width: 500px;
}

/* Common buttons */
.ButtonVihrea {
    background-color: var(--color-green) !important;
    border: 0 !important;
    color: var(--color-white) !important;
    padding: 15px 40px !important;
}

    .ButtonVihrea:hover {
        background-color: var(--color-green-hover) !important;
        color: var(--color-white) !important;
    }

.ButtonPunainen {
    background-color: var(--color-red) !important;
    border: 0 !important;
    color: var(--color-white) !important;
    padding: 15px 40px !important;
}

    .ButtonPunainen:hover {
        background-color: var(--color-red-hover) !important;
        color: var(--color-white) !important;
    }

.ButtonHarmaa {
    background-color: var(--color-light) !important;
    border: 0 !important;
    color: var(--color-white) !important;
    padding: 15px 40px !important;
}

.button {
    background-color: var(--color-light);
    border: 0;
    color: var(--color-white);
    height: unset;
    margin: 2px 0;
    padding: 15px;
    text-align: left;
    transition: background 0.2s, background-color 0.2s;
    width: 100%;
}

    .button:hover {
        background-color: var(--color-light-hover);
    }

/* Syncfusion Blazor component styles */

/* ListBox / DropDownList */
.e-ddl-popup {
    background-color: var(--color-dark);
    color: var(--color-white);
    border: 1px solid var(--color-dialog-gray);
    border-radius: 0 !important;
    margin: 5px 0;
}

    .e-ddl-popup li.e-hover {
        background: var(--color-light-hover) !important;
        color: var(--color-white) !important;
    }

    .e-ddl-popup.e-scroller {
        min-height: 150px;
        overflow-y: auto;
        overflow-x: hidden;
    }

/* Buttons */
button.e-btn {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 0 !important;
    color: #fff;
    height: unset;
    padding: 10px;
    transition: color 0.2s;
    width: auto;
    /*font-weight: bold;*/
}

    button.e-btn:hover {
        background: transparent;
        border: 1px solid var(--color-accent);
        color: #fff;
    }

.files-buttons .e-btn {
    width: 88px !important;
    font-size: 12px;
    font-weight: 400;
    padding: 5px 0px 5px 0px;
}

/* Upload controls */
.e-upload {
    cursor: pointer;
    height: auto !important;
    width: 100% !important;
}

    .e-upload .e-file-select-wrap .e-file-browse-btn {
        align-items: center;
        background-color: var(--color-accent);
        border: 0;
        border-radius: 0;
        color: var(--color-white);
        display: flex;
        height: 50px;
        margin-bottom: 5px;
        padding: 5px;
        transition: background 0.2s;
        width: 100% !important;
    }

        .e-upload .e-file-select-wrap .e-file-browse-btn:hover {
            background-color: var(--color-accent-hover);
        }

/* Files/Playerit containers */
#Tiedostot_container, #Playerit_container {
    margin-top: 10px;
}

    #Tiedostot_container ul,
    #Playerit_container ul,
    .add-files-buttons {
        padding-top: 12px;
    }

/* ListBox items */
.e-listbox-wrapper:not(.e-list-template) .e-list-item,
.e-listbox-wrapper .e-list-nrt,
.e-listbox-wrapper .e-selectall-parent,
.e-listbox-container:not(.e-list-template) .e-list-item,
.e-listbox-container .e-list-nrt,
.e-listbox-container .e-selectall-parent,
.e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
.e-listboxtool-wrapper .e-list-nrt,
.e-listboxtool-wrapper .e-selectall-parent {
    height: 6px;
    line-height: 1;
    padding: 11px 16px;
    position: relative;
}

.e-listbox-wrapper,
.e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
.e-listboxtool-container.e-listbox-container .e-ul {
    border: none;
}

#Playerit_container,
.add-files-buttons {
    border-top: 1px solid var(--color-accent) !important;
    margin-top: -1px;
}

/* Dialog styles */
.unc-dialog.e-dialog {
    background: var(--color-light);
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    color: var(--color-white);
    max-width: 95%;
    padding: 0;
    z-index: 10000;
}

.unc-dialog .e-dlg-header {
    background-color: var(--color-accent);
    color: var(--color-white);
    font-weight: bold;
    padding: 15px;
}

.unc-dialog .e-dlg-content {
    padding: 20px;
}

.dialog-content {
    padding: 10px;
}

    .dialog-content p {
        margin-bottom: 10px;
    }

.dialog-input {
    background-color: var(--color-white);
    border: 1px solid var(--color-dialog-gray);
    color: var(--color-dark);
    margin-bottom: 20px;
    padding: 8px;
    width: 100%;
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.dialog-button {
    margin-left: 10px;
    padding: 8px 15px;
}

.cancel-button {
    background-color: var(--color-dialog-gray) !important;
    border-color: var(--color-dialog-gray) !important;
    color: var(--color-dark) !important;
}

.save-button {
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: var(--color-white) !important;
}

.e-dlg-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999;
}

/* Blazor specific button styles for dialog components */
.e-dialog button.e-btn {
    margin-bottom: 15px;
    margin-right: 5px;
    padding: 5px 15px;
}

.e-dialog .e-input,
.e-dialog .e-select,
.e-dialog input {
    background-color: var(--color-dialog-gray);
}

    .e-dialog input:not(.e-input) {
        border-radius: 3px;
        height: 34px;
        margin: 5px 0;
        padding: 5px;
    }
/* Varmistetaan dialogin leveys */
.unc-dialog.e-dialog {
    background: var(--color-light) !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
    color: var(--color-white) !important;
    max-width: 400px !important;
    width: 400px !important;
    padding: 0 !important;
    z-index: 10000 !important;
}

.unc-dialog .e-dlg-content {
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dialog-content {
    padding: 0 !important;
    width: 100% !important;
}

.dialog-input {
    width: 100% !important;
    box-sizing: border-box !important;
}