/* Page-specific styles for portal/main.jsp */

/* Base */
html,
body {
   margin: 0;
   padding: 0;
   font-family: system-ui, "Segoe UI", roboto, helvetica, arial, sans-serif;
}

*,
*::before,
*::after {
   box-sizing: border-box;
   font-family: inherit;
}

/* Layout */
.ui-page {
   width: 100%;
}

.ui-content-area {
   align-items: center;
   background-image: linear-gradient(rgb(255 255 255 / 30%), rgb(255 255 255 / 30%)), url("../icons-38116788538/bg_image.svg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   display: grid;
   grid-template-rows: 1fr auto auto;
   justify-content: center;
   justify-items: center;
   min-height: 100vh;
   min-height: 100dvh;
   overflow-x: auto;
   padding-bottom: 24px;
   text-align: center;
}

@media (min-width: 371px) {
   .ui-content-area {
      overflow-x: hidden;
   }
}

@media (min-height: 874px) {
   html,
   body,
   .ui-content-area {
      overflow-y: hidden;
   }
}

/* Panel + branding */
.ui-brand-block {
   align-items: center;
   display: flex;
   flex-direction: column;
   padding: 0 32px;
   width: 100%;
}

.ui-brand-label {
   background: linear-gradient(90deg, #005e66 0%, #35b0c0 97%);
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
   font-size: 31px;
   font-weight: 600;
   height: 84px;
   line-height: normal;
   max-width: 320px;
   width: 100%;
   margin: 0;
}

.ui-install-msg p {
   color: #01041a;
   font-size: 13px;
   font-weight: 400;
   margin: 0 32px;
   text-align: center;
}

/* Actions */
.ui-list {
   align-items: center;
   display: flex;
   flex-direction: column;
   min-height: 251px;
}

.launch-webclient,
.launch-nativeclient,
.download-native-client {
   align-items: center;
   border-radius: 9999px;
   display: inline-flex;
   gap: 8px;
   height: 40px;
   justify-content: center;
   text-decoration: none;
   width: 320px;
}

.launch-webclient {
   background: #013c38;
   color: #fff;
   cursor: pointer;
   padding: 0 12px;
}

.launch-webclient:hover {
   background: #02534f;
   color: #c9ff27;
}

.launch-webclient:active {
   background: #013c38;
   color: #c9ff27;
}

.launch-webclient:focus-visible,
.launch-nativeclient:focus-visible,
.download-native-client:focus-visible,
.skip-portal input[type="checkbox"]:focus-visible,
.ui-links a:focus-visible {
   outline: 2px solid #013c38;
   outline-offset: 2px;
}

.skip-portal {
   align-items: center;
   display: flex;
   gap: 8px;
   justify-content: center;
   margin: 24px 0;
   min-height: 18px;
}

.skip-portal input[type="checkbox"] {
   appearance: none;
   background: #fff;
   border: 1px solid #9c9c9c;
   border-radius: 4px;
   flex: 0 0 18px;
   height: 18px;
   margin: 0;
   width: 18px;
}

.skip-portal input[type="checkbox"]:checked {
   background: radial-gradient(circle at center, #005e66 0 45%, transparent 46%);
   border-color: #005e66;
}

.skip-portal label {
   align-items: center;
   color: #424242;
   display: inline-flex;
   font-size: 14px;
   font-weight: 400;
   line-height: 18px;
   max-width: 320px;
   width: fit-content;
   overflow: hidden;
   text-align: center;
}

.launch-nativeclient-warn {
   color: #3c4860;
   font-feature-settings: 'liga' off, 'clig' off;
   font-size: 12px;
   font-weight: 400;
   line-height: 18px;
   text-align: center;
}

.launch-nativeclient,
.launch-nativeclient-warn {
   display: none;
}

.uag .launch-nativeclient {
   display: inline-flex;
   margin-top: 18px;
}

.uag .launch-nativeclient-warn {
   display: inline-flex;
}

.uag .ui-install-msg {
   margin: 40px 0;
}

.launch-nativeclient,
.download-native-client {
   background: transparent;
   font-size: 14px;
   font-weight: 500;
   overflow: hidden;
   padding: 0 16px;
}

.launch-nativeclient {
   border: 1px solid #02948c;
   color: #02534f;
}

.launch-nativeclient:is(:hover, :active) {
   background: #bafaf3;
   color: #02534f;
}

.launch-webclient p {
   color: inherit;
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   margin: 0;
   text-align: center;
}

.download-native-client {
   color: #013c38;
}

.download-native-client:hover {
   background: #89ece3;
   color: #013c38;
}

.download-native-client:active {
   background: #bafaf3;
   color: #013c38;
}

.download-icon {
   background-image: url("../icons-38116788538/download-cloud.svg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   display: inline-block;
   height: 16px;
   width: 16px;
}

/* Footer */
.ui-links {
   align-items: center;
   display: flex;
   gap: 10px;
   white-space: nowrap;
}

.ui-links p {
   display: inline-flex;
   margin: 0;
}

.ui-links a,
.ui-links .separator {
   color: rgb(0 0 0 / 60%);
   font-size: 14px;
   font-weight: 500;
   text-align: center;
}

.ui-brand-logo-bottom {
   background: url("../icons-38116788538/omnissa_logo_footer.svg") center / contain no-repeat;
   height: 11px;
   margin-block-start: 20px;
   width: 64px;
}

@media (max-height: 873px) {
   .ui-content-area {
      min-height: 873px;
   }
}
@media (max-width: 440px) {
   .ui-center-panel {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 6.348px 16.928px 0 rgb(0 0 0 / 10%);
      height: 701px;
      padding: 32px 24px 76px;
      width: 370px;
   }

   .ui-brand-block {
      gap: 16px;
   }

   .ui-brand-logo,
   .ui-brand-logo img {
      height: 88px;
      width: 88px;
   }

   .ui-install-msg {
      color: #3c4860;
      line-height: 21px;
      margin: 100px 0;
   }

   .uag .ui-install-msg {
      margin: 60px 0;
   }

   .launch-webclient,
   .launch-nativeclient,
   .download-native-client {
      width: 100%;
   }
}

@media (min-width: 441px) {
   .ui-center-panel {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 6.348px 16.928px 0 rgb(0 0 0 / 10%);
      min-height: 577px;
      padding: 32px;
      width: 384px;
   }

   .ui-brand-block {
      gap: 4px;
   }

   .ui-brand-logo,
   .ui-brand-logo img {
      height: 68px;
      width: 68px;
   }

   .ui-install-msg {
      line-height: 18px;
      margin: 78px 0;
   }
}

@media (max-width: 370px) {
   .ui-content-area {
      background-image: none;
      width: 370px;
   }

   .ui-center-panel {
      border: none;
      box-shadow: none;
   }
}