@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
  background-color: #D0D4DD;
  font-family: 'Roboto', 'Calibri';
}

/* The checkmark container */
.checkmarkcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  padding-top: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkmarkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: Solid 1px Silver;
}

/* On mouse-over, add a grey background color */
.checkmarkcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkmarkcontainer input:checked ~ .checkmark {
  background-color: #0ABF12;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkmarkcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkmarkcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

label {
  font-weight: unset;
  line-height: 20px;
}

.OptionButton {
  border-radius: 5px;
  Border: Solid 1px black;
  background-color: blue;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  background: #00b7ea;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#00b7ea), to(#009ec3));
  background: linear-gradient(to bottom, #00b7ea 0%, #009ec3 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=0);
  /* IE6-9 */
  min-height: 42px;
  padding: 10px;
  -webkit-box-shadow: 3px 3px 2px #888888;
          box-shadow: 3px 3px 2px #888888;
}



.ViewReportButton {
  border-radius: 5px;
  Border: Solid 1px black;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4e391+0,61c419+50,b4e391+100;Green+3D */
  background: #b4e391; /* Old browsers */
  background: -moz-linear-gradient(top,  #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
  /* IE6-9 */
  min-height: 42px;
  padding: 10px;
  -webkit-box-shadow: 3px 3px 2px #888888;
          box-shadow: 3px 3px 2px #888888;
}


.ClearDataButton {
  border-radius: 5px;
  Border: Solid 1px black;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
  background: #ff3019; /* Old browsers */
  background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
  /* IE6-9 */
  min-height: 42px;
  padding: 10px;
  -webkit-box-shadow: 3px 3px 2px #888888;
          box-shadow: 3px 3px 2px #888888;
}

.panel > .panel-heading {
  background: #5AA039;
  color: White;
  border: Solid 1px gray;
  font-Size: 14pt;
}


.panel > .panel-heading-OLD {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3897f8+0,071a7a+100 */
  background: #3897f8;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#3a99f8), to(#071a78));
  background: linear-gradient(to bottom, #3a99f8 0%, #071a78 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3897f8', endColorstr='#071a7a',GradientType=0 );
  /* IE6-9 */
  color: White;
  border: Solid 1px #0E2D8D;
  font-Size: 14pt;
}
.maintitle {
  color: White;
  font-Size: 14pt;
}

.btn-default {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  background: #00b7ea;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#00b8eb), to(#009ec2));
  background: linear-gradient(to bottom, #00b8eb 0%, #009ec2 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=0);
  /* IE6-9 */
  border-radius: 5px;
  Border: Solid 1px black;
  background-color: blue;
  Color: White;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.grid > span {
  padding: 8px 4px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.card {
  /* height:200px; */
  display: -ms-grid;
  /* display: grid; */
  -ms-grid-columns: (1fr)[8];
      grid-template-columns: repeat(8, 1fr);
  grid-gap: 10px;
  border: Solid 1px Silver;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  margin-bottom: 1.0em;
}

.cardusers {
  /* height:200px; */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[8];
      grid-template-columns: repeat(8, 1fr);
  grid-gap: 10px;
  border: Solid 1px Silver;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  margin-bottom: 1.0em;
}

.title {
  -ms-grid-column: 1;
  -ms-grid-column-span: 8;
  grid-column: 1 / 9;
  border-bottom: Solid 1px Silver;
  padding: 0.5em;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f2f2+0,e8e8e8+100 */
  background: #f2f2f2;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e8e8e8));
  background: linear-gradient(to bottom, #f2f2f2 0%, #e8e8e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e8e8e8', GradientType=0);
  /* IE6-9 */
}

.card-row {
  padding: 0.5em;
  -ms-grid-column: 1;
  grid-column: 1fr;
}

.card-rowusers {
  padding: 0.5em;
  -ms-grid-column: 1;
  grid-column: 1fr;
}

#custom-blue-button,
.blue-button {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1075d1+0,03b9fb+100 */
  background: #1075d1;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#1073d1), to(#03bafc));
  background: linear-gradient(to bottom, #1073d1 0%, #03bafc 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1075d1', endColorstr='#03b9fb', GradientType=0);
  /* IE6-9 */
  padding: 10px;
  color: black;
  border: Solid 1px Black;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  min-width: 120px;
  margin: 0.4em;
}

#custom-yellow-button,
.yellow-button {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feb612+0,fecd19+100 */
  background: #feb612;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#feb710), to(#fecd1b));
  background: linear-gradient(to bottom, #feb710 0%, #fecd1b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb612', endColorstr='#fecd19', GradientType=0);
  /* IE6-9 */
  padding: 10px;
  color: Black;
  border: Solid 1px Black;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  min-width: 120px;
  margin: 0.4em;
}

#custom-green-button,
.green-button {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0fb31f+0,18f529+100 */
  background: #0fb31f;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#0fb31f), to(#19f52b));
  background: linear-gradient(to bottom, #0fb31f 0%, #19f52b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0fb31f', endColorstr='#18f529', GradientType=0);
  /* IE6-9 */
  padding: 10px;
  color: white;
  border: Solid 1px Black;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  min-width: 120px;
  margin: 0.4em;
}

.card-footer {
  /* height:200px; */
  /* display: grid; */
  /* grid-template-columns: repeat(3, 1fr); */
  /* border-top: Solid 1px #D6D6D6; */
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1 / 5;
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  /* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; */
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

.vieworders-card-footer {
  /* height:200px; */
  /* display: grid; */
  /* grid-template-columns: repeat(3, 1fr); */
  /* border-top: Solid 1px #D6D6D6; */
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1 / 5;
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  justify-items: center;
  /* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; */
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

.AddUserButton:focus {
  outline: 0px !important;
  -webkit-appearance: none;
  color: black;
  background-color: white;
  border-radius: 5px;
  Border: Solid 1px Silver;
}

.CategoryButton 
{
  min-width:120px;
  padding:10px;
  border:solid 1px #17409E;
  margin:5px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}




.GridButton, .GridButton:focus {
  outline: 0px !important;
  -webkit-appearance: none;
  border-radius: 5px;
  Border: Solid 1px black;
  background-color: blue;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  background: #00b7ea;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#00b7ea), to(#009ec3));
  background: linear-gradient(to bottom, #00b7ea 0%, #009ec3 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
  /* IE6-9 */
  min-height: 42px;
  padding: 10px;
  -webkit-box-shadow: 3px 3px 2px #888888;
          box-shadow: 3px 3px 2px #888888;
}

.GridText {
  padding-top: 10px;
  font-size: 12pt;
  vertical-align: middle;
  min-height: 42px;
}

.MobileGridButton {
  border-radius: 5px;
  Border: Solid 1px black;
  background-color: blue;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  background: #00b7ea;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#00b7ea), to(#009ec3));
  background: linear-gradient(to bottom, #00b7ea 0%, #009ec3 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
  /* IE6-9 */
  min-height: 42px;
  padding: 10px;
  -webkit-box-shadow: 3px 3px 2px #888888;
          box-shadow: 3px 3px 2px #888888;
}

/* SMALLER / Phone Screens  */
@media (max-width: 700px) {
  .panel-heading {
    background: lime;
  }
  .card {
    /* height:200px; */
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    border: Solid 1px Silver;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  }
  .cardusers {
    /* height:200px; */
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    border: Solid 1px Silver;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  }
  .card-footer {
    /* height:200px; */
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* border: Solid 1px #D6D6D6; */
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-column: 1 / 7;
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    /* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; */
    padding-bottom: 0.5em;
    padding-top: 0.5em;
  }
  .card-row {
    padding: 0.5em;
    -ms-grid-column: 1;
    -ms-grid-column-span: 8;
    grid-column: 1 / 9;
  }
  .card-rowusers {
    padding: 0.5em;
  }
  #custom-blue-button,
  .blue-button {
    min-width: 80px;
    margin: 0.2em;
  }
  #custom-yellow-button,
  .yellow-button {
    min-width: 80px;
    margin: 0.2em;
  }
  #custom-green-button,
  .green-button {
    min-width: 80px;
    margin: 0.2em;
  }
}


@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { /*color: red;*/ } /*your css rules for ipad portrait */
  .panel > .panel-heading {
    /* background: purple; */
  }
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  /* .ipad-landscape { color: blue; } your css rules for ipad landscape */
  /* .panel > .panel-heading {
    background: orange;
  } */
}


@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  /* .ipad-landscape { color: blue; } your css rules for ipad landscape */
  /* .panel > .panel-heading {
    background: blue;
  } */

}


@media (min-width: 768px) {
  .modal-content {

    width:100%;
    margin-left:2px;
    margin-right:2px;
    background-color: white;

  }
}

@page {
  size: auto;
  margin: 0mm;
}

@media print {
  header nav,
  footer, .panel-heading, button {
    display: none;
  }
  .panel-body {
    border: 0px;
  }
  .card {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0) !important;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0) !important;
  }
  .cardusers {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0) !important;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0) !important;
  }
  .panel {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0) !important;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0) !important;
    border: 0px;
  }
}

.blackButton
{
  border:solid 1px black;border-radius:5px;
  background: rgb(117,117,117);
  background: linear-gradient(180deg, rgba(117,117,117,1) 0%, rgba(87,87,87,1) 100%);
}

.CategoryButtonBlack {
  min-width:120px;
  padding:10px;
  border:solid 1px #17409E;
  margin:5px;
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
  border:solid 1px black;border-radius:5px;
  background: rgb(117,117,117);
  background: linear-gradient(180deg, rgba(117,117,117,1) 0%, rgba(87,87,87,1) 100%);
}


.menuButton {
  /* min-width:120px; */
  /* padding:10px; */
  border:solid 1px white;
  /* margin:5px; */
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
  border:solid 1px black;border-radius:5px;
  background: rgb(117,117,117);
  background: linear-gradient(180deg, rgba(117,117,117,1) 0%, rgba(87,87,87,1) 100%);
  color:white;
}


/*# sourceMappingURL=styles.css.map */