:root {
    --zeus-green: rgba(0, 126, 78, 1);
    --zeus-radial: radial-gradient(ellipse 40% 60% at 35%, rgba(17, 211, 94, 1) 0%, rgba(9, 158, 86, 1) 40%, rgba(0, 126, 78, 1) 100%);
    --zeus-whitecolor: #FFFFFF;
    --zeus-greencolor: rgb(0, 126, 78);
    --zeus-greencolor2: #e2fdf2;
    --zeus-fontsmall: 0.8rem;
    --zeus-fontsmall-x: 0.8rem;
    --zeus-fonthelp: 80%;
  }

  body {
    background-color: var(--zeus-green);
  }

  .zeus-logo-wrapper-style {
    display: flex;
    justify-content: flex-start;
  }

  .zeus-logo-style {
    height: 27px;
    margin: 23px 0 17px 20px;
  }

  .zeus-form-label {
    color: var(--zeus-greencolor);
    font-size: var(--zeus-fontsmall);
  }

  .zeus-link-style {
    color: var(--zeus-greencolor2);
    font-size: var(--zeus-fonthelp);
    text-decoration: none;
  }

  .zeus-link-style:hover {
    color: var(--zeus-whitecolor);
    text-decoration: underline;
  }

  .max-width {
    max-width: 1400px;
    margin: 0 auto;
  }

  .radial-fx {
    background: var(--zeus-radial);
  }

  .bg-holder {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .bg-holder-sub {
    height: 888px;
  }

  .bg-picture {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 84%;
    margin: -1px 0px 0px -1px;
    object-fit: cover;
    padding: 0px;
    position: absolute;
    width: 101%;
  }

  .overlay {
    background-attachment: fixed;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, .6) 75%, rgba(0, 0, 0, .8) 100%);
    background-position-y: 0%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
  }

  /* content */
  .main-page {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  .main-page-header,
  .main-page-footer {
    flex: none;
    /* 2 */
  }

  .main-page-content {
    flex: 1;
    padding-top: 2rem;
  }

  /**
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
 * */
  .main-page-stage {
    display: grid;
    grid-template-columns: 55rem 25rem;
    min-height: 44rem;
    margin-top: -70px;
  }

  .main-page-animation-wrapper {
    margin-top: -4%;
    position: relative;
    width: 700px;
    height: 760px;

  }

  /*  .main-page-animation-wrapper {
    background-color: var(--yellow);
  }*/

  .login-wrapper {
    padding-top: 15rem;
  }

  .login-wrapper p {
    color: var(--zeus-greencolor);
    line-height: 1.3;
    font-size: var(--zeus-fontsmall-x);
    margin: 0;
  }

  .login-container {
    border-radius: 5px;
    background-color: var(--zeus-whitecolor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.3rem;
    margin: 0.5rem 2rem 1.5rem;

  }

  .footer {
    height: 40px;
  }

  .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b3dbc4;
    font-size: 0.8rem;
    min-height: 40px;
  }

  .shadow-theme1 {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }

  .btn-bottom-gap2 {
    margin-bottom: 2rem;
  }

  .lr2-gap {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .t2-gap {
    margin-bottom: 2rem;
  }

  .signin-logo-wrapper {
    display: flex; justify-content: center;
  }

  .zeus-modal-wrapper {
    position:absolute; bottom: 0; right:0; margin-right: 2rem; margin-bottom: 2rem;    
  }
  .signin-style {
    cursor: pointer;
    transition: all .2s ease-in-out;
  }
  .signin-style:hover {
    transform: scale(1.1);
  }


  .fade-scale {
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
 }

.fade-scale.in {
  opacity: 1;
  transform: scale(1);
}

.round-button {
  width:25%;
}
.round-button-circle {
  width: 100%;
  height:0;
  padding-bottom: 100%;
  border-radius: 50%;
  border:10px solid #cfdcec;
  overflow:hidden;
        
  background: #4679BD; 
  box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
  background:#30588e;
}
.round-button a {
  display:block;
  float:left;
  width:100%;
  padding-top:50%;
  padding-bottom:50%;
  line-height:1em;
  margin-top:-0.5em;
        
  text-align:center;
  color:#e2eaf3;
  font-family:Verdana;
  font-size:1.2em;
  font-weight:bold;
  text-decoration:none;
}