#id2-list-container {
  z-index: 1000;
  position: absolute;
  display: inline-block;
}

.id2-list {
  border: 1px solid #0066cc;
  border-top: 0px solid;
}

.id2-item-container {
  background-color: #deedfb;
  padding-left: 10px;
  height: 45px;
  border-top: 1px solid #c8e0f8;
}

.id2-item-container:hover {
  background-color: #a7cef4;
}

.id2-item-container > div:nth-child(1) {
  /*display:inline;*/
  white-space: nowrap;
  overflow: hidden;
  width: 70%;
}

.id2-item-container > div:nth-child(2) {
  float: right;
  width: 20px;
}

.id2-item-container > div:nth-child(3) {
  float: right;
  width: 50px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.id2-item-container > div {
  display: inline-block;
}

.id2-delete {
  text-align: right;
  padding: 1px 3px 3px 3px;
  cursor: hand;
}

.id2-lock-icon {
  text-align: center;
}

.id2-id {
  font-weight: bold;
  font-size: 11pt;
  color: black;
  line-height: 45px;
}

.id2-date-label {
  font-size: 6pt;
  text-align: center;
  color: #6aabed;
}

.id2-last-use-date {
  text-align: center;
  line-height: 15px;
  font-size: 6pt;
  font-weight: bold;
  color: #0066cc;
}

.id2-selected .id2-delete {
  visibility: hidden;
}

.id2-selected > .id2-item-container {
  background-color: #a7cef4;
  border: solid 1px #0066cc;
}

/* ------------------------ pinpad ---------------------------------------------*/

/* ----------------- pinpad  -------------------- */
.pinsign-pinpad-title-bar {
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #7c49f6;
}

.pinsign-pinpad-title-bar > .pinpad-title {
  padding-left: 15px;
  vertical-align: middle;
  float: left;
  font-weight: bold;
  height: 100%;
  line-height: 30px;
}

.pinsign-pinpad-title-bar > .pinpad-close {
  padding-right: 15px;
  vertical-align: middle;
  float: right;
  height: 100%;
  line-height: 30px;
}

/*----------- float pinpad --------------------------*/
#pinsign-pinpad-container {
  width: 310px;
  height: 190px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  background-color: white;
  margin-top: 5px;
  left: 0px;
}

#pinsign-pinpad-container .pinsign-pinpad-body {
  margin: 0px 12px 0px 12px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 7px;
  height: 100px;
  border-bottom: solid 1px #cccccc;
}

#pinsign-pinpad-container .pinsign-pinpad-number {
  width: 36px;
  height: 36px;
  margin: 4px 5px 4px 5px;
  float: left;
  background-image: url('/wizvera/pinsign/img/pinpad-nums.png');
}
#pinsign-pinpad-container .pinsign-pinpad-command-bar {
  width: 100%;
  height: 35px;
  margin-top: 10px;
}

#pinsign-pinpad-container .pinsign-pinpad-command-button {
  margin-left: 15px;
  margin-right: 12px;
  display: inline-block;
  vertical-align: middle;
  margin-top: auto;
  height: 35px;
  line-height: 35px;
  text-align: center;
  float: left;
}
/*------------- mobile -------------------*/

#pinsign-pinpad-mobile-container {
  width: 100%;
  border-top: solid 1px #666666;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  position: relative;
  overflow: visible;
  background-color: #666666;
}

#pinsign-pinpad-mobile-container > .pinsign-pinpad-body {
  margin: 0 auto;
  overflow-y: auto;
}

#pinsign-pinpad-mobile-container > .pinsign-pinpad-command-bar {
  /*height: 100%;*/
  width: 100%;
}

#pinsign-pinpad-mobile-container .pinsign-pinpad-command-button {
  line-height: 56px;
  font-size: 12pt;
  /* font-weight: bold; */
  cursor: pointer;
  width: 49%;
  text-align: center;
  display: inline-block;
}

#pinsign-pinpad-mobile-container .pinsign-pinpad-number {
  box-sizing: border-box;
  width: 25%;
  height: 56px;
  line-height: 56px;
  text-align: center;
  color: white;
  font-size: 28px;
  font-family: Roboto;
  float: left;
  background-size: 396px 36px;
  border-right: solid 1px #595959;
  border-bottom: solid 1px #595959;
  /* background-image: url('/wizvera/pinsign/img/pinpad-nums-mobile.png'); */
}

#pinsign-pinpad-mobile-container .pinpad-clear {
  background: url('/wizvera/pinsign/img/pinpad_delete.svg') no-repeat center;
  background-size: auto 23px;
  color: #ffffff00;
}

/*-------------------------------------------*/
.pinsign-pinpad-embed-number {
  width: 36px;
  height: 36px;
  margin: 4px 5px 4px 5px;
  float: left;
  background-size: 396px 36px;
}

.pinpad-number {
}
.pinpad-empty {
}
.pinsign-pinpad-command-bar > .pinpad-clear {
}
.pinsign-pinpad-command-bar > .pinpad-reset {
}
.pinsign-pinpad-command-bar > .pinpad-complete {
  width: 110px;
  float: right;
}

.pinsign-pinpad-mask-container {
  width: 120px;
  display: inline-block;
  position: relative;
}

.pinsign-pinpad-mask-container-large {
  width: 210px;
}

.pinsign-pinpad-mask {
  display: inline-block;
  float: left;
  width: 16px;
  height: 16px;
  margin: 2px;
  background: url('/wizvera/pinsign/img/pinpad-mask.png') -16px 0px;
}

.pinsign-pinpad-mask-large {
  width: 23px;
  height: 23px;
  margin: 4px;
  background: url('/wizvera/pinsign/img/pinpad-mask-large.png') -23px 0px;
}

.mask-number {
  background-position: 0px 0px;
}
.mask-number-large {
  background-position: 0px 0px;
}

.pinsign-pinpad-command-button,
.pinpad-number,
.pinpad-close {
  cursor: pointer;
}

/*  ------------- on / off switch ----------- */
/* SWITCH STYLES */
/* SOURCE: https://proto.io/freebies/onoff/ */
.onoffswitch {
  position: relative;
  width: 56px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  width: 57px;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #ffffff;
  border-radius: 20px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 22px;
  padding: 0;
  line-height: 22px;
  font-size: 12px;
  color: black;
  font-family: Trebuchet, Arial, sans-serif;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: 'ON';
  padding-left: 6px;
  background-color: #78797c; /*#489EF3; */
  color: #ffffff;
}

.onoffswitch-inner:after {
  content: 'OFF';
  padding-right: 6px;
  background-color: #78797c; /*#939598;*/
  color: #ffffff;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 16px;
  margin: 5px;
  background: #ffffff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  border: 2px solid #ffffff;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
}

.pinsign-connected-onoff-icon {
  float: left;
}

.pinsign-action-button,
.pinsign-item-more,
.pinpad-number,
.pinsign-select-item,
.pinsign-select-action-go-issue,
.pinsign-nav-prev,
.pinsign-nav-next,
.pinsign-next,
.pinsign-action-issue,
.pinsign-pinpad-command-button {
  cursor: pointer;
}

/* -------------- color --------------------- */
.pinsign-color-title {
  color: #7c49f6;
}
.pinsign-border-gray {
  border: solid 1px #95919b;
}
.pinsign-border-purple {
  border: solid 1px #7c49f6;
}
.pinsign-color-button-default {
  background-color: #794df6;
  font-weight: bolder;
  color: white;
}
.pinsign-color-button-warning {
  background-color: #4ebef6;
  font-weight: bolder;
  color: white;
}
.pinsign-color-bg-lightblue {
  background-color: #159cd8;
}
.pinsign-color-link {
  color: #489ef3;
}
.pinsign-color-text-transparent {
  color: rgba(255, 255, 255, 0);
}
.pinsign-color-text-white {
  color: white;
}
.pinsign-color-text-gray1 {
  color: #767676;
}
.pinsign-color-text-gray2 {
  color: #808080;
}
.pinsign-color-text-gray3 {
  color: #808080;
}
.pinsign-color-text-purple {
  color: #7c49f6;
}
.pinsign-color-text-placeholder {
  color: #999999;
}
.pinsign-color-bg-pinpad-large {
  background-color: #f2f2f2;
  width: 444px !important;
}
/* ----------------- color -------------------- */

.pinsign-connected-complete-icon {
  background: url('/wizvera/pinsign/img/pinsign-connected-complete.png') no-repeat center;
}
.pinsign-icon-list {
  background: url('/wizvera/pinsign/img/pinsign-list.png') no-repeat center center;
}
.pinsign-icon-list:hover {
  background: url('/wizvera/pinsign/img/pinsign-list_hover.png') no-repeat center center;
}
.pinsign-icon-connected {
  background: url('/wizvera/pinsign/img/pinsign-connected.png') no-repeat center center;
}
.pinsign-icon-connected-disable {
  background: url('/wizvera/pinsign/img/pinsign-connected_disable.png') no-repeat center center;
}
.pinsign-icon-connected:hover {
  background: url('/wizvera/pinsign/img/pinsign-connected_hover.png') no-repeat center center;
}
.pinsign-icon-webauthn-delete {
  background: url('/wizvera/pinsign/img/pinsign-webauthn-delete@2x.png') no-repeat center center;
  background-size: 100%;
}
.pinsign-icon-webauthn-delete-disable {
  background: url('/wizvera/pinsign/img/pinsign-webauthn-delete_disable@2x.png') no-repeat center center;
  background-size: 100%;
}
.pinsign-icon-webauthn-delete:hover {
  background: url('/wizvera/pinsign/img/pinsign-webauthn-delete_hover@2x.png') no-repeat center center;
  background-size: 100%;
}
.pinsign-icon-change-pin {
  background: url('/wizvera/pinsign/img/pinsign-change-pin.png') no-repeat center center;
}
.pinsign-icon-change-pin:hover {
  background: url('/wizvera/pinsign/img/pinsign-change-pin_hover.png') no-repeat center center;
}
.pinsign-icon-delete {
  background: url('/wizvera/pinsign/img/pinsign-delete.png') no-repeat center center;
}
.pinsign-icon-delete:hover {
  background: url('/wizvera/pinsign/img/pinsign-delete_hover.png') no-repeat center center;
}
.pinsign-icon-menu {
  background: url('/wizvera/pinsign/img/pinsign-menu.png') no-repeat center center;
}
.pinsign-icon-menu:hover {
  background: url('/wizvera/pinsign/img/pinsign-menu_hover.png') no-repeat center center;
}
.pinsign-icon-pinsign-type {
  background: url('/wizvera/pinsign/img/pinsign-icon@2x.png') no-repeat center center;
  background-size: 100%;
}
.pinsign-icon-connected-type {
  background: url('/wizvera/pinsign/img/pinsign-connected-icon.png') no-repeat center center;
}
.pinsign-icon-pinlist-type {
  background: url('/wizvera/pinsign/img/pinsign-icon_pinlist.png') no-repeat center center;
}

.pinsign-connected-message-detail-message a:link {
  text-decoration: none;
}
.pinsign-connected-message-detail-message a:visited {
  text-decoration: none;
}
.pinsign-connected-message-detail-message a:hover {
  text-decoration: none;
}
.pinsign-connected-message-detail-message a:active {
  text-decoration: none;
}

.pinsign-animate,
.pinsign-animate > div,
.pinsign-animate input,
.pinsign-animate .pinpad-container,
.pinsign-animate .pinsign-scale-down,
.pinsign-animate .pinsign-pinpad-mask-container,
.pinsign-animate .pinsign-body-pulldown {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}