/**
 * Suite css
 * css elements global within the suite
 * 2022-10-14 kc  AC-68     created new suite-btn-300
 * 2022-05-05 jd  COMSC-353 badgerow/badge styling
 * 2021-11-04 kc  COMSC-319 added new glyph-25 size, moved pageTitle and pageDescription to site.css
 * 2021-10-21 jd  COMSC-316 new color vars
 * 2021-10-13 jd  COMSC-313 added binding-box-loader-m to allow loader-m horizontal centering
 * 2021-10-07 jd  COMSC-312 added suite glyph custom size, btn width
 * 2021-09-29 jd  AC-18     added top margin for media
 * 2021-09-23 jd  COMSC-309 added css variables, removed styling rules
 * 2021-06-22 kc  COMSC-302 added suite-alert for suite alert formatting
 * 2021-05-04 kc  COMSC-271 renamed imgGlyph -> menuIconImg, renamed imgMenu -> mainIconImg
 * 2021-04-30 kc  COMSC-271 added menuIcon, imgGlyph, imgMenu from site.css
 * 2020-06-04 jd  COMSC-178 added a bootstrap override for hr
 * 2018-10-09 jd  COMSC-126 siteStatus styles
 * 2018-08-23 jd  COMSC-100 #tblPersonalDevices added to table border style rules
 * 2017-12-06 kc  COMSC-84  added red, suite-searchSiteDropdown, suite-inline, suite-hide
 * 2017-11-22 jd  COMSC-46  removed tblConnectedSites styling
 * 2017-10-25 jd  COMSC-45  tblConnectedSites styling
 */

/* colours */
:root {
  --suiteGreen: #149940;
  --suiteRed: #e51b24;
  --suiteOrange: #f28119;
  --suiteGrey: #6e6f72;
  --suiteBlue: #0c2c8f;
  --suiteYellow: #ff9900;
  --suiteLightBlue: #1baded;
  --suiteRowSpacer : 5px
}

.suiteGreen {
  color: var(--suiteGreen);
}

.suiteRed {
  color: var(--suiteRed);
}

.suiteOrange {
  color: var(--suiteOrange);
}

.suiteGrey {
  color: var(--suiteGrey);
}

.suiteBlue {
  color: var(--suiteBlue);
}

.suiteYellow {
  color: var(--suiteYellow);
}

.suiteLightBlue {
  color: var(--suiteLightBlue);
}

/* Structural elements */

/* Body - Move down content because we have a fixed navbar that is 60px tall */
body {
  padding-top: 78px;
}

/* Footer */
.suite-footer {
  padding: 20px 0;
  border-top: 1px solid;
}
.suite-footer p:last-child {
  margin-bottom: 0;
}

/* Menu */
#menuContent
{
  display:none; /* hidden on load */
}

/* customise menu icons */
.menuIcon
{
  color: #000000;
  text-align: center;
}

.menuIconImg
{
  height: 25px;
}

.mainIconImg
{
  height: 100px;
}

/* Content styling */

.loginBox
{
  background-color: #ffffff;
  opacity: 0.85;
  filter: alpha(opacity=85); /* For IE8 and earlier */
}

/* Alert dialogues */
.suite-alert
{
  top: 80px;
  left: 0px;
  width: 100%;
}

/* Font colours */
.white
{
  color: #FFFFFF;
}

.black
{
  color: #000000;
}

.red
{
  color: #DD0000;
}

/* glyphicons common */

.glyph-right {
  float: right;
}

/* Glyphicon sizes */
.glyph-xs {font-size: 0.6em;}
.glyph-s  {font-size: 0.8em;}
.glyph-l  {font-size: 1.2em;}
.glyph-xl {font-size: 1.4em;}
.glyph-xxl {font-size: 1.6em;}
.glyph-25 {font-size: 2.5em;}
.glyph-gl, .ioicon { font-size: 5em; }
.glyph-ml, .glyph-suite-ml{font-size: 10em;}


/* loading spinner */
.loader-l {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #999999;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader-m {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #999999;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader-s {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #999999;
  width: 25px;
  height: 25px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader-xs {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid #999999;
  width: 14px;
  height: 14px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.binding-box-loader-m {
  width: 50px;
  margin: auto;
}



.suite-searchSiteDropdown
{
  width: 90%;
  font-size: 1.2em;
  float:right;
}

.suite-inline
{
  display: inline;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* hidden */
.suite-hide
{
  display: none;
}

@media (max-width: 768px) {
  [class*="col-"] {
    margin-bottom: 2px;
    margin-top: 2px;
  }
}

#tblConnectedSites, #tblAccessPerms, #tblSiteNoti, #tblPersonalDevices {
  border: 1px #dddddd solid;
}

/* button widths */
.suite-btn-100 {
  width: 100px;
}
.suite-btn-300 {
  width: 300px;
}

/* bootstrap overrides */
.hr-override {
  margin: 0;
  border-width: 2px;
}

/* badge modifier */
.suiteRowSpacer {
  margin-top: var(--suiteRowSpacer);
}

.badgeAction {
  background-color: var(--colourminor);
}