:root {
    /*color*/
    --fn-color-orange-1: #ff7800;
    --fn-color-white: #ffffff;
    --fn-color-black: #000000;
    --fn-color-grey-1: #636363;
    --fn-color-grey-2: #cccccc;
    --fn-color-grey-3: #f2f2f2;
    --fn-color-green-1: #00b50c;
    --fn-color-green-2: #5aba0c;
    --fn-color-blue-1: #0089ff;
    --fn-color-red-1: #dc1d00;

    /*font-size*/
    --fn-font-size-normal: 14px;
    --fn-font-size-big: 16px;
    --fn-font-size-large: 20px;
}
body {
    color: var(--fn-color-black);
    font-weight: normal;
    font-size: var(--fn-font-size-normal);
}

.fn-text-system {
    color: var(--fn-color-black);
    font-weight: bold;
    font-size: var(--fn-font-size-big);
}
.fn-text-header {
    color: var(--fn-color-orange-1);
    font-weight: bold;
    font-size: var(--fn-font-size-large);
}
.fn-text-topic {
    color: var(--fn-color-black);
    font-weight: bold;
}
.fn-text-topic-2 {
    color: var(--fn-color-white);
    font-weight: bold;
}
.fn-text-topic-3 {
    color: var(--fn-color-orange-1);
    font-weight: bold;
}
.fn-text-content {
    color: var(--fn-color-black);
}
.fn-text-content-2 {
    color: var(--fn-color-orange-1);
}
.fn-bg-header {
    background-color: var(--fn-color-orange-1);
}
.fn-bg-primary {
    background-color: var(--fn-color-grey-1);
}
.fn-bg-secondary {
    background-color: var(--fn-color-grey-3);
}

.fn-btn {
    border: 1px solid #ccc;
    border-radius: 50px;
    padding: 4px 16px;
    font-weight: bold;
}
    .fn-btn.fn-btn-submit {
        color: var(--fn-color-white) !important;
        background-color: var(--fn-color-green-2) !important;
        border: 0px !important;
    }
    .fn-btn.fn-btn-cancel {
        color: var(--fn-color-grey-2) !important;
    }
    .fn-btn.fn-btn-primary {
        color: var(--fn-color-white) !important;
        background-color: var(--fn-color-blue-1) !important;
        border: 0px !important;
    }
    .fn-btn.fn-btn-secondary {
        color: var(--fn-color-white) !important;
        background-color: var(--fn-color-grey-1) !important;
        border: 0px !important;
    }
    .fn-btn.fn-btn-select {
        color: var(--fn-color-white) !important;
        background-color: var(--fn-color-orange-1) !important;
        border: 0px !important;
    }

.fn-form-control {
    border: solid 1px var(--fn-color-grey-2);
    border-radius: 6px;
    background-color: var(--fn-color-white);
    padding: 4px 8px;
}
.date .fn-form-control {
    border-right: none;
    border-radius: 6px 0px 0px 6px;
}
.fn-calendar {
    border: solid 1px var(--fn-color-grey-2);
    border-left: none;
    border-radius: 0px 6px 6px 0px;
    padding: 4px 8px;
    background-color: var(--fn-color-white);
}
.fn-calendar img {
    width: 16px;
}

.fn-table {
    width: auto;
    min-width: 100%;
    border: 1px solid #ccc !important;
    background-color: var(--fn-color-white) !important;
}

    .fn-table thead th {
        color: var(--fn-color-white) !important;
        background-color: var(--fn-color-orange-1) !important;
    }
    .fn-table tbody > tr:nth-of-type(odd) {
        background-color: var(--fn-color-white) !important;
    }
    .fn-table tbody > tr:nth-of-type(even) {
        background-color: var(--fn-color-grey-3) !important;
    }
/*.fn-table td, .fn-table th {
        border: 1px solid #ccc !important;
    }
        .fn-table td.icn-w-meeting {
            border: 0px !important;
        }*/