﻿/*--------------------------------------------------------------------------
**
**  Copyright © 2026, Dale Sinder
**
**  Name: Customizable.css
**
**  Description:
**      Customizable styles for Notes 2021
**
**  This program is free software: you can redistribute it and/or modify
**  it under the terms of the GNU General Public License version 3 as
**  published by the Free Software Foundation.
**  
**  This program is distributed in the hope that it will be useful,
**  but WITHOUT ANY WARRANTY; without even the implied warranty of
**  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
**  GNU General Public License version 3 for more details.
**  
**  You should have received a copy of the GNU General Public License
**  version 3 along with this program in file "license-gpl-3.0.txt".
**  If not, see <http://www.gnu.org/licenses/gpl-3.0.txt>.
**
**--------------------------------------------------------------------------
*/


/* dialogs */
.dialogs {
    margin: 16px;
    padding: 16px;
    background-color: wheat;
    border-style: groove;
    border-width: 12px;
    border-color: darkgray;
    color: black;
    border-radius: 10px;
}

/* dialog for note display */
.note-display {
    background-color: white;
    border-style: groove;
    border-width: 8px;
    border-color: darkgray;
    color: black;
    border-radius: 6px;
}

.reference-display {
    background-color: gray;
    border-style: groove;
    border-width: 8px;
    border-color: darkgray;
    color: black;
    border-radius: 6px;
}

.note-edit {
    background-color: darkgray;
    border-style: groove;
    border-width: 8px;
    border-color: darkgray;
    color: black;
    border-radius: 6px;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

/****************/

.error {
    color: red;
}

.center {
    text-align: center;
}

.center-menu {
    align-content: center
}

.large {
    font-size: 200%;
}

.medium {
    font-size: 140%;
}

.keep-right {
    float: right;
}

.keep-center {
    text-align: center;
}

.short-input {
    width: 280px;
}

.medium-input {
    width: 600px;
}

.medium-input-minus {
    width: 500px;
}

.long-input {
    width: 1000px;
}

.expanded {
    font-weight: bolder;
}

iframe.loginclock {
    position: fixed;
    top: 300px;
    right: 50px;
}

.svgwhite {
    filter: invert(1);
}

.copiednote {
    font-size: 125%;
}

/* Blazored Modal style -- removes white default border*/
.blazored-custom-modal {
    display: flex;
    flex-direction: column;
    z-index: 102;
}


/* End Blazored Modal styles*/

/*********************************************/


.bigpix {
    background-image: url("adventure-alpine-background-smaller.jpg");
    background-color: #dddddd;
    height: 100%;
}

.keep-right {
    float: right;
}

/* standard menu bar for app*/

.navbar-full-dark {
    width: 100%;
    background-color: #555;
}

.e-menu-container.e-std-menu .e-menu {
    color: white;
    background-color: #555;
}

.e-menu-container.e-std-menu .e-ul .e-menu-item {
    color: white;
    background-color: #333;
}

.e-menu-container.e-std-menu .e-ul .e-menu-item.e-focused {
    color: white;
    background-color: darkblue;
}

.e-menu-container.e-std-menu ul .e-menu-item.e-selected {
    color: white;
    background-color: darkblue;
}

.e-menu-container.e-std-menu ul .e-menu-item.e-focused {
    color: white;
    background-color: darkblue;
}

.e-menu-container.e-std-menu ul .e-menu-item .e-caret::before {
    color: white;
}

/* end standard menu bar for app*/


/*begin this user custom section */
/* message box in main index*/
.sysmessage {
    margin-top: -20px;
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: inherit;
    background-color: #eee;
    border-radius: 16px;
}

/*various main index boxes*/
.roundedgeneral {
    margin: 8px;
    padding: 8px;
    background-color: wheat;
    border-radius: 6px;
}



/*main index input area */
.roundedindex {
    margin: 16px;
    padding: 16px;
    padding-left: 30px;
    background-color: #cde;
    border-radius: 6px;
}

/*notes index input spec area*/
div.arrow1 {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 150px;
    font-size: 80%;
    border: 3px solid #A37D21;
    background-color: lightgray;
    border-radius: 6px;
    z-index: 3;
}

/*notes display input spec area*/
div.arrow2 {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 245px;
    font-size: 80%;
    border: 3px solid #73AD21;
    background-color: lightgray;
    border-radius: 6px;
    z-index: 3;
}

/*notes index and display menu bar*/
.notesmenu {
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #555;
}

    /*notes index and display menu bar*/
    .notesmenu a {
        color: #eee;
    }

    .notesmenu strong {
        color: #eee;
    }

/*notes index and display menu bar*/
.noteindex {
    background-color: #eee;
}

/*note display header area*/
.noteheader {
    padding: 8px;
    background-color: white;
}

/*note display body/content area*/
.notebody {
    padding: 8px;
    background-color: white;
}

.noteheader-alt {
    padding: 8px;
    background-color: gainsboro;
}

/*note display body/content area*/
.notebody-alt {
    padding: 8px;
    background-color: gainsboro;
}

/* File dropdown on home page */
.btn-file {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

    .btn-file:focus,
    .btn-file.focus {
        color: #fff;
        background-color: #31b0d5;
        border-color: #1b6d85;
    }

    .btn-file:hover {
        color: #fff;
        background-color: #31b0d5;
        border-color: #269abc;
    }

    .btn-file:active,
    .btn-file.active,
    .open > .dropdown-toggle.btn-file {
        color: #fff;
        background-color: #31b0d5;
        border-color: #269abc;
    }

        .btn-file:active:hover,
        .btn-file.active:hover,
        .open > .dropdown-toggle.btn-file:hover,
        .btn-file:active:focus,
        .btn-file.active:focus,
        .open > .dropdown-toggle.btn-file:focus,
        .btn-file:active.focus,
        .btn-file.active.focus,
        .open > .dropdown-toggle.btn-file.focus {
            color: #fff;
            background-color: #269abc;
            border-color: #1b6d85;
        }

    .btn-file:active,
    .btn-file.active,
    .open > .dropdown-toggle.btn-file {
        background-image: none;
    }

    .btn-file.disabled,
    .btn-file[disabled],
    fieldset[disabled] .btn-file,
    .btn-file.disabled:hover,
    .btn-file[disabled]:hover,
    fieldset[disabled] .btn-file:hover,
    .btn-file.disabled:focus,
    .btn-file[disabled]:focus,
    fieldset[disabled] .btn-file:focus,
    .btn-file.disabled.focus,
    .btn-file[disabled].focus,
    fieldset[disabled] .btn-file.focus,
    .btn-file.disabled:active,
    .btn-file[disabled]:active,
    fieldset[disabled] .btn-file:active,
    .btn-file.disabled.active,
    .btn-file[disabled].active,
    fieldset[disabled] .btn-file.active {
        background-color: #5bc0de;
        border-color: #46b8da;
    }

    .btn-file .badge {
        color: #5bc0de;
        background-color: #fff;
    }

/* Title dropdown on home page*/
.btn-title {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

    .btn-title:focus,
    .btn-title.focus {
        color: #fff;
        background-color: #286090;
        border-color: #122b40;
    }

    .btn-title:hover {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

    .btn-title:active,
    .btn-title.active,
    .open > .dropdown-toggle.btn-title {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

        .btn-title:active:hover,
        .btn-title.active:hover,
        .open > .dropdown-toggle.btn-title:hover,
        .btn-title:active:focus,
        .btn-title.active:focus,
        .open > .dropdown-toggle.btn-title:focus,
        .btn-title:active.focus,
        .btn-title.active.focus,
        .open > .dropdown-toggle.btn-title.focus {
            color: #fff;
            background-color: #204d74;
            border-color: #122b40;
        }

    .btn-title:active,
    .btn-title.active,
    .open > .dropdown-toggle.btn-title {
        background-image: none;
    }

    .btn-title.disabled,
    .btn-title[disabled],
    fieldset[disabled] .btn-title,
    .btn-title.disabled:hover,
    .btn-title[disabled]:hover,
    fieldset[disabled] .btn-title:hover,
    .btn-title.disabled:focus,
    .btn-title[disabled]:focus,
    fieldset[disabled] .btn-title:focus,
    .btn-title.disabled.focus,
    .btn-title[disabled].focus,
    fieldset[disabled] .btn-title.focus,
    .btn-title.disabled:active,
    .btn-title[disabled]:active,
    fieldset[disabled] .btn-title:active,
    .btn-title.disabled.active,
    .btn-title[disabled].active,
    fieldset[disabled] .btn-title.active {
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    .btn-title .badge {
        color: #337ab7;
        background-color: #fff;
    }

.bolderface {
    font-weight: bold;
}


/* end user custom section */

