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



#roster_container
{
    min-width: 1840px;
    scrollbar-gutter: stable;

    overflow-y: scroll;
}

#date_container
{
    min-width: 1840px;
    scrollbar-gutter: stable;

    overflow-y: scroll;
}

#roster_all
{
    font-family: 'DejaVu Sans Mono','djvumono','monospace';
    font-style: normal;

    display: grid;
    margin-top: 5px;
    font-size: 12px;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,max-content) auto auto;
    grid-template-areas:
        'header'
        'main'
        'footer';
}

@media (min-width:1900px)
{
    #roster_all
    {
        font-size: 13px;
    }
}

@media (min-width:2000px)
{
    #roster_all
    {
        font-size: 14px;
    }
}

@media (min-width:2100px)
{
    #roster_all
    {
        font-size: 15px;
    }
}



#roster_all .header
{
    grid-area: header;
}

#roster_all .rmain
{
    grid-area: main;
    overflow: auto;
}

#roster_all .footer
{
    grid-area: footer;
    overflow: auto;
    max-height: 100px;
    border-top: 1px solid black;
    align-self: end;
}

.roster_line
{
    display: grid;
    line-height: 1.5em;
    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: 1840px;
    text-overflow: ellipsis;
}

#rgap
{
    scrollbar-gutter: stable;
    overflow-y: hidden;
    min-width: 1840px;
}

.rgap_topline
{
    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;
    padding-left: 2px;
}

.counter_line
{
    display: grid;
    line-height: 1.5em;
    grid-template-columns: 3fr repeat(28,minmax(0,1fr)) repeat(4,minmax(0,1fr));
    grid-template-rows: 1fr;
    grid-template-areas:
        "counterbox cb0 cb1 cb2 cb3 cb4 cb5 cb6 cb7 cb8 cb9 cb10 cb11 cb12 cb13 cb14 cb15 cb16 cb17 cb18 cb19 cb20 cb21 cb22 cb23 cb24 cb25 cb26 cb27 nb1 nb2 nb3 nb4";
    align-content: stretch;
    xscrollbar-gutter: stable;
    xoverflow-y: hidden;
    min-width: 1840px;
    text-overflow: ellipsis;
}

.counterbox
{
    grid-area: counterbox;
    display: inline-grid;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    padding-left:2px;
}

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

.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;
    padding-left: 2px;
}

.namebox
{
    grid-area: namebox;
    display: inline-grid;
    grid-template-columns: repeat(3,3fr);
    grid-template-rows: 1fr 3px;
    grid-template-areas:
        "nb_name nb_name nb_name"
        "nb_bar1 nb_bar2 nb_bar3";
    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: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 2px;
}

.name_bar
{
    height: 3px;
    background-color: transparent;
    border-top: 1px solid #999999;
    border-right: 1px solid #999999;
}

.name_bar:last-of-type
{
    border-right: none;
}

.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;

}

.flag
{
    background-color: transparent;
    /* height: 100%; */
    border-top: 1px solid #999999;
    border-right: 1px solid #999999;
}

.flag:last-of-type
{
    border-right: none;
}

.flag1
{
    background-color: yellow;
}

.flag2
{
    background-color: #ff00ff;
}

.flag3
{
    background-color: #00ffff;
}
.flag4
{
    background-color: black;
}
.flag5
{
    background-color: #ff7519;
}

.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;
}

.iswrapper
{
    display: grid;
}

.dispn
{
    display: none;
}

.bgyellow { background-color: yellow !important; }
.bgblue   { background-color: blue; }
.bgpurple { background-color: purple; }
.bgcyan   { background-color: #00ffff; }
.bgmagenta { background-color: magenta; }
.bgblack  { background-color: black; }
.bgred    { background-color: red; }

.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 {
   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;
}

.stripeoverag {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX05rUGYwWSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjQuNSIgaGVpZ2h0PSI0LjUiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgxMzUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI0LjUiIHN0cm9rZT0iIzJBMURGOSIgc3Ryb2tlLXdpZHRoPSI1Ii8+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 {
   /* 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 {
  /*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;
}