html, body {
    margin: 0;
    padding: 0;
    background: #eef2f5;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a {
    color: #245f8e;
}

.topbar {
    min-height: 56px;
    background: #263744;
    color: #fff;
    box-sizing: border-box;
    padding: 17px 22px;
    overflow: hidden;
}

.topbar-title {
    float: left;
    font-size: 20px;
    font-weight: bold;
}

.topbar-user {
    float: right;
    padding-top: 2px;
}

.topbar-user a {
    color: #fff;
}

.badge {
    display: inline-block;
    background: #d69a21;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    padding: 0 5px;
    border-radius: 3px;
}

.page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
}

.login-box,
.form-box {
    max-width: 560px;
    margin: 45px auto;
    background: #fff;
    border: 1px solid #d8dde2;
    border-radius: 6px;
    padding: 24px;
    box-sizing: border-box;
}

.login-box h1,
.form-box h1 {
    margin-top: 0;
    font-size: 22px;
}

.form-box h2 {
    margin-top: 24px;
    font-size: 17px;
}

label {
    display: block;
    font-weight: bold;
    margin: 13px 0 6px 0;
}

input[type=text],
input[type=password] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #bcc5cc;
    border-radius: 4px;
    font-size: 15px;
    background: #fff;
}

button,
.button {
    display: inline-block;
    border: 0;
    border-radius: 4px;
    background: #2f78a8;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
}

button:hover,
.button:hover {
    opacity: .92;
}

.button.secondary {
    background: #687985;
}

.login-box button {
    margin-top: 18px;
    width: 100%;
}

.msg {
    padding: 11px 14px;
    border-radius: 4px;
    margin: 0 0 15px 0;
}

.msg.error {
    color: #8c1d1d;
    background: #ffe7e7;
    border: 1px solid #f0bcbc;
}

.msg.ok {
    color: #22642d;
    background: #e7f6ea;
    border: 1px solid #b8dfbf;
}

.admin-links,
.toolbar {
    margin-bottom: 18px;
}

.admin-links .button,
.toolbar .button {
    margin-right: 7px;
    margin-bottom: 5px;
}

.graphs-grid {
    overflow: hidden;
    margin-left: -8px;
    margin-right: -8px;
}

.graph-card {
    background: #fff;
    border: 1px solid #d6dde2;
    border-radius: 5px;
    box-sizing: border-box;
    width: calc(50% - 16px);
    margin: 8px;
    padding: 12px;
    float: left;
}

.graph-title {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 5px;
}

.graph-description {
    color: #66747e;
    margin-bottom: 10px;
}

.traffic-graph {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

.empty-box {
    background: #fff;
    border: 1px solid #d6dde2;
    padding: 25px;
    text-align: center;
    border-radius: 5px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #d6dde2;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid #e0e5e9;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    background: #e8edf1;
}

.actions a {
    margin-right: 8px;
}

.inline-form {
    display: inline;
}

.link-button {
    display: inline;
    padding: 0;
    background: transparent;
    color: #245f8e;
    text-decoration: underline;
}

.link-button.danger {
    color: #a62929;
}

.check-line label {
    font-weight: normal;
}

.permissions {
    border: 1px solid #d8dde2;
    background: #f7f9fa;
    border-radius: 4px;
    padding: 10px 14px;
    max-height: 320px;
    overflow: auto;
}

.permissions label {
    font-weight: normal;
    margin: 7px 0;
}

.form-buttons {
    margin-top: 20px;
}

.form-buttons .button {
    margin-left: 5px;
}

.hint {
    color: #77838c;
    font-size: 12px;
    margin-top: 4px;
}

@media screen and (max-width: 850px) {
    .graph-card {
        float: none;
        width: auto;
    }

    .topbar-title,
    .topbar-user {
        float: none;
    }

    .topbar-user {
        margin-top: 8px;
    }

    .admin-table {
        font-size: 12px;
    }
}


body.modal-open { overflow: hidden; }
.graph-open { display:block; cursor:pointer; }
.graph-modal { position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; }
.graph-modal-overlay { position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; background:#000; opacity:.72; filter:alpha(opacity=72); }
.graph-modal-window { position:relative; z-index:2; width:92%; max-width:1450px; margin:35px auto; background:#fff; border-radius:6px; box-sizing:border-box; padding:14px; }
.graph-modal-header { overflow:hidden; border-bottom:1px solid #d8dde2; padding:3px 3px 12px 3px; margin-bottom:12px; }
.graph-modal-heading { float:left; }
.graph-modal-title { font-size:20px; font-weight:bold; }
.graph-modal-period { color:#66747e; font-size:13px; margin-top:4px; }
.graph-modal-close { float:right; width:42px; height:38px; padding:0; font-size:18px; line-height:38px; background:#687985; }
.graph-modal-body { position:relative; min-height:260px; padding:0 62px; }
.graph-modal-image-wrap { text-align:center; }
#graph-modal-image { display:block; max-width:100%; max-height:72vh; width:auto; height:auto; margin:0 auto; }
.graph-modal-arrow { position:absolute; top:42%; width:46px; height:64px; padding:0; margin:0; font-size:30px; line-height:64px; text-align:center; background:#263744; color:#fff; }
.graph-modal-arrow:disabled { opacity:.22; cursor:default; }
.graph-modal-prev { left:3px; } .graph-modal-next { right:3px; }
.graph-modal-updated { margin-top:7px; color:#77838c; font-size:12px; text-align:right; }
.graph-modal-periods { text-align:center; padding-top:13px; border-top:1px solid #e2e6e9; margin-top:12px; }
.period-button { min-width:105px; margin:3px; background:#687985; }
.period-button.active { background:#2f78a8; font-weight:bold; }
.period-button.disabled { opacity:.25; cursor:default; }
.period-path-hint { margin:15px 0; }
@media screen and (max-width:700px) { .graph-modal-window{width:96%;margin:12px auto;padding:9px}.graph-modal-body{padding:0 42px}.graph-modal-arrow{width:36px;height:54px;line-height:54px;font-size:24px}.period-button{min-width:70px;padding:9px 7px;font-size:12px} }

.graph-open {
    display: block;
    cursor: zoom-in;
    text-decoration: none;
}


/* Graph categories */
.graph-groups-nav {
    margin: 0 0 18px 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #d6dde2;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    text-align: center;
}

.graph-group-link {
    display: inline-block;
    margin: 3px 5px 3px 0;
    padding: 9px 13px;
    border-radius: 4px;
    background: #e8edf1;
    color: #263744;
    text-decoration: none;
    font-weight: bold;
}

.graph-group-link:hover {
    background: #dce4e9;
}

.graph-group-link.active {
    background: #2f78a8;
    color: #fff;
}

.graph-group-link span {
    display: inline-block;
    min-width: 16px;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(0,0,0,.10);
    font-size: 11px;
    text-align: center;
}

select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #bcc5cc;
    border-radius: 4px;
    font-size: 15px;
    background: #fff;
}

.graph-groups-nav {
    text-align: center !important;
}

.graph-groups-nav .graph-group-link {
    float: none !important;
    display: inline-block !important;
}


.graph-groups-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    text-align: center !important;
}

.graph-groups-nav .graph-group-link {
    float: none !important;
    display: inline-block !important;
    margin: 3px 0 !important;
}