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



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

    font-style: normal;
}

.roster_container
{
    min-width: 1840px;
    font-size: 0.9em;
    scrollbar-gutter: stable;

}

#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;
    scrollbar-gutter: stable;
    overflow-y: hidden;
    min-width: 1880px;
    text-overflow: ellipsis;
    font-size: 0.9em;
}

.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+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX05rUGYwWSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjQuNSIgaGVpZ2h0PSI0LjUiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgxMzUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI0LjUiIHN0cm9rZT0iI0Y5MzMxRCIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX05rUGYwWSkiIG9wYWNpdHk9IjEiLz48L3N2Zz4='), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzU1OTRlNycgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=");
   background-position: right, left;
   background-size: 4px 100%, auto;
   background-repeat: repeat-y, repeat;
   font-style: italic;
   padding-right: 5px;
}

/* 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=');
background-size: 4px 100%;
background-position: right;
background-repeat: repeat-y;
font-style: italic;
padding-right: 5px;
}

/* 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=');


   background-size: 4px 100%;
   background-position: right;
   font-style: italic;
   background-repeat: repeat-y;
   padding-right: 5px;
}