*                                                         { box-sizing:border-box; }

body                                                      { user-select: none; font-family:'montserratregular', Arial, sans-serif; color: #544c3f;  background-color:#fff; margin:0; font-size:1em; }

#loading_screen                                           { display:none; position:fixed; left:0; top:0; right:0; bottom:0; height:100vh; line-height:100vh; background:#fbfbfb; z-index:1000; text-align:center; }

h1, p.h1                                                  { margin:0 0 20px 0; font-size:40px; line-height:1.2em; text-decoration: none; text-transform:uppercase; font-style:normal; font-weight:normal; font-family:'Evogria', Arial, sans-serif; position:relative; }
h2, p.h2                                                  { margin:0 0 20px 0; font-size:30px; line-height:1.2em; text-decoration: none; text-transform:uppercase; font-style:normal; font-weight:normal; font-family:'Evogria', Arial, sans-serif; }
h3, p.h3                                                  { margin:0 0 15px 0; font-size:24px; line-height:1.2em; text-decoration: none; text-transform:uppercase; font-style:normal; font-weight:normal; font-family:'Evogria', Arial, sans-serif; }
h4, p.h4                                                  { margin:0 0 10px 0; font-size:22px; line-height:1.4em; text-decoration: none; text-transform:uppercase; font-style:normal; font-weight:normal; font-family:'Evogria', arial, sans-serif; }
h5, p.h5                                                  { margin:0 0 10px 0; font-size:20px; line-height:1.4em; text-decoration: none; text-transform:none; font-style:normal; font-weight:normal; font-family:'Evogria', arial, sans-serif;  }

h1 em, p.h1 em                                            ,
h2 em, p.h2 em                                            ,
h3 em, p.h3 em                                            ,
h4 em, p.h4 em                                            ,
h5 em, p.h5 em                                            { color:#faa61a; font-style:normal; }

p                                                         { margin:0 0 20px 0; font-size:14px; }
p#status_para                                             { font-size:11px; }
p.small                                                   { font-size:12px; color:#aaa; }
  p.small a                                               { color:inherit; }

.norwester                                                { font-family:'norwesterregular', Arial, sans-serif !important; }

a                                                         { text-decoration:underline; color:#faa61a; text-decoration:underline; }

hr                                                        { margin:30px 0; background:0; border:0; border-top:1px solid #ddd; }

/* - */

.mh ,
.box ,
.table-wrap ,
.contained                                                { *zoom: 1; margin-bottom:0px; position:relative; }
  .mh:before ,
  .box:before ,
  .table-wrap:before ,
  .contained:before                                       { content: " "; display: table; }
  .mh:after ,
  .box:after ,
  .table-wrap:after ,
  .contained:after                                        { content: " "; display: table; clear: both; }

/* - */

.contained                                                { margin-bottom:30px; }
.contained.tall                                           { margin-bottom:60px; }
.contained.top-tall                                       { margin-top:30px; }

/* - */

.box                                                        { padding:30px; border-radius:10px; overflow:hidden; }
.box.tall                                                   { margin-bottom:30px; }
  .box > *                                                  { z-index:2; position:relative; }

  .box.not-v                                                { padding-top:15px; padding-bottom:15px; }

  .box .floating-icon                                       { position:absolute; top:-30px; right:-20px; font-size:200px; color:rgba(0,0,0,0.1); line-height:160px; transform:rotate(-30deg); z-index:1; }

  .box.border                                               { padding:20px; border:1px solid #eee; border-radius:10px; }
  .box.white                                                { background:#fff; }
  .box.grey                                                 { background:#efefef; }
  .box.dark                                                 { background:#2d374f; color:#fff; }
    .box.dark a:not(.button)                                { color:#faa61a; }

  .box.correct                                              { background-color:#47b764; color:#fff; }
  .box.incorrect                                            { background-color:#fe6d76; color:#fff; }

/* - */

.tcenter                                                  { text-align:center; }
.tright                                                   { text-align:right; }

/* - */

.shallow                                                  { margin-bottom:0px !important; }
.semi-shallow                                             { margin-bottom:10px !important; }
.full-width                                                 { width:100%; }

/* - */

.text-success                                             { color:#60c06e; }
.text-danger                                              { color:#b72020; }
.text-warning                                             { color:#df7e00; }
.flag-green                                               { color:#47b764; }
.flag-red                                                 { color:#d5464f; }
.highlight                                                { color:#faa61a; }
.lowlight                                                 { color:#262c3f; }

/* - */

.hidden                                                   { display:none !important; }

/* - */

sup                                                       { font-size:0.7em; vertical-align:top; }

/* - */

.button, form button                                      { border:0; text-decoration:none; color:#fff; background:#faa61a; font-size:16px; font-family:'montserratregular', arial, sans-serif; padding:11px 18px 9px; line-height:16px; border-radius:18px; text-align:center; display:inline-block; margin:2px 0; box-sizing:border-box; cursor:pointer; text-transform: uppercase; }

.button.link, form button.link                            { background:none; color:#faa61a; }

/* - */

.header                                                   { display:block; width:100%; padding:10px 20px 10px; margin-bottom:30px; background:#211e19; color:#fff; overflow:hidden; line-height:40px; position:relative; z-index:1005;}
  .header h1                                              { margin:0; float:left; font-size:20px; line-height:40px; }
  .header .login-link                                     ,
  .header .logout-link                                    { float:right; width:100px; margin:0; }
  .header a                                               { text-decoration:none; color:#fff; }

.connection-status                                        { float:left; font-size:10px; margin:0; padding:0 5px; width:100%; height:20px; line-height:20px; font-weight:bold; background:#efefef; color:#d60000; text-align:center; }

#content                                                  { margin:0 20px; padding-bottom:100px; }

#overlay                                                  { position:absolute; z-index:1000; top:0; right:0; bottom:0; left:0; background:rgba(255,255,255,0.4); display:none; }

#logbox                                                   { position:fixed; z-index:1000; bottom:0; left:0; padding:5px; width:100%; height:80px; font-size:10px; background:#fff; color:#aaa; overflow:hidden; overflow-y:auto; display:none; }

#syncbox                                                  { display:none; position:fixed; z-index:900; bottom:0; left:0; border-bottom:1px solid #414141; padding:10px 20px 10px; width:100%; height:44px; font-size:10px; background:#fff; color:#838383; overflow:hidden; overflow-y:auto; text-align:center; }
  #syncbox p                                              { line-height:24px; margin:0; }
    #syncbox p img                                        { vertical-align:middle; margin:-2px 5px 0 0; }

.offline-only                                             { display:none !important; }
.online-only                                              {  }

.is-offline                                               {  }
  .is-offline .offline-only                               { display:initial !important; }
  .is-offline .online-only                                { display:none !important; }

.require-no-data                                          { display:none !important; }
.no-data .require-no-data                                 { display:initial !important; }
.no-data .require-data                                    { display:none !important; }


.col                                                        { width:calc( 50% - 20px ); padding:0; margin:0; float:left; box-sizing:border-box; margin-left:40px; }
  .col.third                                                { width:calc( 33% - 22px ); }
  .col.quarter                                              { width:calc( 25% - 30px ); }
  .col.two-thirds                                           { width:calc( 66% - 4px ); }
  .col:first-child                                          { margin-left:0px; clear:left; }
  .col:last-child                                           { float:right; margin-left:0; }


/* - */

.inline-video-container                                     { position: relative; padding-bottom: 49.5%; padding-top: 30px; height: 0; overflow: hidden; z-index:50; margin-bottom:1px; width:600px !important; }
  .inline-video-container iframe                            ,
  .inline-video-container object                            ,
  .inline-video-container embed                             { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* - */

.dash-logo                                                  { max-width:120px; }
.loading-icon                                               { width:80px; }
.thing-hidden                                               { display:none; }

/* - */

@media only screen and (max-width: 767px) {
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  h1                                                      { font-size:40px; }
  h2                                                      { font-size:30px; }
  h3                                                      { font-size:20px; }
}

@media only screen and (max-width: 479px) {
  h1                                                      { font-size:40px; }
  h2                                                      { font-size:30px; }
  h3                                                      { font-size:20px; }

  .button                                                 { width:100%; padding-left:5px; padding-right:5px; text-align:center; }


  .col                                                      ,
    .col.third                                              ,
    .col.quarter                                            ,
    .col.two-thirds                                         ,
    .col.alpha                                              ,
    .col.last                                               { margin:0; width:100%; }

  .inline-video-container                                   { width:250px !important; }

}