/** MEDIA BREAKS **/
/*   see: https://blazor.radzen.com/breakpoints 
        xs - Extra Small >= 576px
        sm - Small >= 768px
        md - Medium >= 1024px
        lg - Large >= 1280px
        xl - Extra Large >= 1920px
        xx - Extra Extra Large >= 2560px
    */

/** VARIABLES **/
:root {
    --tgpl-primary-light: #78a9d9;
    --tgpl-primary: #4a8ecb;
    --tgpl-primary-dark: #215789;
    --tgpl-secondary: #9d5de5;
    --tgpl-highlight: #fcd33e;
    --tgpl-standout: #ef4949;
    --tgpl-darkest: #000000;
    --tgpl-darker: #333333;
    --tgpl-lightest: #FFFFFF;
    --tgpl-lighter: #CCCCCC;
    --tgpl-bar-padding: 0.5rem;
    --rz-header-min-height: 3rem;
    --rz-header-padding: 4px;
    --rz-footer-min-height: 3rem;
    --rz-footer-padding: 4px;
    --rz-sidebar-width: 10rem;
    --rz-text-font-family: "Roboto";
    --rz-text-display-h1-font-family: "Open Sans";
    --rz-text-display-h1-font-size: xxx-large;
    --rz-text-display-h1-color: #9d5de5;
    --rz-text-display-h2-font-family: "Open Sans";
    --rz-text-display-h2-font-size: xx-large;
    --rz-text-display-h2-color: #215789;
}

/** BODY **/
html, body {
}

h1:focus {
    outline: none;
}

/** GENERAL **/
.tgpl-icon-button {
    padding-top: 0;
}

/** MARGINS **/
.rz-header > *,
.rz-body > *,
.rz-footer > * {
    margin-left: auto;
    margin-right: auto;
}

/** FORMS **/
.tgpl-form-container {
    width: 95%;
    max-width: 30rem;
}

.tgpl-form-row {
    margin-bottom: 0.25rem;
}

.tgpl-form-row-data {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

.tgpl-form-row-explain {
    font-size: 85%;
    padding: 0 0.5rem 0.5rem;
}

.tgpl-form-column {
}

.tgpl-form-row.tgpl-form-error {
    color: red;
}

.tgpl-form-row.tgpl-form-confirmation {
    color: green;
}

.tgpl-form-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.tgpl-form-actions .tgpl-form-actions-link {
}

.tgpl-form-actions .tgpl-form-actions-buttons {
}

/** DIALOGS **/
.tgpl-dialog {
}

.tgpl-dialog-actions {
}

.rz-dropdown-panel {
    min-width: 0px !important;
}

/** SELF **/
.tgpl-profile-button {
}

.tgpl-profile-image {
    width: 120px;
    height: 120px;
    border-radius: 60px;
}

.tgpl-profile-button .tgpl-profile-image {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.tgpl-profile-details-editor {
}

.tgpl-profile-image-editor {
}