/* Framework CSS */














.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(4, 1fr);
  gap: 10px;
}


















hr {
  height: 1px;
  color: #e0e0e0;
}

/* div {  text-align: left;  } */

ul li {  list-style-type: square;  }

footer ul li {  list-style-type: none;  }

img {  border: 0;  }
img.img20,
img.img40,
.icon12,
.icon16,
.icon24,
.icon32 {
  display: inline-block;
  vertical-align: middle;
}

img.img20 {  width: 20px; height: 20px; padding: 3px 8px 3px 0;  }
img.img40 {  width: 40px; height: 40px; padding: 3px 2px;  }

.reporter-options-cell {
  white-space: nowrap;
}

.reporter-options-cell a,
.reporter-options-cell img {
  display: inline-block;
  vertical-align: middle;
}



select {  height: 1.6em;  }




a:not(.btn):link,
a:not(.btn):active,
a:not(.btn):visited {
  color:#003399;
  text-decoration:none;
}

a:not(.btn):hover {
  color:#CC0000;
/*  text-decoration:underline; */
}




.small {  font-size: smaller;  }

.large {  font-size: larger;  }

.bold, b {  font-weight: bold;  }

.grey {  color: #999999;  }

.normal {
  font-family: arial;
  font-size: small;
  font-weight: normal;
  color: #333333;
}

.inactive {
  color: #999999;
  cursor: not-allowed;
}

.right, .numright {
  text-align: right;
}

.numright {
  padding-right: 8px;
}

.center, .centre {
  text-align: center;
}

.zero {
  margin: 0;
  padding: 0;
}

optgroup {
  font-style: normal;
}




/* Classes */

.textsmall {
  font-size: xx-small;
  font-weight: normal;
}

.textmed {
  font-size: x-small;
}

.b, .b1 { font-weight: bold; }
.i, .i1 { text-style: italic; }
.u, .u1 { text-decoration: underline; }

.b0 { font-weight: normal; }
.i0 { text-style: none; }
.u0 { text-decoration: none; }

/* Some colours */
.blue  {  color: #006699;  }
.green {  color: #006633;  }
.red   {  color: #cc3333;  }

.border0  {  border: 0;    }
.border1  {  border: 1px;  }

.readonly  {
  background-color: #f0f0f0;
  padding: 2px;
  border: 1px solid #909090;
}


.bg-pale-grey {  background-color: #f0f0f0;  }
.bg-mid-grey  {  background-color: #c0c0c0;  }
.bg-dark-grey {  background-color: #606060;  }


/* Control bar specific styles */
.control-bar {  line-height: 300%;  }
.control-bar div {  display: inline; white-space: nowrap;  }




/* A wrapper for buttons */
p.buttons, div.buttons, .buttonrow {
  line-height: 40px;
}



/* Base button styles for <a class="button"> */
a.button, a.button_light, a.button_inline {
  display: inline-block;
  margin: 2px 4px 2px 0;
  text-decoration: none;
  font-weight: 300;
  font-family: inherit;
  font-size: 1rem;
}

a.button_inline {
  margin: 1px 2px 1px 0;
  font-size: 0.8rem;
}


a.button span, a.button_light span, a.button_inline span {
  border-radius: 4px;
  padding: 0.6em 1.2em;
  color: white;
  background-color: #545b62;
  transition: background-color 0.2s ease-in-out;
}

a.button_light span {
  background-color: #545b62;
}

a.button_inline span {
  padding: 0.2em 0.6em;
}

/* Colour-specific styles */
a.button .green,
a.button_light .green,
a.button_inline .green {
  background-color: #2e8b57; /* SeaGreen */
}

a.button .blue,
a.button_light .blue,
a.button_inline .blue {
  background-color: #0077cc; /* Moderate blue */
}

a.button .red,
a.button_light .red,
a.button_inline .red {
  background-color: #cc3333; /* Tomato red */
}

a.button .grey,
a.button_light .grey,
a.button_inline .grey {
  background-color: #6c757d; /* Neutral grey */
}

/* Hover effect: darken */
a.button:hover .green,
a.button_light:hover .green,
a.button_inline:hover .green {
  background-color: #276f49;
}

a.button:hover .blue,
a.button_light:hover .blue,
a.button_inline:hover .blue {
  background-color: #005fa3;
}

a.button:hover .red,
a.button_light:hover .red,
a.button_inline:hover .red {
  background-color: #992222;
}

a.button:hover .grey,
a.button_light:hover .grey,
a.button_inline:hover .grey {
  background-color: #545b62;
}

/* Button light variant – softened text colour and reduced contrast */
a.button_light .green,
a.button_light .blue,
a.button_light .red,
a.button_light .grey,
a.button_light span {
  opacity: 0.75;
}

/* Optional: slightly restore contrast on hover */
a.button_light:hover .green,
a.button_light:hover .blue,
a.button_light:hover .red,
a.button_light:hover .grey,
a.button_light:hover span {
  opacity: 1;
}


/* Fix focus and ensure consistency */
a.button:focus,
a.button_light:focus,
a.button_inline:focus {
  outline: none;
}

a.button:focus span,
a.button_light:focus span,
a.button_inline:focus span {
  outline: 2px solid #000;
  outline-offset: 2px;
  border-radius: 4px;
}







/* Formatting for icons */

.icon12, .icon16, .icon24, .icon32 {
  margin:0 4px 1px 1px;
  border:0;
}

.icon12 {
  width:12px;
  height:12px;
}


.icon16 {
  width:16px;
  height:16px;
}

.icon24 {
  width:24px;
  height:24px;
}

.icon32 {
  width:32px;
  height:32px;
}


.block_menu_app {
  font-family: "Varela Round", arial, helvetica, sans-serif;
  padding:8px;
  margin-bottom:20px;
  background-color:#f7f7f7;
  border-radius: 7px;
}

.block_menu_app:hover {
  background-color:#f0f0f0;
}

.block_menu_app p {
  margin:.2em;
}

.block_menu_app strong {
  font-weight:normal;
  font-size:x-large;
}


.block_login_form {
  border:1px solid #e0e0e0;
  background-color:#f7f7f7;
  padding:8px;
  margin-bottom:20px;
  background-image:url(../images/common/background_fade.jpg);
  background-position:top;
  background-repeat:repeat-x;
}





.startup_message {
  width:420px;
  margin:60px auto 60px auto;
  padding:40px 20px 40px 20px;
 /* border:1px solid #f0f0f0; */
  text-align:center;
/*  background-color:#ffffff;
/*  background-image:url(../images/common/background_startup.jpg);
  background-position:top;
  background-repeat:repeat-x; */
}


/* CSS FOR SPECIFIC FEATURES */

/* Multi-select boxes using checklists */

/* Undo some styles from the master stylesheet */
.multicheckbox li { background: none; padding-left: 0; }

/* CSS for checklists */
.multicheckbox {
  /* border: 1px solid #cccccc; */
  list-style: none;
  overflow: auto;
}
.multicheckbox, .multicheckbox li { margin: 0; padding: 0; }
.multicheckbox label { display: block; padding: 0 0.2em 0 25px; text-indent: -25px; }
.multicheckbox label:hover, .multicheckbox label.hover { background: #999999; color: #ffffff; }
* html .multicheckbox label { height: 1%; }


.select_fixed_width {
  font-family:'Lucida Console', Monaco, monospace;
  margin-top: 0.1em;
  margin-bottom: 0.2em;
  margin-left:0;
}



.transparent50 {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}


/* THUMBNAILS */
.thumbnail_grid {  list-style-type:none;  }
ul.thumbnail_grid li {
  float: left;
  width: 15%;
  margin: 0 5% 5% 0;
}
ul.thumbnail_grid li:nth-child(5n) {  margin-right: 0;  }
ul.thumbnail_grid li a img {  width: 100%;  }



/* CALENDAR */
.cal_weekdaycellclass {
  background-color:#f7f7f7;
}

.cal_weekendcellclass {
  background-color:#e7e7e7;
}

.cal_cell     {  background-color:#f0fff7;  }
.cal_cell_old {  background-color:#fff0f0;  }

.cal p {
  margin:0 0 8px 0;
  padding:0;
  float:left;
}








.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  font-size:smaller;
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 4px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}


.icon_checkbox_on {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAA8ElEQVR4Ae3XAQYCURhF4bOFUGoFIRgYGBC0lCAhQACC2Ua1hFpTwVQkkuBFMrjM4HWDvPtDYc4HqCEtzb4+e06EyDuxp0/LOhwJX96RLo1bEwy3pXGVBahoXPhc7PT5BPwJMGLqBTR/ITD/FZC986EmzEDGtX5i6QdyzXuBnJvmnUCheS9QcNd8LDBjiG6s+XhgQaBiJPmH5mOB1efzhaw9HwuU9bcrOQATzccDCHGjYMJT8t8BQtwlbwCEkLwNgFLzbgBKydsBKCXvAYRYph/9/wAOBMMdfv33fUPjepYXkA4tG7DjHB0/s2OAeWlpL853ZhAcglrIAAAAAElFTkSuQmCC);
  width:16px;
  height:16px;
}

.icon_checkbox_off {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAbElEQVR4Ae3XoRWAMBAE0WkBAQ+6B0qAmsAkqeEw2DXhcPtXJ2MTzNLNnFSic5WTGbSBm/i4mxFpJRK2I5WUQEGKd730eQcccMABBxxwwAHBAQeEi0jY9ffzfUOaUj4gA2gLB6378sbBQjKzB/T87xaMP8L1AAAAAElFTkSuQmCC);
}

/* .icon_checkbox_on {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}  */





#password_complexity,
#password_match {
  font-size:smaller;
  margin:10px 0;
}

#password_complexity p,
#password_match p {
  margin:0;
}

#password_complexity_title {
  font-weight:bold;
}

#password_complexity_chars,
#password_complexity_letters,
#password_complexity_numbers,
#password_complexity_uc_lc,
#password_match_message {
  display: list-item;
  list-style-type: circle;
  list-style-position: inside;
  color:#cc0000;
}




.link-cloud {
  padding: 12px;
  text-align: center;
  line-height:3em;
}

.link-cloud div {
  display:inline;
  white-space: nowrap;
  background-color: #f7f7f7;
  border: 1px solid #999999;
  padding: 0.4em;
  margin: 1em;
  color:#333333;
  border-radius: 4px;
}
