:root{
    --lbback: #dc354538;
    --lbcol: #121212;
    --tcorn: lightsteelblue;
    --bback: #dc354530;
    --modback: white;
    --matebgdef: #ffffff50;
    --mateborder: #dc35451c;
    --rtborder1: #00b7ffbf;
    --rtborder2: #00ff11bf;
    --rtborder3: #dc3545bf;
    --rtborder4: #5f5f5fbf;
    --rtback1: #defde0;
    --rtback2: #00ff114d;
    --rtback3: #ff5e004d;
    --rtback4: #dc35454d;
    --rtback5: #990aff4d;
    --rtback6: #5f5f5f4d;
    --fainfo: #007bff;
    --fainfoalert: #9345c3;
    --cardheader: #dc3545bf;
    /*--bodyback: #dc354538;*/
    --bodyback: #dc354538;
    --titlebar: #dc3545;
    --mate-uncheck: #ff808c;
    --mate-check: #8cfaa4;
    --branch-closed-uncheck: #ff808caa;
    --branch-closed-check: #8cfaa4aa;
    --branch-online-uncheck: #ff60cada;
    --branch-online-check: #b2ff6ae0;
    --cardbody: #dc354577;
    --beginner: #dc3545;
    --dir-back: white;
    --rt-close: #68010c;
    --rt-later: #aa3f02;
    --rt-unknown: #4b4b4b;
    --rt-ok: #0591c9;
    --rt-normal: #02800a;
    --rt-busy: #b40012;
    --news-border: red;
    --news-bg: #ff000050;
    --sunshine: yellow;
    --sunset: blue;
    --holiday: green;
    --but-live-bg: #007bff;
    --but-live-border: #007bff;
    --but-sort-bg: #dc3545;
    --but-sort-border: #dc3545;


    --co-r: 219;
    --co-g: 52;
    --co-b: 68;
    --connectborder: #dc354580;
    --co-bg: #A0000070;

    --hangoutbg: #15ff0080;
    --ho-r: 0;
    --ho-g: 170;
    --ho-b: 70;
    --hangoutborder: #00610080;
    --ho-bg: #00807FDD;  

    --myconnectbg: #00a2ff80;
    --myc-r: 0;
    --myc-g: 77;
    --myc-b: 179;
    --myconnectborder: #004db380;
    --myc-bg: #007baa70;

}
[data-theme="dark"]{
    --lbback: #00000038;
    --lbcol: cornsilk;
    --tcorn: burlywood;
    --bback: #FFFFFF13;
    --modback: black;
    /*--matebgdef: #dc354590;*/
    --mateborder: #dc3545;
    --rtborder1: #00b7ffbf;
    --rtborder2: #59fc30e1;
    --rtborder3: #dc3545bf;
    --rtborder4: #5f5f5fbf;
    --rtback1: #00b7ffaa;
    --rtback2: #00ff114d;
    --rtback3: #ff5e008f;
    --rtback4: #dc35465e;
    --rtback5: #990aff81;
    --rtback6: #5f5f5fa4;
    --fainfo: cornsilk;
    --fainfoalert: #ff722f;
    --cardheader: #6d1821;
    --bodyback: black;
    --titlebar: black;
    --mate-uncheck: #e40016b8;
    --mate-check: #00b527bf;
    --branch-closed-uncheck: #e4001667;
    --branch-closed-check: #00b52767;
    --branch-online-uncheck: #fd4da5a8;
    --branch-online-check: #7dbb43bb;
    --cardbody: black;
    --beginner: white;
    --dir-back: #00000038;
    --rt-close: #ff001b;
    --rt-later: #aa3f02;
    --rt-unknown: #4b4b4b;
    --rt-ok: #0591c9;
    --rt-normal: #02800a;
    --rt-busy: #b40012;
    --news-border: red;
    --news-bg: #ff000050;
    --sunshine: #ffec82ad;
    --sunset: #87bbffad;
    --holiday: #81ff81ad;
    --but-live-bg: #007bff77;
    --but-live-border: #007bffd5;
    --but-sort-bg: #dc354577;
    --but-sort-border: #dc3545d5;

    --co-bg: #dc354580;
    --ho-bg: #00ff7b70;  
    --myc-bg: #007bffAA;

}

.legend-small-text{
    font-size: x-small;
    text-align: center;
    display: block;
}

.md-datepicker-calendar-icon, .md-icon, .md-datepicker-input{
    color: var(--lbcol) !important;
}
.test{
    background-color: calc(var(--test-red) + var(--test-blue));
}

a.inlink {
    color: var(--lbcol) !important;
}

.news-container, .mate-container{
    padding: 5px;
}

.news-box p {
    margin: 0 !important;
}

.news-box{
    background: var(--news-bg);
    border: 1px solid var(--news-border);
    border-radius: 5px;
    padding: 5px;
}

.beginner-icon {
    color: var(--beginner);
}

.bg-titlebar {
    background: var(--titlebar) !important;
}
.mate-selector, .time-selector, .branch-selector {
    width: 100%;
    background: var(--mate-uncheck);
}
.mate-checker input:checked ~ .mate-selector, 
.time-checker input:checked ~ .time-selector, 
.branch-checker input:checked ~ .branch-selector {
    background: var(--mate-check);
}
.closed-branch-listing{
    background: var(--branch-closed-uncheck) !important;
}
.branch-checker input:checked ~ .closed-branch-listing{
    background: var(--branch-closed-check) !important;
}
.online-branch-listing{
    background: var(--branch-online-uncheck) !important;
}
.branch-checker input:checked ~ .online-branch-listing{
    background: var(--branch-online-check) !important;
}
.light-red{
    background: var(--lbback);
    color: var(--lbcol);
}
.directions-top, .directions{
    background: var(--dir-back);
    color: var(--lbcol);
}
body{
    color: var(--lbcol);
    background: var(--bodyback);
    z-index: -2;
}
.modal-content{
    background: var(--modback) !important;
    border: 1px solid #dc354590;
    border-radius: 10px !important;
}
div.mate {
    background: var(--matebgdef);
    border: 1px solid var(--mateborder);
}


div.shift {
    background: var(--matebgdef);
    border: 1px solid var(--mateborder);
}
.connect{
    background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.5) !important;
    border: 1px solid var(--connectborder) !important;
}
.connect.today {
    background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.75) !important;
}
.connect.pastdate, .connect.closed{
    background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.25) !important;
}
.hangout{
    background: rgba(var(--ho-r), var(--ho-g), var(--ho-b), 0.5) !important;
    border: 1px solid var(--hangoutborder) !important;
}
.hangout.today {
    background: rgba(var(--ho-r), var(--ho-g), var(--ho-b), 0.75) !important;
}
.hangout.pastdate, .hangout.closed{
    background: rgba(var(--ho-r), var(--ho-g), var(--ho-b), 0.25) !important;
}
.myconnect {
    background: rgba(var(--myc-r), var(--myc-g), var(--myc-b), 0.5) !important;
    border: 1px solid var(--myconnectborder) !important;
}
.myconnect.today {
    background: rgba(var(--myc-r), var(--myc-g), var(--myc-b), 0.75) !important;
}
.myconnect.pastdate, .myconnect.closed{
    background: rgba(var(--myc-r), var(--myc-g), var(--myc-b), 0.25) !important;
}
.legend{
    margin: 5px;
    padding: 4px;
    display: inline-block;
}
.border-green{
    border: 2px solid var(--rtborder2) !important;
}
.border-red{
    border: 2px solid var(--rtborder3) !important;
}

.connect > .background {
    color: var(--co-bg) !important;
}
.hangout > .background {
    color: var(--ho-bg) !important;
}
.myconnect > .background {
    color: var(--myc-bg) !important;
}
.info-icons{
    color: var(--fainfo);
}
.info-alert-icons{
    color: var(--fainfoalert);
}
div.shift.myconnect:not(.pastdate) .fa-info-circle, div.shift.hangout.today .fa-info-circle{
    color: white !important;
}

.card-header-red{
    background: var(--cardheader);
}
.card-body-red{
    background: var(--cardbody);
}

/*borders for RealTime*/
.rt-empty, .rt-comfortable, .rt-opens-later, .rt-party {
    border: 4px solid var(--rtborder1);
}
.rt-normal, .rt-busy, .rt-open {
    border: 4px solid var(--rtborder2);
}
.rt-full, .rt-closed, .rt-closing {
    border: 4px solid var(--rtborder3);
}
.rt-party-later, .rt-unknown, .rt-opens-online, .rt-online {
    border: 4px solid var(--rtborder4);
}
/*Backgrounds for RealTime*/
.rt-empty {
    background: var(--rtback1);
}
.rt-comfortable, .rt-normal, rt.rt-party, .rt-open {
    background: var(--rtback2);
}
.rt-busy, .rt-full, .rt-opens-later, .rt-party-later {
    background: var(--rtback3);
}
.rt-closed {
    background: var(--rtback4);
}
.rt-closing {
    background: var(--rtback5);
}
.rt-unknown {
    background: var(--rtback6);
}
.rt-opens-online {
    background: var(--rtback3);
}
.rt-online {
    background: var(--rtback2);
}

/*Branch RT stuff*/
.br-closed, .br-closing {
    color: var(--rt-close);
}
.br-opens-later, .br-party-later {
    color: var(--rt-later);
}
.br-unknown {
    color: var(--rt-unknown);
}
.br-empty, .br-comfortable, .br-party, .br-open {
    color: var(--rt-ok);
}
.br-normal {
    color: var(--rt-normal);
}
.br-busy, .br-full {
    color: var(--rt-busy);
}
.br-opens-online {
    color: var(--rt-later)
}
.br-online {
    color: var(--rt-normal);
}

/*The Sunset and Sunshine icons*/
.sunshine {
	color: var(--sunshine);
}
.sunset {
	color: var(--sunset);
}
.holiday {
    color: var(--holiday);
}

/*Buttons*/
.but-live{
    background: var(--but-live-bg);
    color: aliceblue;
    border-color: var(--but-live-border);
}
.but-sort{
    background: var(--but-sort-bg);
    color: aliceblue;
    border-color: var(--but-sort-border);
}

/*Extras*/
.modal{
    max-height: 100%;
    overflow-y: auto;
    /* -webkit-overflow-scrolling: touch !important; */
}