oidc-lib/src/web/wallet/css/chapi_personal.css

A library for creating OIDC Service Providers

.cardpic {height: 50px;width:50px;}
.picframe {
  margin: 10px;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  overflow: hidden;
}
.cardcol {padding: 15px; width: 300px;}
.card-selected {background-color: #E1E1E1;}

div#card_8vfgl6YXnkB5RF-LF2A9Ih4LYllskj5hefMIcoHfW2I {}
.card-body-id {padding: .5rem;}
.clms_0 {display: none;}
.clms_1 {display: block;}
.flex-container {
  display: flex;
  justify-content: center;
}
.container-center-outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.container-center-middle {
  display: table-cell;
  vertical-align: middle;
}

.container-center-inner {
  margin-left: auto;
  margin-right: auto;
  width: 66%;
}

.container-center-inner-50 {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.container-center-inner-75 {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

.iframe-container {
  overflow: hidden;
  padding-top: 200%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

.card-set {
  display: flex;
  flex-direction: column;
}

.card-set > div {
  background-color: #f8f8f8;
  margin: 0px;
  border-bottom-style: ridge;
}

.pcard-info {
  margin-top: .7em;
  margin-bottom: .3em;
}

.pcard-title {
  font-weight: 600;
  font-size: .9em;
  line-height: .9em;
}

.pcard-desc {
  font-weight: 300;
  font-size: .9em;
  line-height: .9em;"
  font-style: italic;
}

.figure{
    width:350px;
    height:206px;
    border-radius:5%;
    overflow:hidden;
}
.card_group {
  position: relative;
  top: 0;
  left: 0;
  width: 231px;
  height: 135px;
}
.cg_card {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.cg_details {
  position: absolute;
  top: 100px;
  left: 120px;
}