@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
body,
html {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 16px;
  color: #fff;
  font-family: "Lato", Arial, Verdana, sans-serif;
  
  line-height: 1.5; }
  body *,
  html * {
    margin: 0;
    padding: 0; }

.container {
  background-size: cover !important;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box; }
  .container .left-part {
    max-width: 536px;
    height: 100%;
    margin-left: 140px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; }
    @media (max-width: 768px) {
      .container .left-part {
        margin-left: 20px;
        margin-right: 20px;
        max-width: unset; } }
    .container .left-part .content {
      flex: 1 1;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column; }
      .container .left-part .content > * {
        max-width: 100%; }
      .container .left-part .content h1 {
        font-size: 3.125rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-top: 100px; }
        @media (max-width: 576px) {
          .container .left-part .content h1 {
            margin-top: 40px; } }
        .container .left-part .content h1 .error-code {
          display: inline; }
      .container .left-part .content div .action-btn {
        display: inline-block;
        width: 180px;
        font-size: 14px;
        text-transform: uppercase;
        text-align: center;
        padding: 12px 10px;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
        position: relative;
        overflow: hidden;
        outline: 0; }
        .container .left-part .content div .action-btn::after {
          opacity: 0;
          content: "";
          position: absolute;
          width: 200px;
          height: 200px;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0.5); }
        .container .left-part .content div .action-btn:active::after {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
          transition: all linear 0.2s; }
      .container .left-part .content h2 {
        margin-top: 0;
        font-weight: 300;
        font-size: 1.375rem;
        margin-bottom: 30px; }
      .container .left-part .content .access-message {
        color: #e29933;
        font-size: 16px;
        max-width: 400px;
        box-sizing: border-box;
        margin-bottom: 30px; }
        .container .left-part .content .access-message .days {
          display: flex; }
          .container .left-part .content .access-message .days span {
            flex: 1 1 0;
            display: inline-block;
            height: 30px;
            width: 30px;
            line-height: 30px;
            font-weight: 700;
            text-align: center;
            border-width: 1px;
            border-style: solid;
            margin: 0;
            color: #555555;
            background-color: #fff; }
            .container .left-part .content .access-message .days span:first-child {
              border-top-left-radius: 4px; }
            .container .left-part .content .access-message .days span:last-child {
              border-top-right-radius: 4px; }
            .container .left-part .content .access-message .days span:not(:first-child) {
              border-left: none; }
        .container .left-part .content .access-message .from {
          border-width: 1px;
          border-style: solid;
          border-top: none;
          padding: 10px;
          text-align: center;
          background-color: #fff;
          font-size: 0.875rem; }
        .container .left-part .content .access-message .schedule {
          border-width: 1px;
          border-style: solid;
          border-top: none;
          padding: 10px;
          text-align: center;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          background-color: #fff;
          font-size: 0.875rem; }
      .container .left-part .content .error-message .desc {
        font-size: 1.25rem;
        font-weight: bold;
        text-transform: uppercase;
        padding: 20px 20px 0;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 4px 4px 0 0;
        color: #555555; }
      .container .left-part .content .error-message .code {
        background: rgba(255, 255, 255, 0.85);
        border-radius: 0 0 4px 4px;
        color: #555555;
        padding: 5px 20px 20px;
        font-size: 1.25rem;
        text-transform: uppercase; }
      .container .left-part .content .error-message + h2 {
        background-color: rgba(65, 65, 65, 0.85);
        padding: 20px;
        margin-top: 10px;
        border-radius: 4px;
        font-size: 1.25rem;
        font-weight: 700; }
      .container .left-part .content .footer {
        width: 100%;
        flex: 1 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-bottom: 16px; }
        .container .left-part .content .footer img {
          max-width: 197px;
          height: auto;
          align-self: baseline; }
        .container .left-part .content .footer p {
          margin-top: 16px;
          margin-bottom: 0;
          font-size: 0.75rem; }
  .container .right-part {
    align-items: flex-start;
    overflow-y: auto !important;
    box-sizing: border-box;
    border: 10px; }
    .container .right-part .dialog__content {
      padding: 25px !important;
      width: 100vw;
      margin: 10px; }
      .container .right-part .dialog__content h4 {
        font-size: 23px !important; }
      .container .right-part .dialog__content h4, .container .right-part .dialog__content p {
        line-height: 1.2; }
      .container .right-part .dialog__content textarea {
        height: 120px !important; }
      .container .right-part .dialog__content .action-btn {
        font-size: 16px;
        color: #fff; }
  .container.bgmaintenance {
    background: url(../img/maintenance.jpg) center top no-repeat; }