/*@import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap);
*/

@-webkit-keyframes rotation-right {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-webkit-keyframes rotation-left {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-359deg);
  }
}


@media (max-width: 1000px) {
  dialog {
    left: 55%;
    -webkit-transform: translateX(-55%) translateY(-50%);
    transform: translateX(-55%) translateY(-50%);
  }
}

@media (min-width: 1001px) {
  dialog {
    left: 40%;
    -webkit-transform: translateX(-55%) translateY(-50%);
    transform: translateX(-55%) translateY(-50%);
  }
}

@media (min-width: 1200px) {
  dialog {
    left: 30%;
    -webkit-transform: translateX(-55%) translateY(-50%);
    transform: translateX(-55%) translateY(-50%);
  }
}

@media (min-width: 1400px) {
  dialog {
    left: 20%;
    -webkit-transform: translateX(-55%) translateY(-50%);
    transform: translateX(-55%) translateY(-50%);
  }
}


html,
body {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow: hidden;


  background-color: #f8f9fa !important;
  padding: 0;
  margin: 0;
  font-family: "Poppins", "Rubik", sans-serif;
  background-position: right;
  background-repeat: no-repeat;
  background-size: auto;
  /*position: relative;*/

  transition: all 500ms, transform 500ms;
  -webkit-tap-highlight-color: transparent; /* disable android chrome button "overlay effect" on mobiles */
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.issueKeys {
  border: 1px solid #ccc;
  background-color: #eee;
  width: 264px;
  height: 94px !important;
  font-size: 0.7em;
  overflow: hidden;
  padding: 4px 6px;
  cursor: pointer;
  filter: blur(2px); /*filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .0));*/
  transition: all 500ms, transform 500ms;
}
.issueKeys:hover {
  filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .2));
}
.issueKeys:active {
  filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .0));
  -webkit-box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .2);
}

a.actionButton {
  max-height: 24px !important;
  width: auto;
  margin: 4px 0;
  padding: 4px 0;
  text-decoration: none !important;
  display: inline-table;
}

/* general styling rules */
input, select, textarea, button { 
  font-family: "Poppins", "Rubik", sans-serif;
  font-size: 0.8em;
  min-height: 22px;
  border: 1px solid #C0C0C0;
  border-radius: 3px;
  padding: 0 2px;
  border-radius: 6px;
}
textarea:focus, input:focus, select:focus{
  outline: none;
}
td, div {
  font-family: "Poppins", "Rubik", sans-serif;
}

textarea {
  vertical-align: middle;
  height: 60px; /*!important;*/
}
/* general styling rules */


/** latest customizations **/
.flexRow {
  display: flex;
  flex-direction: row;
}
.flexCol {
  display: flex;
  flex-direction: column;
}
.flexGap {
  gap: 4px;
}

td.homeBanner {
  max-height: 58px;
  background: linear-gradient(to bottom,rgba(238,238,238,1),rgba(238,238,238,0.25));
}

.specialGrandientBGstable {
  background: linear-gradient(-45deg, rgba(238,119,82,0.5), rgba(231,60,126,0.5),rgba(35,166,213,0.5), rgba(35,213,171,0.5));
	background-size: 100% 100%;
  border-radius: 50%;
}

.specialGrandientBG {
  /*background: linear-gradient(-45deg, rgba(238,119,82,0.5), rgba(231,60,126,0.5),rgba(35,166,213,0.5), rgba(35,213,171,0.5));*/
  background: linear-gradient(-45deg, rgba(0,0,0,0.25), rgba(170,20,80,0.5),rgba(20,45,170,0.5), rgba(170,170,20,0.5));
	background-size: 400% 400%;
	animation: gradient 20s ease infinite;
  border-radius: 50%;
}

.welcomeStatLogo {
  width: 18px;
}
.consentStats {
  width: 100%;
}
.consentStats td:first-child{
  text-align:right;
  width: 50%;
}
.consentStats td:nth-child(2){
  text-align:left;
  width: 50%;
}
.myControllersTable tr {
  line-height: 24px;
  opacity:0.75;
}
.myControllersTable tr.newDID_labels, .myControllersTable tr.newDID_controllerMethodTransaction {
  line-height: 24px;
  opacity:1;
}
td.newDID_action_label {
  font-size: 7pt;
}
.newDID_labels {
  line-height: 18px;
}

.DID_docLocVerify {
  background-size: 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  min-width: 14px;
  opacity: 0.5;
}
.DID_docLocation {
  overflow: hidden;
  cursor: default;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 6pt;
  position: relative;
  top: -10px;
  left: 4px;
  color: #3C78D8;
}
.DID_docLocation a {
  display:none;
  text-decoration: none;
}
.DID_docLocation a:hover {
  text-decoration: underline;
}
.DID_docLocation a:visited {
  color: #3C78D8;
}
.myControllersTable td:first-child{

}
.myControllersTable td:nth-child(2){

}
.myControllersTable td:nth-child(5){
  font-size: 0.8em
}
.myControllersTable button {
  font-size: 10px;
}


input.did_identifier {
  border-style: dashed;
}
.did_date {

}
input.did_assertionData {
  border-style: dotted;
  color: #6A1A41;
  font-size: 1.1em;
}
a.act {
  font-size:0.75em;
  text-decoration: none;
  color:#202020;
}
a.act:hover {
  text-decoration: underline;
}
.badgeIcon {
  background: url('../images/certificate.svg');
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  min-width:14px;
}
/** latest customizations **/

/* main form objects */
.header {
  display:none;
  position: fixed;
  top:0;
  height:60px; /*40px*/
  width:100%;
  transition: all 500ms, transform 500ms;
}
.body {
  display:none;
  position: fixed;
  height:calc(100vh - 100px);
  top:60px;
  background-color: #fff;
  text-align: center;
  cursor: default;
  transition: all 500ms, transform 500ms;
}

.operatorView {
  display: none;
  position: fixed;
  top: 60px; 
  max-width: 600px;
  margin: auto;
}

.footer {
  display:none;
  position: fixed;
  bottom:0;
  height:40px;
  width:100%;
  transition: all 500ms, transform 500ms;
  z-index: 2000;
}
/* main form objects */

/* special objects within main form objects */
.loading {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2021;
  width: 88px;
  height: 88px;
  /*margin: -55px 0px 0px -55px;*/
  border-radius: 50%;
  
  overflow: clip;
  cursor: wait;
  z-index: 9999;

  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 100% 100%;
	animation: gradient 4s ease infinite;
  transform: translate(-50%, -50%);

  border: 4px solid #fff;
  filter: drop-shadow(2px 4px 6px black);

}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.logoRotateClockwise {
  /*padding: 4px;*/
  border-radius: 50%;
  border: 4px solid rgb(255, 255, 255);
  text-align: center;
  width: inherit !important;
  height: inherit !important;
  position: relative;
  left: -4px;
  top: -4px;
}
.logoRotateClockwise > img, .logoRotateClockwise > div, .logoRotateClockwise > div > img {
  width: inherit; /*46px;*/
  height: inherit; /*39px;*/
  position: fixed;
}

.logoRotateClockwise > div.accountLogoLoading {
  /*border: 10px solid rgba(0,0,0,0.5);
  width: calc(100% - 20px);
  height: calc(100% - 20px);*/
  width:100%;
  height:100%;
  /*background: #000;*/
}

.logoRotateClockwise > div.accountLogoLoading > svg {
  width: 100%;
  height: 100%;
}

.logoRotateClockwise > div, .logoRotateClockwise > div.accountLogoLoading > svg {
  border-radius: 50%;
}

/* popup progressBar */
.startUpProgress
{
  /*background-color: rgba( 71, 83, 163,0.75);*/
  border-top: 1px solid #F5F5F5;
  height: 2px;
  margin: 0 2px 0 1px;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}

  /* animated logo spin*/
  .logoRotateXaxis {
    -webkit-animation: sqrA 2s infinite linear;
            animation: sqrA 2s infinite linear;
  }
  
  @-webkit-keyframes sqrA {
    from {
      -webkit-transform: translateX(120px) rotateY(0deg);
              transform: translateX(120px) rotateY(0deg);
    }
    to {
      -webkit-transform: translateX(120px) rotateY(360deg);
              transform: translateX(120px) rotateY(360deg);
    }
  }
  
  @keyframes sqrA {
    from {
      -webkit-transform: translateX(120px) rotateY(0deg);
              transform: translateX(120px) rotateY(0deg);
    }
    to {
      -webkit-transform: translateX(120px) rotateY(360deg);
              transform: translateX(120px) rotateY(360deg);
    }
  }
  .logoStartUp img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    
  }
  .loadingLogo {
    width: inherit;
    height: inherit;
    position: fixed !important;
    right: 0px !important;
    bottom: 0px !important
  }
  .logoRotateClockwiseVerySlow{
    -webkit-animation:spin 60s linear infinite;
    -moz-animation:spin 60s linear infinite;
    animation:spin 60s linear infinite;
  }
  .logoRotateClockwise{
    width: 100%;
    -webkit-animation:spin 2.15s linear infinite;
    -moz-animation:spin 2.15s linear infinite;
    animation:spin 2.15s linear infinite;
  }
  /*@-moz-keyframes cwsLogoRotate { 75% { -moz-transform: rotate(90deg); } }
  @-webkit-keyframes cwsLogoRotate { 75% { -webkit-transform: rotate(90deg); } }
  @keyframes cwsLogoRotate { 50% { -webkit-transform: rotate(320deg); transform:rotate(320deg); opacity:1; } 66.6% { -webkit-transform: rotate(330deg); transform:rotate(330deg);opacity:1; } 80% { -webkit-transform: rotate(340deg); transform:rotate(340deg); opacity:1; } 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); opacity:1; }  }
  /* animated logo spin*/

  /* animated loader/timing spin*/
  .smallTimerSpinner {
    display:none;
    border-top: 2px solid rgb(169,3,41);
    border-radius: 10px !important;
    width: 14px;
    position:relative;
    left:-4px;
    animation: spin 1s linear infinite;
    box-shadow: none !important;
    transition: all 1000ms, transform 1000ms;
    border-bottom: 1px solid #f5f5f5;
  }
  .smallTimerSpinner_menuIcon {
    border-top: 2px solid rgb(169,3,41);
    border-radius: 10px !important;
    width: 14px;
    position: relative;
    left: 4px;
    animation: spin 1s linear infinite;
    box-shadow: none !important;
    transition: all 1000ms, transform 1000ms;
    border-bottom: 1px solid #f5f5f5;
    top: 10px;
  }
  .smallTimerSpinner_tdIcon {
    /*border-top: 2px solid rgb(169,3,41);*/
    border-radius: 10px !important;
    width: 18px;
    position: absolute;
    left: 6px;
    animation: spin 1s linear infinite;
    box-shadow: none !important;
    transition: all 1000ms, transform 1000ms;
    border-bottom: 1px solid #f5f5f5;
    top: 18px;
  }
  .loader {
    border: 3px solid #F5F5F5;
    border-top: 3px solid #3498db;
    border-radius: 20px !important;
    width: 40px !important;
    height: 40px !important;
    animation: spin 1s linear infinite;
    box-shadow: none !important;
    transition: all 2000ms, transform 2000ms;
  }
  .loadingDialogSpinner {
    border: 3px solid #F5F5F5;
    border-top: 3px solid #3498db;
    border-left: 3px solid #3498db;
    border-right: 3px solid #3498db;
    border-radius: 50px !important;
    width: 80px !important;
    height: 80px !important;
    animation: spin 2s linear infinite;
    box-shadow: none !important;
    transition: all 2000ms, transform 2000ms;
  }
  .loadingDialogSpinner_thick {
    border: 6px solid #F5F5F5;
    border-top: 6px solid #3498db;
    border-left: 6px solid #3498db;
    border-right: 6px solid #3498db;
    border-radius: 50px !important;
    width: 80px !important;
    height: 80px !important;
    animation: spin 2s linear infinite;
    box-shadow: none !important;
    transition: all 2000ms, transform 2000ms;
  }
  
  @keyframes spin {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
      transform: rotate(360deg); 
      }
  }
  /* animated loader spin*/
  .header .menuRightNotificationIcon {
    visibility: hidden;
    display: flex !important;
    position: fixed;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    right: 72px;
    width: 30px;
    height: 30px;
    top: 15px;
  }
  .notificationLogo {
    width: 30px;
    cursor: pointer;
    border: transparent;
    opacity: 0.4;
    border-radius: 50%;
    background: url('../images/notification.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    backdrop-filter: brightness(0.9);
    background-position: center;
    padding: 15px
  }
  .notificationLogo:hover {
    backdrop-filter: brightness(1);
  }
.header .helpNotificationButton {
  visibility: hidden;
  display: flex !important;
  position: fixed;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  right: 58px;
  width: 30px;
  height: 30px;
  top: 14px;
}
.header .menuRightAccountIcon {
  display: none;
  text-align: center;
  overflow: hidden;
  position: fixed;
  right: 12px;
  top: 11px;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
}
.accountNotificationLogo {
  width: 32px;
  height: 32px;
  cursor: pointer;
  border: transparent;
  opacity: 0.9;
  background: url('../images/webWalletWH.svg');
  background-size: 36px;
  backdrop-filter: brightness(0.9);
  background-position: center;
  padding: 2px
}
.accountNotificationLogo:hover {
  backdrop-filter: brightness(1);
}
.networkStatus {
  display: none;
  text-align: center;
  overflow: hidden;
  position: fixed;
  right: 12px;
  top: 11px;
}
.networkOnline {
  /*background-color:green;color:#f5f5f5;*/
  opacity: 1;
  cursor: pointer;
}
.networkOffline {
  /*background-color:grey;color:#f5f5f5;*/
  opacity: 0.25;
  cursor: default;
}

.login, .register, .signIn, .home, .sign, .myControllers, .myVault, .utilityPopup {
  display:none;
  transition: all 500ms, transform 500ms;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  height: fit-content;
  position: relative;
  box-shadow: 0 0.5rem 1.2rem rgb(0 0 0 / 50%);
  background: none;
  font-size: 9pt;
  border-spacing: 0;
}

.login {
  background: #f8faff !important
}
.home, .register, .signIn, .sign, .myControllers, .myVault, .utilityPopup {
  background: #f8f9fa  !important;
}

.home > table, .myControllers > table, .myVault > table {
  border-spacing: 0;
  background-color: #f8f9fa !important;
}

.login, .register, .signIn {
  top: calc(50vh - var(--tbl-h)/1.8); /*calc(50vh - var(--tbl-h)/1.55 + 90px);*/
  min-width: 60vw; /*360px;*/
  min-height: 80vh;
  animation: 1s fadeIn;
  z-index: 2111;
  border: 10px solid rgb(255, 255, 255);
  /*box-shadow: none !important;*/
}

.login .loginParentTable {
  /*width: inherit;*/
  border-spacing: 0;
  height: 80vh;
  margin: auto;
}

.utilityPopup {
  top: 100vh;
  width: 400px;
  height: calc(100vh - 170px);
  overflow-y: auto;
  overflow-x: hidden;
  /*left: calc(50vw - 200px);*/
}

.home, .myControllers, .sign, .myVault {
  top: 90px; /*65px;*/
  width: 400px;
  /*height: calc(100vh - 170px); /*calc(100vh - 130px);*/
}
.availabledids {

}

.signIn .tabOptions {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  letter-spacing: -1px;
  justify-content: space-between;
}
.signIn .tabOptions .tabButton {
  cursor: pointer;
  text-decoration: none;
  margin: 0 14px 0 0;
  letter-spacing: 0px;
}
.signIn .tabOptions div.active {
  text-decoration: underline solid #2F88FF 2px;
  text-underline-offset: 8px;
}
.signIn .tabInputs {
  display: flex;
  flex-direction: row;
}
.signIn .tabInputs > div {
  display: none;
  padding: 10px 8px;
  margin: 20px auto 0 2px;
  width: 100%;
}
.signIn .tabInputs input {
  font-weight: 400;
  font-size: 8pt;
}
.signIn .signIn_walletOpt_buttonIcon {
  width: 14px;
  margin: auto 0 auto 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.1);
  padding: 0 8px;
  opacity: 0.5;
  height: 32px;
  cursor: pointer;
}
.signIn .signIn_walletOpt_buttonIcon:hover {
  opacity: 0.9;
}
.signIn .signIn_promptWallet {
  display:flex; 
  opacity:0.9;
  position: fixed;
  top: 25px;
  left: -270px; /*0px*/
  background: rgb(228,240,245);
  padding: 10px;
  width: 240px;
  height: 90px;
  border-radius: 0 8px 8px 0;
  -webkit-filter: drop-shadow( 1px 1px 4px rgba(0, 0, 0, .25));
  filter: drop-shadow( 1px 1px 4px rgba(0, 0, 0, .25));
  flex-direction: column;
}

.loginTable td {
  padding: 0;
}

@media (min-width: 360px) {
  .login, .register, .signIn {
    max-width: 100vw;
  }
}

@media (min-width: 400px) {
  .login, .register, .signIn, .home, .sign, .myControllers, .myVault, .utilityPopup {
    /*left: calc(50vw - 200px);  */
  }
  .login, .register, .signIn {
    max-width: 100vw;
  }
}

@media (min-width: 540px) {
  .login, .register, .signIn, .home, .sign, .myControllers, .myVault, .utilityPopup {
    /*left: calc(50vw - 200px);  */
  }
  .login, .register, .signIn {
    /*width: 90vw;*/
    max-width: 800px;
  }
}

@media (max-width: 400px) {
  .operatorView {
    max-width: 100vw !important;
  }
}
@media (max-width: 600px) {
  .home, .myControllers, .utilityPopup {
    /*left: calc(50vw - 200px); */
    margin-left: auto;
    margin-right: auto;
  }
  .login, .sign, .register, .signIn {
    margin-left: auto;
    margin-right: auto;
  }
  .operatorView {
    max-width: 100vw !important;
  }
}
@media (max-width: 800px) {
  .login, .register, .signIn, .home, .sign, .myControllers, .myVault, .utilityPopup {
    /*left: calc(50vw - 200px);
    display: block;
    align-items: center;
    justify-content: center
    */
  }
  .operatorView {
    max-width: 600px !important;
  }
}

.loginTable {
  /*border: 1px solid rgb(229, 232, 235);*/
  box-shadow: 0 4px 20px rgba(22,27,43,.12);
  width: fit-content;
  max-width: 400px; /*100%;*/
  margin: auto;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.75);
}

.register, .signIn {
  margin: auto;
}


.register_accountMnemonic {
  min-width: 212px;
  max-width: 212px;
  height: 75px;
  width: 212px;
  font-family: monospace;
  word-break: break-word;
  background: rgba(0,0,0,0.035);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 2px 2px 1px #DDD, inset -3px -3px 4px #eee;
  line-height: 25px;
  text-align-last: justify;
  padding: 3px 20px;
  margin: 10px auto 0 10px;
  margin: 0 auto 0 4px;
  overflow: hidden;
}

.userProgressPreview {
  display: flex;
  margin: 20px 0 0 0;
  padding: 18px;
  min-width: 200px;
  border: 1px solid #DDD;
  border-radius: 18px;
}
.userPreviewContainer .previewTitle {
  font-weight:600;
  font-size: 13px;
  margin: 10px auto;
  text-align:center;
  color:#222;
}
.userProgressPreview .accountCreateStepDone {
  margin: auto 0;
}
.userActionContainer {
  overflow-y: auto;
}
.userActionContainer .userActionStepTitles {
  font-size: 1.8em;
  font-weight: 600;
  text-align: center;
  padding: 8px 8px 0;
  margin: 20px auto;
  white-space: nowrap;
}

.userActionContainer .step {
  display: flex;
  flex-direction: column;
}

.userActionContainer .stepTitle {
  font-weight: 600;
  font-size: 13px;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: justify;
  height: 50px;
  padding: 12px 0;
}
.signIn .userActionContainer .stepTitle {
  height: 35px;
}
.userActionContainer .stepSubTitle {
  font-weight: 300;
  font-size: 11px;
  margin: 0 auto;
  height: 50px;
  padding: 6px 0;
}

.userActionContainer .stepActionResults {
  min-height: 175px;
  padding: 0;
}
.userActionContainer .stepActionResults table {
  padding: 0 10px;
}
.userActionContainer .stepActionResults table tr td {
  padding: 4px;
}
.userActionContainer .buttonSteps {
  display: flex;
  flex-direction: row;
  width: 260px;
  margin: auto auto 20px;
  justify-content: space-around;
  gap: 12px;
  height: 90px;
  align-items: end;
}

.loginTable {
  padding: 0 4px;
  margin: 0 auto auto;
}

.loginTable .actionButton {
    max-width: 300px;
}

.advancedForm, .aboutForm, .vaultForm, .utilityPopup {
  z-index: 2000;
  transition: all 500ms, transform 500ms;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}

.advancedForm, .aboutForm {
  left: -100vw;
  display: block;
}

.wrapper_contents {
  padding: 8px; 
  background-color: #FFF; 
  overflow-y: auto !important; 
  height: calc(100vh - 116px); 
  width: calc(100vw - 16px);
}

  .CollectionHeaderTabGroup  {
    height: 52px;
    border: 1px solid #fff;
    background-color: transparent; /*#fff;*/
    margin: 0;
    /*box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 35%);*/
  }
    table.tblHeaderTabs {
      width: 100%;
      text-align: center;
      background-color: transparent;
    }

    .timerCurrentTimeslot {
      font-size: 10px;
      color: blue;
      overflow-x: hidden;
      white-space: nowrap;
      width: calc(100vw - 8px);
      text-align: center;
      height: 28px;
    }
    .tdTabsAndLabels {
      font-size: 11px;
      height: 50px;
      padding: 0;
    }
    .timerControlButtons {
      height: 48px;
    }

    input.twoDigits {
      width: 28px;
      height: 30px;
      text-align: center;
      overflow-x: hidden;
      border: 1px solid #000;
      background-Color: #fff;
      border-radius: 3px;
      font-size: 12px !important;
      padding: 1px; 
      margin-right: 3px;
      margin-left: 1px;
    }
    input.twoDigits:focus {
      box-shadow: 0 0 5px #aae6f7;  /* was rgba(81, 203, 238, 1); */
      border: 1px solid #aae6f7;
    }

    .twoDigitsTotal {
      width: 18px;
      height: 20px;
      text-align: center;
      overflow-x: hidden;
      border: 1px solid #000;
      background: none;
      border-radius: 3px;
      font-size: 12px;
      padding: 1px;
    }
    .twoDigitsTotal:focus {
      box-shadow: 0 0 5px #aae6f7;  /* was rgba(81, 203, 238, 1); */
      border: 0;
    }
    .actionButton {
      padding:4px 18px;
      font-size: 10pt;
      background-color: #fff;
      /*width: 25%;*/
      height: 34px;
      border-radius: 80px;
      text-align: center;
      border: 2px solid;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      white-space: nowrap;
      text-overflow: ellipsis;
      -webkit-transition-duration: 0.2s; /* Safari */
      transition-duration: 0.2s;
    }
    .actionButton:hover {
      box-shadow: 2px 2px 4px #b8b9be, -2px -2px 2px #fff;
    }
    .form_title .actionButton:hover { 
      box-shadow: none !important;
    }
    .actionSync {
      display:none;
      cursor: pointer;
      position: fixed;
      right: 36px;
      background-image: url(../images/sync.svg);
      background-repeat: no-repeat;
      background-size: 22px 22px;
      background-origin: content-box;
      background-position: left;
      width: 18px;
      height: 18px;
      padding: 5px !important;
      top: 6px;
  }
    button.disabled, a.disabled, td.disabled {
      /*background: none;*/
      filter: grayscale(100%);
      opacity: 0.5;
      cursor: not-allowed;
      -webkit-transition-duration: 0 !important;
      transition-duration: 0 !important;
    }
    button.disabled:after, a.disabled:after {
      content: "";
      background: none !important;
    }
    button.hidden {
      display:none;
    }
    .ready {
      background: #fff;
    }

    /*.btnSave {
      display:none;
    }
    .btnCancel {
      display:none;
    }*/

    .btnGreen {
      border-color: green; /*rgba( 27, 94, 32, 0.5);*/
    }
    .btnPurple {
      border-color: rgba( 74, 20, 140, 0.5);
    }
    .btnBlue {
      border-color: #009AA6; /*rgba( 100, 149, 237, 0.5);*/
    }
    .btnBlue {
      border-color: #638FC2;
      color: #638FC2;
      background-Color: #fff;
    }
    .btnBlueFill {
      border-color: #1F82C4;
      color: #FFF;
      background-Color: #638FC2;
    }
    .btnOrange {
      border-color: rgba( 245, 127, 23, 0.5);
    }
    .btnOrangeFill {
      border-color: #fff;
      background-Color: rgba( 245, 127, 23, 0.5);
      color: #fff;
    }
    .btnBlack {
      border-color: black;
    }
    .btnGray {
      border-color: gray;
    }
    .btnGrayFill {
      border-color: gray;
      background-color: #AAA;
      color: #fff;
    }
    .btnRed {
      border-color: #6A1A41;
    }
    .btnRedFill {
      border-color: #6A1A41 !important;
      background-Color: rgb(169,3,41) !important;
      color: #fff !important;
    }

    .paused {
      -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
      -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
      box-shadow: 2px 2px 10px 0px rgb(0 0 0 / 50%)
    }

  .consentListTemplates {
    background-color: #fff;
    margin: 2px;
    border:1px solid #f5f5f5;

    position: relative;
    overflow: auto;
    padding-left: 0px; /* 10px */

    box-sizing: border-box;
    background-clip: padding-box!important;
  }
    .consentListTemplates > table {
      width:100%;
    }
    .consentListTemplates > table > tbody > tr > td {
      /*font-size: 1.25em;*/
      vertical-align: top;
      /*display: inline;*/
      font-family: "Poppins", "Rubik", sans-serif;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    table.mainTabs {
      width: 100%;
      /*min-width: 70vw;*/
      height: 100%;
    }

    table.mainTabs > tbody > tr > td.active {
      /*border-bottom: 4px solid blue;*/
      cursor: default;
    }

    table.mainTabs > tbody > tr > td.inactive {
      border-bottom: 4px solid none;
      cursor: pointer;
    }
    td.tdTabButtonContainer {
      width: 150px;
      padding: 0 10px;
      text-align: left;
      vertical-align: middle;
      font-size: 1.2em;
      overflow: hidden !important;
      white-space: nowrap;
      text-overflow: ellipsis !important;
      display: table-cell;
      cursor: pointer;
    }

    .buttonIcon {
      float: left;
      width: 24px;
      height: 24px;
      opacity: 0.75;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      background-repeat: no-repeat !important;
      background-size: contain !important;
      margin: 0;
    }
      .operatorAgreements {
        background: url( '../images/check-correct.svg' );
      }
      .dataSharedList {
        background: url( '../images/arrow_r_20.svg' );
        height: 14px;
        margin: 2px 0;
      }
      .consentHistory {
        background: url( '../images/history.svg' );
      }
      .iconTSS {
        background: url( '../images/i_date.svg' );
      }

    td.tdTabButtonContainer > span {
      margin: 8px 15px;
      position: sticky;
      top: 12px;
    }

    .formTitle {
      color: white;
    }
    .newRecordHeader {
      font-size: 12px;
      color: #000;
      width: 100%;
      border-bottom: 1px solid #C0C0C0 !important;
    }

    input.inputHour::-webkit-inner-spin-button,
    input.inputHour::-webkit-outer-spin-button { 
      -webkit-appearance: inner-spin-button !important;
      opacity: 1 !important;
      width: 20px;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
    } 
    input.inputHour {
      position: relative;
      padding: 5px;
      width: 60px;
      padding-right: 25px;
      height: 30px;
      text-align: center;
      font-size: 2rem;
      border: 1px solid #C0C0C0 !important;
      border-radius: 3px;
      margin: 4px 0
    }
    tr.trConfirm {

    }

  .dataListFilterRow {
    height: 20px;
    padding: 4px;
    background-color: #191e29;
    color: #fff;
    font-size: 12px;
    overflow-x: auto;
    width: inherit;
    white-space: nowrap;

  }
  .filterButton {
    margin-right: 4px;
    border-radius: 6px;
    background-color: #191e29;
    font-size: 12px;
    height:20px;
    margin:2;
    width:60px;
    padding:2px;
    text-align: center;
    border: 1px solid #333333;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
  }
  .myRequests {
    color: #31B031;
  }
  .csHistory {
    color: #00A4E9;
  }

  .tssRecordEmptyIcon {
    width: 27px;
    padding: 0 2px 0 2px !important;
  }
  .tssRecordIcon {
    background-image: url(../images/i_date.svg);
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-origin: content-box;
    background-position: left;
    width: 27px;
    padding: 0 2px 0 2px !important;
  }
  .savedRecordIcon {
    background-image: url(../images/action2.svg);
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-origin: content-box;
    background-position: left;
    width: 28px;
    padding: 0 2px 0 2px !important;
  }
  .unsavedRecordIcon {
    background-image: url(../images/action0.svg);
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-origin: content-box;
    background-position: left;
    width: 28px;
    padding: 0 2px 0 2px !important;
    opacity: 0.95;
    /*left: 6px;*/
  }
  .pausedRecordIcon {
    background-image: url(../images/paused.svg);
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-origin: content-box;
    background-position: left;
    width: 28px;
    padding: 0 2px 0 2px !important;
  }
  .smallTimerPaused_tdIcon {
    width: 15px;
    height: 15px;
    position: relative;
    left: 7px;
    top: 4px;
    opacity: 0.65;
  }
  .downloadedRecordIcon {
    background-image: url(../images/downloaded.svg);
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-origin: content-box;
    background-position: left;
    width: 28px;
    padding: 0 2px 0 2px !important;
  }
/* special objects within main form objects */




/* adhoc styles  */
.rounded{
  -webkit-border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
}

.roundedLeft{
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
}
.roundedRight{
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}
.roundedTop{
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.soft_rounded{
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
}
.heavy_rounded{
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}
.round{
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}
img.round:hover{
  background-color: #666666;
}
.harsh_rounded
{
  border-top-left-radius: 3px 3px;
  border-bottom-left-radius: 3px 3px;
  border-top-right-radius: 3px 3px;
  border-bottom-right-radius: 3px 3px;
}
.box {
  border: 1px solid #C0C0C0
}
/* adhoc styles  */


/* POPUP NOTIFICATIONS (MsgManager) */

.msgManager {
  display: flexbox;
  overflow: visible;
  width:0;
  height:0;
  flex-direction: column;
  gap: 6px;
}
.notifBtn
{
  font-size: calc(14px + 0.2vw);
  padding: 10px 4px 10px 4px;
  cursor: pointer;
}
.notifClose
{
  position: relative;
  left: 4px;
  top: -4px;
  cursor: pointer;
}
.notifBase
{
  box-sizing: border-box;
  position: fixed;
  vertical-align: middle;
  z-index: 3000; 
  text-align: center; 
  cursor: default;
  font-size: 0.75em; 
  color: #404040;
  white-space: normal;
  opacity:0.97;
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
  flex-direction: column;

  animation: fadeIn 250ms;
  -webkit-animation: fadeIn 250ms;
  -moz-animation: fadeIn 250ms;
  -o-animation: fadeIn 250ms;
  -ms-animation: fadeIn 250ms;

}
.notifLight { background-color: rgba(255,255,255,0.9); color: #434343 }
.notifLight a { color: #000 !important; }

.notifDark { background-color: #404040; color: #fff }
.notifDark a { color: #8AB4F8 !important; }

.notifRed { background-color: rgba( 255, 0, 0, 0.85); border: 1px solid #F0C8CC; color: #fff; }
.notifRed a { color: #FFA500 !important; }

/*****/
.notifRedOfficial { background-color: rgba( 255, 0, 0, 0.85); border: 2px solid #F0C8CC; color: #fff; }
.notifRedOfficial a { color: #FFA500 !important; }

.notifPlum { background-color: #6A1A41; border: 1px solid #BFD8FF; color: #fff; }
.notifPlum a { color: #fff !important; }

.notifTeal { background-color: #009AA6; border: 1px solid #BFD8FF; color: #fff; }
.notifTeal a { color: #fff !important; }


.notifBlue { background-color: #0048FF; border: 1px solid #BFD8FF; color: #fff; }
.notifBlue a { color: #fff !important; }

.notifGreen { background-color: #56FF56; border: 1px solid #BFD8FF; color: #000; }
.notifGreen a { color: #FFC800 !important; }
.notifGreen img { filter: invert(1); }

.notifGray { background-color: #F1F3F4; }
.notifGray a { color: #8AB4F8 !important; }

.borderBlack { border: 1px solid black }
.borderBlue { border: 1px solid blue }
.borderGreen { border: 1px solid green }
.borderYello { border: 1px solid yellow }
.borderRed { border: 1px solid red }

.greenTick { background-color: #31B031; border-radius: 20px; width: 33px !important; height: 33px !important; padding: 0px !important; border: 1px solid #fff; }

.notifProgress
{
  background-Color:#202020;
  height:4px;
  width:0px;
  position:relative;
  left:1px;
}



/* RESPONSIVE LAYOUTS */
@media (max-height: 180px) {
  .header {
    display: none !important;
  }
  .operatorView {
    height: calc(100vh - 40px);
    top: 0px;
  }
  .consentListTemplates {
    height: 0;
    display: none !important;
  }
}
@media (max-height: 280px) {
  .header {
    display: none !important;
  }
  .operatorView {
    height: calc(100vh - 40px);
    top: 0px;
  }
  .consentListTemplates {
    height: calc(100vh - 100px);
  }
}
@media (min-height: 281px) {
  .header {
    display: block;
  }
  .operatorView {
    height: calc(100vh - 100px); /* header:60px, footer:40px */
    top: 60px;
  }
  .consentListTemplates {
    height: calc( 100vh - 140px); /*100%; /*calc(100vh - 80px - 113px); /* calc(100vh - 80px - 156px) */
  }
}

@media (max-width: 800px) {
  .consentListTemplates {
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
  }

}

.header, .footer {
  display: none;
}
/* RESPONSIVE LAYOUTS */

.header .Nav__icon {
  display: none;
  /*padding:  5px 12px 16px 5px;*/
  margin: 0 0 0 14px;
  cursor: pointer;
  width: 24px; /*10px;*/
  -webkit-tap-highlight-color: transparent;
  height: 60px; /*32px;*/
  /*margin: 2px 0;*/
  padding: 0;
  overflow: hidden;
}

.loginAppUpdate {
  display:none; 
  opacity: 1;
  cursor: pointer;
  font-size: 0.85rem;
  position: fixed;
  right: 8px;
  border-radius: 50% !important;
  top: 8px;
  z-index: 999;
  padding: 4px;
  /*border: 1px solid rgba(255,255,255,0.2);
  -webkit-filter: drop-shadow( 1px 1px 4px rgba(0, 0, 0, .5));
  filter: drop-shadow( 1px 1px 4px rgba(0, 0, 0, .5));*/
}
.appTitle {
  position: fixed;
  left: 55px; /*38px;*/
  top: 18px; /*10px;*/
  color:#fff;
  font-size: 1em; /*0.85em;*/
  width: calc(100vw - 130px); /*calc(100vw - 50px);*/
  overflow: hidden;
}
.wakeLock {
  position: fixed;
  right: 110px;
  top: 7px;
  display: none;
}

/**/
    /* The switch - the box around the slider */
    .switch {
      position: relative;
      display: inline-block;
      width: 56px;
      height: 20px;
    }

    /* Hide default HTML checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .3s;
      transition: .3s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 28px;
      width: 28px;
      left: -3px;
      bottom: -5px;
      background-color: #fff;
      -webkit-transition: .3s;
      transition: .3s;
      border: 1px solid #fff;
    }

    input:checked + .slider {
      /*background-color: rgba(169,3,41,0.7);*/
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #A0A0A0;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(30px);
      -ms-transform: translateX(30px);
      transform: translateX(30px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 16px;
      border: 1px inset rgba(192,192,192,0.5);
    }

    .slider.round:before {
      border-radius: 50%;
      filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.5));
    }

/**/
.version {
  display:none;
  width: 18px;
  height: 18px;
  text-align: center;
  padding: 1px;
  cursor: default;
  position: absolute;
  right: 25px;
  bottom: 8px;
  color: #fff;
  font-size: 11px;
  z-index: 999;
}


.scrimStartUp {
  position: fixed;
  height: 100vh;
  width: 100vw;
  bottom: 0;
  left: 0;
  background-color: black;
  opacity: 1;
  z-index: 2002;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  75% { opacity: 0.75; }
  100% { opacity: 0; }
}

.scrim {
  display: none;
  position: fixed;
  height: 100vh;
  width: 100vw;
  bottom: 0;
  left: 0;
  background-color: black;
  opacity: 0.4;
  z-index: 2002;
}

/*  ### NAVMENU (DRAWER) ### */
/* Menu Smooth/Rapid TRANSITION UI EFFECT */
.transitionSmooth
{
  -webkit-transition: all 400ms, -webkit-transform 400ms; /* Safari */ 
  transition: all 400ms, transform 400ms;
}
.transitionSmoothAndSlow
{
  -webkit-transition: all 1s, -webkit-transform 700ms; /* Safari */ 
  transition: all 1s, transform 700ms;
}
.transitionRapid
{
  position: absolute;
}


.navigation {
  position: fixed;
  width: 0;
  min-height: 100%;
  bottom: 0;
  left: 0;
  background-color: #FFFFFF;
  overflow-x: hidden;
  overflow-y: hidden;
  /*-webkit-transition: 0.5s;
    transition: 0.5s;*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35);
}

.navigation .navigation__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: sticky;
  position: -webkit-sticky;
  width: 100%;
  height: 100px;
  margin-bottom: 5px;
  padding: 10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.navigation .navigation__header .navigation__logo {
  width: 78px;
  height: 78px;
  margin: 0px 8px 8px 0px;
  background-image: url(../images/policy.svg);
  background-repeat: no-repeat;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-size: 78px;
}

.no-svg .navigation .navigation__header .navigation__logo {
  background-image: url(../images/HISP_logo.png);
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .no-svg .navigation .navigation__header .navigation__logo {
    background-image: url(../images/HISP_logo.png);
  }
}

.navigation .navigation__header .navigation__infoBlock {
  font-family: "Poppins", "Rubik", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 0.8rem;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.navigation .navigation__header .navigation__close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  background-image: url(../images/arrow_r_20.svg);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  cursor: pointer;
    transform: rotate(180deg);
    position: relative;
    left: 0px;
    top: 0;
    height: 80px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center;
}
.navigation .navigation__header .navigation__close:hover {
  background-color: rgba(255,255,255,0.4);
}
.navigation .navigation__header .navigation__close:active {
  background-color: rgba(255,255,255,0.3);
}

.no-svg .navigation .navigation__header .navigation__close {
  background-image: url(../images/close.png);
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .no-svg .navigation .navigation__header .navigation__close {
    background-image: url(../images/close@2x.png);
  }
}

.navigation .navigation__items {
  overflow-y: auto;
}

.navigation .navigation__items ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #FFFFFF;
  cursor: pointer;
}

.navigation .navigation__items ul li {
  margin: 6px 10px;
  border-radius: 6px
}

.navigation .navigation__items ul li .navigation__items-icon {
  float: right;
  width: 20px;
  height: 20px;
  margin: 16px 16px 10px 12px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity:0.9;
  position: fixed;
}

.navigation .navigation__items ul li a {
  display: block;
  color: #000;
  padding: 18px 10px;
  text-decoration: none;
  font-size: 0.85em;
  margin: 0 0 0 40px;
}

.navigation .navigation__items ul li #tile_items {
  line-height: 48px;
  padding: 0 16px;
  font-weight: 700 !important;
  cursor: context-menu;
}

.navigation .navigation__items ul li #tile_items:hover {
  background-color: #FFF;
}

.navigation .navigation__items ul li .examples {
  line-height: 48px;
  padding: 0 16px;
  cursor: pointer;
}

.navigation .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 2.25rem;
  margin-left: 50px;  
}

.navigation .navigation__items ul > hr {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/** DIALOG Popups **/
dialog {
  display: none;
  position: fixed;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 2100;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 15px;
  border: 0;
  width: 90%;
  max-width: 400px;
  /*max-height: 400px;*/
  /*min-height: 25vh;*/

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0; /*16px 16px 4px 16px;*/
  background-color: #fff;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.5));
}

dialog.operator {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 2100;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 15px;
  border: 0;
  width: 90%;
  max-width: 80vw;
  max-height: 90vh;
  min-height: 90vh;

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 16px 16px 4px 16px;
  background-color: #eee;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.5));
}

dialog.fullscreen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  
  max-width: none !important;
  max-height: none !important;

  -webkit-transform: none !important;
  transform: none !important;
  z-index: 2100;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 0;
  border: 0;


  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 10px 10px 4px 16px;
  background-color: #eee;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.5));
}
dialog.fullscreen .dialog__mainText {
  height: calc(100vh - 100px) !important;
  min-height: none;
  max-height: none;
}

dialog::-webkit-backdrop {
  background: rgba(0, 0, 0, 0.4);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

dialog::-webkit-backdrop {
  -webkit-animation: show 500ms ease;
  animation: show 500ms ease;
}

dialog[open], dialog::-webkit-backdrop {
  -webkit-animation: show 500ms ease;
  animation: show 500ms ease;
}

dialog[open], dialog::backdrop {
  -webkit-animation: show 500ms ease;
  animation: show 500ms ease;
}
dialog.recordPopup .dialog__title {
  /*background-color: #D5F6FE !important;*/
  background: linear-gradient(90deg, rgb(20, 86, 176), rgb(112, 202, 189));
  color:#fff !important;
}
dialog.recordPopup .dialog__title > label {
  color: #fff !important;
}
dialog.recordPopup .dialog__title > label > img {
  padding: 4px 4px;
  background: #f5f5f5;
  border-radius: 50%;
  width: 14px !important;
  height: 14px !important;
}
dialog .dialog__title {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  line-height: 20px;
  max-height: 40px;
  margin-right: -1em;
  padding-right: 1em;
  /*margin-bottom: 8px;*/
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /*background-color: #eee;*/
  /*background: linear-gradient(90deg, rgba(43, 13, 183, 0.55), rgba(71, 77, 243, 0.45), rgba(39, 84, 182, 0.45), rgba(110, 22, 108, 0.45));*/
  /*background: linear-gradient(45deg,rgba(169,3,41,0.5),  rgb(43, 13, 183,0.5));*/
  display: flex;
  border-radius: 15px 15px 0 0;
  padding: 10px 8px;
}
dialog .dialog__promptInputTitle {
  width: 100%;
  height: auto;
  overflow: hidden;
  line-height: 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #fff;
  border-radius: 15px 15px 0 0;
  padding: 20px 0 20px 25px;
  text-align: left;
  font-size: 0.8em;
}

dialog .dialog_inputFrame {
  padding: 4px;
  margin: 10px;
}

dialog .dialog_inputFrame input, dialog .dialog_inputFrame textarea {
  display: none;
  border-radius: 0;
  border: 2px solid rgba(29,139,207,0.75);
  min-width: 85%;
  padding: 4px;
  
}

dialog .dialog__title label {
  font-size: 0.85rem;
  line-height: 20px;
  font-family: "Poppins", "Rubik", sans-serif;
  font-weight: 500;
  color: #333333;
  display: contents;
}

dialog .dialog__title label img {
  width:18px;
  height:18px;
  opacity:0.8;
  margin: 0 4px;
}

dialog .dialog__mainText {
  height: auto;
  line-height: 20px;
  font-family: "Poppins", "Rubik", sans-serif;
  font-weight: 300;
  color: #333333;
  overflow-x: clip;
  font-size: 0.75rem;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #fff;
  width: -webkit-fill-available; width: -moz-available;
  overflow-y: auto;
  display: table-cell;
  padding: 20px 15px 30px;
}

dialog textarea.dialog__mainText {
  margin: 4px !important;
}


dialog .dialog__action {
  float: right;
  height: auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 20px 15px;
  text-align: end;
  /*background: #eee;*/
  border-radius: 0 0 15px 15px;
}

dialog .dialog__promptInputAction {
  float: right;
  height: auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 25px 20px;
  text-align: end;
  background: #fff;
  border-radius: 0 0 15px 15px;
}
dialog .dialog__promptInputAction button {
  min-width: 95px;
}

dialog .dialog__action div {
  float: left;
  margin-bottom: 0px;
}

@media (max-width: 488px) {
  dialog .dialog__action {
    width: 100%;
  }
  dialog .dialog__action div {
    float: right;
  }
}

@media (orientation: portrait) and (min-width: 240px) {
  .dialog_alert .dialog__mainText,
  .dialog_confirmation .dialog__mainText {
    max-height: 150px;
  }
}

@media (orientation: landscape) and (min-width: 320px) {
  .dialog_alert .dialog__mainText,
  .dialog_confirmation .dialog__mainText {
    max-height: 120px;
  }
}

.dialog_search-ck .field_leading_icon,
.dialog_search-rb .field_leading_icon {
  margin-bottom: 8px;
}

@media (orientation: portrait) and (min-width: 240px) {
  .dialog_search-ck .dialog__mainText,
  .dialog_search-rb .dialog__mainText {
    max-height: 80px;
  }
}

@media (orientation: landscape) and (min-width: 320px) {
  .dialog_search-ck .dialog__mainText,
  .dialog_search-rb .dialog__mainText {
    max-height: 50px;
  }
}

@media (orientation: portrait) and (min-width: 320px) {
  .dialog_search-ck .dialog__mainText,
  .dialog_search-rb .dialog__mainText {
    max-height: 220px;
  }
}

@media (orientation: landscape) and (min-width: 480px) {
  .dialog_search-ck .dialog__mainText,
  .dialog_search-rb .dialog__mainText {
    max-height: 140px;
  }
}

@media (orientation: landscape) and (min-width: 600px) {
  .dialog_search-ck .dialog__mainText,
  .dialog_search-rb .dialog__mainText {
    max-height: 180px;
  }
}

.dialog_confirmation_mac {
  width: 90%;
}

.dialog_confirmation_mac .dialog__status {
  width: 100%;
  text-align: center;
}

.dialog_confirmation_mac .dialog__status .dialog__status-img {
  display: inline-block;
  width: 162px;
  height: 162px;
  margin: 0 auto;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

@media (orientation: portrait) and (min-width: 240px) {
  .dialog_confirmation_mac .dialog__status .dialog__status-img {
    display: none;
  }
}

@media (orientation: landscape) and (min-width: 320px) {
  .dialog_confirmation_mac .dialog__status .dialog__status-img {
    display: none;
  }
}

@media (orientation: portrait) and (min-width: 320px) {
  .dialog_confirmation_mac .dialog__status .dialog__status-img {
    display: inline-block;
  }
}

@media (orientation: landscape) and (min-width: 598px) {
  .dialog_confirmation_mac .dialog__status .dialog__status-img {
    display: inline-block;
  }
}

.dialog_confirmation_mac .dialog__status .offline {
  background-image: url(../images/cloud_offline.svg);
}

.no-svg .dialog_confirmation_mac .dialog__status .offline {
  background-image: url(../images/cloud_offline.png);
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .no-svg .dialog_confirmation_mac .dialog__status .offline {
    background-image: url(../images/cloud_offline@2x.png);
  }
}

.dialog_confirmation_mac .dialog__status .online {
  background-image: url(../images/cloud_online.svg);
}

.no-svg .dialog_confirmation_mac .dialog__status .online {
  background-image: url(../images/cloud_online.png);
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .no-svg .dialog_confirmation_mac .dialog__status .online {
    background-image: url(../images/cloud_online@2x.png);
  }
}

.dialog_confirmation_mac .dialog__status .unavailable {
  background-image: url(../images/cloud_offline_Intenet-up1.svg);
}

.no-svg .dialog_confirmation_mac .dialog__status .unavailable {
  background-image: url(../images/cloud_offline_Intenet-up1.png);
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .no-svg .dialog_confirmation_mac .dialog__status .unavailable {
    background-image: url(../images/cloud_offline_Intenet-up1@2x.png);
  }
}

@media (orientation: portrait) and (min-width: 240px) {
  .dialog_confirmation_mac .dialog__mainText .dialog__mainText {
    max-height: 150px;
  }
}

@media (orientation: landscape) and (min-width: 320px) {
  .dialog_confirmation_mac .dialog__mainText .dialog__mainText {
    max-height: 120px;
  }
}


/*   */


.field {
  float: left;
  width: 100%;
  height: auto;
  min-height: 50px;
  margin: 0px 0px 12px 0px;
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.009);
  text-align: left;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Styles for a split password field */
}

.field .fldLabel {
  padding: 2px 8px 0 8px;
}

.field .fldLabel label {
  color: #333;
  font-style: normal;
  font-weight: normal;
  font-size: 0.75rem;
  line-height: auto;
}

.field span {
  color: #FF0000;
  padding-left: 5px;
}

.field .field__top {
  float: left;
  width: calc(100% - 24px);
  padding: 0 8px 0 8px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.field .field__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 4px 10px;
}

.appName, .vaultTitle {
  font-size: 1.2em;
  padding: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*  */ 

.form_full {
  /*display: none;*/
  position: fixed;
  width: 100%;
  height: 100vh;
  bottom: 0px;
  top: 0px;
}
.form_full .wapper_card .form_title {
  vertical-align: middle;
  font-size: 18px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100vw; /*calc(100vw - 5px); /*100vw - 45px*/
}
.button {
  float: left;
  min-width: 64px;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 4px;
  letter-spacing: 1pt;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.button .button__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}



/** COLOR THEMES **/
.green .header, .green .footer, .green .form_title, .green input:checked + .slider  {
  color: #FFFFFF;
  background-color: #1B5E20;
}
.green .navigation__header {
  background-color: rgba( 27, 94, 32, 0.5);
}
.green .navigation__items ul li:hover {
  background-color: #E8F5E9;
  color: #333;
}
.green .header .Nav__icon .menu-icon {
  fill: #f8f9fa;
}
.green .mainTabs .active {
  border-bottom: 4px solid rgba( 27, 94, 32, 0.5);
}
.green .dialog__action .confirmButton {
  border-color: #1B5E20;
  background-Color: #008A09;
  color:#fff;
}
.green .smallTimerSpinner_tdIcon {
  border-top: 1px solid #008A09;
}
.green .consentListTemplates {
  /*border-bottom: 1px solid rgba( 27, 94, 32, 0.5);
  border-right: 1px solid rgba( 27, 94, 32, 0.5);
  border-left: 1px solid rgba( 27, 94, 32, 0.5);*/
}

.red .header, .red .footer, .red .form_title, .red input:checked + .slider {
  color: #FFFFFF;
  background-color: #6A1A41;
}
.red .navigation__header {
  background-color: rgba(167,119,143, 1);
}
.red .navigation__items ul li:hover {
  background-color: #FFEBEE;
  color: #333;
}
.red .header .Nav__icon .menu-icon {
  fill: #f8f9fa;
}
.red .mainTabs .active {
  border-bottom: 4px solid rgba( 183, 28, 28, 0.5);
}
.red .dialog__action .confirmButton {
  border-color: #6A1A41;
  background-Color: rgb(169,3,41);
  color:#fff;

}
.red .smallTimerSpinner_tdIcon {
  border-top: 1px solid rgb(169,3,41)
}
.red .consentListTemplates {
  /* border-bottom: 1px solid rgba( 183, 28, 28, 0.5);
  border-right: 1px solid rgba( 183, 28, 28, 0.5);
  border-left: 1px solid rgba( 183, 28, 28, 0.5);*/
}

.purple .header, .purple .footer, .purple .form_title, .purple input:checked + .slider {
  color: #FFFFFF;
  background-color: #4A148C;
}
.purple .navigation__header {
  background-color: rgba( 74, 20, 140, 0.5);
}
.purple .navigation__items ul li:hover {
  background-color: #F3E5F5;
  color: #333;
}
.purple .header .Nav__icon .menu-icon {
  fill: #f8f9fa;
}
.purple .mainTabs .active {
  border-bottom: 4px solid rgba( 74, 20, 140, 0.5);
}
.purple .dialog__action .confirmButton {
  border-color: #4A148C;
  background-Color: #4B00A6;
  color: #fff;
}
.purple .smallTimerSpinner_tdIcon {
  border-top: 1px solid #4B00A6;
}
.purple .consentListTemplates {
  /*border-bottom: 1px solid rgba( 74, 20, 140, 0.5);
  border-right: 1px solid rgba( 74, 20, 140, 0.5);
  border-left: 1px solid rgba( 74, 20, 140, 0.5);*/
}

.blue .header, .blue .footer, .blue .form_title, .blue input:checked + .slider {
  color: #FFFFFF;
  background-color: #6495ED;
}
.blue .navigation__header {
  background-color: rgba( 100, 149, 237, 0.5);
}
.blue .navigation__items ul li:hover {
  background-color: #E3F2FD;
  color: #333;
}
.blue .header .Nav__icon .menu-icon {
  fill: #000000;
}
.blue .mainTabs .active {
  border-bottom: 4px solid rgba( 100, 149, 237, 0.5);
}
.blue .dialog__action .confirmButton {
  border-color: #6495ED;
  background-Color: #009AA6;
  color:#FFF;
}
.blue .smallTimerSpinner_tdIcon {
  border-top: 1px solid #0034A6;
}
.blue .consentListTemplates {
  /*border-bottom: 1px solid rgba( 100, 149, 237, 0.5);
  border-right: 1px solid rgba( 100, 149, 237, 0.5);
  border-left: 1px solid rgba( 100, 149, 237, 0.5);*/
}

.yellow .header, .yellow .footer, .yellow .form_title, .yellow input:checked + .slider {
  color: #000000;
  background-color: #F57F17;
}
.yellow .navigation__header {
  background-color: rgba( 245, 127, 23, 0.5);
}
.yellow .navigation__items ul li:hover {
  background-color: #FFFDE7;
  color: #333;
}
.yellow .header .Nav__icon .menu-icon {
  fill: #000000;
}
.yellow .mainTabs .active {
  border-bottom: 4px solid rgba( 245, 127, 23, 0.5);
}
.yellow .dialog__action .confirmButton {
  border-color: #F57F17;
  background-Color: rgba( 245, 127, 23, 0.5);
  color:#fff;
}
.yellow .smallTimerSpinner_tdIcon {
  border-top: 1px solid #D66400;
}
.yellow .consentListTemplates {
  /*border-bottom: 1px solid rgba( 245, 127, 23, 0.5);
  border-right: 1px solid rgba( 245, 127, 23, 0.5);
  border-left: 1px solid rgba( 245, 127, 23, 0.5);*/
}

.black .header, .black .footer, .black .form_title, .black input:checked + .slider {
  color: #fff;
  background-color: rgba( 0, 0, 0, 0.7);
}
.black .navigation__header {
  background-color: rgba( 0, 0, 0, 0.5);
}
.black .navigation__items ul li:hover {
  background-color: #FFFDE7;
  color: #333;
}
.black .header .Nav__icon .menu-icon {
  fill: #000000;
}
.black .mainTabs .active {
  border-bottom: 4px solid rgba( 0, 0, 0, 0.7);
}
.black .dialog__action .confirmButton {
  border-color: rgba( 0, 0, 0, 0.1);
  background-Color: rgba( 0, 0, 0, 0.5);
  color:#fff;
}
.black .smallTimerSpinner_tdIcon {
  border-top: 1px solid rgba( 0, 0, 0, 0.85);
}
.black .consentListTemplates {
  /*border-bottom: 1px solid rgba( 245, 127, 23, 0.5);
  border-right: 1px solid rgba( 245, 127, 23, 0.5);
  border-left: 1px solid rgba( 245, 127, 23, 0.5);*/
}

/* adhoc */
.invertColor {
  filter: invert(1);
}

/* 3d Xaxis spinning logo */

.spinImg {
  width: 100px;
  height: 100px;
  /*left: -120px;*/
  position: relative;
}

.logoRotateXaxis {
  -webkit-animation: sqrA 2s infinite linear;
          animation: sqrA 2s infinite linear;
}

@-webkit-keyframes sqrA {
  from {
    -webkit-transform: translateX(120px) rotateY(0deg);
            transform: translateX(120px) rotateY(0deg);
  }
  to {
    -webkit-transform: translateX(120px) rotateY(360deg);
            transform: translateX(120px) rotateY(360deg);
  }
}

@keyframes sqrA {
  from {
    -webkit-transform: translateX(120px) rotateY(0deg);
            transform: translateX(120px) rotateY(0deg);
  }
  to {
    -webkit-transform: translateX(120px) rotateY(360deg);
            transform: translateX(120px) rotateY(360deg);
  }
}

.bodyCollapsible__text {
  padding: 0px 10px 20px;
}
#resetCollapsible {
  width: fit-content;
  min-width: 370px;
}

.settingsGroupDiv {
  font-size: 0.875rem;
  padding:4px; 
  margin-bottom: 30px; 
}
.btnSettings_GroupResetProfileData {
  cursor: default;
  border: 1px dashed #c0c0c0;
  border-radius: 10px;
}
.btnSettings_ResetAppData {
  cursor: pointer;
  margin: 0 0 8px 8px;
}

.settingsAppRestCollapsible {
  padding: 10px;
  transition: all 500ms, transform 500ms;
}

.settings_showPvt, .settings_showPnm {

  font-size: 0.625rem;
  font-family: "Poppins", "Rubik", sans-serif;
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 8px;
  min-width: 75px;
  white-space: nowrap;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 6px;
  float: left;

  border-radius: 100px;
  will-change: box-shadow;
  transition: box-shadow cubic-bezier(0.6, -0.28, 0.735, 0.045) 200ms;
  background-color: #fff;
  border: 2px solid #037dd6;
}

.btnSettingsBack, .btnAboutBack, .btnVaultBack {
  position: relative;
  left: -10px;
}

.field__selector, .bodyCollapsible__text {
  font-size: 12px;
}

.msgManagerButton {
  cursor: pointer;
  padding: 6px 24px;
  border-radius: 4px;
  border: 1px solid #808080;
  font-size: 0.75em;
}



.button .button__container .button-label {
  display: table;
  min-width: 64px;
  font-size: 1rem;
  text-align: center;
  font-style: normal;
  line-height: 48px;
  text-transform: uppercase;
  color: #FFFFFF;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.button-outline {
  float: left;
  min-width: 64px;
  height: 48px;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 0 16px;
  border-radius: 4px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.button-outline .button__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.button-outline .button__container .button-icon {
  float: left;
  width: 24px;
  height: 24px;
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center;
  margin: 12px 8px 0 0;
  background-image: url(../images/placeholder_w.svg);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.responsive_fontSize {
  font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320)) );
}