:root {
    --frasytram-primary: #5b2a86;
    --frasytram-primary-dark: #34145d;
    --frasytram-accent: #18a999;
    --frasytram-soft: #f6f2fb;
    --frasytram-border: #ded6ea;
    --frasytram-text: #2b2433;
}

body {
    background:
        radial-gradient(circle at top left, rgba(91, 42, 134, .11), transparent 32rem),
        linear-gradient(180deg, #fbf9fe 0%, #f4f7fb 100%);
    color: var(--frasytram-text);
}

.navbar-default {
    background: linear-gradient(135deg, var(--frasytram-primary-dark), var(--frasytram-primary));
    border: 0;
    border-radius: 0;
    box-shadow: 0 6px 20px rgba(39, 16, 70, .18);
}

.navbar-default .navbar-brand {
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
}

.navbar-default .navbar-nav > li > a {
    opacity: .88;
    transition: background-color .18s ease, opacity .18s ease;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background: rgba(255, 255, 255, .13);
    opacity: 1;
}

.navbar-default .btn-link {
    color: #fff;
    text-decoration: none;
}

main.container {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(222, 214, 234, .8);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(38, 22, 62, .08);
    margin-bottom: 3rem;
    padding: 2rem 2.2rem;
}

.page-header {
    border-bottom-color: var(--frasytram-border);
    margin-top: 0;
}

.page-header h1 {
    color: var(--frasytram-primary-dark);
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(135deg, var(--frasytram-accent), #128f82);
    border-color: #128f82;
    box-shadow: 0 3px 10px rgba(24, 169, 153, .22);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #20bcae, #0f7f75);
    border-color: #0f7f75;
}

.btn-default {
    border-color: var(--frasytram-border);
}

.panel {
    border-color: var(--frasytram-border);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(38, 22, 62, .06);
}

.panel-default > .panel-heading,
.panel-info > .panel-heading {
    background: var(--frasytram-soft);
    border-color: var(--frasytram-border);
    color: var(--frasytram-primary-dark);
    font-weight: 700;
}

.table > thead > tr > th {
    background: var(--frasytram-soft);
    border-bottom: 2px solid var(--frasytram-border);
    color: var(--frasytram-primary-dark);
}

.table-hover > tbody > tr:hover {
    background-color: #fbf7ff;
}

.breadcrumb {
    background: var(--frasytram-soft);
    border: 1px solid var(--frasytram-border);
    border-radius: 999px;
}

.form-control:focus {
    border-color: var(--frasytram-accent);
    box-shadow: 0 0 0 3px rgba(24, 169, 153, .15);
}

.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    background: var(--frasytram-primary);
    border-color: var(--frasytram-primary);
}

.list-group-item {
    transition: background-color .16s ease, border-color .16s ease;
}

.list-group-item:hover {
    background: #fbf7ff;
}
