/**
 * Suite css
 * css elements global within the suite
 * Updates
 * 2025-06-23 kc  COMSC-462   added suite-btn-wrap-spacer
 * 2025-05-30 kc  CTRLRM-15   added siteLogoShadow
 * 2025-04-07 kc  BURPROD-20  moved suiteColourLink here
 * 2025-03-07 jd  BURPROD-12  new style rule suite-container-scroll-x, allows element content to horizontal scroll
 * 2025-03-06 kc  BURPROD-18  fixed flex code
 * 2025-02-26 kc  BURPROD-18  updated gold tile, added x-tile-font classes, added flex functionality
 * 2025-01-05 kc  BURPROD-13  added tile colours here, removed from site.css (should only be there if customising)
 * 2024-12-12 jd  COMSC-428   added suite-min-h60
 * 2024-07-24 kc  CTRLRM-17   added menuSectionHeading, menuSeparator, menuLogoIcon
 * 2023-07-18 jd  COMSC-295   added suite-btn-150
 * 2023-06-28 kc  COMSC-382   added text colour to badgeAction
 * 2023-04-17 jd  COMSC-343   missing closing bracket
 * 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) !important;
}

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

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

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

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

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

.suiteTextColour {
  color: var(--colourbackgroundtxt);
}

.suiteColourLink {
  color: var(--colourlink);
}

/* 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: var(--colourbackgroundtxt);
  text-align: center;
}

.menuIconImg
{
  height: 25px;
  color: var(--colourbackgroundtxt);
}

.mainIconImg
{
  height: 100px;
}

.menuSectionHeading
{
  margin: 15px 0px 0px 0px;
  padding-bottom: 0px;
  font-size: 0.95em;
  opacity: 0.8;
}
.menuSeparator
{
  margin: 0px;
  overflow: hidden;
  border-color: var(--colourbackgroundtxt);
  opacity: 0.3;
}
.menuLogoIcon
{
  height: 30px;
}

.siteLogoShadow
{
  filter: drop-shadow(2px 2px 5px var(--colourbackground));
}

/* tile colours */
.gold-tile {
  background: linear-gradient( 90deg, #995c00 0%, #ffc163 10%, #ff9900 15%, #ff9900 50%, #ff9900 85%,#ffc163 90%, #995c00 100%);
  color: white;
}
.gold-tile-font {
  color: #ff9900;
}

.silver-tile {
  background: linear-gradient( 90deg, #787878 0%, #a0a0a0 10%, #c0c0c0 15%, #c0c0c0 50%, #c0c0c0 85%,#a0a0a0 90%, #787878 100%);
  color: white;
}
.silver-tile-font {
  color: #c0c0c0;
}

.bronze-tile {
  background: linear-gradient( 90deg, #844414 0%, #cf7d52 25%, #fcd5be 50%, #cf7d52 75%, #844414 100%);
  color: white;
}
.bronze-tile-font {
  color: #fcd5be;
}


.red-tile {
  background-color: var(--suiteRed);
  color: white;
}
.red-tile-font {
  color: var(--suiteRed);
}

.grey-tile {
  background-color: var(--suiteGrey);
  color: white;
}

.nav-tile {
  background-color: var(--colourmajor);
}

/* 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;
  }
}

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

.suite-btn {
  width: 100px;
}
.suite-btn-150 {
  width: 150px;
}
.suite-btn-300 {
  width: 300px;
}
.suite-btn-wrap-spacer {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* bootstrap overrides */
.hr-override {
  margin: 0;
  border-width: 1px;
  background-color: var(--colourborder);
}

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

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

/* table */
.suite-container-scroll-x {
  overflow-x: scroll;
}

/* min-heights*/
.suite-min-h60 {
  min-height: 60px;
}

/* flexbox defines
Notes: row-flex may be all you need, however col-flex is also available for usage
eg usage
<div class="row row-flex">
    <div class="col-md-6 col-flex">
          <!-- Content -->
    </div>
    <div class="col-md-6 col-flex">
          <!-- Content -->
    </div>
</div>
*/
.row-flex {
  display: flex;
  flex-wrap: wrap;
}

.col-flex {
  display: flex;
  flex-grow: 1;
}