@charset "UTF-8";

:root {

    /*
     * primary color code 
     * backup primary l-code: 51.6%
     */
    --basic-h-pri: 174;
    --basic-s-pri: 72.1%;
    --basic-l-pri: 50%;
    --basic-l-pri-hover: 45%;

    --bg-l: 12.5%;
    --fg-l: 87.5%;
    /*
     * secondary color code 
     * backup secondary h-code : 268
     * backup secondary l-code : 56.5%
     */
    --basic-h-sec: 285;
    --basic-s-sec: 57.1%;
    --basic-l-sec: 50%;
    --basic-l-sec-hover: 45%;

    /*
     * selection color code 
     */
    --basic-h-select: 199;

    --fg-s-pri: 11%;
    --fg-l-pri: 15%;

    --bg-l-pri-dark: 6.5%;

    /* 
     * additional lightness color code 
     */

    --basic-l-dark: 22.5%;
    --basic-l-light: 96.5%;

    --bs-pri-10 : hsl( var(--basic-h-pri), var(--basic-s-pri), 10% );
    --bs-pri-20 : hsl( var(--basic-h-pri), var(--basic-s-pri), 20% );
    --bs-pri-30 : hsl( var(--basic-h-pri), var(--basic-s-pri), 30% );
    --bs-pri-40 : hsl( var(--basic-h-pri), var(--basic-s-pri), 40% );
    /* --bs-pri-50 : hsl( var(--basic-h-pri), var(--basic-s-pri), 50% ); */
    --bs-pri-60 : hsl( var(--basic-h-pri), var(--basic-s-pri), 60% );
    --bs-pri-70 : hsl( var(--basic-h-pri), var(--basic-s-pri), 70% );
    --bs-pri-80 : hsl( var(--basic-h-pri), var(--basic-s-pri), 80% );
    --bs-pri-90 : hsl( var(--basic-h-pri), var(--basic-s-pri), 90% );

    --bs-sec-10 : hsl( var(--basic-h-sec), var(--basic-s-sec), 10% );
    --bs-sec-20 : hsl( var(--basic-h-sec), var(--basic-s-sec), 20% );
    --bs-sec-30 : hsl( var(--basic-h-sec), var(--basic-s-sec), 30% );
    --bs-sec-40 : hsl( var(--basic-h-sec), var(--basic-s-sec), 40% );
    /* --bs-sec-50 : hsl( var(--basic-h-sec), var(--basic-s-sec), 50% ); */
    --bs-sec-60 : hsl( var(--basic-h-sec), var(--basic-s-sec), 60% );
    --bs-sec-70 : hsl( var(--basic-h-pri), var(--basic-s-sec), 70% );
    --bs-sec-80 : hsl( var(--basic-h-sec), var(--basic-s-sec), 80% );
    --bs-sec-90 : hsl( var(--basic-h-sec), var(--basic-s-sec), 90% );

    /*
     * font family model 
     */
    /* --bs-font-sans-serif: Helvetica, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    --bs-font-sans-serif: "system-ui", "-apple-system", "Arial", "Helvetica", "Arial Black", "Helvetica Neue", "Roboto", "Segoe UI", "sans-serif";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-font-blog: Georgia, 'Times New Roman', Times, serif;

    /*
     * border color code 
     */
    --border-color: hsla(var(--basic-h-pri),var(--basic-l-pri),var(--basic-l-pri),0.8);

    /*
     * main background and forecground color code 
     */
    --head-background: hsl( var(--basic-h-pri), var(--basic-s-pri), 42.5% );
    --head-foreground: hsl( var(--basic-h-pri), var(--basic-s-pri), 87.5% );
    --head-background-dark: hsl( var(--basic-h-pri), var(--basic-s-pri), var(--basic-l-dark) );
    --body-background: hsla( var(--basic-h-pri), var(--basic-s-pri), 92.5%, 0.75 );
    --body-foreground: hsl( var(--basic-h-pri), var(--basic-s-pri), 22.5% );

    --main-background: hsla( var(--basic-h-pri), var(--basic-s-pri), 96.5%, 1 );
    --main-foreground: hsla( var(--basic-h-pri), var(--basic-s-pri), 36.5%, 1 );
    --main-background-hover: hsla( var(--basic-h-pri), var(--basic-s-pri), 97.5%, 1 );
    --main-foreground-hover: hsla( var(--basic-h-pri), 32.6%, 36.5%, 1 );
    --main-footer-background: hsla( var(--basic-h-pri), var(--basic-s-pri), var(--basic-l-dark) );
    --main-footer-foreground: hsla( var(--basic-h-pri), var(--basic-s-pri), var(--basic-l-light) );

    --bs-primary-10: hsl( var(--basic-h-pri), var(--basic-s-pri), 42.5% );

    /*
     * selection color code
     */
    --selection-background: hsl( var(--basic-h-select), 69%, 33% );
    --selection-foreground: hsl(var(--basic-h-pri),var(--basic-s-pri),86.5%);

    /*
     * box shadow color code
     */
     --blog-box-shadow: hsla(0,0,0,0.15);
     --blog-box-shadow-hover: hsla(0,0,0,0.25);

}

::selection {
    background-color: var(--selection-background);
    color: var(--selection-foreground);
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: hsla(var(--basic-h-pri),var(--basic-s-pri),12.5%,25%);
    box-shadow: 0 0 5px 1px rgba(255,255,255,0.125) inset;
}
::-webkit-scrollbar-thumb {
    background: hsla(var(--basic-h-pri),var(--basic-s-pri),25%,50%);
}
::-webkit-scrollbar-thumb:hover {
    background: hsla(var(--basic-h-pri),var(--basic-s-pri),25%,75%);
}

body {
    /* font-size: 1.25rem; */
    /* line-height: 2rem; */
    font-family: var(--bs-font-sans-serif);
    /* "Arial", "Helvetica", "system-ui", "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", "sans-serif"; */
    font-weight: 300;
}

.h-100 {
    height: 100%;
}

.blog-logo {
    font-family: var(--bs-font-sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;;
}

/*** addition rounded **/

.circle {
    border-radius: 50%;
}

.rounded-top-3 {
    border-radius: 0.3rem 0.3rem 0 0;
}
.rounded-bottom-3 {
    border-radius: 0 0 0.3rem 0.3rem;
}
.rounded-left-3 {
    border-radius: 0.3rem 0 0 0.3rem;
}
.rounded-right-3 {
    border-radius: 0 0.3rem 0.3rem 0;
}

.rounded-10 {
    border-radius: 1.5rem;
}
.rounded-top-10 {
    border-radius: 1.5rem 1.5rem 0 0;
}
.rounded-bottom-10 {
    border-radius: 0 0 1.5rem 1.5rem;
}
.rounded-left-10 {
    border-radius: 1.5rem 0 0 1.5rem;
}
.rounded-right-10 {
    border-radius: 0 1.5rem 1.5rem 0;
}
.rounded-top-left-10 {
    border-top-left-radius: 1.5rem;
}
.rounded-top-right-10 {
    border-top-right-radius: 1.5rem;
}
.rounded-bottom-left-10 {
    border-bottom-left-radius: 1.5rem;
}
.rounded-bottom-right-10 {
    border-bottom-right-radius: 1.5rem;
}

.rounded-10p {
    border-radius: 10%;
}
.rounded-top-10p {
    border-radius: 10% 10% 0 0;
}
.rounded-bottom-10p {
    border-radius: 0 0 10% 10%;
}
.rounded-left-10p {
    border-radius: 10% 0 0 10%;
}
.rounded-right-10p {
    border-radius: 0 10% 10% 0;
}

/** addons btn */
.btn-addons {
    background: hsla( var(--basic-h-pri), var(--basic-s-pri), 76.5%, 0.25 );
    color: hsl( var(--basic-h-pri), var(--basic-s-pri), 46.5% );
}
.btn-addons:hover {
    background: hsla( var(--basic-h-pri), var(--basic-s-pri), 76.5%, 0.75 );
    color: hsl( var(--basic-h-pri), var(--basic-s-pri), 26.5% );
}

/* box shadow */
 .box-shadow {
    box-shadow: 0 0 7px rgba(0,0,0,0.05);
    transition: 0.2s ease-in-out;
}
.box-shadow:hover {
    box-shadow: 0 0 7px 2px rgba(0,0,0,0.1);
}

[bc-mode="editable"] {
    background-color: rgba(255,255,255,0.5);
}
[bc-mode="editable"]:hover {
    background-color: rgba(250,255,230,0.65);
}
[bc-mode="editable"]:active {
    background-color: rgba(255,255,255,0.7);
}
[bc-mode="editable"]:disabled {
    cursor: default;
    background-color: transparent !important;
    /* background-color: rgba(255,255,255,0.2); */
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    /* border-bottom-color: rgba(0,0,0,0.125); */
     /* rgba(255,250,127,0.25); */
}
select[bc-mode="editable"]:disabled {
    background: none;
}
textarea[bc-mode="editable"] {
    height: 6rem;
    resize: vertical;
}
textarea[bc-mode="editable"]:disabled {
    height: 1rem;
    resize: none;
}

.modal-content {
    background-color: #fcfefd;
    color: #2f2f2f;
}

@media screen and (min-width: 1100px) {
    #block-command.floating-command {
        position: fixed !important;
        top: 12.5%;
        /* left: 87.5%; */
        right: 1.25%;
        width: 12.5%;
        /* padding: 0.5rem; */
        /* transform: translate(0,-22.5%); */
        text-align: right;
        background-color: transparent;
        /* border: 1px solid rgba(0,0,0,0.125); */
        /* box-shadow: 0 0 5px 0px rgba(0,0,0,0.125); */
    }
    #block-command.floating-command button {
        /* margin: 0.125px auto; */
        margin: 0px;
        margin-bottom: 0.5rem;
        text-align: left;
        display: block;
        width: 100%;
    }
    #block-command.floating-command button:hover {
        border-color: rgba(255,255,255,0.75);
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.125);
    }

}

@media screen and (max-width: 1099px) {

    #block-command.floating-command {
        position: sticky !important;
        top: 0px;
        display: inline;
        text-align: right;
        width: 100%;
        padding: 0.5rem;
        background-color: white;
        box-shadow: 0 3px 5px 1px rgba(0,0,0,0.125);
    }
    #block-command.floating-command button {
        margin: 0.25px 0.125rem;
        text-align: center;
        display: inline;
    }
}

.lookup-list {
    margin: 0px;
    padding: 1px;
    height: 100%;
    max-height: 400px;
    overflow: auto;
}
.lookup-list .item {
    cursor: pointer;
    line-height: 2rem;
    padding: 3px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}
.lookup-list .item:hover {
    background-color: rgba(255,255,255,0.0625);
    border-color: hsla( var(--basic-h-pri), var(--basic-s-pri), 60%, 0.35 );
}
.lookup-list .item.active {
    background-color: rgba(0,0,0,0.125);
    border-color: hsla( var(--basic-h-pri), var(--basic-s-pri), 60%, 0.5 );
}
.lookup-list .item.active:hover {
    background-color: rgba(255,255,255,0.175);
    border-color: hsla( var(--basic-h-pri), var(--basic-s-pri), 60%, 0.75 );
}