/*
    Created on : 9 Jul. 2022, 12:54:23 pm
    Author     : vark
*/



body
{
    font-family: 'Noto Sans Mono';

    font-style: normal;
}

.roster_container
{
    min-width: 1880px;
    font-size: 0.9em;

}

#roster
{
    display: grid;
    height: 500px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'header'
        'main'
        'footer';
}

#roster > .header
{
    grid-area: header;
}

#roster > .main
{
    grid-area: main;
    overflow: auto;
}

roster > .footer
{
    grid-area: footer;
}

.roster_line
{
    display: grid;
    grid-template-columns: 3fr repeat(28,minmax(0,1fr)) repeat(4,minmax(0,1fr));
    grid-template-rows: 1fr;
    grid-template-areas:
        "namebox sb0  sb1  sb2  sb3  sb4  sb5  sb6 sb7  sb8  sb9  sb10 sb11 sb12 sb13 sb14 sb15 sb16 sb17 sb18 sb19 sb20 sb21 sb22 sb23 sb24 sb25 sb26 sb27 cb1 cb2 cb3 cb4";
    align-content: stretch;
}

.date_line
{
    display: grid;
    grid-template-columns: 3fr repeat(28,minmax(0,1fr)) repeat(4,minmax(0,1fr));
    grid-template-rows: 1fr;
    grid-template-areas:
        "linkbox db0  db1  db2  db3  db4  db5  db6 db7  db8  db9  db10 db11 db12 db13 db14 db15 db16 db17 db18 db19 db20 db21 db22 db23 db24 db25 db26 db27 xb1 xb2 xb3 xb4";
    align-content: stretch;
}

.linkbox
{
    grid-area: linkbox;
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    overflow: hidden;
}

.dbe
{
    border-right: 1px solid gray;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    overflow: hidden;
    text-align: center;
}

.c1
{
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: center;
}

.c2
{
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: center;
}

.d1
{
    border-right: 1px solid gray;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: center;
}

.d2
{
    border-right: 1px solid gray;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: center;
}

.groupline
{
    grid-area: namebox/cb4;
    background-color: orange;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

.namebox
{
    grid-area: namebox;
    display: inline-grid;
    grid-template-columns: repeat(2,3fr);
    grid-template-rows: 1fr 3px;
    grid-template-areas:
        "nb_name nb_name"
        "nb_bar1 nb_bar2";
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    overflow: hidden;
}

.roster_line:first-of-type
{
    border-top: 1px solid gray;
}



.name
{
    grid-area: nb_name;
    color: purple;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.name_bar1
{
    height: 3px;
    background-color: transparent;
    grid-area: nb_bar1;
    border-top: 1px solid #999999;
}

.name_bar2
{
    height: 3px;
    background-color: transparent;
    grid-area: nb_bar2;
    border-top: 1px solid #999999;
}

.sb
{
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    grid-template-rows: 1fr 3px;
    grid-template-areas:
        "shiftname shiftname shiftname shiftname shiftname"
        "sbar sbar sbar sbar sbar";
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

.sb_bbox
{
    grid-area: sbar;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: 3px;
    grid-template-areas:
        "sbar1 sbar2 sbar3 sbar4 sbar5";

}

.sb_barr
{
    grid-area: sbarr;
    align-content: stretch;
    background-color: red;
    width: 2px;
    border-left: 1px solid #999999;
    border-right: 1px solid gray;

}

.flag1
{
    grid-area: sbar1;
    background-color: blue;
    height: 2px;
    border-top: 1px solid #999999;
}

.flag2
{
    grid-area: sbar2;
    background-color: black;
    height: 2px;
    border-top: 1px solid #999999;
}

.flag3
{
    grid-area: sbar3;
    background-color: yellow;
    height: 2px;
    border-top: 1px solid #999999;
}
.flag4
{
    grid-area: sbar4;
    background-color: #00eeee;
    height: 2px;
    border-top: 1px solid #999999;
}
.flag5
{
    grid-area: sbar5;
    background-color: #d2691e;
    height: 2px;
    border-top: 1px solid #999999;
}
.shiftname
{
    grid-area: shiftname;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;

}

.roster_groupbox
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: stretch;
    grid-template-areas:
        "groupbox";
}

.groupbox
{
    background-color: orange;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

.dispn
{
    display: none;
}

.bgyellow { background-color: yellow !important; }
.bgblue   { background-color: blue; }
.bgpurple { background-color: purple; }
.bgblack  { background-color: black; }

.weekend  { background-color: bisque;  } /* #f0e0d0; on original eRoster/vRoster display */

/* I'm on GRTW stripe */

.stripeover {
   z-index: 500;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzU1OTRlNycgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=");
   background-repeat: repeat;
}

/* GRTW with fshift */

.stripeoverf {
   z-index: 500;
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1ZPcGh4MyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjUiIHN0cm9rZT0iI0U0MzgxOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1ZPcGh4MykiIG9wYWNpdHk9IjEiLz48L3N2Zz4='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1ZPcGh4MyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjUiIHN0cm9rZT0iI0U0MzgxOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1ZPcGh4MykiIG9wYWNpdHk9IjEiLz48L3N2Zz4='), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzU1OTRlNycgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=");
   background-position: left, right, left;
   background-size: 5px, 5px, auto;
   background-repeat: no-repeat, no-repeat, repeat;
   font-style: italic;
}

/* Stripe pattern for a shift from another department */

.fshift {
   z-index: -500;
   /* background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1ZPcGh4MyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjUiIHN0cm9rZT0iI0U0MzgxOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1ZPcGh4MykiIG9wYWNpdHk9IjEiLz48L3N2Zz4='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1ZPcGh4MyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjUiIHN0cm9rZT0iI0U0MzgxOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1ZPcGh4MykiIG9wYWNpdHk9IjEiLz48L3N2Zz4='); */

  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX05rUGYwWSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjQuNSIgaGVpZ2h0PSI0LjUiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgxMzUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI0LjUiIHN0cm9rZT0iI0Y5MzMxRCIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX05rUGYwWSkiIG9wYWNpdHk9IjEiLz48L3N2Zz4='),url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX05rUGYwWSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjQuNSIgaGVpZ2h0PSI0LjUiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgxMzUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI0LjUiIHN0cm9rZT0iI0Y5MzMxRCIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX05rUGYwWSkiIG9wYWNpdHk9IjEiLz48L3N2Zz4=');
background-size: 5px;
background-position: left, right;
background-repeat: no-repeat;
font-style: italic;
}

/* Stripe pattern for a shift in another group */

.agshift {
   z-index: -500;
  /*background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1ZPcGh4MyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjUiIHN0cm9rZT0iIzE4MThFNCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1ZPcGh4MykiIG9wYWNpdHk9IjEiLz48L3N2Zz4='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1ZPcGh4MyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjUiIHN0cm9rZT0iIzE4MThFNCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1ZPcGh4MykiIG9wYWNpdHk9IjEiLz48L3N2Zz4=');*/

  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX05rUGYwWSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjQuNSIgaGVpZ2h0PSI0LjUiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgxMzUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI0LjUiIHN0cm9rZT0iIzJBMURGOSIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX05rUGYwWSkiIG9wYWNpdHk9IjEiLz48L3N2Zz4='),url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX05rUGYwWSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjQuNSIgaGVpZ2h0PSI0LjUiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgxMzUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI0LjUiIHN0cm9rZT0iIzJBMURGOSIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX05rUGYwWSkiIG9wYWNpdHk9IjEiLz48L3N2Zz4=');


   background-size: 5px;
   background-position: left, right;
   font-style: italic;
   background-repeat: no-repeat;
}