@charset "UTF-8";

/* -------------- design system -------------- */
/* ----------------- overlay ----------------- */
/* -------------- block message -------------- */
/* ---------------- messages ----------------- */
/* --------- password strength meter --------- */
/* -------------- simple icons --------------- */
/* ------------------ icons ------------------ */
/* ------------------ forms ------------------ */
/* ----------------- buttons ----------------- */

/* -------------- design system -------------- */

:root
{
    --default-font:             "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font:             "Raleway", sans-serif;
    --nav-font:                 "Lato", sans-serif;

    --background-color:         #ffffff;
    --default-color:            #1C3050;
    --heading-color:            #234572;
    --accent-color:             #2F80D6;
    --surface-color:            #ffffff;
    --contrast-color:           #ffffff;
    --panel-title-color:        #D6E6F7;

    --nav-color:                #1C3050;
    --nav-hover-color:          #2F80D6;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color:       #1C3050;
    --nav-dropdown-hover-color: #2F80D6;

    --border-color:             #dbe6f2;
    --muted-color:              #6b7c93;
    --success-color:            #198754;
    --success-background:       #eef8f2;
    --warning-color:            #9a6700;
    --warning-background:       #fff8e6;
    --error-color:              #c9565f;
    --error-background:         #fff3f4;

    scroll-behavior:            smooth;
}

.light-background
{
    --background-color:         #F5F9FE;
    --surface-color:            #ffffff;
}

.soft-background
{
    --background-color:         #EEF4FA;
    --surface-color:            #ffffff;
    background-image:           linear-gradient(135deg, var(--background-color) 0%, color-mix(in srgb, var(--accent-color), transparent 95%) 100%);
}

.dark-background
{
    --background-color:         #234572;
    --default-color:            #ffffff;
    --heading-color:            #ffffff;
    --surface-color:            #2B5388;
    --contrast-color:           #ffffff;
}

body
{
    color:                      var(--default-color);
    background-color:           var(--background-color);
    font-family:                var(--default-font);
}

a
{
    color:                      var(--accent-color);
    text-decoration:            none;
    transition:                 0.3s;
}

a:hover
{
    color:                      color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration:            none;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    color:                      var(--heading-color);
    font-family:                var(--heading-font);
}

/* ----------------- overlay ----------------- */

DIV.overlay
{
    position:                   absolute;
    left:                       0px;
    top:                        0px;
    z-index:                    100000;
    visibility:                 visible;
    width:                      100%;
    height:                     100%;
    text-align:                 center;
    background:                 #EEF3F8;
    opacity:                    0.55;
}

/* -------------- block message -------------- */

.fcr-block-overlay
{
    display:                    none;
    position:                   fixed;
    inset:                      0px;
    z-index:                    2000;
    background-color:           rgba(0,0,0,0.60);
    cursor:                     wait;
}

.fcr-block-message
{
    position:                   absolute;
    width:                      360px;
    max-width:                  calc(100% - 40px);
    top:                        30%;
    left:                       50%;
    padding:                    22px 28px;
    color:                      var(--default-color);
    background-color:           var(--surface-color);
    border:                     1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
    border-radius:              12px;
    box-shadow:                 0 18px 50px rgba(15,48,88,0.16);
    font-size:                  15px;
    font-weight:                500;
    text-align:                 center;
    transform:                  translateX(-50%);
}

/* ---------------- messages ----------------- */

DIV.message,
DIV.error,
DIV.warning
{
    padding:                    12px 16px;
    margin:                     0px 0px 24px 0px;
    border-radius:              10px;
    font-size:                  14px;
    line-height:                1.5;
    text-align:                 left;
}

DIV.message
{
    color:                      var(--success-color);
    background-color:           var(--success-background);
    border:                     1px solid color-mix(in srgb, var(--success-color) 28%, transparent);
}

DIV.error
{
    color:                      var(--error-color);
    background-color:           var(--error-background);
    border:                     1px solid color-mix(in srgb, var(--error-color) 30%, transparent);
}

DIV.warning
{
    color:                      var(--warning-color);
    background-color:           var(--warning-background);
    border:                     1px solid color-mix(in srgb, var(--warning-color) 26%, transparent);
}

/* --------- password strength meter --------- */

.pass-graybar
{
    position:                   relative;
    width:                      132px;
    height:                     5px;
    margin:                     5px 3px 0px 3px;
    background-color:           #e3e9f0;
    border-radius:              999px;
    overflow:                   hidden;
}

.pass-colorbar
{
    position:                   absolute;
    top:                        0;
    left:                       0;
    height:                     5px;
    background-image:           url(../images/passwordstrength.jpg);
}

.pass-percent,
.pass-text
{
    margin:                     4px 3px 0px 3px;
    color:                      var(--muted-color);
    font-size:                  13px;
}

.pass-percent
{
    margin-right:               5px;
}

/* -------------- simple icons --------------- */

[class^="si-"],
[class*=" si-"]
{
    width:                      1em;
    height:                     1em;
    display:                    inline-block;
    background-repeat:          no-repeat;
    background-position:        center;
    background-size:            contain;
}

/* ------------------ icons ------------------ */

i.category_icon
{
    color:                      var(--accent-color);
    font-size:                  48px;
}

svg.category_icon
{
    width:                      48px;
    height:                     48px;
    display:                    inline-block;
    fill:                       var(--accent-color);
}

i.category_item_icon
{
    color:                      var(--heading-color);
    font-size:                  48px;
}

svg.category_item_icon
{
    width:                      48px;
    height:                     48px;
    display:                    inline-block;
    fill:                       var(--heading-color);
}

i.category_custom_item_icon
{
    color:                      #a0a0a0;
    font-size:                  48px;
}

svg.category_custom_item_icon
{
    width:                      48px;
    height:                     48px;
    display:                    inline-block;
    fill:                       #a0a0a0;
}

/* ------------------ forms ------------------ */

TABLE.frm_container
{
    width:                      100%;
    background:                 var(--surface-color);
    border:                     1px solid color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-radius:              14px;
    box-shadow:                 0 8px 28px rgba(15,48,88,0.08);
    overflow:                   hidden;
}

TABLE.frm
{
    width:                      100%;
    background-color:           var(--surface-color);
    border-radius:              0px 0px 14px 14px;
}

TD.frm_content
{
    padding:                    24px 0px 4px 0px;
}

TD.frm_title
{
    padding:                    11px 16px;
    color:                      var(--heading-color);
    background:                 #F5F9FE;
    border:                     1px solid var(--border-color);
    border-radius:              13px 13px 0px 0px;
    font-family:                var(--heading-font);
    font-size:                  15px;
    font-weight:                500;
    line-height:                1.3;
    vertical-align:             middle;
}

TD.frm_title A
{
    color:                      rgba(255,255,255,0.88);
}

TD.frm_title A:hover
{
    color:                      #ffffff;
}

TD.frm_title_small
{
    padding:                    18px 16px 8px 16px;
    color:                      var(--heading-color);
    font-family:                var(--heading-font);
    font-size:                  14px;
    font-weight:                700;
    text-align:                 left;
}

TD.frm_header
{
    width:                      20%;
    padding:                    7px 8px 5px 16px;
    color:                      color-mix(in srgb, var(--default-color) 82%, transparent);
    font-size:                  14px;
    font-weight:                600;
    vertical-align:             top;
    text-align:                 left;
}

TD.frm_cell
{
    width:                      80%;
    padding:                    4px 10px 4px 6px;
    vertical-align:             top;
    text-align:                 left;
}

TD.frm_error
{
    padding:                    5px 8px 0px 18px;
    color:                      var(--error-color);
    font-size:                  13px;
    font-weight:                500;
    text-align:                 left;
}

TD.frm_general
{
    padding:                    7px 10px 5px 6px;
    color:                      color-mix(in srgb, var(--default-color) 78%, transparent);
    text-align:                 left;
}

TD.frm_separator
{
    border-top:                 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
}

TD.frm_submit
{
    padding:                    18px 16px;
    background:                 var(--surface-color);
    text-align:                 right;
}

TABLE.frm_multiple_button_container
{
    margin-left:                auto;
    margin-right:               0px;
}

TABLE.frm_button_container
{
    margin-left:                7px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select
{
    box-sizing:                 border-box;
    padding:                    8px 11px;
    color:                      var(--default-color);
    background-color:           #ffffff;
    background-image:           none;
    border:                     1px solid var(--border-color);
    border-radius:              8px;
    font-family:                var(--default-font);
    font-size:                  14px;
    line-height:                1.35;
    transition:                 border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus
{
    outline:                    none;
    border-color:               var(--accent-color);
    box-shadow:                 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

input[type="radio"],
input[type="checkbox"]
{
    accent-color:               var(--accent-color);
}

input:disabled,
textarea:disabled,
select:disabled
{
    color:                      #8a97a6;
    background-color:           #f2f5f8;
    cursor:                     not-allowed;
}

.icon_button
{
    display:                    inline-flex;
    align-items:                center;
    justify-content:            center;
    padding:                    8px 10px;
    color:                      var(--accent-color);
    background-color:           color-mix(in srgb, var(--accent-color) 7%, var(--surface-color));
    border:                     1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
    border-radius:              8px;
    cursor:                     pointer;
    transition:                 background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.icon_button:hover
{
    background-color:           color-mix(in srgb, var(--accent-color) 12%, var(--surface-color));
    border-color:               color-mix(in srgb, var(--accent-color) 32%, transparent);
}

TD.frm_readonly
{
    padding:                    5px 6px 4px 14px;
    color:                      #8896a6;
    font-size:                  13px;
    white-space:                nowrap;
}

TD.frm_readonly A
{
    color:                      #718096;
    text-decoration:            none;
}

TD.frm_readonly A:hover
{
    color:                      var(--accent-color);
    text-decoration:            none;
}

/* ----------------- buttons ----------------- */

INPUT.frm_button
{
    display:                    inline-block;
    padding:                    9px 18px;
    color:                      var(--contrast-color);
    background-color:           var(--accent-color);
    border:                     1px solid var(--accent-color);
    border-radius:              8px;
    box-sizing:                 border-box;
    cursor:                     pointer;
    font-family:                var(--default-font);
    font-size:                  14px;
    font-weight:                700;
    line-height:                1.35;
    text-align:                 center;
    text-decoration:            none;
    vertical-align:             middle;
    white-space:                nowrap;
    transition:                 background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

INPUT.frm_button:focus,
INPUT.frm_button:hover
{
    color:                      var(--contrast-color);
    background-color:           color-mix(in srgb, var(--accent-color), black 10%);
    border-color:               color-mix(in srgb, var(--accent-color), black 10%);
    box-shadow:                 0 6px 16px color-mix(in srgb, var(--accent-color), transparent 72%);
    transform:                  translateY(-1px);
}

.fcr-button,
.fcr-button:focus
{
    background:                 var(--accent-color);
    color:                      var(--contrast-color);
    border:                     0;
    border-radius:              50px;
    font-family:                inherit;
    transition:                 all 0.3s ease;
}

.fcr-button:hover
{
    background:                 color-mix(in srgb, var(--accent-color), black 12%);
    color:                      var(--contrast-color);
    transform:                  translateY(-2px);
    box-shadow:                 0 6px 16px color-mix(in srgb, var(--accent-color), transparent 65%);
}

.fcr-button i
{
    transition:                 transform 0.3s ease;
}

.fcr-button:hover i
{
    transform:                  translateX(4px);
}

.fcr-button-cta
{
    display:                    inline-flex;
    align-items:                center;
    justify-content:            center;
    gap:                        12px;
    padding:                    16px 32px;
    font-size:                  0.9375rem;
    font-weight:                600;
    text-decoration:            none;
}

.fcr-button-header
{
    font-size:                  14px;
    padding:                    10px 30px;
    margin:                     0;
}

@media (max-width: 1199.98px)
{
    .fcr-button-header
    {
        order:                  2;
        margin:                 0 15px 0 0;
        padding:                6px 20px;
    }
}

.fcr-button-band
{
    display:                    inline-flex;
    align-items:                center;
    gap:                        10px;
    padding:                    16px 36px;
    background:                 var(--surface-color);
    color:                      var(--accent-color);
    font-size:                  15px;
    font-weight:                700;
    text-decoration:            none;
    transition:                 all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow:                 0 8px 24px rgba(0, 0, 0, 0.2);
}

.fcr-button-band:hover
{
    background:                 var(--surface-color);
    color:                      var(--accent-color);
    transform:                  translateY(-3px) scale(1.02);
    box-shadow:                 0 12px 32px rgba(0, 0, 0, 0.25);
}

.fcr-button-band i
{
    font-size:                  18px;
    transition:                 transform 0.3s ease;
}

.fcr-button-band:hover i
{
    transform:                  translateX(4px);
}

@media (max-width: 575.98px)
{
    .fcr-button-band
    {
        width:                  100%;
        justify-content:        center;
    }
}