/* ==========================================================================
   Helper classes
   ========================================================================== */
/* Helpers */
.font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.clearfix {
  clear: both;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/*------------------------------------*\
    Clearfix
\*------------------------------------*/
.cf,
.container,
.footer {
  *zoom: 1;
}
.cf:before,
.cf:after,
.container:before,
.container:after,
.footer:before,
.footer:after {
  display: table;
  content: "";
  line-height: 0;
}
.cf:after,
.container:after,
.footer:after {
  clear: both;
}
/* ==========================================================================
   Mixins
   ========================================================================== */
/* ==========================================================================
   Media breakpoint definitions
  =============
  reference - https://www.vodori.com/blog/use-less-media-query-variables-responsive-design/ */
body.off:before {
  position: fixed;
  top: 0;
  left: 0;
  padding: 4px 6px 4px 4px;
  border-radius: 0 0 5px 0;
  background: red;
  color: white;
  z-index: 1000;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0;
}
@media only screen and (max-width: 767px) {
  body.off:before {
    content: "tablet--portrait" !important;
  }
}
@media only screen and (max-width: 415px) {
  body.off:before {
    content: "phone" !important;
  }
}
@media only screen and (min-width: 415) and (max-width: 767) and (max-height: 415) {
  body.off:before {
    content: "phone--landscape" !important;
  }
}
@media only screen and (min-width: 768px) {
  body.off:before {
    content: "desktop--small" !important;
  }
}
@media only screen and (min-width: 1025px) {
  body.off:before {
    content: "desktop--medium" !important;
  }
}
@media only screen and (min-width: 1200px) {
  body.off:before {
    content: "desktop--large" !important;
  }
}
@media only screen and (min-width: 1921px) {
  body.off:before {
    content: "desktop--extra-large" !important;
  }
}
@media only screen and (min-width: 2560px) {
  body.off:before {
    content: "desktop--extra-extra-large" !important;
  }
}
@media (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi) {
  body.off:before {
    background: purple !important;
  }
}
/* ==========================================================================
Font classes
========================================================================== */
@media only screen and (max-width: 767px) {
  html {
    font-size: 9.5875px;
    line-height: 9.5875px;
  }
}
@media only screen and (max-width: 415px) {
  html {
    font-size: 8.64583333px;
    line-height: 8.64583333px;
  }
}
@media only screen and (min-width: 768px) {
  html {
    font-size: 9.5875px;
    line-height: 9.5875px;
  }
}
@media only screen and (min-width: 1025px) {
  html {
    font-size: 10.67708333px;
    line-height: 10.67708333px;
  }
}
@media only screen and (min-width: 1200px) {
  html {
    font-size: 10px;
    line-height: 10px;
  }
}
body {
  font-family: "GTWalsheimRegular", Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  text-decoration: none;
}
@font-face {
  font-family: 'GTWalsheimRegular';
  src: url('../fonts/GT-Walsheim-Pro-Regular.eot');
  /* IE9 Compat Modes */
  src: url('../fonts/GT-Walsheim-Pro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/GT-Walsheim-Pro-Regular.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/GT-Walsheim-Pro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/GT-Walsheim-Pro-Regular.svg#svgFontName') format('svg');
  /* Legacy iOS */
}
@font-face {
  font-family: 'GTWalsheimMedium';
  src: url('../fonts/GT-Walsheim-Pro-Medium.eot');
  /* IE9 Compat Modes */
  src: url('../fonts/GT-Walsheim-Pro-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/GT-Walsheim-Pro-Medium.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/GT-Walsheim-Pro-Medium.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/GT-Walsheim-Pro-Medium.svg#svgFontName') format('svg');
  /* Legacy iOS */
}
a {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5 {
  padding: 0px;
  margin: 0px;
  font-weight: 400;
  font-family: "GTWalsheimRegular", Arial, "Lucida Grande", sans-serif;
  color: #808285;
}
p {
  padding: 0px;
  margin: 0 0 3rem;
  font-weight: normal;
}
h1 {
  font-size: 2.5rem;
  line-height: 1em;
  font-family: "GTWalsheimMedium", Arial, "Lucida Grande", sans-serif;
  margin: 0 2.5rem 0;
}
h2 {
  font-size: 2rem;
  line-height: 1em;
  margin: 0 0 0.5em 0;
}
h3 {
  font-size: 1.5rem;
  line-height: 1em;
  margin: 0 0 0.5em 0;
}
h4 {
  font-size: 1rem;
  line-height: 1em;
  margin: 0 0 0.5em 0;
}
h5 {
  font-size: 3.8rem;
  line-height: 1em;
  margin: 0 0 0.5em 0;
}
p,
a,
body,
li,
input,
table,
label {
  font-size: 1.5rem;
  line-height: 1em;
}
/* ==========================================================================
    General
   ========================================================================== */
/*--------------------------------------------------------
    COMMONS
--------------------------------------------------------*/
body,
html {
  width: 100%;
  height: auto;
  min-height: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling in landscape while allowing user zoom */
}
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body {
    color: #666;
/*  background: #bbbbbb url("/sentry/img/default/background_image.jpg") center top; */
/*      background-size: cover; */
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}
ul,
ol,
dl {
  margin-left: 20px;
}
ul ul,
ol ol,
dl dl {
  margin-bottom: 0;
}
hr {
  margin: 35px 0;
  margin: 3.5rem 0;
  height: 0;
  border: 0;
  border-bottom: 1px solid #eaeaea;
}
hr:first-child {
  margin: 0 0 2.5px;
  margin: 0 0 2.5rem;
}
/* ==========================================================================
   UI classes / Sprites, icons and retina handling
   ========================================================================== */
/*------------------------------------*\
    Container / Layout
\*------------------------------------*/
/**
 * The .container is used to wrap the content and center it in the page.
 */
.container {
  margin: 0 auto 30px;
  margin: 0 auto 3rem;
  width: 100%;
  max-width: 1200px;
}
.container:before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #6a0cd2;
  background-color: var(--pri_color, #6a0cd2);
  top: 0;
  left: 0;
}
.containerLog {
  margin: 30px auto;
  width: 1500px;
}
/**
 * .page-body is what gives the area a white background with bordered edge.
 */
.page-body {
  border-radius: 2px;
  background: white;
  background: var(--bkg_color, white);
  position: relative;
  min-height: 600px;
  min-width: 768px;
}
/**
 * The left-panel is what houses the navigation
 */
.left-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 21%;
  height: 100%;
  padding: 0;
  background-color: #6a0cd2;
  background-color: var(--pri_color, #6a0cd2);
}
/**
 * The right-panel houses the page content
 */
.right-panel {
  float: right;
  width: 79%;
  padding: 60px;
  padding: 6rem;
  background-color: white;
  background-color: var(--bkg_color, white);
}

@media only screen and (min-width: 768px) and (max-width: 1025px) {
  .right-panel {
    padding: 60px 30px;
    padding: 6rem 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .right-panel {
    padding: 60px 30px;
    padding: 6rem 3rem;
  }
}
.right-panel > p {
  margin: 0 2.5rem;
}
/**
 * The button-panel houses the edit buttons for the information pages and
 * aligns them to the right of the div.
 */
.button-panel {
  text-align: right;
}
/*------------------------------------*\
    Authentication
\*------------------------------------*/
#pinpad-box {
  margin-bottom: 20px;
  padding-top: 10px;
  text-align: center;
  width: 50%;
  float: left;
}
#pinpad-form table {
  width: 50%;
}
#pinpad-form table td {
  width: 100%;
  padding: 5px 25px 5px 0;
  padding: 0.5rem 2.5rem 0.5rem 0;
}
.pinpadnumber {
  width: 50px;
}
.turing-box {
  margin: 20px;
  padding-top: 15px;
  text-align: center;
  width: 100%;
}
.turingImage {
  width: auto;
  height: auto;
}
#qrCode-box {
  width: 100%;
  height: 200px;
}
IMG.qrCode {
  width: 150px;
  height: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.hexagon {
  position: relative;
  width: 38px;
  height: 22px;
  background-color: #6a0cd2;
  margin: 11px 2px;
  display: inline-block;
}
.hexagon p {
  font-size: 20px;
  font-size: 2rem;
  margin: 1px 0 0;
  color: white;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* non-prefixed version, currently
                                  not supported by any browser */
  cursor: pointer;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  left: 0;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 11px solid #6a0cd2;
}
.hexagon:after {
  top: 99%;
  width: 0;
  border-top: 11px solid #6a0cd2;
}
/*------------------------------------*\
    Buttons
\*------------------------------------*/
/**
 * Use the following classes to style up <a> tags or buttons with
 * various classes to change appearance. New appearances can be added
 * by creating a new class of .btn-name and add to the below styles.
 *
   <a href="#" class="btn">Button</a>
 *
 */
.btn,
.button,
button {
  display: inline-block;
  padding: 8px 45px;
  padding: 0.8rem 4.5rem;
  border-radius: 20px;
  border-radius: 2rem;
  outline: none;
  border: 0;
  background: #f0f0f0;
  color: #999;
  -webkit-transition: background 0.5s ease-in;
  -moz-transition: background 0.5s ease-in;
  transition: background 0.5s ease-in;
}
button,
a.btn {
  margin: 0 12px ;
  margin: 0 1.25rem;
}
button.extra-margin {
  margin-left: 3px;
  margin-left: 2.5rem;
}
.btn:hover,
.button:hover,
button:hover {
  background: #eaeaea;
}
.btn-primary {
  background-color: #6a0cd2;
  background-color: var(--pri_color, #6a0cd2);
  color: white;
}
.btn-primary:hover {
  background: #565759;
  background: var(--aux_color);
}
.btn-secondary {
  background: #e6e7e8;
  color: #808285;
}
.btn-secondary:hover {
  background: #b2b3b4;
}
/*------------------------------------*\
    Call Out Boxes
\*------------------------------------*/
/**
 * Place any text content in a div with one of the following classes
 * to create a call out box.
 *
   <div class="info-box">
        <strong>Info Box</strong><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, id, dolorum inventore harum deleniti at deserunt reprehenderit veniam animi vel rem quam temporibus necessitatibus tenetur facilis explicabo dolor expedita sequi earum vero numquam perferendis labore obcaecati voluptatum fuga error fugiat dolore minima tempora similique eius laboriosam odio ipsam eligendi excepturi.
   </div>
 *
 */
 .message-box {
 	position: relative;
 	margin-top: 10px;
 	padding: 10px 20px 10px 50px;
  background: #e6e7e8;
  border-radius: 0.5rem;
  max-width: 100%;
 }
.info-box {
  position: relative;
  margin-bottom: 20px;
  padding: 20px 20px 20px 78px;
  background: #e6e7e8;
  border-radius: 0.5rem;
  max-width: 100%;
  margin-left: 25px;
  margin-left: 2.5rem;
  margin-right: 25px;
  margin-right: 2.5rem;
  line-height: 1.5em;
}
.info-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  margin-top: -15px;
  left: 25px;
  width: 30px;
  height: 30px;
  background-image: url("/sentry/img/icon__i.svg");
  background-size: 30px;
  background-repeat: no-repeat;
}
.warning-box {
  position: relative;
  margin-bottom: 20px;
  padding: 20px 20px 20px 78px;
  background: #e6e7e8;
  border-radius: 0.5rem;
  max-width: 100%;
  margin-left: 25px;
  margin-left: 2.5rem;
  margin-right: 25px;
  margin-right: 2.5rem;
  line-height: 1.5em;
}
.warning-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  margin-top: -15px;
  left: 25px;
  width: 30px;
  height: 30px;
  background-image: url("/sentry/img/icon__i.svg");
  background-size: 30px;
  background-repeat: no-repeat;
}
.warning-box:before {
  background-image: url("/sentry/img/icon__i.svg");
}
.error-box {
  position: relative;
  margin-bottom: 20px;
  padding: 20px 20px 20px 78px;
  background: #e6e7e8;
  border-radius: 0.5rem;
  max-width: 100%;
  margin-left: 25px;
  margin-left: 2.5rem;
  margin-right: 25px;
  margin-right: 2.5rem;
  line-height: 1.5em;
}
.error-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  margin-top: -15px;
  left: 25px;
  width: 30px;
  height: 30px;
  background-image: url("/sentry/img/icon__i.svg");
  background-size: 30px;
  background-repeat: no-repeat;
}
.error-box:before {
  /*background-image: url("/sentry/img/icon__cross.svg");*/
}
.success-box {
  position: relative;
  margin-bottom: 20px;
  padding: 20px 20px 20px 78px;
  background: #e6e7e8;
  border-radius: 0.5rem;
  max-width: 100%;
  margin-left: 25px;
  margin-left: 2.5rem;
  margin-right: 25px;
  margin-right: 2.5rem;
  line-height: 1.5em;
}
.success-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  margin-top: -15px;
  left: 25px;
  width: 30px;
  height: 30px;
  background-image: url("/sentry/img/icon__i.svg");
  background-size: 30px;
  background-repeat: no-repeat;
}
.success-box:before {
  background-image: url("/sentry/img/icon__tick.svg");
}
/*------------------------------------*\
    Footer
\*------------------------------------*/
.footer {
  margin: 0 auto;
  width: 79%;
  color: #999;
  background: white;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 20px;
  padding: 1rem 2rem;
}
.footer p {
  font-size: 10px;
  font-size: 1rem;
  margin: 0;
  line-height: 1.2em;
  pointer-events: auto;
}
.login-footer {
  position: fixed;
}
.copyright {
  float: left;
  text-indent: -10px;
}
.version-no {
  float: right;
}
/*------------------------------------*\
    Form Styles
\*------------------------------------*/
/**
 * These styles apply to all forms to have a uniform look across
 * pages. Additional classes should be added to the form if you
 * require specific styling for that table.
 */
form input[type="text"],
form input[type="email"],
form input[type="url"],
form input[type="password"],
form input[type="number"],
form input[type="time"] {
  padding: 10px 20px;
  padding: 1rem 2rem;
  width: 100%;
  height: 40px;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  border-radius: 0.5rem;
}
form input[type="text"]:hover,
form input[type="email"]:hover,
form input[type="url"]:hover,
form input[type="password"]:hover,
form input[type="number"]:hover,
form input[type="time"]:hover,
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="url"]:focus,
form input[type="password"]:focus,
form input[type="number"]:focus,
form input[type="time"]:focus {
  outline: none;
  border-color: #bebebe;
  color: black;
}
form textarea {
  padding: 20px;
  width: 100%;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  border-radius: 0.5rem;
}
form input[type="submit"] {
  border: none;
  font-family: sans-serif;
  cursor: pointer;
}
form label {
  width: 40%;
  font-weight: bold;
  line-height: 40px;
  cursor: pointer;
}
form select {
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
}
form input {
  color: #808285;
}
form input::-webkit-input-placeholder {
  line-height: 1.5em;
}
/*------------------------------------*\
    Header / Logo
\*------------------------------------*/
.page-head {
  position: relative;
  margin-top: 4px;
  padding: 35px 2.111%;
  padding: 3.5rem 2.111%;
  width: 100%;
  min-width: 768px;
  top: 0;
}
@media (min-width: 1230px) {
  .page-head {
    padding-left: 0;
    padding-right: 0;
  }
}
.login-meta {
  display: inline-block;
  position: relative;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  position: absolute;
  right: 2.111%;
  margin: 0;
  color: #6a0cd2;
  color: var(--pri_color, #6a0cd2);
}
@media (min-width: 1230px) {
  .login-meta {
    right: 0;
  }
}
.login-meta input[type="submit"] {
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid;
  color: white;
  color: var(--text_color, #6a0cd2);
  -webkit-transition: color 1s;
  -moz-transition: color 1s;
  -o-transition: color 1s;
  transition: color 1s;
  background: transparent;
  line-height: normal;
  font-family: "GTWalsheimRegular", Arial, "Lucida Grande", sans-serif;
}
.login-meta input[type="submit"]:hover {
  color: grey;
  color: var(--pri_color, grey);
}
.logout {
  margin-left: 10px;
  padding-left: 4px;
  border-left: 1px solid #999;
  color: #7209db;
}
.logo img {
  width: 238px;
  width: 23.8rem;
}
/*------------------------------------*\
    Navigation
\*------------------------------------*/
/**
 * The primary navigation runs vertically down the left hand side
 * of the page. A class of .active can be given to an <a> tag inside
 * one of the <li> elements to give the link an active state which is
 * the same as the hover state.
 */
.primary-nav {
  margin: 0;
  padding: 60px 0 0;
  list-style: none;
}
.primary-nav li {
  position: relative;
  margin-bottom: 0;
  padding: 0;
}
.primary-nav a {
  display: block;
  color: white;
  color: var(--text_color, white);
  padding: 0.833em 10%;
  font-size: 15px;
  font-size: 1.5rem;
}
.primary-nav a:hover,
.primary-nav .active {
  background: #5509a8;
  background-color: var(--aux_color);
  -webkit-transition: background 0.2s ease-in;
  -moz-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
.primary-nav li.active:after {
  content: " ";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-top: 2rem solid transparent;
  border-bottom: 20px solid transparent;
  border-bottom: 2rem solid transparent;
  border-left: 20px solid #5509a8;
  border-left: 2rem solid #5509a8;
  border-left: 20px solid var(--aux_color);
  border-left: 2rem solid var(--aux_color);
  position: absolute;
  right: -20px;
  right: -1.95rem;
  top: 0;
}
.login-container {
  width: 100%;
  height: 100%;
}
.login-container #pinpad-box {
  width: 100%;
  margin: 0 0 30px;
  margin: 0 0 3rem;
  padding: 0;

}

.login-container .page-body {
  padding: 80px 50px;
  padding: 8rem 5rem 5rem;
  margin: 60px auto;
  width: 400px;
  min-height: inherit;
  min-width: inherit;
  border-radius: 5px;
  border-radius: 0.5rem;
}

.login-container label.login--hidden {
  display: none;
}
.login-container input {
  margin-bottom: 20px;
  margin-bottom: 2rem;
}
.login-container .ie9 input {
  margin-bottom: 5px;
}
.login-container .ie9 .styled-dropdown {
  margin-top: 20px;
}
.login-container button {
  width: 49%;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}
.login-container h1 {
  margin: 0;
}
.login-container a {
  text-decoration: underline;
}
.login-container .login-badge {
  left: 50%;
  margin-left: -5rem;
  position: absolute;
  top: -5rem;
  width: 10rem;
  height: 10rem;
  background: white;
  border-radius: 10rem;
  -webkit-box-shadow: 0px 0px 4px 2px #c9c9c9;
  -moz-box-shadow: 0px 0px 4px 2px #c9c9c9;
  box-shadow: 0px 0px 4px 2px #c9c9c9;
}
.login-container .login-badge img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.login-badge {
  overflow: hidden;
}
.login-footer {
  width: 100%;
  background: transparent;
  color: white;
  max-width: none;
  pointer-events: none;
}
#modal__container, #modal_revert_image, #modal_revert_color {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
}
#modal__container.visible, #modal_revert_image.visible, #modal_revert_color.visible {
  display: block;
}
#modal__container .modal, #modal_revert_image .modal, #modal_revert_color .modal {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 5px;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0px 0px 17px 0px #a1a1a1;
  -moz-box-shadow: 0px 0px 17px 0px #a1a1a1;
  box-shadow: 0px 0px 17px 0px #a1a1a1;
  padding: 30px;
  padding: 3rem;
}
#modal__container .modal button, #modal_revert_image .modal button, #modal_revert_color .modal button {
  display: inline-block;
  width: 48%;
  margin: 0;
}
#modal__container .modal button + button, #modal_revert_image .modal button + button, #modal_revert_color .modal button + button {
  margin-left: 2%;
}
/*------------------------------------*\
    Table Styles
\*------------------------------------*/
/**
 * These styles apply to all tables to have a uniform look across
 * pages. Additional classes have been added to be used for the
 * edit user/information pages.
 */
table {
  margin-bottom: 20px;
  width: 100%;
}
th,
td {
  padding: 10px;
}
th {
  background: #666;
  color: white;
  text-align: left;
  font-weight: bold;
}
tr {
    max-width: 80%;
}

td {
  padding: 25px;
  padding: 2.5rem;
}
.name {
  padding-left: 30px;
  background: url(../img/swivel-user.png) no-repeat 10px center;
  color: #444;
}
.delete {
  padding-left: 15px;
  background: url(../img/swivel-delete.png) no-repeat left center;
  color: #d12610;
  font-size: 14px;
  line-height: 1;
}

.revert {
  padding-left: 15px;
  color: #d12610;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.edit {
  padding-left: 15px;
  background: url(../img/swivel-edit.png) no-repeat left center;
  color: #999;
  font-size: 14px;
  line-height: 1;
}
.styled-dropdown {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  margin-bottom: 2rem;
}
.styled-dropdown li,
.styled-dropdown .styled-dropdown__button {
  font-size: 15px;
  font-size: 1.5rem;
  color: #808285;
}
.styled-dropdown .styled-dropdown__button {
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  padding: 10px 20px;
  padding: 1rem 2rem;
  text-align: left;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  border-radius: 0.5rem;
  -webkit-transition: color 0.25s ease-in;
  -moz-transition: color 0.25s ease-in;
  transition: color 0.25s ease-in;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* non-prefixed version, currently
                                  not supported by any browser */
  cursor: pointer;
}
.styled-dropdown .styled-dropdown__button:after {
  content: url("../img/dropdown-arrow--non-filled.svg");
  position: absolute;
  z-index: 3;
  right: 20px;
  right: 2rem;
  top: 10px;
  top: 1rem;
  height: 15px;
  height: 1.5rem;
  width: 15px;
  width: 1.5rem;
}
.styled-dropdown .styled-dropdown__button:hover {
  color: black;
}
.styled-dropdown ul {
  position: absolute;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  padding: 0 10px;
  padding: 0 1rem;
  margin: 0;
  top: 0;
  left: 0;
  background: white;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  border-radius: 0.5rem;
  overflow: hidden;
}
.styled-dropdown li {
  padding: 10px 10px;
  padding: 1rem 1rem;
  cursor: pointer;
  width: 100%;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* non-prefixed version, currently
                                  not supported by any browser */
  -webkit-transition: color 0.25s ease-in;
  -moz-transition: color 0.25s ease-in;
  transition: color 0.25s ease-in;
  box-sizing: border-box;
  border-bottom: 1px solid #d7d7d7;
}
.styled-dropdown li:last-of-type {
  margin-bottom: 10px;
  margin-bottom: 1rem;
}
.styled-dropdown li:hover {
  color: black;
}
.styled-dropdown__content {
  display: none;
}
.styled-dropdown--hidden {
  visibility: hidden;
  position: absolute;
  left: -3000px;
}
.styled-dropdown--open .styled-dropdown__content {
  display: block;
}
.styled-dropdown--open button {
  background: #e4f1f4;
}
.login-container .page-head {
  padding: 35px 2.111%;
  padding: 3.5rem 2.111%;
}
@media (min-width: 1230px) {
  .sentry-start__container .page-head {
    padding: 35px 2.111%;
    padding: 3.5rem 2.111%;
    /*position: fixed;*/
  }
}
/* .sentry-start__container .page-head h1 { */
.sentry-start-container-h1 {
  position: absolute;
  top: 90px;
  display: inline-block;
  float: right;
  margin: 1.25rem 0 0 0;
  color: white;
  color: var(--text_color, white);
  width: 100%; 
  text-align: center; 
  margin: auto;
}

.login-title {
  position: fixed;
  top: 55px;
  right:30px;
  display: inline-block;
  margin: 1.25rem 0 0 0;
  color: white;
  color: var(--text_color, white);
}

.sentry-start__container .page-body {
  background: transparent;
  border-top: 1px white solid;
  /*margin-top: 20px;*/
}
.sentry-start__container .page-body h2 {
  margin: 60px 0;
  margin: 6rem 0;
  color: white;
  width: 100%;
  text-align: center;
  color: var(--text_color, white);
}
.sentry-start__container .page-body .admin-login-button {
  position: absolute;
  top: 5.25rem;
  right: 2.111%;
}
.sentry-start__container .page-body .application-grid {
  width: 100%;
  max-width: 1200px;
  width: 70%;
  margin: auto;
  font-size: 0;
}
.sentry-start__container .page-body .application-grid a {
  font-size: 0;
}
.sentry-start__container .page-body .application-grid .application-grid__item {
  position: relative;
  display: inline-block;
  width: 30%;
  margin-right: 5%;
  margin-bottom: 5%;
  background-color: white;
  border-radius: 5px;
  border-radius: 0.5rem;
  padding: 25% 0 0 0 ;
  -webkit-transition: background-color 0.25s ease-in-out;
  -moz-transition: background-color 0.25s ease-in-out;
  transition: background-color 0.25s ease-in-out;
}
.sentry-start__container .page-body .application-grid .application-grid__item img {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  width: 60%;
  -webkit-transition: margin-top 0.25s ease-in-out;
  -moz-transition: margin-top 0.25s ease-in-out;
  transition: margin-top 0.25s ease-in-out;
}
.sentry-start__container .page-body .application-grid .application-grid__item h3 {
  position: absolute;
  bottom: 5px;
  bottom: 0.5rem;
  width: 100%;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}
.sentry-start__container .page-body .application-grid .application-grid__item:hover {
  background-color: #e6e7e8;
}
.sentry-start__container .page-body .application-grid .application-grid__item:hover h3 {
  opacity: 1;
}
.sentry-start__container .page-body .application-grid a:nth-child( 3n ) .application-grid__item {
  margin-right: 0;
}

.sentry-start__container .page-body .application-grid .application-grid__item span {
  position: absolute;
  bottom: 5px;
  bottom: 0.5rem;
  width: 100%;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  font-size: 1.5rem;
  line-height: 1em;
  margin: 0 0 0.5em 0;
  color: #808285;
}

.sentry-start__container .page-body .application-grid .application-grid__item:hover span {
  opacity: 1;
}


/* ==========================================================================
   Inbox for unsorted styles
   ========================================================================== */
.logo {
  margin: auto;
  z-index: 999;
}


.turing-box{
    margin-bottom: 2rem;
    margin-top:-1rem;
    margin-left:0;
    margin-right:0;
    
}

.small-link{
    font-size: 1rem !important;
}

.login-container .page-head h1 {
  display: inline-block;
  float: right;
  margin: 1.25rem 0 0 0;
  color: white;
}

.right-align {
    float:right;
}


.error {
    color:red;
}

.one-panel {
  padding: 60px;
  padding: 6rem;
}

.info-box-no-icon {
  position: relative;
  margin-bottom: 20px;
  padding: 20px 20px 20px 78px;
  background: #e6e7e8;
  border-radius: 0.5rem;
  max-width: 100%;
  margin-left: 25px;
  margin-left: 2.5rem;
  margin-right: 25px;
  margin-right: 2.5rem;
  line-height: 1.5em;
}

.fixed-table {
    table-layout: fixed;
    word-break: break-word;
}

.fixed-table td{
    word-wrap: break-word;
    padding: 25px 25px 5px 5px;

}

.fixed-table th{
    word-wrap: break-word;
    padding: 10px 5px 10px 5px;

}

.stripped tr {
   border-bottom:1px solid #eaeaea;
}


.upload-image{
    max-width:200px;
    max-height: 80px;
}

.application-image{
    max-width:250px;
    display: inline-block;
    vertical-align: middle;
    padding-left:50px;
}

.application-select {
    max-width:50% !important;
    display: inline-block;
    vertical-align: middle;
}

.application-select p {
    margin:0px !important;
}

p.rules {
    width: 23em; 
    word-wrap: break-word;
    text-align: center;
    line-height: 25px;
}


.browseButton {
  position: relative;
  overflow: hidden;
  clear: left;
}
.browseButton input[type="file"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  font-size: 100px;
  filter: alpha(opacity=0);
  cursor: pointer;
}

.white {
    color:white !important;
}

table.filter td{
    padding:1em !important;
}

.purple{
    color:#6a0cd2;
    color: var(--pri_color, #6a0cd2);
}

.error-container{
    width:500px;
    margin:auto;
}

#pri_color, #bkg_color, #text_color{
    width: 250px; 
    margin-left:250px;
}

.ml-30 {
    margin-left: 30px;
}

.config td{
    padding: 1.5rem;
}

#back_button {
    text-decoration: none;
    float: left;
    width: 25px;
    background-color: #eaeaea;
    padding-top: 7px;
    border-radius: 5px;
    padding-left: 5px;
    margin-right: 5px;
}

#back_button span {
    font-size: 25px;
}

#back_button:hover {
    background-color:gray;
    color:white;
}

#username_lbl{
	line-height: 25px;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid var(--pri_color, #6a0cd2);
  cursor: pointer;
}
.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--pri_color, #6a0cd2);
  cursor: pointer;
}

.resize-button {
	padding: 11px 45px;
	cursor: pointer;
}