/* CSS for bootstrap theme */

html,
body {
  height: 100%;
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, #ffffff 100%) no-repeat scroll 0% 0% #ffffff;
  /* The html and body elements cannot have any padding or margin. */
}

/* .card:hover {
  transform: scale(1.05);
  transition: transform 0s ease-in-out;
} */

#internetErrMsg {
  display: none;
}

#errormsg {
  display: none;
}

#authRequired {
  display: none;
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -80px;
  /* Pad bottom by footer height */
  padding: 0 0 80px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 80px;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding-top: 10px;
  overflow: hidden;
}

#header {
  background: #000;
  padding: 20px;
  margin-bottom: 20px;
  color: #fff;
}

#header img {
  margin-right: 20px;
}

#header h1,
h2 {
  /* padding: 40px 0 0 0; */
  /* margin: 0 20px; */
}

#header a {
  color: inherit;
  text-decoration: none;
}

h1 {
  color: #000000;
}

div#id_1_PKI {
  background: #4ab0e1;
  color: #000;
}

div#id_2_GroupIdentity {
  background: #ffd200;
  color: #000000;
}

div#id_3_DiodExternal {
  background: #ffffff;
  color: #000000;
}

div#id_4_EntraID {
  background: #000;
  color: #000000;
}

div#id_5_OCD {
  background: #a885d8;
  color: #000000;
  font-size: 0.84rem;
}

div#id_6_VO {
  background: #ffb4e6;
  color: #000000;
  font-size: 0.84rem;
}

.card,
.navbar-light {
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
  background-image: none;
}

/*div.login-body {
  min-height: 80px;
}*/

.login,
.password {
  text-align: center;
  padding: 20px;
}


li#readmore {
  vertical-align: top;
}

td#readmoretdtitle {
  vertical-align: top;
}

div.form {
  margin: 0 auto;
  max-width: 330px;
}

div.actions {
  margin: 10px 0 0 0;
}

div.actions a {
  margin-top: 10px;
}

.buttons {
  text-align: center;
  margin: 10px 0 0 0;
  cursor: pointer;
}

/* Override bootstrap btn style */
.btn {
  white-space: normal;
}

.btn span.fa {
  padding-right: 8px;
}

/* Make active tab more visible */
li.ui-state-active {
  background-color: rgb(250, 250, 250);
  background-color: rgba(250, 250, 250, 0.9);
}

#appslist,
#password,
#loginHistory,
#logout,
#oidcConsents {
  margin-top: 20px;
}

.assistive-text {
  position: absolute;
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

div.category {
  margin: 20px 0;
  cursor: grab;
}

div.category1 {
  margin: 20px 0;
  cursor: grab;
}

div.application {
  /* margin: 5px 0; */
  /* overflow: hidden; */
  min-height: 100%;
}

div.application a,
div.application a:hover {
  text-decoration: none;
}

p.notifCheck label {
  margin-left: 5px;
  margin-top: 3px;
  display: inline-block;
}

button.flagBtn {
  background: transparent;
  border: none;
  padding: 3px;
}

img.langicon {
  cursor: pointer;
}

button.idploop {
  max-width: 300px;
}

button.idploop img {
  max-height: 30px;
}

div.oidc_consent_message>ul {
  text-align: left;
  list-style: circle;
}

.span-chevron-aligner {
  position: relative;
  top: 1.5px !important;
}

.link-text {
  color: #527edb !important;
  pointer-events: none;

}

.link-text:hover {
  color: #f16e00 !important;
  cursor: pointer !important;
}

.reset-2fa-enable {
  border: none;
  background: transparent;
  padding: 0px;
  color: #527edb;
  font-style: italic;
  font-weight: bold;
  text-decoration: underline;
}

.reset-2fa-enable:hover {
  color: #f16e00;
}

.reset-2fa-enable:visited {
  font-weight: 400;
}

.btn_radius_disabled {
  opacity: 0.2 !important;
  cursor: default;
  border: none;
}

#col_radius {
  position: relative;
}

/* #logincontent {
  position: relative;
} */

/* Default: 1 column */
#login-first-row > * {
  flex: 0 0 auto;
  width: 100%;
}

/* Custom breakpoint at 880px → 3 columns */
@media (min-width: 860px) {
  #login-first-row > * {
    flex: 0 0 auto;
    width: calc(100% / 3);
  }
}

#spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 12;
}

.blurred {
  filter: blur(5px);
  pointer-events: none;
}

#cover-spin {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: none;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#cover-spin::after {
  content: '';
  display: block;
  position: absolute;
  left: 48%;
  top: 40%;
  width: 40px;
  height: 40px;
  border-style: solid;
  border-color: #f16e00;
  border-top-color: transparent;
  border-width: 4px;
  border-radius: 50%;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}

/* Responsive styles */
@media (min-width: 480px) {
  div.application {
    /* height: 80px; */
  }

  div.application h4.appname {
    margin: 0;
  }

  div.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 468px;
  }

  #wrap {
    margin: 0 auto -60px;
  }

  #footer {
    height: 80px;
  }

  /* div.login-body {
    height: 170px;
  }*/
}

@media (min-width: 768px) {
  div.application {
    /* height: 80px; */
  }

  div.application h4.appname {
    margin: 0;
  }

  div.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 744px;
  }

  #wrap {
    margin: 0 auto -60px;
  }

  #footer {
    height: 80px;
  }

  /*div.login-body {
    height: 120px;
  }*/
}

@media (min-width: 980px) {
  div.application {
    /* height: 80px; */
  }

  div.application h4.appname {
    margin: 0;
  }

  div.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
  }

  #wrap {
    margin: 0 auto -60px;
  }

  #footer {
    height: 80px;
  }
}

@media (min-width: 1220px) {
  div.application {
    /* height: 80px; */
  }

  div.application h4.appname {
    margin: 0;
  }

  div.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
  }

  #wrap {
    margin: 0 auto -60px;
  }

  #footer {
    height: 80px;
  }
}

@media (min-width: 1380px) {
  div.application {
    /* height: 80px; */
  }

  div.application h4.appname {
    margin: 0;
  }

  div.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
  }

  #wrap {
    margin: 0 auto -60px;
  }

  #footer {
    height: 80px;
  }
}

/* Added CSS for Mobile vesion PKI */
/* @media (max-width:540px) {

  div#id_1_PKI {
    display: none !important;
  }

} */
.hiddenFrame {
  border: none;
  display: hidden;
  margin: 0
}

.noborder {
  border: none;
}

.max {
  width: 100%;
}

.link {
  cursor: pointer;
}

.nodecor:hover,
.nodecor:active.nodecor:focus {
  text-decoration: none;
}

.fa.icon-blue {
  color: blue;
}

.progress-bar-animated {
  width: 100%;
}

input.key {
  font-family: 'password';
  width: 100px;
}

@font-face {
  font-family: 'password';
  /*font-style: normal;*/
  /*font-weight: 400;*/
  src: url(/static/common/fonts/password.ttf);
}

/* popover */
div.popover {
  max-width: 50%;
}

div.popover .popover-header,
div.popover strong {
  color: #ff6600;
}

li li::marker {
  color: #f16e00 !important;
}

.modal-footer {
  flex: 1;
}

.disabled-totp2f:focus {
  border: none;
  outline: none;
}

.disabled-totp2f img {
  opacity: 45%;
}

.tooltiptext {
  display: none;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  opacity: 0;
  border: solid 1px #000;
  font-size: 12px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  left: 37%;
  top: 35%;
}

.disabled-totp2f:hover .tooltiptext {
  display: block !important;
  opacity: 1;
  padding: 10px 10px;
  font-size: 12px;
}

/* Styling for App logo */
.applogo {
  width: 40px !important;
  object-fit: contain;
  display: block;
  margin: auto;
}

@media (max-width: 1280px) {
  .applogo {
    width: 40px !important;
  }
}

@media (max-width: 1024px) {
  .applogo {
    width: 30px !important;
  }
}

@media (max-width: 768px) {
  .applogo {
    width: 40px !important;
  }
}

/* CSS for proxy Single Sign On Post (PSSOP) */
.PSSOP {
  text-align: center;
}

.PSSOP .card-footer {
  border-top: solid 2px #ccc;
}

.PSSOP .card-footer h4 {
  margin-bottom: 0 !important;
}


.back-to-top {
  position: fixed;
  bottom: 58px !important;
  right: 58px !important;
  display: none;
}

.lock-alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-weight: 700;
  border: 0.125rem solid transparent;
}

.footer {
  padding-top: .85rem;
  padding-bottom: .85rem;
}

@media (max-width:767px) {
  .dropdown-menu {
    border: none !important;
  }

}

.errormsg_21 {
  background-color: #ff7900;
  padding: 13px 5px 1px 5px;
  width: 100%;
  margin-bottom: 12px;
  height: 62px;
}

#menucontent {
  max-width: 100%;
}

#wraparound {
  max-width: 100%;
}

/* .table td, .table th {
  word-break: break-word;
} */

.gi_font_errormsg_21 {
  font-size: 1.5rem !important;
  letter-spacing: -.03125rem;
}

#mainPageError {
  display: none;
}

#mainPageError {
  display: none;
}

.errormsg_86 {
  background-color: #ff7900;
  padding: 13px 5px 1px 5px;
  width: 100%;
  margin-bottom: 12px;
  height: 68px;
}

.gi_font_errormsg_86 {
  font-size: 1.5rem !important;
  letter-spacing: -.03125rem;
}

#webauthntrusted {
  /* width: auto;
  height: 180px; */
}

.gi_font_21 {
  font-size: 1.5rem !important;
  letter-spacing: -.03125rem;
}

.mobile-margin-1 {
  margin-top: 5px;
  margin-bottom: 5px;
}

@media (max-width:767px) {
  .mobile-margin-1 {
    margin-bottom: 20px;
  }

  .mobile-margin-1:last-child {
    margin-bottom: 5px;
  }

  .mobile-margin-1:first-child {
    margin-top: 5px;
  }

  .mobile-margin-2 {
    margin-bottom: 20px;
  }

  .mb-mobile {
    margin-bottom: 20px;
  }

  .PSSOP {
    margin-bottom: 20px;
  }

  .PSSOP:last-child {
    margin-bottom: 0px;
  }
  
}