.announcements-page
{
   display: flex;
   flex-direction: column;
   height: 100%;
}

.announcements-page > .grids { flex: 1 1 auto; display: flex; flex-direction: row; }
.grid-caption { font-size: 1.4em; font-weight: bold; display: flex; justify-content: center; margin-bottom: .5em; }
.announcements-page > .grids > .notices { flex: 1 1 50%; color: black; margin-right: 1em; padding: .5em; border: none; }
.announcements-page > .grids > .dailies { flex: 1 1 50%; color: black; margin-left: 1em; padding: .5em; }

.createlink
{
   font-size: 1em;
   color: blue;
   margin-bottom: .5em;
}
   .announcements-editform
   {
      visibility: hidden;
      position: absolute;
      background: white;
      border: 2px solid #3c3c3c;
      color: black;
      z-index: 100;
      width: 50%;
      height: 50%;
      padding: 20px;
   }

   .dimmer
   {
      background: #000;
      position: absolute;
      opacity: .5;
      top: 0;
      z-index: 99;
   }

.announcements-editform > fieldset > .form-ctrl
{
   display: flex;
   margin: .5em 1em;
}

.announcements-editform > fieldset > .form-ctrl > label
{
   flex: 1 0 1em;
}

   .announcements-editform > fieldset > .form-ctrl > input,
   .announcements-editform > fieldset > .form-ctrl > textarea
   {
      flex: 4 0 auto;
   }

   .form-btn-bar
   {
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5em;
   }

      .form-btn-bar > button
      {
         margin-left: 1em;
         margin-right: 1em;
      }

.angrid
{
   display: flex;
   flex-direction: column;
   height: calc(100vh - 170px);
   margin-top: .5em;
   overflow-y: auto;
   text-align: center;
   border: 1px solid #cdcdcd;
}

.angrid-hdr
{
   display: flex;
   flex-direction: row;
   font-weight: bold;
   background-color: blue;
   color: white;
}

.angrid-row
{
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #808080;
}

.andgrid-row:nth-child(2n+1)
{
   background-color: #dcdcdc;
}

.grid-col0 { display: flex; width: 50%; padding: 0.25em; }
.grid-col1 { display: flex; width: 20%; padding: 0.25em; }
.grid-col2 { display: flex; width: 20%; padding: 0.25em; }
.grid-col3 { display: flex; width: 10%; padding: 0.25em; }

.angrid-row:hover
{
   background-color: green;
   color: white;
}

.grid-col3 > img
{
   margin-right: 10px;
   width: 18px;
   height: 18px;
}