/* Copyright (C) Entrust 2021. 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.ruleUnknown: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('bannerssm02.png') no-repeat 30px 0 #fff;
    width: 825px;
    text-align: right;
    margin-bottom: 0;
    height: 87px;
}

/*#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:95%;}
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; }

.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;
}


div input[type="text"] {font-size:18;}
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 {
    padding-left: 12px;
    background: url('../../images/required.gif') no-repeat top left;
}

p.invalid {
  color: red;
  font-style: italic;
  font-weight: bold;
  margin-bottom: .25em;
}

input.invalid, textarea.invalid, select.invalid {
    border: 1px dashed red !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%;
}

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

label {
   font-size :12px;
}

/* 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 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;
}

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

#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 f to draw attention */

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

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

/* Add images to the standard Blueprint classes of error, notice, and success.
   Respond.js seems to have issues (in conjunction with IE 8) unless !important
   is added to all rules that enhance the Blueprint rules defined in a different
   CSS file.
*/

/* Status box for showing errors, warnings, and success */
.error:before {
  font-family: 'Material Icons';
  font-size: 18px;
  content: 'report';
  vertical-align: sub;
  padding-right: 5px;
  color: #AB0A3D;
}

.success:before {
  font-family: 'Material Icons';
  font-size: 24px;
  color: #5af70a;
  content: 'check_circle';
  vertical-align: sub;
  padding-right: 5px;
}

.notice:before {
  font-family: 'Material Icons';
  font-size: 18px;
  color: #F2A900;
  content: 'warning';
  vertical-align: sub;
  padding-right: 5px;
}

.error, .notice, .success {
    border: none;
    margin-top: 20px;
    padding: 4px 2px 4px 0px;
    width: fit-content;
  font-weight: bold;

    /* For IE which does not support width: fit-content;*/
    display: inline-block;
}

.error {
    background-color: white;
  color: black;
}

.notice {
    background-color: white;
  color: black;
}

.success {
    background-color: white;
  color: black;
}

/* 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;
  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 h4 {
  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  {
  padding-left: 12px; /* Room for the icons */
}

.rules li.ruleSatisfied:before {
  font-family: 'Material Icons';
  font-size: 16px;
  color: green;
  content: 'check_circle';
}

.rules li.ruleNotSatisfied:before {
  font-family: 'Material Icons';
  font-size: 16px;
  color: red;
  content: 'report';
}

.rules li.ruleUnknown:before  {
  font-family: 'Material Icons';
  font-size: 16px;  /* Preferred icon size */
  color: blue;
  content: 'help';
}

/* Expanding / collapsing help text */

.collapse, .expand {
  cursor: pointer;
  background-position: top right;
  background-repeat: no-repeat;
}

.collapse:after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;  /* Preferred icon size */
  color: #87189D;
  content: 'compress';
  vertical-align: middle;
  margin-left: 28px;
}
.expand:after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;  /* Preferred icon size */
  color: #87189D;
  content: 'expand';
  vertical-align: middle;
  margin-left: 28px;
}

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

/* 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: #B33;
    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;
    color: white;
    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;
    background: #FE000C; /* Entrust Red */
    outline: 0;
    -webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear;
}

/* Our CSS tab implementation currently only used for tabbing between legacy Entrust and Entrust DataCard token serial number images */
input[name=tabs], .tabcontent > div {
    display: none;
}

input[name=tabs] + label {
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    font-weight: 600;
    color: darkslategray;
}

input[name=tabs] + label:hover {
    cursor: pointer;
    color: black;
}

input[name=tabs]:checked + label {
    background: #A4B3BD;
    color: black;
}

/* Support for a max tab group of 4, but just add more if needed */
#tab1:checked ~ .tabcontent #content1, #tab2:checked ~ .tabcontent #content2,
    #tab3:checked ~ .tabcontent #content3, #tab4:checked ~ .tabcontent #content4 {
    display: block;
}

.confirmQuestion:before {
  font-family: 'Material Icons';
  font-size: 22px;
  content: 'help';
  vertical-align: sub;
  padding-right: 5px;
  color: purple;
}