.inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
}
.inputGroup label {
    padding: 12px 30px;
    width: 100%;
    display: block;
    text-align: left;
    color: #3c454c;
    cursor: pointer;
    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: #616161;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: -1;
}
.inputGroup label:after {
    width: 32px;
    height: 32px;
    content: "";
    border: 2px solid #d1d7dc;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
    color: #fff;
}
.inputGroup input:checked ~ label:before {
    -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
}
.inputGroup input:checked ~ label:after {
    background-color: #54e0c7;
    border-color: #54e0c7;
}
.inputGroup input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}

.form {
    padding: 0 16px;
    max-width: 550px;
    margin: 50px auto;
    font-size: 18px;
    font-weight: 600;
    line-height: 36px;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 10px;
    text-decoration: none;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
}

/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@-webkit-keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px); } }
@-moz-keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px); } }
@keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); } }
@-moz-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); } }
@keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px); }
    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); } }
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); } }
@-moz-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); } }
@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); } }
.dropzone, .dropzone * {
    box-sizing: border-box; }

.dropzone {
    min-height: 150px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: #ffffff;
    padding: 20px 20px; }
.dropzone.dz-clickable {
    cursor: pointer; }
.dropzone.dz-clickable * {
    cursor: default; }
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    cursor: pointer; }
.dropzone.dz-started .dz-message {
    display: none; }
.dropzone.dz-drag-hover {
    border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
    opacity: 0.5; }
.dropzone .dz-message {
    text-align: center;
    margin: 2em 0; }
.dropzone .dz-message .dz-button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit; }
.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px; }
.dropzone .dz-preview:hover {
    z-index: 1000; }
.dropzone .dz-preview:hover .dz-details {
    opacity: 1; }
.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius: 20px;
    background: #999;
    background: linear-gradient(to bottom, #eee, #ddd); }
.dropzone .dz-preview.dz-file-preview .dz-details {
    opacity: 1; }
.dropzone .dz-preview.dz-image-preview {
    background: white; }
.dropzone .dz-preview.dz-image-preview .dz-details {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear; }
.dropzone .dz-preview .dz-remove {
    font-size: 14px;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none; }
.dropzone .dz-preview .dz-remove:hover {
    text-decoration: underline; }
.dropzone .dz-preview:hover .dz-details {
    opacity: 1; }
.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    font-size: 13px;
    min-width: 100%;
    max-width: 100%;
    padding: 2em 1em;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    line-height: 150%; }
.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom: 1em;
    font-size: 16px; }
.dropzone .dz-preview .dz-details .dz-filename {
    white-space: nowrap; }
.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: 1px solid rgba(200, 200, 200, 0.8);
    background-color: rgba(255, 255, 255, 0.8); }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
    overflow: hidden;
    text-overflow: ellipsis; }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    border: 1px solid transparent; }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0 0.4em;
    border-radius: 3px; }
.dropzone .dz-preview:hover .dz-image img {
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-filter: blur(8px);
    filter: blur(8px); }
.dropzone .dz-preview .dz-image {
    border-radius: 20px;
    overflow: hidden;
    width: 120px;
    height: 120px;
    position: relative;
    display: block;
    z-index: 10; }
.dropzone .dz-preview .dz-image img {
    display: block; }
.dropzone .dz-preview.dz-success .dz-success-mark {
    -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1;
    -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px; }
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
    display: block;
    width: 54px;
    height: 54px; }
.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear; }
.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in; }
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    -webkit-animation: pulse 6s ease infinite;
    -moz-animation: pulse 6s ease infinite;
    -ms-animation: pulse 6s ease infinite;
    -o-animation: pulse 6s ease infinite;
    animation: pulse 6s ease infinite; }
.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    width: 80px;
    margin-left: -40px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-transform: scale(1);
    border-radius: 8px;
    overflow: hidden; }
.dropzone .dz-preview .dz-progress .dz-upload {
    background: #333;
    background: linear-gradient(to bottom, #666, #444);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    -webkit-transition: width 300ms ease-in-out;
    -moz-transition: width 300ms ease-in-out;
    -ms-transition: width 300ms ease-in-out;
    -o-transition: width 300ms ease-in-out;
    transition: width 300ms ease-in-out; }
.dropzone .dz-preview.dz-error .dz-error-message {
    display: block; }
.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto; }
.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: block;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    font-size: 13px;
    top: 130px;
    left: -10px;
    width: 140px;
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em 1.2em;
    color: white; }
.dropzone .dz-preview .dz-error-message:after {
    content: '';
    position: absolute;
    top: -6px;
    left: 64px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #be2626; }


/**
 * alertifyjs 1.11.1 http://alertifyjs.com
 * AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.
 * Copyright 2018 Mohammad Younes <Mohammad@alertifyjs.com> (http://alertifyjs.com)
 * Licensed under GPL 3 <https://opensource.org/licenses/gpl-3.0>*/
.alertify .ajs-dimmer {
    position: fixed;
    z-index: 1981;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-color: #252525;
    opacity: .5;
}
.alertify .ajs-modal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    overflow-y: auto;
    z-index: 1981;
}
.alertify .ajs-dialog {
    position: relative;
    margin: 5% auto;
    min-height: 110px;
    max-width: 500px;
    padding: 24px 24px 0 24px;
    outline: 0;
    background-color: #fff;
}
.alertify .ajs-dialog.ajs-capture:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
}
.alertify .ajs-reset {
    position: absolute !important;
    display: inline !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}
.alertify .ajs-commands {
    position: absolute;
    right: 4px;
    margin: -14px 24px 0 0;
    z-index: 2;
}
.alertify .ajs-commands button {
    display: none;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    padding: 10px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.alertify .ajs-commands button.ajs-close {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAh0lEQVQYlY2QsQ0EIQwEB9cBAR1CJUaI/gigDnwR6NBL/7/xWLNrZ2b8EwGotVpr7eOitWa1VjugiNB7R1UPrKrWe0dEAHBbXUqxMQbeewDmnHjvyTm7C3zDwAUd9c63YQdUVdu6EAJzzquz7HXvTiklt+H9DQFYaxFjvDqllFyMkbXWvfpXHjJrWFgdBq/hAAAAAElFTkSuQmCC);
}
.alertify .ajs-commands button.ajs-maximize {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAOUlEQVQYlWP8//8/AzGAhYGBgaG4uBiv6t7eXkYmooxjYGAgWiELsvHYFMCcRX2rSXcjoSBiJDbAAeD+EGu+8BZcAAAAAElFTkSuQmCC);
}
.alertify .ajs-header {
    margin: -24px;
    margin-bottom: 0;
    padding: 16px 24px;
    background-color: #fff;
}
.alertify .ajs-body {
    min-height: 56px;
}
.alertify .ajs-body .ajs-content {
    padding: 16px 24px 16px 16px;
}
.alertify .ajs-footer {
    padding: 4px;
    margin-left: -24px;
    margin-right: -24px;
    min-height: 43px;
    background-color: #fff;
}
.alertify .ajs-footer .ajs-buttons.ajs-primary {
    text-align: right;
}
.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button {
    margin: 4px;
}
.alertify .ajs-footer .ajs-buttons.ajs-auxiliary {
    float: left;
    clear: none;
    text-align: left;
}
.alertify .ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button {
    margin: 4px;
}
.alertify .ajs-footer .ajs-buttons .ajs-button {
    min-width: 88px;
    min-height: 35px;
}
.alertify .ajs-handle {
    position: absolute;
    display: none;
    width: 10px;
    height: 10px;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMS8xNEDQYmMAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAQ0lEQVQYlaXNMQoAIAxD0dT7H657l0KX3iJuUlBUNOsPPCGJm7VDp6ryeMxMuDsAQH7owW3pyn3RS26iKxERMLN3ugOaAkaL3sWVigAAAABJRU5ErkJggg==);
    -webkit-transform: scaleX(1) /*rtl:scaleX(-1)*/;
    transform: scaleX(1) /*rtl:scaleX(-1)*/;
    cursor: se-resize;
}
.alertify.ajs-no-overflow .ajs-body .ajs-content {
    overflow: hidden !important;
}
.alertify.ajs-no-padding.ajs-maximized .ajs-body .ajs-content {
    left: 0;
    right: 0;
    padding: 0;
}
.alertify.ajs-no-padding:not(.ajs-maximized) .ajs-body {
    margin-left: -24px;
    margin-right: -24px;
}
.alertify.ajs-no-padding:not(.ajs-maximized) .ajs-body .ajs-content {
    padding: 0;
}
.alertify.ajs-no-padding.ajs-resizable .ajs-body .ajs-content {
    left: 0;
    right: 0;
}
.alertify.ajs-maximizable .ajs-commands button.ajs-maximize,
.alertify.ajs-maximizable .ajs-commands button.ajs-restore {
    display: inline-block;
}
.alertify.ajs-closable .ajs-commands button.ajs-close {
    display: inline-block;
}
.alertify.ajs-maximized .ajs-dialog {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    top: 0 !important;
    left: 0 !important;
}
.alertify.ajs-maximized.ajs-modeless .ajs-modal {
    position: fixed !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
}
.alertify.ajs-maximized .ajs-commands button.ajs-maximize {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAASklEQVQYlZWQ0QkAMQhDtXRincOZX78KVtrDCwgqJNEoIB3MPLj7lRUROlpyVXGzby6zWuY+kz6tj5sBMTMAyVV3/595RbOh3cAXsww1raeiOcoAAAAASUVORK5CYII=);
}
.alertify.ajs-resizable .ajs-dialog,
.alertify.ajs-maximized .ajs-dialog {
    padding: 0;
}
.alertify.ajs-resizable .ajs-commands,
.alertify.ajs-maximized .ajs-commands {
    margin: 14px 24px 0 0;
}
.alertify.ajs-resizable .ajs-header,
.alertify.ajs-maximized .ajs-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 16px 24px;
}
.alertify.ajs-resizable .ajs-body,
.alertify.ajs-maximized .ajs-body {
    min-height: 224px;
    display: inline-block;
}
.alertify.ajs-resizable .ajs-body .ajs-content,
.alertify.ajs-maximized .ajs-body .ajs-content {
    position: absolute;
    top: 50px;
    right: 24px;
    bottom: 50px;
    left: 24px;
    overflow: auto;
}
.alertify.ajs-resizable .ajs-footer,
.alertify.ajs-maximized .ajs-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}
.alertify.ajs-resizable:not(.ajs-maximized) .ajs-dialog {
    min-width: 548px;
}
.alertify.ajs-resizable:not(.ajs-maximized) .ajs-handle {
    display: block;
}
.alertify.ajs-movable:not(.ajs-maximized) .ajs-header {
    cursor: move;
}
.alertify.ajs-modeless .ajs-dimmer,
.alertify.ajs-modeless .ajs-reset {
    display: none;
}
.alertify.ajs-modeless .ajs-modal {
    overflow: visible;
    max-width: none;
    max-height: 0;
}
.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
    display: inline-block;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAQklEQVQYlcWPMQ4AIAwCqU9u38GbcbHRWN1MvKQDhQFMEpKImGJA0gCgnYw0V0rwxseg5erT4oSkQVI5d9f+e9+xA0NbLpWfitPXAAAAAElFTkSuQmCC);
}
.alertify.ajs-modeless.ajs-unpinned .ajs-modal {
    position: absolute;
}
.alertify.ajs-modeless.ajs-unpinned .ajs-commands button.ajs-pin {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAO0lEQVQYlWP8//8/AzGAiShV6AqLi4txGs+CLoBLMYbC3t5eRmyaWfBZhwwYkX2NTxPRvibKjRhW4wMAhxkYGbLu3pEAAAAASUVORK5CYII=);
}
.alertify.ajs-modeless:not(.ajs-unpinned) .ajs-body {
    max-height: 500px;
    overflow: auto;
}
.alertify.ajs-basic .ajs-header {
    opacity: 0;
}
.alertify.ajs-basic .ajs-footer {
    visibility: hidden;
}
.alertify.ajs-frameless .ajs-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 60px;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 1;
}
.alertify.ajs-frameless .ajs-footer {
    display: none;
}
.alertify.ajs-frameless .ajs-body .ajs-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.alertify.ajs-frameless:not(.ajs-resizable) .ajs-dialog {
    padding-top: 0;
}
.alertify.ajs-frameless:not(.ajs-resizable) .ajs-dialog .ajs-commands {
    margin-top: 0;
}
.ajs-no-overflow {
    overflow: hidden !important;
    outline: none;
}
.ajs-no-overflow.ajs-fixed {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll!important;
}
.ajs-no-selection,
.ajs-no-selection * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (max-width: 568px) {
    .alertify .ajs-dialog {
        min-width: 150px;
    }
    .alertify:not(.ajs-maximized) .ajs-modal {
        padding: 0 5%;
    }
    .alertify:not(.ajs-maximized).ajs-resizable .ajs-dialog {
        min-width: initial;
        min-width: auto /*IE fallback*/;
    }
}
@-moz-document url-prefix() {
    .alertify button:focus {
        outline: 1px dotted #3593D2;
    }
}
.alertify .ajs-dimmer,
.alertify .ajs-modal {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-property: opacity, visibility;
    transition-property: opacity, visibility;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
}
.alertify.ajs-hidden .ajs-dimmer,
.alertify.ajs-hidden .ajs-modal {
    visibility: hidden;
    opacity: 0;
}
.alertify.ajs-in:not(.ajs-hidden) .ajs-dialog {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}
.alertify.ajs-out.ajs-hidden .ajs-dialog {
    -webkit-animation-duration: 250ms;
    animation-duration: 250ms;
}
.alertify .ajs-dialog.ajs-shake {
    -webkit-animation-name: ajs-shake;
    animation-name: ajs-shake;
    -webkit-animation-duration: .1s;
    animation-duration: .1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes ajs-shake {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
@keyframes ajs-shake {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
.alertify.ajs-slide.ajs-in:not(.ajs-hidden) .ajs-dialog {
    -webkit-animation-name: ajs-slideIn;
    animation-name: ajs-slideIn;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.alertify.ajs-slide.ajs-out.ajs-hidden .ajs-dialog {
    -webkit-animation-name: ajs-slideOut;
    animation-name: ajs-slideOut;
    -webkit-animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog {
    -webkit-animation-name: ajs-zoomIn;
    animation-name: ajs-zoomIn;
}
.alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog {
    -webkit-animation-name: ajs-zoomOut;
    animation-name: ajs-zoomOut;
}
.alertify.ajs-fade.ajs-in:not(.ajs-hidden) .ajs-dialog {
    -webkit-animation-name: ajs-fadeIn;
    animation-name: ajs-fadeIn;
}
.alertify.ajs-fade.ajs-out.ajs-hidden .ajs-dialog {
    -webkit-animation-name: ajs-fadeOut;
    animation-name: ajs-fadeOut;
}
.alertify.ajs-pulse.ajs-in:not(.ajs-hidden) .ajs-dialog {
    -webkit-animation-name: ajs-pulseIn;
    animation-name: ajs-pulseIn;
}
.alertify.ajs-pulse.ajs-out.ajs-hidden .ajs-dialog {
    -webkit-animation-name: ajs-pulseOut;
    animation-name: ajs-pulseOut;
}
.alertify.ajs-flipx.ajs-in:not(.ajs-hidden) .ajs-dialog {
    -webkit-animation-name: ajs-flipInX;
    animation-name: ajs-flipInX;
}
.alertify.ajs-flipx.ajs-out.ajs-hidden .ajs-dialog {
    -webkit-animation-name: ajs-flipOutX;
    animation-name: ajs-flipOutX;
}
.alertify.ajs-flipy.ajs-in:not(.ajs-hidden) .ajs-dialog {
    -webkit-animation-name: ajs-flipInY;
    animation-name: ajs-flipInY;
}
.alertify.ajs-flipy.ajs-out.ajs-hidden .ajs-dialog {
    -webkit-animation-name: ajs-flipOutY;
    animation-name: ajs-flipOutY;
}
@-webkit-keyframes ajs-pulseIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes ajs-pulseIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes ajs-pulseOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}
@keyframes ajs-pulseOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}
@-webkit-keyframes ajs-zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.25, 0.25, 0.25);
        transform: scale3d(0.25, 0.25, 0.25);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes ajs-zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.25, 0.25, 0.25);
        transform: scale3d(0.25, 0.25, 0.25);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes ajs-zoomOut {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.25, 0.25, 0.25);
        transform: scale3d(0.25, 0.25, 0.25);
    }
}
@keyframes ajs-zoomOut {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.25, 0.25, 0.25);
        transform: scale3d(0.25, 0.25, 0.25);
    }
}
@-webkit-keyframes ajs-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes ajs-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes ajs-fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes ajs-fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes ajs-flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes ajs-flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@-webkit-keyframes ajs-flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}
@keyframes ajs-flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}
@-webkit-keyframes ajs-flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes ajs-flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@-webkit-keyframes ajs-flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}
@keyframes ajs-flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}
@-webkit-keyframes ajs-slideIn {
    0% {
        margin-top: -100%;
    }
    100% {
        margin-top: 5%;
    }
}
@keyframes ajs-slideIn {
    0% {
        margin-top: -100%;
    }
    100% {
        margin-top: 5%;
    }
}
@-webkit-keyframes ajs-slideOut {
    0% {
        margin-top: 5%;
    }
    100% {
        margin-top: -100%;
    }
}
@keyframes ajs-slideOut {
    0% {
        margin-top: 5%;
    }
    100% {
        margin-top: -100%;
    }
}
.alertify-notifier {
    position: fixed;
    width: 0;
    overflow: visible;
    z-index: 1982;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.alertify-notifier .ajs-message {
    position: relative;
    width: 260px;
    max-height: 0;
    padding: 0;
    opacity: 0;
    margin: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
.alertify-notifier .ajs-message.ajs-visible {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1;
    max-height: 100%;
    padding: 15px;
    margin-top: 10px;
}
.alertify-notifier .ajs-message.ajs-success {
    background: rgba(91, 189, 114, 0.95);
}
.alertify-notifier .ajs-message.ajs-error {
    background: rgba(217, 92, 92, 0.95);
}
.alertify-notifier .ajs-message.ajs-warning {
    background: rgba(252, 248, 215, 0.95);
}
.alertify-notifier .ajs-message .ajs-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGPC/xhBQAAAFBJREFUGBl1j0EKADEIA+ve/P9f9bh1hEihNBfjVCO1v7RKVqJK4h8gM5cAPR42AkQEpSXPwMTyoi13n5N9YqJehm3Fnr7nL1D0ZEbD5OubGyC7a9gx+9eNAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: rgba(0, 0, 0, 0.5);
    border-top-right-radius: 2px;
}
.alertify-notifier.ajs-top {
    top: 10px;
}
.alertify-notifier.ajs-bottom {
    bottom: 10px;
}
.alertify-notifier.ajs-right {
    right: 10px;
}
.alertify-notifier.ajs-right .ajs-message {
    right: -320px;
}
.alertify-notifier.ajs-right .ajs-message.ajs-visible {
    right: 290px;
}
.alertify-notifier.ajs-left {
    left: 10px;
}
.alertify-notifier.ajs-left .ajs-message {
    left: -300px;
}
.alertify-notifier.ajs-left .ajs-message.ajs-visible {
    left: 0;
}
.alertify-notifier.ajs-center {
    left: 50%;
}
.alertify-notifier.ajs-center .ajs-message {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.alertify-notifier.ajs-center .ajs-message.ajs-visible {
    left: 50%;
    -webkit-transition-timing-function: cubic-bezier(0.57, 0.43, 0.1, 0.65);
    transition-timing-function: cubic-bezier(0.57, 0.43, 0.1, 0.65);
}
.alertify-notifier.ajs-center.ajs-top .ajs-message {
    top: -300px;
}
.alertify-notifier.ajs-center.ajs-top .ajs-message.ajs-visible {
    top: 0;
}
.alertify-notifier.ajs-center.ajs-bottom .ajs-message {
    bottom: -300px;
}
.alertify-notifier.ajs-center.ajs-bottom .ajs-message.ajs-visible {
    bottom: 0;
}

/**
 * alertifyjs 1.11.1 http://alertifyjs.com
 * AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.
 * Copyright 2018 Mohammad Younes <Mohammad@alertifyjs.com> (http://alertifyjs.com)
 * Licensed under GPL 3 <https://opensource.org/licenses/gpl-3.0>*/
.alertify .ajs-dialog {
    background-color: white;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.25);
    border-radius: 2px;
}
.alertify .ajs-header {
    color: black;
    font-weight: bold;
    background: #fafafa;
    border-bottom: #eee 1px solid;
    border-radius: 2px 2px 0 0;
}
.alertify .ajs-body {
    color: black;
}
.alertify .ajs-body .ajs-content .ajs-input {
    display: block;
    width: 100%;
    padding: 8px;
    margin: 4px;
    border-radius: 2px;
    border: 1px solid #CCC;
}
.alertify .ajs-body .ajs-content p {
    margin: 0;
}
.alertify .ajs-footer {
    background: #fbfbfb;
    border-top: #eee 1px solid;
    border-radius: 0 0 2px 2px;
}
.alertify .ajs-footer .ajs-buttons .ajs-button {
    background-color: transparent;
    color: #000;
    border: 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
    color: #3593D2;
}
.alertify-notifier .ajs-message {
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    text-align: center;
    border: solid 1px #ddd;
    border-radius: 2px;
}
.alertify-notifier .ajs-message.ajs-success {
    color: #fff;
    background: rgba(91, 189, 114, 0.95);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
.alertify-notifier .ajs-message.ajs-error {
    color: #fff;
    background: rgba(217, 92, 92, 0.95);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
.alertify-notifier .ajs-message.ajs-warning {
    background: rgba(252, 248, 215, 0.95);
    border-color: #999;
}

/* Magnific Popup CSS */
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8; }

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden; }

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box; }

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle; }

.mfp-align-top .mfp-container:before {
    display: none; }

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto; }

.mfp-ajax-cur {
    cursor: progress; }

.mfp-auto-cursor .mfp-content {
    cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }

.mfp-loading.mfp-figure {
    display: none; }

.mfp-hide {
    display: none !important; }

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044; }
.mfp-preloader a {
    color: #CCC; }
.mfp-preloader a:hover {
    color: #FFF; }

.mfp-s-ready .mfp-preloader {
    display: none; }

.mfp-s-error .mfp-content {
    display: none; }

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation; }

button::-moz-focus-inner {
    padding: 0;
    border: 0; }

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
    opacity: 1; }
.mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
    color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%; }

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap; }

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
    margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
    left: 0; }
.mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
    right: 0; }
.mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
.mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
.mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
    line-height: 0; }
.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
.mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto; }

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px; }

.mfp-image-holder .mfp-content {
    max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    /**
         * Remove all paddings around the image on small screen
         */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0; }
    .mfp-img-mobile img.mfp-img {
        padding: 0; }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0; }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px; }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0; }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px; }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0; } }

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75); }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0; }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%; }
    .mfp-container {
        padding-left: 6px;
        padding-right: 6px; } }

/* ============================================================================
 *  NKC — Modern UI polish layer  (2026 refresh)
 *  ---------------------------------------------------------------------------
 *  This block is appended to combined.css, which every page loads LAST
 *  (after w3.css).  So these rules lift the shared, legacy W3.CSS base
 *  site-wide: typography, focus states, shadows, scrollbars, transitions.
 *
 *  Each page's own scoped <style> block loads AFTER this file, so the
 *  already-modern modules (lh-/sh-/lv-/sv-/tv-/pn-/ln-/th- namespaces)
 *  keep winning the cascade and are left exactly as they were.  This layer
 *  only touches generic elements and raw .w3-* classes used by the older
 *  screens (login, home, the menu bars).
 *
 *  Pure CSS — no markup or behaviour changes.
 * ========================================================================== */

/* ---- 1. Typography — retire Verdana for a crisp modern system stack ------ */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.01em;
}

/* ---- 2. Smooth, consistent micro-interactions ---------------------------- */
a { transition: color .15s ease; }
.w3-button, .w3-btn, .w3-button-menu, .w3-button-menu-close,
.w3-card, .w3-card-2, .w3-card-4,
.w3-input, .w3-select {
    transition: background-color .15s ease, color .15s ease,
                box-shadow .2s ease, border-color .15s ease, transform .12s ease;
}
/* a subtle "press" on buttons so clicks feel tactile */
.w3-button:active, .w3-btn:active,
.w3-button-menu:active, .w3-button-menu-close:active {
    transform: translateY(1px);
}

/* ---- 3. Accessible, modern keyboard focus ring --------------------------- *
 *  Restricted to links / buttons / the legacy .w3-input + .w3-select so it
 *  never doubles up with the custom focus glows on the newer modules (which
 *  style their own input classes).                                           */
a:focus-visible,
button:focus-visible,
.w3-button:focus-visible,
.w3-btn:focus-visible,
.w3-button-menu:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 2px solid rgba(22, 160, 133, .65);
    outline-offset: 2px;
    border-radius: 4px;
}
.w3-input:focus,
.w3-select:focus {
    border-bottom-color: #16a085;
    box-shadow: 0 1px 0 0 #16a085;
    outline: none;
}

/* ---- 4. Softer, more uniform card elevation ------------------------------ */
.w3-card, .w3-card-2 {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .08);
}
.w3-card-4, .w3-hover-shadow:hover {
    box-shadow: 0 6px 22px rgba(16, 24, 40, .14);
}

/* ---- 5. Quieter, thinner scrollbars (matches the lighter UI) ------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #c2c9d1 transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #c2c9d1;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #9aa3ad;
    background-clip: content-box;
}

/* ---- 6. On-brand text selection ------------------------------------------ */
::selection      { background: rgba(22, 160, 133, .22); }
::-moz-selection { background: rgba(22, 160, 133, .22); }

/* ---- 7. Segmented toggle — reusable radio control ------------------------ *
 *  A modern, compact iOS-style segmented radio. Drop-in for any page; the
 *  active segment is driven purely by `:has(input:checked)`, so NO JavaScript
 *  is needed to style it — pages only listen to `change` for behaviour.
 *
 *  Markup:
 *    <div class="nkc-seg" role="radiogroup" aria-label="…">
 *      <label class="nkc-seg__opt">
 *        <input type="radio" name="x" value="a" checked><span>A</span>
 *      </label>
 *      <label class="nkc-seg__opt">
 *        <input type="radio" name="x" value="b"><span>B</span>
 *      </label>
 *    </div>
 *
 *  Sits well under half a line; add as many options as needed.              */
.nkc-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #eef1f4;
    border: 1px solid #e2e7ec;
    border-radius: 12px;
    vertical-align: middle;
}
.nkc-seg__opt {
    position: relative;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-size: .86rem;
    font-weight: 600;
    color: #5b6770;
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.nkc-seg__opt > input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* radio dot — empty by default, fills teal when its segment is checked */
.nkc-seg__opt::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #c2ccd4;
    background: #fff;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.nkc-seg__opt:hover { color: #37474f; }
.nkc-seg__opt:has(input:checked) {
    background: #fff;
    color: #14181d;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .08);
}
.nkc-seg__opt:has(input:checked)::before {
    border-color: #16a085;
    background: #16a085;
    box-shadow: inset 0 0 0 3px #fff;     /* white gap → classic selected-radio look */
}
.nkc-seg__opt:has(input:focus-visible) {
    outline: 2px solid rgba(22, 160, 133, .55);
    outline-offset: 2px;
}
/* A disabled segment (e.g. a locked option) reads as muted + non-interactive */
.nkc-seg__opt:has(input:disabled) {
    opacity: .5;
    cursor: not-allowed;
}


/* ============================================================================
 *  NKC — App-wide motion & micro-interaction layer  (2026 fine-tune)
 *  ---------------------------------------------------------------------------
 *  Brings the "reports home" feel — a gentle page entrance, staggered reveals,
 *  tactile hover lift — to EVERY page from one place. It uses the same motion
 *  language as the already-modern scoped modules (fade-up + pop + --i stagger),
 *  so legacy/shared surfaces now move like the polished ones.
 *
 *  Safety:
 *   - The page entrance animates OPACITY ONLY (never transform / filter), so it
 *     never creates a containing block for the position:fixed chrome (menu
 *     drawer, backdrop, toggle widgets) — they stay pinned to the viewport.
 *   - Everything sits behind `prefers-reduced-motion: no-preference`, with a
 *     blanket reduce-guard and a print-guard, so motion-sensitive users and
 *     printed pages get a calm, fully-visible page.
 *   - This is the LAST-loaded shared stylesheet but still loses to each page's
 *     own inline <style>, so the scoped modules keep their bespoke animations.
 *
 *  Pure CSS — no markup or behaviour changes.
 * ========================================================================== */

/* shared easings (gentle, confident ease-outs) */
:root {
    --nkc-ease:     cubic-bezier(.21, .62, .35, 1);
    --nkc-ease-out: cubic-bezier(.16, .84, .44, 1);
}

@media (prefers-reduced-motion: no-preference) {

    /* ---- 8. Page entrance — a soft, app-wide fade-in on every load -------- */
    @keyframes nkc-page-in { from { opacity: 0; } to { opacity: 1; } }
    body { animation: nkc-page-in .42s var(--nkc-ease) both; }

    /* smooth in-page anchor jumps */
    html { scroll-behavior: smooth; }

    /* ---- 9. Reusable entrance utilities (opt-in) ------------------------- *
     *  Drop `nkc-fade-up` / `nkc-fade-in` / `nkc-pop` on any element. Stagger
     *  a group by setting `--i: 0,1,2…` on successive items (mirrors the
     *  reports-home `--i * 34ms` cascade).                                    */
    @keyframes nkc-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes nkc-fade-in { from { opacity: 0; }                              to { opacity: 1; } }
    @keyframes nkc-pop     { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

    .nkc-fade-up { animation: nkc-fade-up .55s var(--nkc-ease) both; animation-delay: calc(var(--i, 0) * 34ms); }
    .nkc-fade-in { animation: nkc-fade-in .5s  var(--nkc-ease) both; animation-delay: calc(var(--i, 0) * 34ms); }
    .nkc-pop     { animation: nkc-pop     .5s  var(--nkc-ease) both; animation-delay: calc(var(--i, 0) * 34ms); }
}

/* ---- 10. Richer hover lift on interactive cards & tiles ------------------ *
 *  Only the explicitly-interactive .w3-hover-shadow cards get the lift, so
 *  static .w3-card panels stay put. Generic buttons get a soft hover shadow
 *  + a 1px rise so clicks across the legacy screens feel tactile.            */
.w3-hover-shadow { transition: box-shadow .22s var(--nkc-ease), transform .22s var(--nkc-ease); }
.w3-hover-shadow:hover { transform: translateY(-2px); }

.w3-button:hover, .w3-btn:hover, .w3-button-menu:hover {
    box-shadow: 0 2px 8px rgba(16, 24, 40, .14);
}
.w3-button:hover, .w3-btn:hover { transform: translateY(-1px); }
.w3-button:active, .w3-btn:active { transform: translateY(1px); }

/* ---- 11. Smooth legacy table-row hover ---------------------------------- */
.w3-table tr, .w3-table-all tr, .w3-hoverable tbody tr {
    transition: background-color .14s ease;
}

/* ---- 12. Honour reduced motion everywhere ------------------------------- *
 *  A blanket guard so even scoped pages and vendor widgets calm down for
 *  users who ask for less motion; end states still apply, nothing hides.    */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 13. Print — no motion, full opacity -------------------------------- */
@media print {
    body { animation: none !important; opacity: 1 !important; }
    * { animation: none !important; transition: none !important; }
}


/* ============================================================================
 *  NKC — UI components + dark mode  (2026-06-27, sections 14–17)
 *  ---------------------------------------------------------------------------
 *  Three reusable surface-level components (skeleton loaders, empty states,
 *  KPI sparkline) plus an app-wide dark theme keyed on html[data-theme="dark"].
 *
 *  Driven by sourceFile/nkc_ui.js (loaded once via a_menu.php). All three
 *  components are theme-aware via shared CSS variables, so they look right in
 *  both light and dark out of the box.
 *
 *  Pure presentation. The dark layer raises a body/canvas + generic-surface
 *  theme so the global chrome and the legacy/raw-w3 screens go dark cleanly;
 *  richly-scoped module pages opt in from their own blocks (see a_home hm-*).
 * ========================================================================== */

/* shared component tokens — overridden wholesale by the dark block below */
:root {
    --nkc-surface:      #ffffff;
    --nkc-surface-2:    #f4f6f8;
    --nkc-border:       #e6eaee;
    --nkc-ink:          #283042;
    --nkc-ink-soft:     #5a6473;
    --nkc-ink-mute:     #8a96a3;
    --nkc-skel-base:    #e7ebef;
    --nkc-skel-shine:   #f3f6f8;
}

/* ---- 14. Skeleton loaders ----------------------------------------------- *
 *  Content-shaped shimmer placeholders shown while an AJAX panel loads.
 *  JS API: NKCUI.skeleton(target, {lines|rows|cards}) / NKCUI.clear(target).
 *  Also usable as plain markup: <span class="nkc-skel-box nkc-skel-line w70">. */
.nkc-skel { display: flex; flex-direction: column; gap: 11px; }
.nkc-skel-row,
.nkc-skel-card { display: flex; align-items: center; gap: 12px; }
.nkc-skel-row { padding: 4px 0; }
.nkc-skel-card {
    padding: 14px 15px;
    background: var(--nkc-surface);
    border: 1px solid var(--nkc-border);
    border-radius: 14px;
}
.nkc-skel-stack { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }

.nkc-skel-box {
    display: block;
    border-radius: 7px;
    background: var(--nkc-skel-base);
    background-image: linear-gradient(
        100deg,
        var(--nkc-skel-base) 30%,
        var(--nkc-skel-shine) 50%,
        var(--nkc-skel-base) 70%
    );
    background-size: 220% 100%;
}
.nkc-skel-line { height: 12px; }
.nkc-skel-ico  { width: 42px; height: 42px; border-radius: 12px; flex: none; }
.nkc-skel-line.w15 { width: 15%; } .nkc-skel-line.w30 { width: 30%; }
.nkc-skel-line.w40 { width: 40%; } .nkc-skel-line.w50 { width: 50%; }
.nkc-skel-line.w60 { width: 60%; } .nkc-skel-line.w70 { width: 70%; }
.nkc-skel-line.w75 { width: 75%; } .nkc-skel-line.w80 { width: 80%; }
.nkc-skel-line.w85 { width: 85%; } .nkc-skel-line.w90 { width: 90%; }

@media (prefers-reduced-motion: no-preference) {
    @keyframes nkc-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
    .nkc-skel:not(.nkc-skel--still) .nkc-skel-box {
        animation: nkc-shimmer 1.25s ease-in-out infinite;
    }
}
/* still fallback (reduced motion / no JS-motion): gentle static pulse only */
.nkc-skel--still .nkc-skel-box { background-image: none; }

/* ---- 15. Empty states --------------------------------------------------- *
 *  A friendly placeholder for "no rows / all caught up" panels. Rendered
 *  server-side by nkc_empty_state() (a_common_func.php) or hand-written. */
.nkc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 40px 22px;
    color: var(--nkc-ink-soft);
}
.nkc-empty--tight { padding: 26px 18px; }
.nkc-empty-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; margin-bottom: 8px;
    border-radius: 50%;
    font-size: 30px; line-height: 1;
    background: var(--nkc-surface-2);
    color: var(--nkc-ink-mute);
    box-shadow: inset 0 0 0 1px var(--nkc-border);
}
.nkc-empty--ok    .nkc-empty-ico { background: #e7f5ec; color: #2e7d32; box-shadow: inset 0 0 0 1px rgba(46,125,50,.22); }
.nkc-empty--amber .nkc-empty-ico { background: #fdf3e0; color: #b7791f; box-shadow: inset 0 0 0 1px rgba(183,121,31,.22); }
.nkc-empty-title { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--nkc-ink); }
.nkc-empty-text  { margin: 0; font-size: 13px; line-height: 1.5; max-width: 42ch; color: var(--nkc-ink-soft); }
.nkc-empty-cta {
    margin-top: 14px;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 0 18px;
    border-radius: 10px; text-decoration: none;
    font-size: 13.5px; font-weight: 600;
    background: #2f6f63; color: #fff; border: 1px solid #2f6f63;
    transition: background .15s ease, transform .12s ease, box-shadow .2s ease;
}
.nkc-empty-cta:hover { background: #275d53; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,24,40,.16); }
.nkc-empty-cta--ghost { background: transparent; color: var(--nkc-ink); border-color: var(--nkc-border); }
.nkc-empty-cta--ghost:hover { background: var(--nkc-surface-2); }

/* ---- 16. KPI sparkline + trend chip ------------------------------------- *
 *  Tiny inline-SVG trend strip for dashboards (rendered server-side). The SVG
 *  paints with currentColor so callers tint it via colour on .nkc-spark. */
.nkc-spark { display: block; width: 100%; height: auto; overflow: visible; }
.nkc-spark .nkc-spark-fill { fill: currentColor; opacity: .14; }
.nkc-spark .nkc-spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nkc-spark .nkc-spark-dot  { fill: currentColor; }
.nkc-trend {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
    padding: 2px 9px; border-radius: 999px;
    background: var(--nkc-surface-2); color: var(--nkc-ink-mute);
}
.nkc-trend.up   { background: #e7f5ec; color: #2e7d32; }
.nkc-trend.down { background: #fdeceb; color: #c0392b; }
.nkc-trend.flat { background: var(--nkc-surface-2); color: var(--nkc-ink-soft); }

/* ---- 17. DARK THEME ----------------------------------------------------- *
 *  Activated by html[data-theme="dark"] (set pre-paint by a_menu.php's inline
 *  script, toggled live by nkc_ui.js). This block themes the global chrome,
 *  the generic/raw-W3 surfaces shared by legacy pages, the form controls,
 *  tables, and the three components above. Semantic colour utilities
 *  (.w3-teal/.w3-orange/type badges …) are deliberately NOT touched so the
 *  app's colour-coding language survives. Scoped module pages extend this
 *  from their own blocks. */
html[data-theme="dark"] {
    color-scheme: dark;
    --nkc-surface:    #1b212b;
    --nkc-surface-2:  #232b36;
    --nkc-border:     #2d3540;
    --nkc-ink:        #e4e8ee;
    --nkc-ink-soft:   #aab3bf;
    --nkc-ink-mute:   #7e8a98;
    --nkc-skel-base:  #232a34;
    --nkc-skel-shine: #2e3742;
}

/* canvas + default text (beats scoped `.xxx-body{background}` via the body el) */
html[data-theme="dark"] body { background: #11151b; color: #cdd3da; }

/* generic raw-W3 surfaces used across the legacy / backend screens */
html[data-theme="dark"] .w3-white,
html[data-theme="dark"] .w3-card,
html[data-theme="dark"] .w3-card-2,
html[data-theme="dark"] .w3-card-4,
html[data-theme="dark"] .w3-panel {
    background-color: #1b212b !important;
    color: #d3d9e0;
}
html[data-theme="dark"] .w3-light-grey,
html[data-theme="dark"] .w3-light-gray,
html[data-theme="dark"] .w3-pale-blue,
html[data-theme="dark"] .w3-pale-green {
    background-color: #232b36 !important;
    color: #cdd3da;
}
html[data-theme="dark"] .w3-card,
html[data-theme="dark"] .w3-card-2 {
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.45);
}
html[data-theme="dark"] .w3-card-4 {
    box-shadow: 0 8px 26px rgba(0,0,0,.6);
}

/* default dark text on the common neutral text utilities */
html[data-theme="dark"] .w3-text-grey,
html[data-theme="dark"] .w3-text-gray,
html[data-theme="dark"] .w3-text-dark-grey,
html[data-theme="dark"] .w3-text-black { color: #aab3bf !important; }

/* form controls — text-like inputs / selects / textareas are structurally
 * light in every theme (never intentionally coloured), so it is safe to force
 * them dark app-wide with !important. This beats both class- AND id-based
 * scoped rules (e.g. `#lts-table` / `.lts-search-box input`) that a generic
 * class selector could not. BUTTON-like and toggle inputs are excluded so
 * coloured submit buttons / checkboxes / sliders keep their look. */
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .w3-input,
html[data-theme="dark"] .w3-select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]) {
    background-color: #161b22 !important;
    color: #e4e8ee !important;
    border-color: #323b47 !important;
}
html[data-theme="dark"] ::placeholder { color: #6c7785 !important; opacity: 1; }
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup { background-color: #1b212b; color: #e4e8ee; }
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .w3-input:focus,
html[data-theme="dark"] .w3-select:focus,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus {
    border-color: #2bb49a !important;
    box-shadow: 0 0 0 1px rgba(43, 180, 154, .35) !important;
    outline: none;
}

/* tables — safe structural defaults (cell text + borders). Per-page scoped
 * blocks add their own dark cell/stripe backgrounds (preserving any coloured
 * state cells, which this layer never overrides). */
html[data-theme="dark"] table { color: #cdd3da; }
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-color: #2d3540; }
html[data-theme="dark"] .w3-table,
html[data-theme="dark"] .w3-table-all { color: #cdd3da; }
html[data-theme="dark"] .w3-table-all { border-color: #2d3540; }
html[data-theme="dark"] .w3-table-all tr,
html[data-theme="dark"] .w3-table th,
html[data-theme="dark"] .w3-table td,
html[data-theme="dark"] .w3-table-all th,
html[data-theme="dark"] .w3-table-all td { border-color: #2d3540 !important; }
html[data-theme="dark"] .w3-table-all tr:nth-child(odd)  { background-color: #1b212b; }
html[data-theme="dark"] .w3-table-all tr:nth-child(even) { background-color: #1f2630; }
html[data-theme="dark"] .w3-hoverable tbody tr:hover,
html[data-theme="dark"] .w3-table tr:hover { background-color: #283140 !important; }
html[data-theme="dark"] .w3-bordered tr,
html[data-theme="dark"] .w3-border,
html[data-theme="dark"] hr { border-color: #2d3540 !important; }

/* links on a dark canvas */
html[data-theme="dark"] a { color: #6f9bcd; }
html[data-theme="dark"] a:hover { color: #9fc0e6; }

/* thinner scrollbars recoloured for dark */
html[data-theme="dark"] * { scrollbar-color: #3a4350 transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4350; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5564; }
html[data-theme="dark"] ::selection      { background: rgba(43,180,154,.30); }
html[data-theme="dark"] ::-moz-selection { background: rgba(43,180,154,.30); }

/* component dark tuning (vars handle most; a couple of bespoke states) */
html[data-theme="dark"] .nkc-empty--ok    .nkc-empty-ico { background: rgba(46,125,50,.18);  color: #6cc77f; box-shadow: inset 0 0 0 1px rgba(108,199,127,.25); }
html[data-theme="dark"] .nkc-empty--amber .nkc-empty-ico { background: rgba(183,121,31,.18); color: #e0a94e; box-shadow: inset 0 0 0 1px rgba(224,169,78,.25); }
html[data-theme="dark"] .nkc-empty-cta--ghost { color: #e4e8ee; }
html[data-theme="dark"] .nkc-trend.up   { background: rgba(46,125,50,.20);  color: #6cc77f; }
html[data-theme="dark"] .nkc-trend.down { background: rgba(192,57,43,.22);   color: #ef6f63; }

/* the segmented control (section 7) on dark */
html[data-theme="dark"] .nkc-seg { background: #232b36; border-color: #2d3540; }
html[data-theme="dark"] .nkc-seg__opt { color: #aab3bf; }
html[data-theme="dark"] .nkc-seg__opt::before { border-color: #3a4350; background: #161b22; }
html[data-theme="dark"] .nkc-seg__opt:has(input:checked) { background: #11151b; color: #f1f4f8; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
html[data-theme="dark"] .nkc-seg__opt:has(input:checked)::before { box-shadow: inset 0 0 0 3px #11151b; }