
body {
    background: #ffffff url(http://trit.biz/user/themes/trit2017/images/pattern.png) left top repeat;
    font-family: "Noto Sans", sans-serif !important;
    min-height: 100vh;
    font-size: 80%;
}


header {
    background-color: #fff;
    border-bottom: 4px solid #ffce00;
    height: auto;
    padding: 1em 2em;
}

header .trit-left {
    float: none;
    text-align: center;
}

header .trit-right {
    float: none;
    text-align: center;
}

header .trit-right .trit-phone {
    line-height: 30px; vertical-align: middle;
    text-align: center;
    color: inherit;
}
header .trit-right .trit-phone .muted {
    opacity: .4;
}


footer {
    margin-top: 2em;
    text-align: center;
    margin-bottom: 2em;
    color: #ccc;
}

footer a {
    color: inherit;
}


h1, h2, h3, h4, h5 {
    font-weight: bold;
    text-align: center;
}

.container {
    width: 100%;
    margin: 0 auto;
}

.small {
    font-size: 80%;
}


.trit-link-list {
    text-align: center;
    display: flex; flex-wrap: wrap;
    justify-content: center;
    max-width: 800px; margin: 0 auto;
}


a.center-link {
    text-decoration: none;
    padding: 0.2em 1.15em;
    border: 1px solid #ccc; border-radius: 4px;
    background-color: #fff;
    color: #001c65;
}

a.block-link {
    display: inline-block;
    padding: 0.2em 1.15em; margin: 0.125em;
    text-decoration: none;
    border: 1px solid #ccc; border-radius: 4px;
    background-color: #fff;
    color: #001c65;
}

a.block-link.block-link-active {
    background-color: #ffce00;
    color: #000;
}

a.block-link:hover {
    background-color: #ffeb99;
}


/*
    rr
 */

.rr-back-link {
    line-height: 32px;
    float: left;
}

.rr-table {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    justify-items: center;
    line-height: 1.5em;
}

.rr-day-wrapper {
    flex: 100%;
    width: 100%;
}

.rr-day {
    margin: 0 auto;
    min-width: 280px;
    max-width: 420px;
    width: 85%;
}

.rr-date {
    text-align: center;
    font-weight: bold;
    background: #799177; color: #fff;
    line-height: 1em;
    padding: 0.25em 0;
}

.rr-row {
    width: 100%;
    min-height: 2em;
    display: flex;
    flex-direction: row;
    height: fit-content;
    border-bottom: 1px solid #eee;
}

.rr-splitted {
    font-size: 100%;
    overflow: inherit;
    text-overflow: inherit;
    white-space: inherit;
}

.rr-order {
    box-sizing: border-box;
    width: 2em;
    padding: 0.25em 0.5em;
    text-align: center;
    border-right: 1px solid #eee;
}

.rr-subject {
    box-sizing: border-box;
    width: 100%;
    height: inherit;
    padding: 0.25em 0.5em;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: unset;
    border-right: 1px solid #eee;
}

.rr-row .rr-group {
    box-sizing: border-box;
    width: 3em;
    padding: 0.25em 0.5em;
    text-align: center;
    border-right: 1px solid #eee;
}

.rr-row .rr-location {
    box-sizing: border-box;
    width: 5em;
    padding: 0.25em 0.5em;
    text-align: center; overflow: hidden;
}

/*
    bell
 */

table.bell-timetable {
    padding: 0;
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
    width: 75%;
    max-width: 400px;
    border: 2px solid #ffe193;
}

table.bell-timetable td {
    padding: .5em 1em;
    border: 1px solid #efe9c9;
    background-color: #fff;
}

table.bell-timetable tr.type-dinner,
table.bell-timetable tr.type-break {
    color: #999;
}

table.bell-timetable tr.pair-1 td {
    background-color: #f2ffe3;
}

table.bell-timetable tr.pair-2 td {
    background-color: #fffce3;
}

table.bell-timetable tr.pair-3 td {
    background-color: #f0f4ff;
}

table.bell-timetable tr.pair-4 td {
    background-color: #e3fffd;
}

table.bell-timetable tr.pair-5 td {
    background-color: #fbedf8;
}


@media(min-width: 768px) {
    .container { max-width: 720px; }
    header { height: 60px; }
    header .trit-left {
        float: left;
    }
    header .trit-right {
        float: right;
    }
    header .trit-right .trit-phone {
        text-align: right;
    }
    .rr-row { height: 2em; }
    .rr-splitted {
        font-size: 90%;
        line-height: 1em;
    }
    .rr-day { max-width: 360px; }
    .rr-day-wrapper { flex: 50%; }
    .rr-subject {
        white-space: nowrap;
        width: 428px !important;
    }
}

@media (min-width:992px){
    body { font-size: 100%; }
    .container { max-width: 960px; }
    .rr-day-wrapper { flex: calc(100%/3); }
}

@media (min-width:1200px){
    .container { max-width: 1140px; }
    .rr-day { width: 360px; }
}
