/*
    https://jigsaw.w3.org/css-validator/
 */

body {
  padding: 5px 10px 0px 10px;
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Oxygen", sans-serif;
}

b, strong { font-weight: inherit; font-weight: bolder; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; color: #0E75A7; }
a:active, a:hover { outline-width: 0; color: #0E75A7; }
p { padding-left: 5px; font-size: 1.1rem; }
img { border-style: none; }
hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
svg:not(:root) { overflow: hidden; }
abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
code, kbd, pre, samp { background-color: #F2F2F2; padding: .1em .5em; border-radius: .1em; }
pre { border-left: solid 0.25em #90A4AE; padding: 20px 0px 15px 30px; font-size: medium; }
blockquote { padding: 10px; margin: 0 0 20px; font-size: 1.2rem; border-left: 5px solid #90A4AE; }
.bqtitle { font-size: 1.9rem; color: #90A4AE; }

button, input, optgroup, select, textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; }
legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; resize: none; }

[type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

[hidden], .HIDDEN { display: none; }

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    font-size: 80%;
    color: #244A5D;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}

.form { display: block; margin-top: 0em; }
.form__wrapper { width: 100%; padding: 7px 0; }
.form__wrapper-box { width: 100%; margin: 10px 0px 20px 10px; }
.form__label { width: 20%; min-width: 100px; }
.form__label-required:after { content: '*'; color: #F8011E; font-weight: bolder; }
.form__icon { color: #000; background-color: #CCC; padding: 13px; }
.form__icon-blue { color: #0096D9; background-color: #E3F2FD; font-weight: bold; padding: 13px; }
.form__icon-radius-left { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; }
.form__icon-radius-right { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; }

.card-green > .card__header,
.card-red > .card__header,
.card-blue > .card__header,
.card-orange > .card__header,
.card-gray > .card__header,
.card-white > .card__header,
.card-cyan > .card__header,
.card-yellow > .card__header,
.form__group,
.grid__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-box-align: center;
    -ms-flex-pack: justify;
    -ms-flex-align: center;
    justify-content: space-between;
    align-items: center;
}
.form__group_field { width: 80%; display: block; margin-right: 20px; }

.select, .textfield { padding: 12px; margin: 3px 0; width: 100%; outline: none; border: 1px solid #CCC; border-radius: 0; }
.select ::-moz-placeholder, .textfield ::-moz-placeholder { opacity: 1; color: #fff; }
.select :-ms-input-placeholder, .textfield :-ms-input-placeholder { color: #fff; }
.select ::-webkit-input-placeholder, .textfield ::-webkit-input-placeholder { color: #fff; }

.textfield__helper { color: #333; font-size: 1.2rem; line-height: 2; }
.textfield__error { color: #F8011E; font-size: 1.2rem; line-height: 2; }
.textfield-error { border: 1px solid #F8011E; }
.textfield-large { padding: 20px; }
.textfield-radius { border-radius: 0.25em; }
.textfield-radius-left { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; }
.textfield-radius-right { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; }
.textfield-shadow:focus { border-color: #51a7e8; outline: none; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); }

.input__file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.input__caption {
    color: #1E88E5;
    margin: 10px 5px 10px 10px;
    font-variant: small-caps;
}

.alert-green .alert__close,
.alert-red .alert__close,
.alert-blue .alert__close,
.alert-orange .alert__close,
.alert-gray .alert__close,
.alert-white .alert__close {
    position: relative;
    top: -4px; right: -21px;
    padding: 0 20px;
    float: right;
    font-size: 1.6rem;
    cursor: pointer;
    text-decoration: none;
}
.alert-green .alert__nav,
.alert-red .alert__nav,
.alert-blue .alert__nav,
.alert-orange .alert__nav,
.alert-white .alert__nav,
.alert-gray .alert__nav {
    position: relative;
    top: -2px;
    float: right;
    font-size: 1.6rem;
    cursor: pointer;
    text-decoration: none;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    margin-top: 10px;
    background: none;
}
.alert-align  { margin-left: 10px; }
.alert-radius { border-radius: 0.25em; }
.alert-green { border: 1px dashed #00B35E; color: #00B35E; }
.alert-green .alert__close { color: #00B35E; }
.alert-green .alert__close:hover { text-decoration: none; }
.alert-red { border: 1px dashed #F8011E; color: #F8011E; }
.alert-red .alert__close { color: #F8011E; }
.alert-red .alert__close:hover { text-decoration: none; }
.alert-blue { border: 1px dashed #0096D9; color: #0096D9; }
.alert-blue .alert__close { color: #0096D9; }
.alert-blue .alert__close:hover { text-decoration: none; }
.alert-orange { border: 1px dashed #F7931E; color: #F7931E; }
.alert-orange .alert__close { color: #F7931E; }
.alert-orange .alert__close:hover { text-decoration: none; }
.alert-gray { border: 1px dashed #999; color: #999; }
.alert-gray .alert__close, .alert-gray .alert__nav { color: #999; }
.alert-gray .alert__close:hover, { text-decoration: none; }
.alert-gray .alert__nav:hover,
.alert-blue .alert__nav:hover { text-decoration: none; color: #0096D9; }
.alert-white { border: 1px dashed #fff; color: #fff; }
.alert-white .alert__close { color: #fff; }
.alert-white .alert__close:hover { text-decoration: none; }

.card {
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.card:hover { -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
.card-radius { border-radius: 0.25em; }
.card-green { border: 1px solid #4CAF50; }
.card-green > .card__header { padding: 1em .5em; background-color: #4CAF50; color: #fff; }
.card-red { border: 1px solid #FF5722; }
.card-red > .card__header { padding: 1em .5em; background-color: #FF5722; color: #fff; }
.card-blue { border: 1px solid #0096D9; }
.card-blue > .card__header { padding: 1em .5em; background-color: #0096D9; color: #fff; }
.card-orange { border: 1px solid #F7931E; }
.card-orange > .card__header { padding: 1em .5em; background-color: #F7931E; color: #fff; }
.card-gray { border: 1px solid #999; }
.card-gray > .card__header { padding: 1em .5em; background-color: #999; color: #000; }
.card-white { border: 1px solid #fff; }
.card-white > .card__header { padding: 1em .5em; background-color: #fff; color: #000; }
.card-yellow { border: 1px solid #FFC107; }
.card-yellow > .card__header { padding: 1em .5em; background-color: #FFC107; color: #fff; }
.card-cyan { border: 1px solid #00BCD4; }
.card-cyan > .card__header { padding: 1em .5em; background-color: #00BCD4; color: #fff; }
.card__title { font-size: 1.6rem; font-weight: bold; }
.card__tools > i { margin: 0 .5em; cursor: pointer; float: right; }
.card__content { padding: 1em .5em; }
.card__big-text { padding: 10px; }
.card__align { text-align: -webkit-auto; }
.card__fixed { min-height: 148px; }

.button {
    display: inline-block;
    padding: 13px 20px;
    margin: 5px 5px 5px 0px;
    outline: none;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.button:hover, .button:focus, .button:active { text-decoration: none; }
.button-radius { border-radius: 0.25em; }
.button-green { background: #00B35E; color: #fff; }
.button-green:hover { background: #00e679; color: #fff; }
.button-red { background: #F8011E; color: #fff; }
.button-red:hover { background: #fe2e46; color: #fff; }
.button-blue { background: #0096D9; color: #fff; }
.button-blue:hover { background: #0db4ff; color: #fff; }
.button-orange { background: #F7931E; color: #fff; }
.button-orange:hover { background: #f9ab4f; color: #fff; }
.button-gray { background: #999; color: #000; }
.button-gray:hover { background: #CCC; color: #000; }
.button-white { background: #fff; color: #000; }
.button-white:hover { background: #fff; color: #000; }
.button-outline-green { border: 1px solid #00B35E; background: transparent; color: #00B35E; }
.button-outline-green:hover { border: 1px solid #00e679; color: #00e679; }
.button-outline-red { border: 1px solid #F8011E; background: transparent; color: #F8011E; }
.button-outline-red:hover { border: 1px solid #fe2e46; color: #fe2e46; }
.button-outline-blue { border: 1px solid #0096D9; background: transparent; color: #0096D9; }
.button-outline-blue:hover { border: 1px solid #0db4ff; color: #0db4ff; }
.button-outline-orange { border: 1px solid #F7931E; background: transparent; color: #F7931E; }
.button-outline-orange:hover { border: 1px solid #f9ab4f; color: #f9ab4f; }
.button-outline-gray { border: 1px solid #999; background: transparent; color: #999; }
.button-outline-gray:hover { border: 1px solid #CCC; color: #CCC; }
.button-outline-white { border: 1px solid #fff; background: transparent; color: #fff; }
.button-outline-white:hover { border: 1px solid #fff; color: #fff; }

.label {
    padding: .1em .5em;
}
.label-green { background: #00B35E; color: #fff; }
.label-outline-green { border: 1px solid #00B35E; color: #00B35E; }
.label-red { background: #F8011E; color: #fff; }
.label-outline-red { border: 1px solid #F8011E; color: #F8011E; }
.label-blue { background: #0096D9; color: #fff; }
.label-text-blue { color: #0096D9; }
.label-outline-blue { border: 1px solid #0096D9; color: #0096D9; }
.label-orange { background: #F7931E; color: #fff; }
.label-outline-orange { border: 1px solid #F7931E; color: #F7931E; }
.label-gray { background: #999; color: #000; }
.label-outline-gray { border: 1px solid #999; color: #999; }
.label-white { background: #fff; color: #000; }
.label-outline-white { border: 1px solid #fff; color: #fff; }
.label-radius { border-radius: 2em; padding: .1em .8em .2em .8em; }

.radio {
    position: absolute; left: -9999px;
}
.radio + label { position: relative; display: inline-block; padding: 2px 30px; cursor: pointer; }
.radio + label:before, .radio + label:after { position: absolute; top: 0; content: ''; -webkit-transition: all .2s; transition: all .2s; }
.radio + label:before { left: 3px; width: 12px; height: 12px; margin-top: 3px; border: 1px solid #000; border-radius: 50%; -webkit-transition: background-color 0.25s; transition: background-color 0.25s; }
.radio + label:after { left: 0; width: 18px; height: 18px; border: 1px solid #000; border-radius: 50%; }
.radio:checked + label:before { background-color: #000; }
.radio:disabled + label { color: #CCC; }
.radio:disabled + label:before { border: 1px solid #CCC; }
.radio:disabled + label:after { border: 1px solid #CCC; }
.radio-blue + label:before, .radio-blue + label:after { border: 1px solid #0096D9; }
.radio-blue:checked + label:before { background-color: #0096D9; }

.checkbox {
    position: absolute; left: -9999px;
}
.checkbox + label { position: relative; display: inline-block; padding: 6px 30px; cursor: pointer; }
.checkbox + label:before { position: absolute; top: 4px; left: 0; width: 22px; height: 22px; border: 1px solid #CCC; border-radius: 1px; background-color: #fff; content: ''; }
.checkbox + label:after { position: absolute; color: #fff; content: ''; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(37deg); transform: rotate(37deg); -webkit-transition: border 0.25s, background-color 0.25s; transition: border 0.25s, background-color 0.25s; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.checkbox:not(:checked) + label:after { width: 0; height: 0; top: 6px; left: 1px; }
.checkbox:checked + label:before { border-color: #000; background-color: #000; }
.checkbox:checked + label:after { width: 8px; height: 13px; top: 6px; left: 1px; }
.checkbox:disabled + label { color: #CCC; }
.checkbox:disabled + label:before { border-color: #CCC; background-color: #F2F2F2; -webkit-box-shadow: none; box-shadow: none; }
.checkbox:disabled + label:after { display: none; }
.checkbox-blue:checked + label:before { border-color: #0096D9; background-color: #0096D9; }

.grid__row { *zoom: 1; margin: 0 auto; max-width: 92.308em; }
.grid__row:before, .grid__row:after { display: table; content: ' '; }
.grid__row:after { clear: both; }
.grid__col-1 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-1 { width: 8.33333%; } }
.grid__offset-1 { margin-left: 8.33333%; }
.grid__col-2 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-2 { width: 16.66667%; } }
.grid__offset-2 { margin-left: 16.66667%; }
.grid__col-3 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-3 { width: 25%; } }
.grid__offset-3 { margin-left: 25%; }
.grid__col-4 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-4 { width: 33.33333%; } }
.grid__offset-4 { margin-left: 33.33333%; }
.grid__col-5 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-5 { width: 41.66667%; } }
.grid__offset-5 { margin-left: 41.66667%; }
.grid__col-6 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-6 { width: 50%; } }
.grid__offset-6 { margin-left: 50%; }
.grid__col-7 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-7 { width: 58.33333%; } }
.grid__offset-7 { margin-left: 58.33333%; }
.grid__col-8 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-8 { width: 66.66667%; } }
.grid__offset-8 { margin-left: 66.66667%; }
.grid__col-9 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-9 { width: 75%; } }
.grid__offset-9 { margin-left: 75%; }
.grid__col-10 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-10 { width: 83.33333%; } }
.grid__offset-10 { margin-left: 83.33333%; }
.grid__col-11 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-11 { width: 91.66667%; } }
.grid__offset-11 { margin-left: 91.66667%; }
.grid__col-12 { float: left; width: 100%; }
@media (min-width: 768px) { .grid__col-12 { width: 100%; } }
.grid__offset-12 { margin-left: 100%; }

.content__wrapper {
    *zoom: 1;
    margin: 0 auto;
    max-width: 92.308em;
}
.content__wrapper:before, .content__wrapper:after { display: table; content: ' '; }
.content__wrapper:after { clear: both; }

.wrapper-footer {
    position:relative;
    min-height:100%;
    height:auto!important;
    overflow:hidden;
}
.wrapper-footer:after {
    content: "";
    height: 70px;
    display: block;
}
.page-footer {
    height: 70px;
    margin-top: -70px;
}

.breadcrumbs { font-size: 1.3em; color: #16729C; }
.breadcrumbs a,
.breadcrumbs a:active { outline-width: 0; color: #0096D9; text-decoration: none; }
.breadcrumbs a:hover  { text-decoration: underline; font-weight: bold; }

#in-error {
    padding-left: 15px;
}
.template-style-list {
    line-height: 1.2;
    padding-left: 10px;
    display: inline-table;
}
.template-style-list li {
    list-style: none;
    font-variant: small-caps;
}
.template-style-list-pad {
    line-height: 1.8;
}

.template-check-result {
    font-weight: bold;
    font-family: "fontello";
}
.template-check-result-PORT {
    color: #F44336;
}
.template-check-result-NOT {
    color: #469E49;
}
.template-check-result-BLOCKED {
    color: #D32F2F;
}
.template-check-result-ERROR {
    color: #F44336;
}
.template-check-result-BASE {
    color: #AB47BC;
}
.template-check-result-IP,
.template-check-result-BAD,
.template-check-result-DNS {
    color: #1E81D0;
}

.BLOCKED, .QUERY, .EMPTY .NOT .FOUND .ADDRESS, .RECORD, .HOST, .NAME, .SCHEME, .IP, .SOURCE,
.template-check-result-EMPTY { }
.template-check-result-NOT:after { padding: 3px; font-size: large; content: '\e802' }
.template-check-result-BLOCKED:after { padding: 3px; font-size: large; content: '\e809' }
.template-check-result-ERROR:after { padding: 3px; font-size: large; content: '\e808' }
.template-check-result-BASE:after { padding: 3px; font-size: large; content: '\e804' }

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn .5s ease-in 1 forwards;
}

.is-paused {
  animation-play-state: paused;
}