@import url(fontawesome-all.min.css);

html, body { background-color:var(--bg-color-main, #040C12); color:var(--color-white, #fff); line-height: 1.5; }

h1 { font-size: 4rem; line-height: 1.1; }
h2 { font-size: 1.75rem; line-height: 1.3; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9rem; }
h6 { font-size: 0.8rem; }

/** input, select, button */
input, select, textarea, a, strong, b { color: var(--color-white, #fff); }
input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled { pointer-events: none; opacity: 0.25; }

input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="text"],
input[type="password"],
input[type="email"],
select, button, .button { height:2.5rem; line-height: 2.5rem; text-align:center; padding:0 2rem; background-color: transparent; color: #212931; }
input[type="text"],
input[type="password"],
input[type="email"], select { text-align:left; }

:is(input[type="submit"], input[type="reset"], input[type="button"], input[type="text"], input[type="password"], input[type="email"], select, button, .button).df { width:var(--width-df); }
:is(input[type="submit"], input[type="reset"], input[type="button"], input[type="text"], input[type="password"], input[type="email"], select, button, .button).sm { width:var(--width-sm); }
:is(input[type="submit"], input[type="reset"], input[type="button"], input[type="text"], input[type="password"], input[type="email"], select, button, .button).md { width:var(--width-md); }
:is(input[type="submit"], input[type="reset"], input[type="button"], input[type="text"], input[type="password"], input[type="email"], select, button, .button).lg { width:var(--width-lg); }
:is(input[type="submit"], input[type="reset"], input[type="button"], input[type="text"], input[type="password"], input[type="email"], select, button, .button).xl { width:var(--width-xl); }

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover { background-color: var(--bg-color-main, #212931); color: var(--color-white, #fff); }

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary { background-color: var(--bg-color-main, #212931); color: #ffffff; }

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover { background-color: var(--bg-color-main, #18bfef); color:var(--color-hover, #fff); }

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
select:invalid,
textarea:invalid { box-shadow: none; }

select { background-size: 1.25rem; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; height: 3rem; padding-right: 3rem; text-overflow: ellipsis; }
select:focus::-ms-value { background-color: transparent; }
select::-ms-expand { display: none; }

input[type="text"],
input[type="password"],
input[type="email"],
select { height:2.5rem; line-height: 2.5rem;  }

textarea { padding: 0.75rem 1rem; }

input[type="checkbox"],
input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    float: left;
    margin-right: -2rem;
    opacity: 0;
    width: 1rem;
    z-index: -1;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 300;
    padding-left: 2.8rem;
    padding-right: 1rem;
    position: relative;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    border-radius: 0;
    border: solid 2px;
    content: '';
    display: inline-block;
    font-size: 0.8rem;
    height: 1.8rem;
    left: 0;
    line-height: 1.65rem;
    position: absolute;
    text-align: center;
    top: -0.125rem;
    width: 1.8rem;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before { content: '\f00c'; }
input[type="checkbox"] + label:before { border-radius: 0; }
input[type="radio"] + label:before { border-radius: 100%; }
::-webkit-input-placeholder { opacity: 1.0; }
:-moz-placeholder { opacity: 1.0; }
::-moz-placeholder { opacity: 1.0; }
:-ms-input-placeholder { opacity: 1.0; }
label { color: var(--color-main, #212931); }


/* Table */

.table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto;}
table { margin: 0 0 2rem 0; width: 100%;}
table tbody tr { border: solid 1px; border-left: 0; border-right: 0;}
table td { padding: 0.75rem 0.75rem;}
table th {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    line-height: 1.5;
    padding: 0 0.75rem 0.75rem 0.75rem;
    text-align: left;
    text-transform: uppercase;
}

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

    /*table th {*/
    /*    font-size: 0.9rem;*/
    /*}*/

}

table thead { border-bottom: solid 2px; }
table tfoot { border-top: solid 2px; }
table.alt { border-collapse: separate; }
table.alt tbody tr td { border: solid 1px; border-left-width: 0; border-top-width: 0; }
table.alt tbody tr td:first-child { border-left-width: 1px; }
table.alt tbody tr:first-child td { border-top-width: 1px; }
table.alt thead { border-bottom: 0; }
table.alt tfoot { border-top: 0; }
table tbody tr { border-color: #eeeeee; }
table tbody tr:nth-child(2n + 1) { background-color: rgba(220, 220, 220, 0.25); }
table th { color: #212931; }
table thead { border-bottom-color: #eeeeee; }
table tfoot { border-top-color: #eeeeee; }
table.alt tbody tr td { border-color: #eeeeee; }

/* Pagination */

.pagination {
    display: -moz-inline-flex;
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: inline-flex;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    list-style: none;
    margin: 0 0 2rem 2px;
    padding: 0;
}
.pagination a, .pagination span {
    -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    border: solid 2px;
    display: inline-block;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    height: 3rem;
    letter-spacing: 0.075em;
    line-height: calc(3rem - 4px);
    margin-left: -2px;
    min-width: 3rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.pagination .next, .pagination .previous { text-decoration: none; padding: 0 1.75rem;}
.pagination .next:before, .pagination .previous:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.pagination .next:before, .pagination .previous:before { display: inline-block; color: inherit !important; line-height: inherit; }
.pagination .previous:before { content: '\f104'; margin-right: 0.9375em; }
.pagination .next:before { content: '\f105'; float: right; margin-left: 0.9375em; }

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

    /*.pagination a, .pagination span {*/
    /*    font-size: 0.9rem;*/
    /*}*/

}

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

    /*.pagination .page, .pagination .extra {*/
    /*    display: none;*/
    /*}*/

}

.pagination a, .pagination span { border-color: #eeeeee; }
.pagination a { color: #212931 !important; }
.pagination a:hover { color: #18bfef !important; border-color: #18bfef; z-index: 1; }
.pagination a:hover + a,
.pagination a:hover + span { border-left-color: #18bfef; }
.pagination a.active { background-color: #eeeeee; }
.pagination span { color: #eeeeee; }



:root {
    --bg-color-main: #040C12;
    --bg-color-point: #000;
    --bg-color-primary: #000;
    --bg-color-sub1: #000;

    --color-main: #101010;
    --color-primary: #000;
    --color-hover: #000;
    --color-white: #fff;
    --color-gray-100: #eaeaea;
    --color-gray-200: #eaeaea;
    --color-gray-300: #eaeaea;

    /*font-color*/
    --font-color-main: #000;
    --font-color-point: #000;
    --font-color-anchor: #000;
    --font-color-sub1: #000;

    /*width*/
    --width-df: 100%;
    --width-sm: 50px;
    --width-md: 100px;
    --width-lg: 150px;
    --width-xl: 200px;

    /*height*/
    --height-sm: 50px;
    --height-md: 100px;
    --height-lg: 150px;
    --height-xl: 200px;

    /*opacity*/
    --alpha: 0.8;

    /*space*/
    --space-sm: 10px;

    /*radius*/
    --radius-df: 0;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    /*--ico-image:url('/images.jpg');*/
}