html {
    color: #cac5b6;
    font-size: 14px;
    background: #0a0c0b url("https://panel.dexzombie.com/assets/images/zombie_bg.jpg") fixed;
    background-size: cover;
    font-family: 'Nunito', sans-serif;
    line-height: 1.15;
}

h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6 {
    color: #00ccff;
}

.uk-section-dark {
    background: #2d2d2d;
}

hr, .uk-hr {
    border-top: 1px solid #00ccff;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.unselect {
    user-select: none;
}

.nav-link i {
    min-width: 20px;
}

.user-avatar-cell img {
    width: 30px;
    height: 30px;
    overflow: hidden;
    object-fit: cover;
}

.uk-accordion-title {
    color: #f5ebb8;
}

.uk-accordion-content {
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.avatar__holder {
    width: 200px;
    height: 200px;
    background: no-repeat center;
    background-size: contain;
    border: 1px dashed #38464e;
    border-radius: 10px;
    cursor: pointer;
}

.uk-card-secondary {
    background: rgba(0, 0, 0, 0.1) !important;
}

.players_list {
    max-height: 211px;
    overflow-y: scroll;
}

.players_list td {
    padding: 8px 12px;
}

.paginate tbody tr {
    display: none;
}

.uk-pagination li .uk-icon-button i {
    margin: 9px 10px;
}

.uk-disabled a {
    color: rgba(255, 255, 255, 0.2) !important;
}


.avatar__holder:after {
    content: '+';
    position: absolute;
    bottom: 10px;
    left: 6px;
    font-weight: 700;
    font-size: 50px;
}

:not(pre) > code, :not(pre) > kbd, :not(pre) > samp {
    white-space: pre-wrap !important;
    background: transparent !important;
}

.sidenav {
    position: fixed;
    width: 30px;
    top: 60px;
    z-index: 100;
    background: -webkit-linear-gradient(360deg, #030303 10%, #1f1f1f 360%);
    background: linear-gradient(360deg, #030303 10%, #1f1f1f 360%);
    overflow: hidden;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    box-shadow: 4px 7px 10px rgba(0, 0, 0, 0.4);
}

.sidenav:hover {
    width: 200px;
}

.uk-transparent {
    background: transparent !important;
}

.uk-placeholder {
    border: 1px dashed #333f56;
}

.uk-nav-primary .uk-nav-divider {
    border-top: 1px solid rgba(229, 229, 229, 0.1);
}

.sidenav .uk-nav-sub {
    display: none;
}

.sidenav:hover .uk-nav-sub {
    display: block;
}

@media screen and (max-width: 959px) {
    .sidenav {
        width: 0px;
    }
}

.token {
    word-wrap: break-word;
    padding: 10px 5px;
}

.sidenav .nav-link {
    font-size: 1.3rem;
    display: flex !important;
    margin: 5px 7px;
}

.admin > .uk-sticky-placeholder {
    height: 80px !important;
}

.xxl {
    font-size: 20vh;
}

.uk-width-xs {
    width: 100px;
}

[class*='uk-width-xxs'] {
    width: 75px;
}

@media (max-width: 640px) {
    .uk-width-xxs\@s {
        width: 100%;
    }
}

.uk-subnav > .uk-active > a {
    color: #00ccff;
    background: transparent;
    border-bottom: 2px solid #00ccff;
}

.uk-subnav-pill > * > a:hover, .uk-subnav-pill > * > a:focus {
    background-color: transparent;
    color: #00ccff;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
    background: rgba(0, 0, 0, 0.8);
}

.uk-card-default {
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border-radius: 0px;
}

div:active, div:focus {
    outline: none;
}

div::-moz-focus-inner {
    border: 0;
}

span[contenteditable] {
    padding: 10px;
    border: 1px solid transparent;
}

span[contenteditable]:focus {
    border: 1px solid rgba(82, 168, 236, 1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.9);
    outline: 0 none;
}

.user-avatar-cell {
    min-width: 30px;
    width: 30px;
}

.uk-text-success {
    color: #286332 !important;
}

.uk-text-danger {
    color: #7d2929 !important;
}

.status-icon {
    position: absolute;
    top: 16px;
    left: 32px;
}

.uk-heading-line > ::before, .uk-heading-line > ::after {
    border-bottom: 1px solid #00ccff;
}

.border-10 {
    border-radius: 10px;
}

.uk-icon-button {
    cursor: pointer;
    color: #757575;
    background: rgba(158, 158, 158, 0.1);
}

.uk-icon-button.xs {

}

.error span {
    color: #00ccff;
    font-size: 8em;
}

.error p {
    font-size: 3em;
    line-height: 0.5;
}

.error p:nth-child(odd) {
    color: #00ccff;
    transform: skew(60deg, -30deg) scaleY(.66667);
}

.error p:nth-child(even) {
    font-size: 4em;
    transform: skew(0deg, -30deg) scaleY(1.33333);
}

.uk-icon-button.s {

}

.uk-offcanvas-bar {
    background: #111214;
    box-shadow: 1px 0px 16px 0px black;
}

.uk-icon-button.m {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 12px;
}

.uk-icon-button.l {
    width: 50px;
    height: 50px;
    min-width: 50px;
    font-size: 16px;
}

.uk-icon-button.xl {

}

.uk-icon-button:hover, .uk-icon-button:focus {
    background-color: rgba(158, 158, 158, 0.2);
    color: #00ccff;
    outline: none;
}

.uk-table-divider > tr:not(:first-child), .uk-table-divider > :not(:first-child) > tr, .uk-table-divider > :first-child > tr:not(:first-child) {
    border-top: 1px dashed rgba(33, 33, 33, 0.5);
}

.uk-navbar-dropdown, .uk-dropdown {
    background: rgba(0, 0, 0, 0.8);
    color: #666;
}

.uk-navbar-dropdown-nav .uk-nav-divider {
    border-top: 1px solid #212121;
}

.form-inline {
    display: inline-block;
}

a, .uk-link {
    color: #00ccff;
}

a:hover, .uk-link:hover {
    color: #e0e0e0;
    text-decoration: none;
}

.uk-notification-message {
    background: rgba(2, 2, 2, 0.7);
    color: #e2e2e2;
    border-radius: 10px;
}

.uk-notification-message-danger {
    color: #bb4545;
}

.uk-notification-message-success {
    color: #2d9460;
}

.uk-navbar-nav > li.uk-active > a {
    color: #00ccff;
    font-weight: 700;
    position: relative;
}

.fa, .fas {
    font-size: 18px;
}

.uk-dotnav > .uk-active > * {
    background-color: rgb(68, 161, 209);
    border-color: transparent;
}

.uk-dotnav > * > :hover, .uk-dotnav > * > :focus {
    background-color: rgb(68, 161, 209);
}

.uk-dotnav > * > * {
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f3f0eb;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #f3f0eb;
    transition: 0.2s ease-in-out;
    transition-property: background-color, border-color;
}

.uk-navbar-dropdown-nav .uk-nav-header {
    color: #f5ebb8;
    font-weight: 700;
}

.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle {
    height: 60px;
}


.uk-modal-dialog {
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0px 0px 15px 4px black;
}

.uk-modal-footer {
    padding: 15px 30px;
    background: rgba(5, 5, 6, 0.5);
    border-top: 1px solid #38464e;
    box-shadow: 0px -1px #151d20;
}

.uk-button-primary {
    background-color: #00ccff;
    color: #ffffff;
}

.uk-button-primary:active, .uk-button-primary.uk-active, .uk-button-primary:hover, .uk-button-primary:focus {
    background-color: #00ccff;
    color: #ffffff;
}

.uk-button-secondary {
    background-color: rgba(0, 0, 0, 0.2);
}

.uk-button-secondary:hover, .uk-button-secondary:focus {
    background-color: rgba(0, 0, 0, 0.3);
}

.uk-button-default {
    background-color: transparent;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
}

.uk-alert-success {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    color: #9dc387;
    border-radius: 10px;
}

.uk-padding-xsmall {
    padding: 4px;
}

.uk-button-default:hover, .uk-button-default:focus {
    background-color: transparent;
    color: #404040;
    border-color: #404040;
}

.uk-footer {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px 0 0 0;
}

.uk-light .uk-text-meta, .uk-section-primary:not(.uk-preserve-color) .uk-text-meta, .uk-section-secondary:not(.uk-preserve-color) .uk-text-meta, .uk-tile-primary:not(.uk-preserve-color) .uk-text-meta, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-meta, .uk-card-primary.uk-card-body .uk-text-meta, .uk-card-primary > :not([class*='uk-card-media']) .uk-text-meta, .uk-card-secondary.uk-card-body .uk-text-meta, .uk-card-secondary > :not([class*='uk-card-media']) .uk-text-meta, .uk-overlay-primary .uk-text-meta, .uk-offcanvas-bar .uk-text-meta {
    color: rgb(255, 255, 255);
}

.uk-card-default .uk-card-header {
    border-bottom: 0;
    background: rgba(27, 27, 27, 0.2);
    border-radius: 0;
}

.uk-form-icon {
    top: 9px;
    left: 9px;
}

.nav-link {
    height: 30px !important;
}

.uk-icon-button {
    border: 0;
}

.svg-inline--fa {
    width: 1.5em !important;
    height: 1.5em !important;
}

.dropdown-item > .svg-inline--fa {
    font-size: .875em;
}

.uk-input:disabled, .uk-select:disabled, .uk-textarea:disabled {
    background-color: rgba(0, 0, 0, 0.2);
    color: #9E9E9E;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.uk-input, .uk-select, .uk-textarea {
    background: rgba(0, 0, 0, 0.2);
    color: #ffffff;
    border: 0px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    height: 41px;
}

.uk-form-label {
    color: #b7b7b7;
    font-size: 0.875rem;
}

fieldset {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    min-width: 100%;
}

.uk-nav-primary > li.uk-active > a {
    color: #00ccff;
}

.uk-background-secondary {
    background-color: #171717;
}

.uk-modal-header {
    padding: 15px 30px;
    background: #505050;
    border-bottom: 1px solid #333333;
}

.uk-breadcrumb > :last-child > * {
    color: #fff;
}

.map {
    max-height: 400px;
}

@media (max-width: 959px) {
    .map {
        max-height: 500px;
    }
}
@media (max-width: 331px) {
    .map {
        max-height: 400px;
    }
}

.uk-breadcrumb > * > * {
    /*text-transform: uppercase;*/
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
    background: rgba(0, 0, 0, 0.3);
    border: 0px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid #00ccff;
    height: 41px;
    outline: none;
    color: #999;
}

.main-title {
    color: #00ccff !important;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.3;
}

.main-title::first-letter {
    padding-left: 10px;
    background-color: #00ccff;
    color: black !important;
    border-left: 2px solid #fff;
    font-weight: 700;
}

.inputGroup {
    position: relative;
}

.inputGroup label {
    padding: 12px 30px;
    display: block;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;
}

.inputGroup label:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: '';
    background-color: #a94b48;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0;
    z-index: -1;
}

.inputGroup label:after {
    width: 32px;
    height: 32px;
    content: '';
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 200ms ease-in;
}

.inputGroup input:checked ~ label {
    color: #fff;
}

.inputGroup input:checked ~ label:before {
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
}

.inputGroup input:checked ~ label:after {
    background-color: #f5ebb8;
    border-color: #f5ebb8;
    background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ") no-repeat 5px 5px;
}

.inputGroup input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}

.switcher {
    position: relative;
    display: inline-block;
    padding-left: 54px;
}

.switcher input {
    display: none;
}

.switcher__indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #9a9a9a;
    border-radius: 50%;
    transition: all .3s ease;
    -webkit-animation-name: pulsein;
    animation-name: pulsein;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}

.switcher__indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 20px;
    background-color: #1f1f1f;
    border-radius: 10px;
    transition: all .3s ease;
}

.switcher input:checked + .switcher__indicator::after {
    background-color: #00ccff;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    -webkit-animation-name: pulseout;
    animation-name: pulseout;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}

.switcher input:disabled + .switcher__indicator::after, input:disabled + .switcher__indicator::before {
    background-color: #020b1c;
}

@-webkit-keyframes pulsein {
    0%, 100% {
        top: 0px;
        height: 20px;
        width: 20px;
    }
    50% {
        top: 3px;
        height: 14px;
        width: 26px;
    }
}

@keyframes pulsein {
    0%, 100% {
        top: 0px;
        height: 20px;
        width: 20px;
    }
    50% {
        top: 3px;
        height: 14px;
        width: 26px;
    }
}

@-webkit-keyframes pulseout {
    0%, 100% {
        top: 0px;
        height: 20px;
        width: 20px;
    }
    50% {
        top: 3px;
        height: 14px;
        width: 26px;
    }
}

@keyframes pulseout {
    0%, 100% {
        top: 0px;
        height: 20px;
        width: 20px;
    }
    50% {
        top: 3px;
        height: 14px;
        width: 26px;
    }
}

.uk-tab > .uk-active > a {
    color: #00ccff;
    border-color: #00ccff;
}

.uk-tab::before {
    border-bottom: 2px solid #2d2d2d;
}


svg.progress_circle {
    height: 100px;
    -webkit-transform: rotate(-90deg) scale(1, -1);
    transform: rotate(-90deg) scale(1, -1);
    width: 100px;
}

svg.progress_circle.r-50 {
    height: 50px;
    width: 50px;
}

svg.progress_circle.r-75 {
    height: 75px;
    width: 75px;
}

svg.progress_circle.r-150 {
    height: 150px;
    width: 150px;
}

.progress-bar__background {
    fill: none;
    stroke: #00ccff;
    stroke-width: 1.8;
}

.progress-bar__text {
    fill: #ffffff;
    transform: rotate(90deg) scale(-1, 1);
}

.progress-bar__progress {
    fill: none;
    stroke: #00ccff;
    stroke: #ffffff;
    stroke-dasharray: 100;
    stroke-width: 1.8;
    transition: stroke-dashoffset 3s ease-in-out;
}

ul.uk-sortable-drag {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

ul.uk-sortable-drag li {
    padding: 14px;
    display: inline-flex;
}

.datepicker--cells {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.datepicker--cell {
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 32px;
    z-index: 1
}

.datepicker--cell.-focus- {
    background: rgba(248, 195, 118, 0.5)
}

.datepicker--cell.-current- {
    color: rgba(248, 195, 118, 0.5)
}

.datepicker--cell.-current-.-focus- {
    color: #4a4a4a
}

.datepicker--cell.-current-.-in-range- {
    color: #4EB5E6
}

.datepicker--cell.-in-range- {
    background: rgba(92, 196, 239, .1);
    color: #4a4a4a;
    border-radius: 0
}

.datepicker--cell.-in-range-.-focus- {
    background-color: rgba(92, 196, 239, .2)
}

.datepicker--cell.-disabled- {
    cursor: default;
    color: #aeaeae
}

.datepicker--cell.-disabled-.-focus- {
    color: #aeaeae
}

.datepicker--cell.-disabled-.-in-range- {
    color: #a1a1a1
}

.datepicker--cell.-disabled-.-current-.-focus- {
    color: #aeaeae
}

.datepicker--cell.-range-from- {
    border: 1px solid rgba(92, 196, 239, .5);
    background-color: rgba(92, 196, 239, .1);
    border-radius: 4px 0 0 4px
}

.datepicker--cell.-range-to- {
    border: 1px solid rgba(92, 196, 239, .5);
    background-color: rgba(92, 196, 239, .1);
    border-radius: 0 4px 4px 0
}

.datepicker--cell.-selected-, .datepicker--cell.-selected-.-current- {
    color: #fff;
    background: rgba(248, 195, 118, 0.5)
}

.datepicker--cell.-range-from-.-range-to- {
    border-radius: 4px
}

.datepicker--cell.-selected- {
    border: none
}

.datepicker--cell.-selected-.-focus- {
    background: rgba(248, 195, 118, 0.5)
}

.datepicker--cell:empty {
    cursor: default
}

.datepicker--days-names {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 8px 0 3px
}

.datepicker--day-name {
    color: #FF9A19;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: .8em
}

.-only-timepicker- .datepicker--content, .datepicker--body, .datepicker-inline .datepicker--pointer {
    display: none
}

.datepicker--cell-day {
    width: 14.28571%
}

.datepicker--cells-months {
    height: 170px
}

.datepicker--cell-month {
    width: 33.33%;
    height: 25%
}

.datepicker--cells-years, .datepicker--years {
    height: 170px
}

.datepicker--cell-year {
    width: 25%;
    height: 33.33%
}

.datepickers-container {
    position: absolute;
    left: 0;
    top: 0
}

@media print {
    .datepickers-container {
        display: none
    }
}

.datepicker {
    background: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-sizing: content-box;
    width: 250px;
    position: absolute;
    left: -100000px;
    opacity: 0;
    transition: opacity .3s ease, left 0s .3s, -webkit-transform .3s ease;
    transition: opacity .3s ease, transform .3s ease, left 0s .3s;
    transition: opacity .3s ease, transform .3s ease, left 0s .3s, -webkit-transform .3s ease;
    z-index: 100
}

.datepicker.-from-top- {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
}

.datepicker.-from-right- {
    -webkit-transform: translateX(8px);
    transform: translateX(8px)
}

.datepicker.-from-bottom- {
    -webkit-transform: translateY(8px);
    transform: translateY(8px)
}

.datepicker.-from-left- {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px)
}

.datepicker.active {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
    transition: opacity .3s ease, left 0s 0s, -webkit-transform .3s ease;
    transition: opacity .3s ease, transform .3s ease, left 0s 0s;
    transition: opacity .3s ease, transform .3s ease, left 0s 0s, -webkit-transform .3s ease
}

.datepicker-inline .datepicker {
    box-shadow: none;
    position: static;
    left: auto;
    right: auto;
    opacity: 1;
    -webkit-transform: none;
    transform: none
}

.datepicker--content {
    box-sizing: content-box;
    padding: 4px
}

.datepicker--pointer {
    position: absolute;
    background: rgba(248, 195, 118, 0.5);
    width: 10px;
    height: 10px;
    z-index: -1
}

.datepicker--nav-action:hover, .datepicker--nav-title:hover {
    background: rgba(248, 195, 118, 0.5)
}

.-top-center- .datepicker--pointer, .-top-left- .datepicker--pointer, .-top-right- .datepicker--pointer {
    top: calc(100% - 4px);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg)
}

.-right-bottom- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-top- .datepicker--pointer {
    right: calc(100% - 4px);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg)
}

.-bottom-center- .datepicker--pointer, .-bottom-left- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
    bottom: calc(100% - 4px);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg)
}

.-left-bottom- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-top- .datepicker--pointer {
    left: calc(100% - 4px);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.-bottom-left- .datepicker--pointer, .-top-left- .datepicker--pointer {
    left: 10px
}

.-bottom-right- .datepicker--pointer, .-top-right- .datepicker--pointer {
    right: 10px
}

.-bottom-center- .datepicker--pointer, .-top-center- .datepicker--pointer {
    left: calc(50% - 10px / 2)
}

.-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer {
    top: 10px
}

.-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
    bottom: 10px
}

.-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer {
    top: calc(50% - 10px / 2)
}

.datepicker--body.active {
    display: block
}

.datepicker--nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 32px;
    padding: 4px
}

.-only-timepicker- .datepicker--nav {
    display: none
}

.datepicker--nav-action, .datepicker--nav-title {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.datepicker--nav-action {
    width: 32px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.datepicker--nav-action.-disabled- {
    visibility: hidden
}

.datepicker--nav-action svg {
    width: 32px;
    height: 32px
}

.datepicker--nav-action path {
    fill: none;
    stroke: #9c9c9c;
    stroke-width: 2px
}

.datepicker--nav-title {
    border-radius: 4px;
    padding: 0 8px
}

.datepicker--buttons, .datepicker--time {
    padding: 4px
}

.datepicker--nav-title i {
    font-style: normal;
    color: #9c9c9c;
    margin-left: 5px
}

.datepicker--nav-title.-disabled- {
    cursor: default;
    background: 0 0
}

.datepicker--buttons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.datepicker--button {
    color: #4EB5E6;
    cursor: pointer;
    border-radius: 4px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 32px
}

.datepicker--button:hover {
    color: #4a4a4a;
    background: rgba(248, 195, 118, 0.5)
}

.datepicker--time {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.datepicker--time.-am-pm- .datepicker--time-sliders {
    -webkit-flex: 0 1 138px;
    -ms-flex: 0 1 138px;
    flex: 0 1 138px;
    max-width: 138px
}

.-only-timepicker- .datepicker--time {
    border-top: none
}

.datepicker--time-sliders {
    -webkit-flex: 0 1 153px;
    -ms-flex: 0 1 153px;
    flex: 0 1 153px;
    margin-right: 10px;
    max-width: 153px
}

.datepicker--time-label {
    display: none;
    font-size: 12px
}

.datepicker--time-current {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 14px;
    text-align: center;
    margin: 0 0 0 10px
}

.datepicker--time-current-colon {
    margin: 0 2px 3px;
    line-height: 1
}

.datepicker--time-current-hours, .datepicker--time-current-minutes {
    line-height: 1;
    font-size: 19px;
    position: relative;
    z-index: 1
}

.datepicker--time-current-hours:after, .datepicker--time-current-minutes:after {
    content: '';
    background: rgba(248, 195, 118, 0.5);
    border-radius: 4px;
    position: absolute;
    left: -2px;
    top: -3px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    opacity: 0
}

.datepicker--time-current-hours.-focus-:after, .datepicker--time-current-minutes.-focus-:after {
    opacity: 1
}

.datepicker--time-current-ampm {
    text-transform: uppercase;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    color: #9c9c9c;
    margin-left: 6px;
    font-size: 11px;
    margin-bottom: 1px
}

.datepicker--time-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 11px;
    height: 17px;
    background: linear-gradient(to right, rgba(248, 195, 118, 0.5), rgba(248, 195, 118, 0.5)) left 50%/100% 1px no-repeat;
}

.datepicker--time-row:first-child {
    margin-bottom: 4px
}

.datepicker--time-row input[type=range] {
    background: 0 0;
    cursor: pointer;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    padding: 0;
    margin: 0;
    -webkit-appearance: none
}

.datepicker--time-row input[type=range]::-ms-tooltip {
    display: none
}

.datepicker--time-row input[type=range]:focus {
    outline: 0
}

.datepicker--time-row input[type=range]:focus::-webkit-slider-thumb {
    background: rgba(248, 195, 118, 1);
}

.datepicker--time-row input[type=range]:focus::-moz-range-thumb {
    background: rgba(248, 195, 118, 1);
}

.datepicker--time-row input[type=range]:focus::-ms-thumb {
    background: rgba(248, 195, 118, 1);
}

.datepicker--time-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    background: rgba(248, 195, 118, 1);
    cursor: pointer;
    transition: background .2s;
    margin-top: -6px
}

.datepicker--time-row input[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    background: rgba(248, 195, 118, 1);
    cursor: pointer;
    transition: background .2s
}

.datepicker--time-row input[type=range]::-ms-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    background: rgba(248, 195, 118, 1);
    cursor: pointer;
    transition: background .2s
}

.datepicker--time-row input[type=range]::-webkit-slider-runnable-track {
    border: none;
    height: 1px;
    cursor: pointer;
    color: transparent;
    background: 0 0
}

.datepicker--time-row input[type=range]::-moz-range-track {
    border: none;
    height: 1px;
    cursor: pointer;
    color: transparent;
    background: 0 0
}

.datepicker--time-row input[type=range]::-ms-track {
    border: none;
    height: 1px;
    cursor: pointer;
    color: transparent;
    background: 0 0
}

.datepicker--time-row input[type=range]::-ms-fill-lower {
    background: 0 0
}

.datepicker--time-row input[type=range]::-ms-fill-upper {
    background: 0 0
}

.datepicker--time-row span {
    padding: 0 12px
}

.datepicker--time-icon {
    color: #9c9c9c;
    border-radius: 50%;
    font-size: 16px;
    position: relative;
    margin: 0 5px -1px 0;
    width: 1em;
    height: 1em
}

.datepicker--time-icon:after, .datepicker--time-icon:before {
    content: '';
    background: currentColor;
    position: absolute
}

.datepicker--time-icon:after {
    height: .4em;
    width: 1px;
    left: calc(50% - 1px);
    top: calc(50% + 1px);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.datepicker--time-icon:before {
    width: .4em;
    height: 1px;
    top: calc(50% + 1px);
    left: calc(50% - 1px)
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
    color: #dedede
}

.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
    color: #c5c5c5
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
    color: #dedede
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
    color: #fff;
    background: #a2ddf6
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
    background: #8ad5f4
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
    background-color: rgba(92, 196, 239, .1);
    color: #ccc
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
    background-color: rgba(92, 196, 239, .2)
}

.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
    background: 0 0;
    border: none
}