@keyframes dot-typing {
  0% {
    box-shadow: 9984px 0 0 0 #06468d, 9999px 0 0 0 #06468d, 10014px 0 0 0 #06468d;
  }
  16.667% {
    box-shadow: 9984px -10px 0 0 #06468d, 9999px 0 0 0 #06468d, 10014px 0 0 0 #06468d;
  }
  33.333% {
    box-shadow: 9984px 0 0 0 #06468d, 9999px 0 0 0 #06468d, 10014px 0 0 0 #06468d;
  }
  50% {
    box-shadow: 9984px 0 0 0 #06468d, 9999px -10px 0 0 #06468d, 10014px 0 0 0 #06468d;
  }
  66.667% {
    box-shadow: 9984px 0 0 0 #06468d, 9999px 0 0 0 #06468d, 10014px 0 0 0 #06468d;
  }
  83.333% {
    box-shadow: 9984px 0 0 0 #06468d, 9999px 0 0 0 #06468d, 10014px -10px 0 0 #06468d;
  }
  100% {
    box-shadow: 9984px 0 0 0 #06468d, 9999px 0 0 0 #06468d, 10014px 0 0 0 #06468d;
  }
}
:root {
    --color-black: #333333;
    --color-white: #ffffff;
    --color-blue: #06468d;
    --color-accent: #395aa9;
    --color-accent-hover: #23428b;
    --color-blue-hover: #286090;
    --color-green: #00C15E;
    --color-green-hover: #27b35f;
    --color-light: #f2f7fd;
    --color-light-grey: rgba(229, 232, 238, 0.43);
    --color-stroke: #ccdef0;
    --color-rose: #fae5ea;
}

* { outline: none;}
*,
*::before,
*::after {
box-sizing: border-box;
}
.preloader_active *, .preloader_active *::before, .preloader_active *::after{transform-style: preserve-3d;}

.clr,.clear{clear:both; }
.clr.module{margin-bottom: 30px;}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {margin-top: 0;margin-bottom: 8px;}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {font-weight: 700;}
dd {margin-bottom: .5rem; margin-left: 0;}
blockquote {margin: 0 0 1rem;}
b,
strong {
font-weight: 700;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: all 200ms linear;
}
a:hover {
color: var(--color-accent-hover);
text-decoration: none;
}
a:not([href]):not([class]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}

body {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    text-align: left;
    overflow-x: hidden;
    transition: all 250ms linear;
    background: var(--color-white);
    position: relative;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.grid.table .domain_info_link .domain{ font-weight:500 }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Roboto, "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-bottom: 25px;
    font-weight: 600;
    line-height: 1.3;
}
h1, .h1 {font-size: 38px;}
h2, .h2 {font-size: 34px;}
h3, .h3 {font-size: 30px;}
h4, .h4 {font-size: 28px;}
h5, .h5 {font-size: 26px; line-height: 1.2em;}
h6, .h6 {font-size: 24px;}

.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
padding-left: 0;
list-style: none;
}
.list-inline-item {
display: inline-block;
}
.list-inline-item:not(:last-child) {
margin-right: 0.5rem;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container, .container-sm {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container, .container-sm, .container-md {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container, .container-sm, .container-md, .container-lg {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container, .container-sm, .container-md, .container-lg, .container-xl {
max-width: 1264px;
}
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 576px) {
.col-sm {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-sm-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-sm-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-sm-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-sm-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-sm-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-sm-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-sm-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-sm-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-sm-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-sm-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 768px) {
.col-md-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-md-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-md-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-md-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-md-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-md-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-md-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-md-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-md-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-md-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-md-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}

.d-flex {
display: -ms-flexbox ;
display: flex ;
}
.flex-row {
-ms-flex-direction: row ;
flex-direction: row ;
}
.flex-column {
-ms-flex-direction: column ;
flex-direction: column ;
}
.flex-row-reverse {
-ms-flex-direction: row-reverse ;
flex-direction: row-reverse ;
}
.flex-column-reverse {
-ms-flex-direction: column-reverse ;
flex-direction: column-reverse ;
}
.flex-wrap {
-ms-flex-wrap: wrap ;
flex-wrap: wrap ;
}
.flex-nowrap {
-ms-flex-wrap: nowrap ;
flex-wrap: nowrap ;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse ;
flex-wrap: wrap-reverse ;
}
.justify-content-start {
-ms-flex-pack: start ;
justify-content: flex-start ;
}
.justify-content-end {
-ms-flex-pack: end ;
justify-content: flex-end ;
}
.justify-content-center {
-ms-flex-pack: center ;
justify-content: center ;
}
.justify-content-between {
-ms-flex-pack: justify ;
justify-content: space-between ;
}
.align-items-start {
-ms-flex-align: start ;
align-items: flex-start ;
}
.align-items-end {
-ms-flex-align: end ;
align-items: flex-end ;
}
.align-items-center {
-ms-flex-align: center ;
align-items: center ;
}
.align-content-start {
-ms-flex-line-pack: start ;
align-content: flex-start ;
}
.align-content-end {
-ms-flex-line-pack: end ;
align-content: flex-end ;
}
.align-content-center {
-ms-flex-line-pack: center ;
align-content: center ;
}
.align-content-between {
-ms-flex-line-pack: justify ;
align-content: space-between ;
}
.text-left {
text-align: left ;
}
.text-right {
text-align: right ;
}
.text-center {
text-align: center ;
}
.text-uppercase {
text-transform: uppercase ;
}
.slow {
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    transition: all 100ms linear;
}

html,
body {
  scrollbar-gutter: stable;
}
/*.modal-open {
overflow: hidden;
}*/

.modal-open {
 /*overflow-y: auto;*/
 overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none;
}
}
.modal.show .modal-dialog {
-webkit-transform: none;
transform: none;
}
.modal.modal-static .modal-dialog {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
.modal-dialog-scrollable {
display: -ms-flexbox;
display: flex;
max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 1rem);
overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
.modal-dialog-centered {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - 1rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
content: "";
}
.modal-dialog-centered.modal-dialog-scrollable {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
max-height: none;
}
.modal-dialog-centered.modal-dialog-scrollable::before {
content: none;
}
.modal-content {
position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
    border-radius: 16px;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header {
display: block;
    text-align: right;
    padding: 40px 40px 0;
    border-bottom: 0px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .close {
padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--color-accent2);
    font-size: 20px;
    transition: all 200ms linear;
}

.modal-header .close:hover {
color:var(--color-gray);
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 60px;
}
.modal-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer > * {
margin: 0.25rem;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 450px;
        margin: 50px auto 0;
        height: 100%;
        display: flex;
        align-items: center;
}
.modal-dialog-scrollable {
max-height: calc(100% - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 3.5rem);
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
.modal-dialog-centered::before {
height: calc(100vh - 3.5rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.modal-sm {
max-width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg,
.modal-xl {
  max-width: 1024px;
}
}
@media (min-width: 1200px) {
.modal-xl {
max-width: 920px;
}
}
.modal .close{
background: transparent;
    position: absolute;
    right: 25px;
    top: 15px;
    border: 0;
    font-size: 20px;
    opacity: .3;
    transition: all 200ms linear;
}
/*form modal*/
.modal .form-group{margin-bottom: 15px;}
.modal .form-group label{margin-bottom: 5px;}
.modal  #login-submit-btn, #mk-register-link-page{width: 100%;}
.reg_bl .caption {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
}
.reg_bl .caption span {
    background: var(--color-white);
    padding: 0px 15px;
    color: #666;
    position: relative;
    z-index: 2;
}
.reg_bl .caption:after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 1px;
    background: #ddd;
    position: absolute;
    top: 50%;
    left: 0px;
}

.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    color: var(--color-white);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0px 15px;
    line-height: 46px;
    border-radius: 0;
    transition: all 200ms linear;
}
.modal .form-control{width: 100%;}
.sn-custom-combine-login-register-form .form-title{    font-size: 20px; margin-bottom: 15px;}
.sn-custom-combine-login-register-form .input-icon{position: relative;}
.sn-custom-combine-login-register-form .input-icon i{
      position: absolute;
    right: 15px;
    top: 17px;
    color: var(--color-stroke);
    cursor: pointer;
}
.sn-custom-combine-login-register-form .refresh-captcha{margin-top: 10px;  font-size: 80%;}
.sn-custom-combine-login-register-form .already_account{margin-top: 15px; margin-bottom: 15px; text-align: center;}
.sn-custom-combine-login-register-form .already_account a{
    color: var(--color-black);
    text-decoration: none;
    font-weight: 600;
}
.sn-custom-combine-login-register-form .already_account a:hover{
  color:var(--color-blue);
}
.sn-custom-combine-login-register-form .note{font-size: 80%;}
#mk-register-form-page .rule{
  margin-top: 10px;
   text-align: center;
   font-size: 11px;
}
.btn-sm{height: 44px; line-height: 44px;}
.btn-xs{height: 38px; line-height: 38px;}
.btn:hover {
color: var(--color-white);
text-decoration: none;
}
.btn:focus, .btn.focus {
outline: 0;
box-shadow: 0 0 0 0;
}
.btn.disabled, .btn:disabled {
opacity: 0.65;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
a.btn.disabled,
fieldset:disabled a.btn {
pointer-events: none;
}
.btn-primary {
color: var(--color-white);
    background-color: var(--color-blue);
}
.btn-primary:hover {
    color: var(--color-white);
    background-color: var(--color-blue-hover);
}
.btn-primary:focus, .btn-primary.focus {
color: var(--color-white);
box-shadow: 0 0 0 ;
}
.btn-info {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}
.btn-info:hover{
  background: var(--color-accent);
  color:var(--color-white);
}
.btn-default {
color: var(--color-white);
background-color: var(--color-green);
}
.btn-accent {
color: var(--color-white);
background-color: var(--color-accent);
}
.btn-accent:hover {
    background-color: var(--color-accent-hover);
}
.btn-default:hover {
    color: var(--color-white);
    background-color: var(--color-green-hover);
}
.btn-default:focus, .btn-default.focus {
color: var(--color-white);
}
/*header*/
.header{
    background: var(--color-blue);
    margin-bottom: 30px;
}
a.logo{display: flex;}
/*.nav */
.nav {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
        gap: 0px 15px;
}
.nav .user .avatar{
    display: flex;
    background: var(--color-white);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    color: var(--color-green);
    font-size: 14px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}
.nav .cart_menu{}
.nav .cart_menu .count_wrapper{position: relative;line-height: 1em;}
.nav .cart_menu .count{
background: #bf1616;
    position: absolute;
    display: flex;
    width: 16px;
    height: 16px;
    align-items: center;
    font-size: 11px;
    justify-content: center;
    top: -5px;
    border-radius: 50%;
    right: 0px;
}
.main-menu.nav>li{    position: relative;}
.main-menu.nav>li>.slow i{font-size: 13px;}
.main-menu.nav>li>.slow{
font-size: 16px;
    text-decoration: none;
    color: var(--color-white);
    display: flex;
    align-items: center;
    padding: 0px 15px;
    font-weight: 300;
    height: 70px;
    line-height: 70px;
}
.main-menu.nav>li>.slow svg, .nav-modal-wrap .user_menu svg{
fill: var(--color-white);
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.main-menu .sub_menu{
      background: #fff;
    position: absolute;
    left: 0px;
    transition: all .2s;
    padding: 15px 15px;
    min-width: 250px;
    opacity: 0;
    list-style-type: none;
    margin: 0;
    visibility: hidden;
    font-weight: 400;
    z-index: 99;
    box-shadow: 0px 10px 30px rgb(0 0 0 / 15%);
}
.nav .refill_balance{width: 100%;}

.main-menu .sub_menu a:not(.btn){
    color: var(--color-black);
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    padding: 5px 15px;
    width: 100%;
}
.main-menu .sub_menu ul a{padding: 5px 30px;}

.main-menu.nav>li.has_children li a:not(.btn):hover{background: var(--color-light)}
.main-menu .sub_menu ul{padding: 0; list-style-type: none;}
.main-menu .has_children:hover .sub_menu{
    opacity: 1;
    visibility: visible;
}
.main-menu.nav>li>.slow:hover{
  color: var(--color-white);
  background: #00538a;
}


/*main_content*/
.main_content{}
.module{margin-bottom: 30px;}
.search.module {margin-bottom: 15px;}


@font-face {
  font-family: 'icomoon';
  src:  url('../webfonts/icomoon/icomoon.eot?8wyk0b');
  src:  url('../webfonts/icomoon/icomoon.eot?8wyk0b#iefix') format('embedded-opentype'),
    url('../webfonts/icomoon/icomoon.ttf?8wyk0b') format('truetype'),
    url('../webfonts/icomoon/icomoon.woff?8wyk0b') format('woff'),
    url('../webfonts/icomoon/icomoon.svg?8wyk0b#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
  font-display: swap;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-eye-off:before {
  content: "\e945";
}
.icon-refresh:before {
  content: "\e944";
}
.icon-file_copy:before, .icon-copy:before {
  content: "\e941";
}
 .icon-download:before {
  content: "\e926";
}
.icon-play1:before {
  content: "\e940";
}
.icon-play:before {
  content: "\e93f";
}
.icon-odnoklassniki:before {
  content: "\e93d";
}
.icon-check-square-o:before {
  content: "\e93a";
}
.icon-caret-right:before {
  content: "\e934";
}
.icon-caret-left:before {
  content: "\e935";
}
.icon-caret-up:before {
  content: "\e936";
}
.icon-caret-down:before {
  content: "\e937";
}
.icon-calculator:before {
  content: "\e92f";
}
.icon-phone1:before {
  content: "\e924";
}
.icon-vk:before {
  content: "\e919";
}
.icon-camera:before {
  content: "\e93e";
}
.icon-star:before {
  content: "\e93c";
}
.icon-check-circle:before {
  content: "\e939";
}
.icon-zoom_out_map:before {
  content: "\e927";
}
.icon-phone:before {
  content: "\e923";
}
.icon-bell:before {
  content: "\e920";
}
.icon-sort:before {
  content: "\e903";
}
.icon-trash-2:before {
  content: "\e904";
}
.icon-log-out:before {
  content: "\e91d";
}
.icon-log-in:before {
  content: "\e91e";
}
.icon-search:before {
  content: "\e905";
}
.icon-user:before {
  content: "\e906";
}
.icon-cart:before {
  content: "\e907";
}
.icon-arrow-up:before {
  content: "\e908";
}
.icon-arrow-right:before {
  content: "\e909";
}
.icon-arrow-left:before {
  content: "\e90a";
}
.icon-arrow-down:before {
  content: "\e90b";
}
.icon-chevron-right:before {
  content: "\e90c";
}
.icon-chevrons-up:before {
  content: "\e90d";
}
.icon-chevrons-right:before {
  content: "\e90e";
}
.icon-chevrons-left:before {
  content: "\e90f";
}
.icon-chevrons-down:before {
  content: "\e910";
}
.icon-chevron-right1:before {
  content: "\e911";
}
.icon-chevron-left:before {
  content: "\e912";
}
.icon-chevron-down:before {
  content: "\e913";
}
.icon-chevron-up:before {
  content: "\e914";
}
.icon-minus:before {
  content: "\e915";
}
.icon-plus:before {
  content: "\e916";
}
.icon-eye:before {
  content: "\e918";
}
.icon-file-pdf:before {
  content: "\e931";
}
.icon-file-excel:before {
  content: "\e92b";
}
.icon-file:before {
  content: "\e92b";
}
.icon-file-format:before {
  content: "\e92b";
}
.icon-xlc:before {
  content: "\e92b";
}
.icon-file-word:before {
  content: "\e92c";
}
.icon-file1:before {
  content: "\e92c";
}
.icon-file-format1:before {
  content: "\e92c";
}
.icon-word:before {
  content: "\e92c";
}
.icon-docx:before {
  content: "\e92c";
}
.icon-image:before {
  content: "\e928";
}
.icon-instagram:before {
  content: "\e925";
}
.icon-file-pdf1:before {
  content: "\e932";
}
.icon-file-pdf2:before {
  content: "\e933";
}
.icon-file-xls:before {
  content: "\e92d";
}
.icon-file-xls1:before {
  content: "\e92e";
}
.icon-calendar:before {content: "\e921";}
.icon-calculator1:before {content: "\e930";}
.icon-star-full:before {content: "\e93b";}
.icon-checkmark:before {content: "\e938";}
.icon-envelope:before {content: "\e92a";}
.icon-mail:before {content: "\e917";}
.icon-location:before {content: "\e929";}
.icon-heart-outlined:before {content: "\e900";}
.icon-close:before, .icon-cancel:before {content: "\e901";}
.icon-info:before {content: "\e902";}
.icon-viber:before {content: "\e922";}
.icon-whatsapp:before {content: "\e91a";}
.icon-twitter:before {content: "\e91b";}
.icon-telegram:before {content: "\e91c";}
.icon-map-pin:before {content: "\e91f";}
.icon-clock:before {content: "\e941";}
.icon-male:before {content: "\e943";}
.icon-bank:before {content: "\e942";}
.icon-upload:before {content: "\e946";}
.side-nav-overlay {
    background: rgba(0, 0, 0, .8);
    transition: all 100ms linear;
    opacity: 0;
    visibility: hidden;
    display: block;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    cursor: pointer;
}
body.preloader_active .side-nav-overlay, body.nav-open .side-nav-overlay{
  
  visibility: visible;
  opacity: 1;
 
}
.nav-modal-wrap {
    position: fixed;
    top: 0;
    left: 0;
    left: -100%;
    padding: 45px 45px 0px;
    z-index: 10;
    width: 50%;
    height: 100%;
    background-color:var(--color-blue);
    visibility: visible;
    opacity: 1;
    z-index: 99999;
    overflow: hidden;
    -webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
    transition: all .6s cubic-bezier(.645,.045,.355,1);
}

/*.nav-open .side-nav-overlay {
     display: block; 
}*/
.nav-modal-wrap-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
        gap: 30px 0px;
}
.nav-open .nav-modal-wrap {
    left: 0;
    visibility: visible;
    overflow: auto;
}
.mobile_menu_container .nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 15px 0px;
}
.mobile_menu_container .nav>li>a{}
.mobile_menu_container a{
    padding: 0;
    font-size: 16px;
    color: var(--color-white);
    font-weight: 100;
    text-decoration: none;
}
.nav-modal-wrap .close_btn_side {
background: transparent;
    border: 0;
    position: absolute;
    right: -30px;
    top: -30px;
    font-size: 20px;
    z-index: 2;
    transition: all 200ms linear;
    color: var(--color-stroke);
}
.nav-modal-wrap .user_menu{}
.nav-modal-wrap .user_menu .nav{
    flex-direction: column;
    gap: 10px 0px;
}
.user_menu li{position: relative;}
.nav-modal-wrap .user_menu .nav a:not(.btn){
    display: flex;
    text-decoration: none;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 100;
}

/*mobile_btn*/
.mobile_btn .hamb_wrapper {
display: flex;
    flex-direction: column;
    height: 20px;
    width: 34px;
    justify-content: space-between;
}
.mobile_btn{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    padding: 0;
    gap: 10px 0;
        background: transparent
}
.mobile_btn .hamb_wrapper span {
position: relative;
    width: 100%;
    display: block;
    height: 2px;
    transition: all 250ms linear;
    background: var(--color-white);
}
.module-text h1 span{display: block;}
.form-control{
    display: block;
    height: 46px;
        font-family: inherit;
    padding: 15px 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid var(--color-stroke);
    border-radius: 0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.width90{width: 90px;}
/*search*/
.search{
  background: var(--color-light);
  padding: 15px;
}
.search form{overflow: hidden;}
.search .caption, .selected_param_search .caption{
font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}
.search .row-search{margin-left: -10px; margin-right: -10px; margin-bottom: 15px; gap: 10px 0px;}
.search .row-search>*{padding-right: 10px; padding-left: 10px;}
.search .submit{transform: translate(-1px, 0px);}
.search .submit_mobile{display: none;}
.search .submit .btn{text-transform: uppercase;}
.search .advanced_search_link{
    flex: 1;
    text-align: right;
    padding-right: 20px;
}
.search .checkLabel .number{
background: var(--color-rose);
    display: inline-block;
    border-radius: 6px;
    padding: 0px 5px;
    line-height: 22px;
    margin-left: 5px;
    font-size: 9px;
}
.main_row_search .input_row{
display: flex;
    align-items: center;
}
.main_row_search .input_row .form-control{border-top:0; border-bottom: 0; border-left: 0}
.main_row_search .input_row .radio_group{
     padding: 0px 15px;
    display: flex;
    gap: 10px 15px;
    flex-wrap: wrap;
}
.search .block{margin-bottom: 15px;}
.main_row_search{
      display: flex;
    align-items: center;
    justify-content: space-between;
}
.main_row_search_inner{
flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-stroke);
    background: var(--color-white);
}

.search .advanced_search{
  opacity: 0;
  visibility: hidden;
  /*overflow: hidden;*/
  height: 0;
}
.advanced_search .registrar{
  background: var(--color-white);
  padding: 15px;
  margin-bottom: 15px;
}
.search.active .advanced_search{
  height: auto;
  opacity: 1;
  visibility: visible;
  /*overflow: inherit;*/
  margin-top: 30px;
}
.search .icon-info{
  color:#afc7e4;
  font-size: 11px;

}
.search  .input_row{display: flex; gap:0px 10px;  align-items: center; width: 100%;}
.search .input_row.column{flex-direction: column; gap:5px 0; align-items: flex-start;}
.search .row-search .form-control{max-width: 150px;}
.search .form-group .input_row .date{
display: flex;
    align-items: center;
    position: relative;
    gap: 0px 10px;
}
.search .input{
  position: relative;
}
.search .input .cancel{
    height: 100%;
    position: absolute;
    right: 10px;
    bottom: 0;
    display: flex;
    align-items: center;
    color: var(--color-stroke);
    font-size: 11px;
    cursor: pointer;
    /*visibility: hidden;*/
    /*opacity: 0;*/
}
.search .input.change .cancel{opacity: 1; visibility: visible;}
.search .input.change .cancel:hover{color: var(--color-accent);}
.search .form-group .input_row .date i{
    position: absolute;
    right: 15px;
    color: var(--color-stroke);
}
.search .form-group .input_row .date input{}
.search .hidden_register{display: none;}
.search .registrar.active .hidden_register{display: block ;}
.search .select2-container{width: 100% !important;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
      background-color: #afc7e4;
    border: 1px solid #afc7e4;
   color:var(--color-blue-hover);
   margin-top: 5px;
}
.select2-container .select2-selection--multiple .select2-selection__rendered{margin-bottom: 0;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{border-right:1px solid #a0b9d7;color: var(--color-accent); }
.select2-container .select2-selection--multiple{min-height: 46px;}
.select2-container--default.select2-container--focus .select2-selection--multiple {border: 1px solid var(--color-blue);}
.select2-container--default .select2-selection--multiple{
    border-color: var(--color-stroke);
    border-radius: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px 10px;
}
.checkLabel{
  cursor: pointer;
  display: flex;
  position: relative;
  transition: color 0.3s ease-out;
  vertical-align: top;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.checkLabel.height46{min-height: 46px;}
.mt-15{margin-top: 15px !important;}
.mt-30{margin-top: 30px !important;}
.mb-0{margin-bottom: 0 !important;}
.mb-30{margin-bottom: 30px !important;}
.checkInput{
    cursor: pointer;
    display: inline-block;
    margin: 0 4px 2px 0;
    position: relative;
    vertical-align: middle;
}
.form-group .checkInput{margin-top: 0;}
.checkInput input{
        opacity: 0;
    position: absolute;
    z-index: -1;
}
.checkLabel .element{
background: var(--color-white);
    border: 1px solid var(--color-stroke);
    border-radius: 3px;
    display: block;
    width: 20px;
    height: 20px;
    transition: all 0.2s ease-out;
    position: relative;
}
.checkLabel input[type="radio"]+.element{border-radius: 50%;}
.checkLabel input+.element .i-check {
    color: var(--color-white);
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease-out;
    visibility: hidden;
    width: 10px;
    height: 10px;
}

.checkLabel input:checked+.element .i-check {
    opacity: 1;
    visibility: visible;
    fill: var(--color-white);
}

.checkLabel input:checked+.element {
border-color: transparent;
    background: var(--color-blue);
}

.checkLabel a{color:var(--color-black);text-decoration: underline;}
.checkLabel a:hover{text-decoration: none;}
/*tooltip*/
.tooltip_content{display: none;}
.tippy-box{
     background-color: #afc7e4;
    color: var(--color-black);
    font-size: 13px;
}
.tippy-arrow{color:#afc7e4;}
.tippy-content .caption{
      margin-bottom: 5px;
    font-size: 15px;
    font-weight: bold;
}
.btn-link{
background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-black);
    transition: all 200ms linear;
}
.btn-link:hover{
  cursor: pointer;
  color: var(--color-blue);
}
/*result grid*/
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.result{
    background: var(--color-light);
    padding: 15px;
}
.result .result_info_row{
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-between;
}
.result_info_row .count_per_page_wrapper .d-flex{gap:0px 10px;}
.result #grid .wrapper_button{
  display: flex;
  gap:0px 5px;
}


/*grid*/
.grid.table{
background: var(--color-white);
    border: 0;
    border-collapse: collapse;
    width: 100%;
}

.grid .tab-content{overflow: hidden;}
.grid.table th a{color: var(--color-black); text-decoration: none;}
.grid.table th a:hover{}
.grid.table th i{margin-left: 5px;font-size: 11px; opacity: .3;}
.grid.table  .domain_name{min-width: 260px;}
.grid.table th{padding: 15px;background: #e7eef6;}
.grid.table td{padding: 5px 15px;     white-space: nowrap;   }
.grid.table tr.item{border-bottom: 1px solid #e7eef6;}
.grid.table .domain_info_link{
  display: flex;
cursor: pointer;
    font-size: 15px;
    color: rgb(6, 70, 141);

}
.grid.table .domain_info_link .domain{
position: relative;
    max-width: 220px;
    overflow: hidden;
}
/*.grid.table .domain_info_link .domain:after{
display: inline-block;
    content: '';
    position: absolute;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    height: 100%;
    right: 0;
}

.grid.table .item:hover .domain_info_link .domain:after{
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}*/

.grid.table  .copy{
      color: var(--color-stroke);
    margin-right: 5px;
    transition: all 200ms linear;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
}
.grid.table  .copy .alert_copy{
position: absolute;
    background: var(--color-accent);
    top: -29px;
    color: var(--color-white);
    text-transform: lowercase;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 20px;
    transition: all 200ms linear;
}

.grid.table .domain_info_link i{}
.grid.table .item{transition: all 200ms linear; }
.grid.table .item:hover .domain_info_link .copy{color:#bdccdd;}
.grid.table .item:hover .domain_info_link .copy:hover{color: var(--color-blue-hover);}
.grid.table .item:hover, .grid.table .item.active {background: #e7eef6;}
.grid.table  .item:hover .btn-age-html{background: var(--color-white)}
.grid.table  .btn-age-html{    color: #627a95;}
.grid.table  .btn-age-html i{color: #9baec5;}
.grid.table  .btn-age-html:hover {
background: var(--color-white);
    border-color: #bdccdd;
    color: #627a95;
}
.grid.table  .btn-age-html:hover i{}
/*.grid .header-column-yan_iks-grid, .grid .header-action-buttons-order-grid, .grid .header-column-age-grid{text-align: center;}*/
.grid .header-column-age-grid .btn{width: 65px;}
.domain-hidden-info{    padding: 15px;}
pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    white-space: break-spaces;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/*tab-content*/
.tabs-nav{
  margin-bottom: 30px;
}
.tab-content{
}
.tab-content > .tab-pane {
    display: none;
        background: var(--color-light);
    padding: 15px;
}
.tab-content > .active {
    display: block;
}
.tab-content .inner{
background: var(--color-white);
    padding: 15px;
}
.fade {
    transition: opacity 0.15s linear;
}
.nav-tabs{margin-bottom: 15px;}
.nav-tabs a{
    color: var(--color-black);
    text-decoration: none;
    display: inline-block;
    padding: 10px 15px;
    background: var(--color-stroke);
}
.nav-tabs a.active{
  background: var(--color-blue);
    color: var(--color-white);
}


.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{height: 22px;}


/*footer */
.footer{
    background: var(--color-blue);
    padding: 30px 0;
    color: var(--color-white);
    margin-top: 60px;
}
 
/*pagination*/
.pagination{
list-style-type: none;
    padding: 0;
    display: flex;
    margin: 0;
        gap: 0px 10px;
}
.pagination a{
    text-decoration: none;
    border-radius: 0;
    color: var(--color-black);
    font-weight: 500;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
}
.pagination .page a{
    background: var(--color-white);
}
.pagination li:not(.active) a:hover{color:var(--color-blue);}
.pagination .active a{
     background: var(--color-blue);
    color: var(--color-white);
}
.pagination-bottom{margin-top: 30px;}

/*selected_param_search module*/
.selected_param_search{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    align-items: center;
}
.selected_param_search_row{
display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    flex: 1;
}

.selected_param_search .caption{margin-bottom: 0;}
.selected_param_search>.caption {display: none;}
.selected_param_search .items{
display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.selected_param_search .selected_item{
    background: var(--color-white);
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 12px;
}
.selected_param_search  .selected_item i{cursor: pointer; color: #afc7e4;font-size: 11px; transition: all 200ms linear; margin-left: 5px;}
.selected_param_search  .selected_item i:hover{color: var(--color-accent);}
.selected_param_search .selected_row{
    display: flex;
    flex-wrap: wrap;
    gap: 0px 15px;
    align-items: center;
}
.selected_param_search  .reset_all_filter_wrapper{}
.reset_all_filter{color:var(--color-accent);}

.calendar>.days-grid{gap:2px;}
.day.unit.today{background: #eaadad}
.day.unit.free{background: #b5ebbb}

/*.container.show{z-index: 9 !important}*/
.registrar_autocomplete_block{
margin-bottom: 15px;
}
/*often_used*/
.often_used{
      padding-bottom: 15px;
    border-bottom: 1px dashed var(--color-stroke);
    margin-bottom: 15px;
}
.often_used .caption{margin-bottom: 0;}
.often_used .input_row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:15px;
}
.refresh_result{
    background: transparent;
    border: 0;
    color: var(--color-black);
    opacity: .4;
    font-size: 16px;
    transition: all 200ms linear;
    cursor: pointer;
}
.refresh_result:hover{
  opacity: 1;
  color:var(--color-accent);
}

/*.calendar>.days-grid{gap:2px;}
.day.unit.today{background: #eaadad}
.day.unit.free{background: #b5ebbb}*/

/*.container.show{z-index: 9 !important}*/

.preloader{
    width: 100%;
    height: 100vh;
    position: fixed;
    /* background: rgba(255, 255, 255, .5); */
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dot-typing {
position: relative;
        left: -9999px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: var(--color-blue);
        color: var(--color-blue);
        /* box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff; */
        animation: dot-typing 1.5s infinite linear;
}


/*@keyframes preloader {
  0% {
    background-color: #fff;
    transform: translateY(0);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
  }
  50% {
    background-color: #bbdefb;
    transform: translateY(-10px);
    box-shadow: 0 20px 3px rgba(0, 0, 0, 0.15);
  }
  100% {
    background-color: #fff;
    transform: translateY(0);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
  }
}
.preloader-wrapper {
        position: relative;
        display: flex;
        gap: 0px 5px;
}
.preloader-wrapper span {
        border-radius: 50%;
        width: 16px;
        height: 16px;
        background: var(--color-blue);
        display: flex;
        align-items: center;
        justify-content: center;
          animation-name: preloader;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.preloader-wrapper span:nth-child(1) {
  animation-delay: 0.15s;
}
.preloader-wrapper span:nth-child(2) {
  animation-delay: 0.3s;
}
.preloader-wrapper span:nth-child(3) {
  animation-delay: 0.45s;
}
*/

/*cookie_block*/
.cookie_block{
      scrollbar-gutter: stable;
gap: 0px 30px;
    bottom: 0;
    background: var(--color-blue);
    color: var(--color-white);
    width: 100%;
    position: fixed;
    left: 0px;
    display: flex;
    font-size: 80%;
    padding: 15px;
    justify-content: center;
    display: none;
}
.cookie_block a{color:var(--color-white);}
.cookie_block{
}

.main_content{min-height: 74vh;}

.userForm .form-group{margin-bottom: 15px;}
.userForm .form-control{width: 100%;}
.userForm  textarea{height: 100px;}
.userForm .btn{width: 100%;}
.userForm .rule{
        background: var(--color-light);
    font-size: 80%;
    padding: 15px;
    margin-top: 15px;
}
.form_center{max-width: 50%; margin: 0px auto 30px;}
.input-file {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 20px;
    border: 2px dashed var(--color-stroke);
}
.input-file i{
    font-size: 40px;
    color: var(--color-accent);
    transition: all 200ms linear;
}
.input-file:hover i{
    color:var(--color-blue);
}
.input-file span {
position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    vertical-align: middle;
    color: var(--color-black);
    text-align: center;
    border-radius: 4px;
    background-color: transparent;
    line-height: 22px;
    height: 40px;
    padding: 10px 20px;
    box-sizing: border-box;
    border: none;
    margin: 0;
    transition: background-color 0.2s;
}
.input-file input[type=file] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    display: block;
    width: 0;
    height: 0;
}

/* Focus */
.input-file input[type=file]:focus + span {
}

/* Hover/active */
.input-file:hover span {
    color: var(--color-accent);
}
.input-file:active span {

}

/* Disabled */
.input-file input[type=file]:disabled + span {
    background-color: #eee;
}