/* Copyright (C) Entrust 2024. All rights reserved. */

/* Default baseline style for Identity Enterprise SSM that will work for mobile devices */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../../images/Roboto-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../../images/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.material-icons, .material-icons-outlined, .highlightlink:before, .error:before, .notice:before, .success:before, div.collapse:after, div.expand:after,
.rules li.ruleSatisfied:before, .rules li.ruleNotSatisfied:before, .rules li.ruleRequiresSubmit:before {
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga' 1;
}


/* The header logo and associated title */

#header {
  background: url('headerLogo.gif') no-repeat 30px 0 #fff;
  height: 66px;
}

#headertitle {
  height: 66px;
  line-height: 66px;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {font-family:'Roboto';font-size: .95rem;}
body {font-family:'Roboto', Arial, "Helvetica Neue", Helvetica, sans-serif;}
body h4,body h5,body h6 { font-family: 'Roboto', Arial, sans-serif; }
html body { font-family:'Roboto', Arial, sans-serif;  }
code {font-family:'Roboto', Arial, "Courier New", Monaco, Courier, monospace;}
.box {padding: 1.5em;background:#F2F2F5 !important;}
body pre,body code,body tt { font-family:'Roboto', Arial, monospace; }
small {font-size: .8em; font-weight: bold;}

.span-21 {
 width : auto;
}

fieldset {border-top:2px solid #6D2077;border-bottom:2px solid #CECFD9;border-right:1px solid #F2F2F5;border-left:1px solid #F2F2F5;font-family:'Roboto', Arial;font-weight:normal;font-size:medium;}
legend {padding: 0px 5px 0px 5px;}
.btngrp {margin-left:10px}

input[type="submit"], input[type="button"], input[type="reset"]  {
  min-width: 64px;
}

input.text, input.title, textarea, select {font-family:'Roboto', Arial;margin:0.5em 0;border:1px solid #bbb;}

#selectlangdiv {
    height: 66px;
    line-height: 66px;
}

#selectlang {
    float: right;
}

/* Things we DO NOT want to display for mobile browsers */
#loginintro {
    display: none;
}

/* Things we DO want to display for mobile browsers */
#selectimgexplain {
    display: block;
}

footer, .center {
    text-align: center;
}

label.required, span.required {
    padding-left: 12px;
    background: url('../../images/required.gif') no-repeat top left;
}

p.invalid, li.invalid {
  color: darkred;
  font-style: italic;
  margin-bottom: .25em;
}

input.invalid, textarea.invalid, select.invalid {
    border: 4px double darkred !important;
}

img.middle {
    vertical-align: middle;
    margin-bottom: 0;
}

/* Same as .large, but without the greater line height */
.larger {
  margin-bottom:1.25em;
  font-size:100%;
}

h1, h2 {
   font-family: 'Roboto', Arial;
   font-size :14px;
   font-weight: bold;
}

label, .label {
   font-size :12px;
   font-weight: bold;
}

/* Settings for our datagrid tables */
table.datagrid {
    /* Just as wide as it needs to be */
    width: 1%;
    margin-top: 5px;
    border: 1px solid silver;
    padding: 2px;
}

table.datagrid thead th {
    background-color: #3F454F;
    background-repeat: repeat-x;
    white-space: nowrap;
    color: white;
    padding: 4px 3px 4px 3px;
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: white;
    text-align: center;
    font-weight: normal;
}

table.datagrid tbody td {
    padding: 2px 3px 2px 3px;
    white-space: nowrap;
}

table.datagrid tr.even td {
    /* Fix up border for row striping */
    border: 1px solid #F2F2F5;
}

tr.even td {background:#F2F2F5;}

table.datagrid tbody input[type=text],table.datagrid tbody input[type=email],table.datagrid tbody select {
    width: 96px; /* 200px for desktop override */
}

/* Meant to be used in combination with datagrid class when we have too many columns and need to use media table functionality
   as provided by http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/
 */

/**
 * Structural Style
 */
.mediaTable {
    width:100% !important;
    border-collapse:collapse;
}

.mediaTableWrapper {
    position: relative;
}

.mediaTableWrapperWithMenu {
    padding-top:3em;
}

.mediaTableMenuClosed ul {
    display:none;
}

/**
 * Active Media Table Rules
 * These rules are applied to a table activated by the jQuery plug-in.
 */

.activeMediaTable th, .activeMediaTable td {
    display: none;
}

.activeMediaTable th.essential, .activeMediaTable td.essential {
    display: table-cell;
    _display:block; /* IE6 Hack */
}

/* IE7 Hack */
*+html .activeMediaTable th.essential, *+html .activeMediaTable td.essential { display:block }

/* -----[[     B R E A K      P O I N T S     ]]------------ */

@media screen and (min-width: 768px) {

    .activeMediaTable th.optional, .activeMediaTable td.optional {
        display: table-cell;
        _display:block; /* IE6 Hack */
    }

    /* IE7 Hack */
    *+html .activeMediaTable th.optional, *+html .activeMediaTable td.optional { display:block }
}

@media screen and (min-width: 1024px) {

    .activeMediaTable th, .activeMediaTable td {
        display: table-cell;
        _display:block; /* IE6 Hack */
    }

    /* IE7 Hack */
    *+html .activeMediaTable th, *+html .activeMediaTable td { display:block }
}

/**
 * Menu Style
 */

.mediaTableMenu {
    position:absolute;
    top:0;
    right:0;
    background: #fff;
    border:1px solid #aaa;
    border-radius:5px;
    overflow:hidden;
    box-shadow:2px 2px 4px #ddd;
}

.mediaTableMenu a {
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    color: black;
    background: #ddd;
    padding:0.5em;
    cursor:pointer;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.mediaTableMenu a:focus {
    border: 1px solid #000000;
}

.mediaTableMenu ul {
    list-style-position:outside;
    list-style:none;
    margin:0;
    padding:0 0.5em;
}

.mediaTableMenuClosed a {
    border-radius:5px;
}

.mediaTableMenu ul li {
    line-height: 2em;
}

.mediaTableMenu ul li label {
    cursor:pointer;
}

/* Settings for authentication challenges and responses */

table.challenge {
    /* Just as wide as it needs to be */
    width: 1%;
}

table.challenge td, table.challenge th {
    padding-left: 0;
    text-align: center;
    white-space: nowrap;
}

input.challenge {
  margin:0.5em 0;
  border:1px solid #bbb;
  padding:5px;
}

input.challenge:focus {
  border:1px solid #666;
}

/* Constrain the mutual auth image to a standard 300px wide regardless
   of where this image has come from (i.e., customer might be using their own) */
#mutualauthsecrets {
  width:300px; /* 320px for desktop override */
  table-layout: fixed;
  /* IE and Safari */
  word-wrap: break-word;
}

#mutualauthsecrets img {
  width:300px; /* 100% for desktop override */
}

#mutualauthsecrets td, #mutualauthsecrets th {
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}

#mutualauthphrase {
  /* Firefox and Opera */
  overflow: auto;
  display: block;
  font-size: 12px;
  background: #B5C4EE;
  font-weight: bold;
}

#gridchallenge td {
  padding-bottom: 0;
}

#gridchallenge tr + tr td {
  padding-top: 0;
}

#gridchallenge input.challenge {
  text-align: center;
}

/* The following are settings for our mutual authentication image gallery */

img.fullimage, div.fullimage {
  height: 200px;
  width: 300px; /* 320px for desktop override */
}

div.fullimage {
  border:1px solid #000;
  margin-bottom:5px;
}

#mutualauthimage {
    position: relative;
    width: 100%;
    margin-bottom:10px;
    margin-top:10px;
    z-index: 1;
}

#scrollbox {
    width: 100%;
    height: 116px;
    background-color:#f4f4f4;
    overflow:auto;
    /* Only works for iOS5 and above */
    -webkit-overflow-scrolling: touch;
    border:1px solid #aaa;
}

a.gallery, a.gallery:visited {
    display:block;
    text-decoration:none;
    border:1px solid #000;
    width:80px;
    height:50px;
    margin:3px;
    float:left;
}

a.gallery span {
    display:block;
    position:absolute;
    left:150px;
    top:-1px;
    width:1px;
    height:1px;
    overflow:hidden;
    background-color:#efedec;
    z-index:100;
}

a.gallery:hover {
    border:1px solid #fff;
}

a.gallery:hover img {
    border:1px solid #000;
    z-index:100;
}

a.gallery:active img, a.gallery:focus img {
    border:1px solid #000;
    z-index:50;
}

a.gallery:hover span.csshover {
    display:block;
    position:absolute;
    width:320px;
    height:200px;
    top:0;
    left:0;
    background-color:#fff;
    z-index:100;
}

a.gallery:active {
    border:1px solid #000;
}

/* Certain links (alternate auth, SAML login, password recovery, etc.) are prefixed with an arrow to draw attention */

.highlightlink {
  min-height: 16px;
  display: inline-block;
}

.highlightlink:before {
  font-family: 'Material Icons';
  font-size: 20px;
  font-weight: bold;
  color: #87189d;
  content: 'arrow_right_alt' / '';
  vertical-align: middle;
  padding-left: 2px;
}

/* Material UI versions of the Blueprint classes of error, notice, and success. */

/* Status box for showing errors, warnings/notices, and success */
.error:before {
  font-family: 'Material Icons';
  font-size: 1.5rem;
  content: 'error';
  color: #721c24;
  vertical-align: middle;
  padding-right: .5rem;
}

.success:before {
  font-family: 'Material Icons';
  font-size: 1.5rem;
  content: 'check';
  color: #155724;
  vertical-align: middle;
  padding-right: .5rem;
}

.notice:before {
  font-family: 'Material Icons';
  font-size: 1.5rem;
  content: 'info';
  color: #003594;
  vertical-align: middle;
  padding-right: .5rem;
}

.error, .notice, .success {
    border: 1px solid transparent;
    border-radius: .25rem;
    width: fit-content;
    /* font-weight: bold; */
}

.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.notice {
    color: #003594;
    background-color: #ffffcc;
    border-color: #fff3cd;
}

.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #D3EEDA;
}

/* CSS button so we don't have boring links */

a.cssbutton, a.cssbutton:visited {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  padding: 2px 3px 2px 3px;
  color: #224059;
  background-color: #b5c9e2;
  border-top: 2px #cce3ff solid;
  border-left: 2px #cce3ff solid;
  border-bottom: 2px #31557f solid;
  border-right: 2px #31557f solid;
}

a.cssbutton:hover {
  color: #fff;
  background-color: #99aabf;
  border-top: 2px #31557f solid;
  border-left: 2px #31557f solid;
  border-bottom: 2px #cce3ff solid;
  border-right: 2px #cce3ff solid;
}

/* Password rules */

.rules h3 {
  font-weight: bold;
  padding-top: 5px;
}

.rules {
  border: 2px ridge #EEEEEE;
  background-color: #EEEEEE;
  padding-top: 2px;
  margin-bottom: 5px;
}

.rules ul  {
  margin: 0 0 1em 0;
  padding-top: 0;
  padding-left: 0;
  list-style-type: none;
}

.rules li.ruleSatisfied:before {
  font-family: 'Material Icons';
  font-size: 16px;
  color: darkgreen;
  content: 'check' / '';
  vertical-align: middle;
}

.rules li.ruleNotSatisfied:before {
  font-family: 'Material Icons';
  font-size: 16px;
  color: darkred;
  content: 'clear' / '';
  vertical-align: middle;
}

.rules li.ruleRequiresSubmit:before  {
  font-family: 'Material Icons';
  font-size: 16px;  /* Preferred icon size */
  color: blue;
  content: 'help_outline' / '';
  vertical-align: middle;
}

/* Expanding / collapsing help text */

.collapse, .expand {
  cursor: pointer;
}

.collapse:after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #87189d;
  /* This is what selecting the link does so there is no need for an alt here */
  content: 'compress';
  vertical-align: middle;
  float: right;
}

.expand:after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #87189d;
  /* This is what selecting the link does so there is no need for an alt here */
  content: 'expand';
  vertical-align: middle;
  float: right;
}

#phonehelp.helptext {
  padding-right: 10px;
}

/* External Links */

a.external {
  background: url('../../images/linkexternal.gif') center right no-repeat;
  padding-right:14px;
}

a.external[href^="https://"] {
  background: url('../../images/httpsexternal.gif') center right no-repeat;
  padding-right:15px;
}

a.external[href^="mailto:"] {
  background: url('../../images/mailtoexternal.gif') center right no-repeat;
  padding-right:18px;
}

a.external[href^="tel:"] {
  background: url('../../images/telexternal.png') center right no-repeat;
  padding-right:18px;
}

/* Self admin action links */
li.selfadminaction {
    font-size:1.2em;
    margin-bottom:1.25em;
}

/* Soft token and smart credential activation info table */

table.activationinfo {
    /* Just as wide as it needs to be */
    width: 1%;
    /* For mobile Safari */
    -webkit-text-size-adjust: 100%;
    background: #C3D9FF;
}

table.activationinfo th {
    white-space: nowrap;
    background: inherit;
}

table.activationinfo td {
    font-family: 'Roboto', Arial, "Courier New", Courier, monospace;
    white-space: nowrap;
    background: inherit;
}

img.tokenserialnumbers {
    width: 260px; /* 100% for desktop override */
}

/* To highlight the password used in conjunction with QR code soft token activation */

#qrcodepwd {
    font-weight: bold;
    font-size: large;
    color: #A02C2C;
    margin: 10px 0 10px 0;
}

/* Things that should only be printed or only displayed when JS is enabled */

.printonly, .jsonly {
    display: none;
}

/* Class for hiding things that are only of value to a screen reader. This includes
   table captions that we don't want sighted users to see, labels we don't want
   sighted users to see, and so on.
*/

.screenReaderOnly {
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   width: 1px;
   overflow: hidden;
   position: absolute !important;
}

caption.screenReaderOnly {
    /* Using absolute positioning in conjunction with column width percentages
       in a table causes layout problems where the width of the first column is
       no longer respected. For table captions, it seems that we don't need to
       perform an absolute position anyway, so we'll override it here.
    */
    position: inherit !important;
}

/* For our skip navigation link: only shown when it gets focus */

#skipToMainContent a {
    padding: 6px;
    position: absolute;
    top: -40px;
    left: 0px;
    font-weight: bold;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-right-radius: 8px;
    background:transparent;
    -webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100;
}

#skipToMainContent a:focus {
    position: absolute;
    left: 0px;
    top: 0px;
    color: white;
    background: #87189d; /* Entrust Purple */
    outline: 0;
    -webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear;
}

/* Our CSS only accessible tab implementation currently only used for tabbing between legacy Entrust and Entrust DataCard token serial number images */

#tokenhelp {
    display: flex;
    flex-wrap: wrap;
}

[name=tabs] {
    opacity: 0;
    position: absolute;
}

[role="tab"] {
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    font-weight: 600;
    color: darkslategray;
    cursor: pointer;

    flex-basis: 5em;
    flex-shrink: 1;
    flex-grow: 1;
}

/* Style the tab that has focus */
[name="tabs"]:focus + [role="tab"] {
    border: 2px solid #000000;
}

/* Style the currently selected / checked tab */
[name="tabs"]:checked + [role="tab"] {
    background: #A4B3BD;
    color: black;
}

/* Change from dark slate gray to black text when we hover */
[name="tabs"]:hover + [role="tab"] {
    color: black;
}

[role="tabpanel"] {
    background: #f2f2f5;
    display: none;
    flex-basis: 100%;
}

/* Show the currently selected tab content */
[name="tabs"]:nth-of-type(1):checked ~ [role="tabpanel"]:nth-of-type(1),
[name="tabs"]:nth-of-type(2):checked ~ [role="tabpanel"]:nth-of-type(2) {
    display: block;
}

.confirmQuestion:before {
  font-family: 'Material Icons';
  font-size: 32px;
  content: 'help_outline' / '';
  vertical-align: middle;
  padding-right: 5px;
  font-weight: lighter;
  color: #87189d;
}

/* To closely mimic an IDaaS passkey button without the transition effects */

#passkeyButton {
   cursor: pointer;
   font-weight: 500;
   justify-content: center;
   letter-spacing: 0.42855px;
   line-height: 26.25px;
   color: rgb(105, 0, 112);
   outline-color: rgb(105, 0, 112);
   padding: 7px 21px 7px 21px;
   text-rendering: optimizelegibility;
   user-select: none;
   vertical-align: middle;
   width: 252px;
   background-color: transparent;
   margin-top: 7px;

   border-bottom-color: rgba(105, 0, 112, 0.5);
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
   border-bottom-style: solid;
   border-bottom-width: 1px;

   border-left-color: rgba(105,0,112, 0.5);
   border-left-style: solid;
   border-left-width: 1px;

   border-right-color: rgba(105,0,112, 0.5);
   border-right-style: solid;
   border-right-width: 1px;

   border-top-color: rgba(105,0,112, 0.5);
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-top-style: solid;
   border-top-width: 1px;
}

#passkeyButton:hover {
   background-color: rgba(105, 0, 112, 0.04);
   border: 1px solid #690070;
}

#passkeyButton:active {
   background-color: rgb(206,171,208);
}

#passkeyButton > span {
    font-size: 18px;
    vertical-align: middle;
}

#passkeyButton > span:before {
    font-family: 'Material Icons';
    font-size: 28px;
    margin-right: 8px;
    content: 'vpn_key' / '';
    vertical-align: middle;
}

/* After button is pressed, mask the page to prevent user interaction */
.mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10; /* some high z-index */
    width: 100vw;
    height: 100vh;
    opacity: 0;
    user-select: none; /* prevents double clicking from highlighting entire page */
    cursor: wait;
}

/* Getting ARIA to inform SR to read important messages means we must first hide them then display via JS */
[aria-atomic="true"] {
    display: none;
}