@media print {     body { visibility: hidden; display: none; opacity: 0;  }  }

@media (max-width: 375px ) {
    /*Marica Apple*/
}

@media (max-width: 384px ) {
    /*Greg S21+*/
    .myLife_dynamicContent, .mySigningFeatures {
        width: calc(100vw - 2px) !important;
        height: calc(100vh - 226px) !important;
    }
    .myLifeTitleHeader, .mySignaturesTitleHeader {
        height: 34px !important;
    }
    .myLife_dynamicContent .myLifeContainerList, .mySigningFeatures .myLifeContainerList {
        /*padding: 20px;
        border: 1px solid rgb(229, 232, 235);
        margin: 20px;*/ /*18px 28px;*/
        border-radius: 18px;
        /*height: calc(100% - 65px);*/
    }
    .myLife_dynamicContent .containerGroup {
        padding: 18px;
    }
    .myLife_dynamicContent .myLifeCollectionList {
        padding: 0;
        border: 1px solid rgb(229, 232, 235);
        margin: 20px; /*18px 28px;*/
        border-radius: 18px;
        height: calc(100% - 2px);
    }
    .myLife_dynamicContent .myLifeContainerList, .myLife_dynamicContent .myLifeCollectionList, .mySignatureOptions 
    {
        margin: 0 14px;
    }
    .myLife_dynamicContent .myLifeRecordList {

    }
    /*.myLife_dynamicContent .containerGroup {
        padding: 8px 18px;
    }*/

    .myLife_dynamicContent .myLifeRecordList {
        padding: 8px 16px;
        height: calc(100% - 6px);
        border: 1px solid rgb(229, 232, 235);
    }

    .homeContentBlock {
        height: calc(100vh - 184px) !important;
    }
    .homeContentBlock .dataSubject_viewRecords table {
        margin: 0px 0 0 0;
    }
    .homeContentBlock .dataSubject_viewRecords table tr.logTH {
        line-height: 24px;
    }

    .controllerOptions, .controllerMethods {
        height: calc(100vh - 220px);
        margin: 0;
    }

    .welcomeContainer {
        min-width: 345px;
        height: 95vh !important;
        margin: 2.5vh auto !important;
        max-width: 90vw !important;
    }
    .welcomeFloatBox {
        flex-direction: column !important; /*column-reverse*/
    }
    .welcomeLeft {
        width: auto !important;
        height: min-content !important;
        padding: 10px !important;
        display: flex;
        justify-content: space-between;
    }
    .welcomeLeft .featureLogoBigger {
        margin: 0 14px 0 0 !important;
    }
    .welcomeLeft .featureLogoBigger img {
        width: 32px !important;
        height: 32px !important;
    }
    .welcomeLeft .featureLogo {
        width: 24px !important;
        height: 24px !important;
        padding: 2px;
        margin: 0 8px 0 0 !important;
        border-radius: 50%;
    }
    .welcomeLeft .featureLogo img {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50%;
    }
    .welcomeRight .getStartedGuide {
        border-radius: 8px;
        padding: 2px 6px !important;
        line-height: 32px !important;
    }
    
    .welcomeRight .featureItem {
        margin: 10px 0 50px;
    }
    .welcomeRight .featureItem div.taskTitle {
        font-size: 22px;
    }
    .featureHelpButton {
        width: 30px !important;
    }
    .featureHelpContent {
        left: 0px !important;
        top: 120px !important;
        font-size: 0.65em !important;
    }
    .featureHelp {
        bottom: 0;
        right: 0;
    }
    .helpItem {
        
    }
    .homeContentBlock .controllerOptions > .itemRoot {
        margin: 0 12px 15px !important;
    }
    .homeContentBlock .controllerMethodContents > .itemRoot {
        margin: 14px 12px 14px !important;
    }
    .homeContentBlock .controllerOptions .prevHeader {
        margin: 0 0 14px 4px !important;
    }
    .homeContentBlock .controllerMethodContents .prevHeader {
        margin: 0 4px !important;
    }

    .register_accountMnemonic {
        max-width: 220px;
        width: 220px;
    }
    .login .loginParentTable {
        height: 100vh;
    }
    .register, .signIn {
        min-height: 90vh;
    }
}

@media (max-width: 400px) {

    .home, .myControllers, .sign, .myVault, .utilityPopup {
        top: 80px;
        height: calc(100vh - 100px)  !important;
    }
    .simpleLayout {
        height: calc(100vh - 100px) !important;
        width: 98%;
    }
    .accountMethods {
        height: calc(100vh - 320px) !important;
    }
    .prevHeader img {
        /*padding: 8px 0px 0 10px !important;*/
    }

    dialog.operator {
        max-width: 90vw !important;
    }
    .bg-modal {
        width: 100vw !important;;
    }
    .modal-content__body, .modal-content__qr {
        border-radius: 0 !important;
        padding: 5px 0 !important; /*5px 8px*/
    }
    .modal-content {
        border-radius: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
    }
    .close-modal {
        right: 12px;
        top: 10px;
        position: fixed;
    }
    .modal-header {
        border-radius: 0 !important;
        /*padding: 14px 0px 14px 8px !important;*/
    }
    .modal-header .modal-content__title{
        display: flex !important;
    }

    .modal__content-div-area {
        padding: 8px !important; /*8px 6px*/
        margin: 6px 0  !important;
    }
    .modal-footer {
        border-radius: 0 !important;
    }

    .containerCollectionTabHeader {
        width: calc(100% - 12px) !important;
    }
    .containerCollectionTabHeader label {
        max-width: 106px !important;
    }

    .myLife_dynamicContent {
        height:calc(100vh - 240px);
    }

    .utilityTableTarget table.recPrev {
        width: 352px !important;
    }

    .welcomeContainer {
        min-width: 345px;
        height: 95vh !important;
        margin: 2.5vh auto !important;
        max-width: 90vw !important;
    }
    .welcomeFloatBox {
        flex-direction: column !important; /*column-reverse*/
    }
    .welcomeLeft {
        width: auto !important;
        height: min-content !important;
        padding: 14px 14px !important;
        display: flex;
        justify-content: space-between;
    }
    .welcomeLeft .featureLogoBigger {
        margin: 0 14px 0 0 !important;
    }
    .welcomeLeft .featureLogoBigger img {
        width: 32px !important;
        height: 32px !important;
    }
    .welcomeLeft .featureLogo {
        width: 24px !important;
        height: 24px !important;
        padding: 2px;
        margin: 0 8px 0 0 !important;
        border-radius: 50%;
    }
    .welcomeLeft .featureLogo img {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50%;
    }
    .welcomeRight .getStartedGuide {
        border-radius: 8px;
        padding: 2px 6px !important;
        line-height: 32px !important;
    }
    .welcomeRight .featureItem {
        margin: 10px 0 50px;
    }
    .welcomeRight .featureItem div.taskTitle {
        font-size: 22px;
    }

    .featureHelpButton {
        width: 30px !important;
    }
    .featureHelpContent {
        left: 0px !important;
        top: 120px !important;
        font-size: 0.65em !important;
    }
    .featureHelp {
        bottom: 0;
        right: 0;
    }
    .helpItem {
        
    }
    .homeContentBlock .controllerOptions > .itemRoot {
        margin: 0 12px 15px !important;
    }
    .homeContentBlock .controllerMethodContents > .itemRoot {
        margin: 14px 12px 14px !important;
    }
    .homeContentBlock .controllerOptions .prevHeader {
        margin: 0 0 14px 4px !important;
    }
    .homeContentBlock .controllerMethodContents .prevHeader {
        margin: 0 4px !important;
    }

    .register_accountMnemonic {
        max-width: 220px;
        width: 220px;
    }
    .login .loginParentTable {
        height: 90vh;
    }
    .register, .signIn {
        min-height: 90vh;
    }
    .register .userProgressPreview, .signIn .userProgressPreview {
        margin: 15px !important;
    }
    .userActionContainer .userActionStepTitles {
        margin: 10px auto !important;
        min-width: 85% !important;
    }
    .userActionContainer .step {
        width: 85% !important;
        margin: auto;
    }
}

@media (max-width: 500px) {

    dialog.fullscreen {
        max-width: 100vw !important;
    }
    .welcomeContainer {
        height: 90vh !important;
        margin: 5vh auto !important;
        max-width: 90vw !important;
    }
    .welcomeFloatBox {
        display: block;
        flex-direction: column !important; /*column-reverse*/
    }
    .welcomeLeft {
        width: auto !important;
        height: min-content !important;
        padding: 14px 14px !important;
        display: flex;
        justify-content: space-between;
    }
    .welcomeLeft .featureLogoBigger {
        margin: 0 14px 0 0 !important;
        justify-content: space-between;
    }
    .welcomeLeft .featureLogoBigger img {
        width: 32px !important;
        height: 32px !important;
    }
    .welcomeLeft .featureLogo {
        width: 24px !important;
        height: 24px !important;
        padding: 2px;
        margin: 0 8px 0 0 !important;
        border-radius: 50%;
        display: flex;
    }
    .welcomeLeft .featureLogo img {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50%;
    }

    .welcomeRight .getStartedGuide {
        border-radius: 8px;
        padding: 2px 6px !important;
        line-height: 32px !important;
    }
    .welcomeRight .featureItem {
        margin: 10px 0 50px;
    }
    .welcomeRight .featureItem div.taskTitle {
        font-size: 22px;
    }

    .welcomeLeft {
        width: auto !important;
        height: min-content !important;
        padding: 10px !important;
    }
    .welcomeRight {
        height: 85vh !important;
        padding: 10px;
    }
    .welcomeRight table {
        height: fit-content;
        width: auto;
    }
    .welcomeRight table tr td {
        padding: 10px;
    }

    .utilityTableTarget table.recPrev {
        max-width: 372px !important;
    }

    .featureHelpButton {
        width: 30px !important;
    }
    .featureHelpContent {
        left: 0px !important;
        top: 120px !important;
        font-size: 0.65em !important;
    }
    .featureHelp {
        bottom: 0;
        right: 0;
    }
    .helpItem {
        
    }
    .homeContentBlock .controllerOptions > .itemRoot {
        margin: 0 12px 15px !important;
    }
    .homeContentBlock .controllerMethodContents > .itemRoot {
        margin: 14px 12px 14px !important;
    }
    .homeContentBlock .controllerOptions .prevHeader { /*.controllerMethodContents .prevHeader*/
        margin: 0 0 14px 4px !important;
    }
    .homeContentBlock .controllerMethodContents .prevHeader {
        margin: 0 4px !important;
    }

    .register_accountMnemonic {
        max-width: 220px;
        width: 220px;
    }
    dialog {
        top: 50%;
        left: 50%;
    }
    .register, .signIn {
        flex-direction: column;
    }
    .userPreviewContainer {
        margin: 0 auto 0;
    }
    .login .brandingContainer {
        margin: 50px auto;
    }
    .signIn .brandingContainer {
        margin: 25px auto;
    }
    .userProgressPreview {
        flex-direction: row;
        margin: 10px 0 0 0;
        padding: 10px 18px;
        font-size: 0.9em;
        justify-content: space-evenly;
    }

    .userPreviewContainer .previewTitle {
        margin: 15px auto;
    }
    .userProgressPreview > div {
        display: flex;
        flex-direction: column;
        margin: 5px;
        width: 33%;
        text-align: center;
        align-items: center;
    }

    .userProgressPreview > div svg.x {
        display: block;
        position: fixed;
        margin: 16px auto 0 -112px;
    }
    .userProgressPreview > div svg.y {
        display: none;
    }
    .userProgressPreview .accountCreateStepDone {
        padding: 9px;
    }
    .userProgressPreview > div > label { 
        margin: 15px 0 0 0;
    }
    .userProgressPreview > div > span {
        margin: 12px 0 0 0 !important;
        color: #fff;
        z-index: 1;
    }
    .userActionContainer {
        margin: 0 auto;
    }
    .userActionContainer .userActionStepTitles {
        margin: 10px auto !important;
        min-width: 85% !important;
    }
    .userActionContainer .stepTitle {
        padding: 12px 0 6px;
    }
    .userActionContainer .step {
        width: 85% !important;
        margin: auto;
    }
    .login, .register, .signIn {
        top: 0; /*calc(50vh - var(--tbl-h)/1.8)*/
        min-height: calc(100vh - 20px);
        max-height: calc(100vh - 40px);
    }
    .login .brandingLogo, .register .brandingLogo, .signIn .brandingLogo { 
        margin: 15px auto 0;
    }
    .loginTable {
        margin: 50px auto auto;
    }
    .userActionContainer .stepActionResults {
        /*min-height: 150px;*/
    }
    .signIn .passwordSecurity {
        margin: 8px 0 0 12px;
    }
}
@media (min-width: 501px) {
    .welcomeFloatBox {
        display: inline-flex;
        flex-direction: row;
        margin: auto;
    }
    .welcomeLeft {
        display: inline-flex;
        flex-flow: column; /*column-reverse: for displaying content at bottom of layout */
    }
    .welcomeLeft .featureLogoBigger, .welcomeLeft .featureLogo {
        margin: 0 0 18px 0;
    }
    .welcomeRight .taskDescription {
        margin: 20px 35px !important;
    }
    dialog {
        position: fixed;
        margin: 50vh auto;
        -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: 100vw;
        max-width: 400px;
    }
    .login .brandingContainer {
        margin: 50px auto;
    }
    .register {
        flex-direction: row;
    }
    .userPreviewContainer {
        margin: 25px;
    }
    .userPreviewContainer .previewTitle {
        margin: 20px auto;
    }
    .userProgressPreview {
        flex-direction: column;
    }
    .userProgressPreview > div {
        display: flex;
        flex-direction: row;
        height: 50px;
    }
    .userProgressPreview > div > svg {
        /*margin: -16px 0px 0px -22px !important;*/
    }
    .userProgressPreview > div svg.x {
        display: none;
    }
    .userProgressPreview > div svg.y {
        display: block;
        position: fixed;
        margin: -17px 0 0 -11px;
        height: 25px;
    }
    .userProgressPreview > div > img {
        margin: auto 0 !important;
    }
    .userProgressPreview > div > img:not(:first-child) {
        margin: 8px -25px  !important;
        height: 22px;
    }
    .userProgressPreview > div > span {
        color: #fff;
    }
    .userProgressPreview > div > span.step1Value {
        margin: auto 0 auto -18px !important;
    }
    .userProgressPreview > div > span:not(:first-child) {
        margin: auto 0 auto 5px;
    }
    .userProgressPreview > div > label:first-child { 
        margin: auto 0 auto 0;
    }
    .userProgressPreview > div > label:not(:first-child) {
        margin: auto 0 auto 20px;
    }
    .userProgressPreview .accountCreateStepDone {
        position: unset;
    }
    .userActionContainer {
        margin: 40px auto 20px;
    }
    .userActionContainer .userActionStepTitles {
        margin: 40px auto;
        min-width: 70%;
    }
    .userActionContainer .step {
        width: 70%;
        margin: auto;
    }
    .login, .register, .signIn {
        top: calc(50vh - var(--tbl-h)/1.8);
        min-height: calc(90vh - 20px);
        max-height: calc(90vh - 20px);
    }
    .signIn .passwordSecurity {
        margin: 8px auto 0 25px;
    }
    
}
@media (min-width: 600px) {
    .modal-content {
        margin-left: auto; /*20% !important;*/
        margin-right: auto; /*20% !important;*/
        /*min-width: 60vw !important; /*calc(100vw - 50px);*/
        max-width: 600px;
    }
    .logoTopLayout {
        padding: 0 20px;
    }
    .controllerOption, .methodOption {
        max-width: 400px !important;
    }
    .myLifeTitleHeader, .prevHeader, .mySignaturesTitleHeader {
        max-width:390px !important;
    }
    .prevHeader img {
        /*left: -5px !important; /*40px*/
    }
    .prevHeader img {
        /*padding: 8px 0px 0 10px !important;*/
    }
    dialog.operator {
        max-width: 600px !important;
    }
    .myLife_dynamicContent {
        width: -webkit-fill-available; width: -moz-available; /*398px !important;*/
        min-width: unset;
    }
    .userActionContainer .userActionStepTitles {
        margin: 40px auto 20px;
        min-width: 85%;
    }
    .userActionContainer .step {
        width: 82%;
        margin: auto;
    }
}

@media (max-width: 600px) {
    .modal-content {
        margin-left: auto; /*20% !important;*/
        margin-right: auto; /*20% !important;*/
        min-width: 400px !important; /*calc(100vw - 50px);*/
        max-width: 100vw; /*calc(100vw - 80px);*/
    }
}

@media (min-width: 700px) {
    .userPreviewContainer {
        margin: 25px 50px;
    }
    .userActionContainer .userActionStepTitles {
        min-width: 70%;
    }
    .userActionContainer .step {
        width: 70%;
        margin: auto;
    }
}

@media (min-width: 300px) {

    table.mainTabs {
        max-width: 100%;
    }

    td.tdTabButtonContainer {
        padding: 0 6px;
    }

    td.tdTabButtonContainer > span {
        margin: 8px 2px; /* 10px */
    }

    .logoTopLayout {
        padding: 0 2px;
    }
    .controllerOption, .methodOption {
        width: -webkit-fill-available; width: -moz-available; /*100%; /*max-width: calc(100vw - 40px);*/
    }
    .myLifeTitleHeader, .prevHeader, .mySignaturesTitleHeader {
        width: -webkit-fill-available; width: -moz-available;
    }
    .prevHeader img, .prevHeader div {
        left: -20px;
    }
    .prevHeader img {
        /*padding: 8px 0px 0 10px;*/
    }

    .homeContentBlock {
        height: calc(100vh - 257px);
    }

}


@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */ 

    @media (min-width: 300px) {
        .body dialog {
            height: 100% !important;
            width: 100% !important;
            border-radius: 3px !important;
            border: 4px solid #DDD !important;
            padding: 0 0 8px 0px !important;
        }

        .body dialog .dialog__title {
            background-color: #EEE;
            padding: 10px;
        }
        .body dialog .dialog__mainText {
            padding: 10px 10px 15px !important;
            height: calc(100vh - 100px) !important;
            overflow: auto
        }
        .body dialog .dialog__action {
            padding: 0 8px;
        }
        .dialog__action .btnBlueFill, .deleteButton {
            position: absolute;
            top: 0;
            right: 2px 
        }
        .footer {
            display:none;
        }

        .homeContentBlock {
            height: calc(100vh - 297px) !important;
        }
    }

  }
  
  @supports not (-webkit-touch-callout: none) {
    /* CSS for other than iOS devices > Android/Chrome */ 
  }



@media (max-height: 600px) {
    .modal-content {
        height: fit-content;
    }
    .modal-content__body, .modal-content__qr {
        height:auto;
    }
    .modal__content-div-area {
        height: calc(100vh - 170px);
    }
}

@media (min-height: 600px) {
    /*.modal-content {
        top: calc(50vh - 40vh);
        height: 550px;
    }*/
    .modal-content__body {
        height: calc(100vh - 80px); /*calc(100vh - 115px)*/
    }
    .modal-content__qr {
        height: calc(100vh - 130px); 
    }
    .modal__content-div-area {
        height: calc(100vh - 170px); 
    }
}

.modal__content-div-area::-webkit-scrollbar, .utilityPopup::-webkit-scrollbar, .allControllerAgreements::-webkit-scrollbar, .homeContentBlock::-webkit-scrollbar, .dataShareList::-webkit-scrollbar, .myLifeRecordList .containerCollectionRows::-webkit-scrollbar, .controllerOptions::-webkit-scrollbar, .welcomeRight::-webkit-scrollbar, .userActionContainer::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}
.modal__content-div-area::-webkit-scrollbar-track, .utilityPopup::-webkit-scrollbar-track, .allControllerAgreements::-webkit-scrollbar-track, .homeContentBlock::-webkit-scrollbar-track, .dataShareList::-webkit-scrollbar-track, .myLifeRecordList .containerCollectionRows::-webkit-scrollbar-track, .controllerOptions::-webkit-scrollbar-track, .welcomeRight::-webkit-scrollbar-track, .userActionContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.modal__content-div-area::-webkit-scrollbar-thumb, .utilityPopup::-webkit-scrollbar-thumb, .allControllerAgreements::-webkit-scrollbar-thumb, .homeContentBlock::-webkit-scrollbar-thumb, .dataShareList::-webkit-scrollbar-thumb, .myLifeRecordList .containerCollectionRows::-webkit-scrollbar-thumb, .controllerOptions::-webkit-scrollbar-thumb, .welcomeRight::-webkit-scrollbar-thumb, .userActionContainer::-webkit-scrollbar-thumb {
    background: #c0c0c0;
}
.modal__content-div-area::-webkit-scrollbar-thumb:hover, .utilityPopup::-webkit-scrollbar-thumb:hover, .allControllerAgreements::-webkit-scrollbar-thumb:hover, .homeContentBlock::-webkit-scrollbar-thumb:hover, .dataShareList::-webkit-scrollbar-thumb:hover, .myLifeRecordList .containerCollectionRows::-webkit-scrollbar-thumb:hover, .controllerOptions::-webkit-scrollbar-thumb:hover, .welcomeRight::-webkit-scrollbar-thumb:hover, .userActionContainer::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/* horizontal tabs scroller */
.controllerScrollTabs::-webkit-scrollbar {
    height: 2px;
}
.controllerScrollTabs::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.controllerScrollTabs::-webkit-scrollbar-thumb {
    background: #DDD;
}
.controllerScrollTabs::-webkit-scrollbar-thumb:hover {
    background: #BBB; 
}

.scrollTabIcon {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat !important;
    margin: 10px 0;
    opacity: 0.65;
    background-position: center !important;
}

.logoTopLayout {
    border-spacing: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.bg-modalWindow {
    font-family: "Poppins", "Rubik", sans-serif;
    width: 100%;
    height: 80%;
    background-color: rgba(26,26,26,0.6);
    position: absolute;
    top: 10%;
    justify-content: center;
    z-index: 2100;
}
.bg-modal {
    font-family: "Poppins", "Rubik", sans-serif;
    width: 100%;
    height: 100%;
    background-color: rgba(26,26,26,0.6);
    position: absolute;
    top: 0;
    justify-content: center;
    z-index: 2100;
    min-width: 400px !important;
}
.modal-content {
    border-radius: 4px;
    background-color: white;
    position: relative;
    transition: all 500ms, transform 500ms;
    height: 100vh;
    overflow: hidden;
    z-index: 2003;
}
.qr-popup .modal-content {
    background-color: transparent !important;
}
.qr-popup .modal-header {
    display: none !important;
}
.qr-popup .modal-content__sec-title {
    text-align: center;
    margin: 0 auto;
    padding: 2px 10px;
    background: rgba( 255, 255, 255, 0.25 );
    border-radius: 6px 6px 0 0;
}
.qr-popup .modal-content__qr {
    background-color: transparent !important;
}
.qr-popup .modal-footer {
    bottom: 15px !important;
    background-color: transparent !important;
    text-align: center !important;
}
.qr-popup .qr_timer {
    width: 0;
    position: fixed;
    line-height: 6px;
    transition: width 60s, transform 60s;
    background: linear-gradient(90deg, rgb(54, 158, 214), rgb(202, 1, 50));
    border-radius: 6px 0 0 0;
}
.qr-popup .close-modal {
    background: transparent !important;
}
.qr-code-generator {
    background: #fff;
    padding: 25px 0;
}

.modal-header {
    border-radius: 4px 4px 0 0;
    height: 40px;
    position: fixed;
    width: -webkit-fill-available; width: -moz-available;
    max-width: 600px;
    background: linear-gradient(90deg, rgb(54, 158, 214), rgb(202, 1, 50));
    color: #fff;
}
.modal-footer {
    border-radius: 4px;
    background-color: #eee;
    padding: 4px 0 0 0;
    text-align: right;
    position: fixed;
    bottom: 0;
    width: -webkit-fill-available; width: -moz-available;
    /*min-width: 60vw !important;*/
    max-width: 600px;
    height: 54px;
    filter: drop-shadow( 1px 1px 3px rgba(0, 0, 0, .4));
}
.modal-footer button {
    margin: 8px !important;
}
.modal-content__title {
    font-size: 1em;
    color: #fff;
    margin: 4px;
    text-align: left;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex !important;
    align-items: flex-start;
}
.close-modal {
    border: none;
    background: #F9F9F9;
    position: absolute;
    top: 14px;
    right: 14px;
    cursor: pointer;
    opacity: 1;
    padding: 4px 4px 0;
}
.modal-content__qr .close-modal {
    top: 34px;
    right: 2px;
}
.modal-content__body, .modal-content__qr {
    background-color: #FFFFFF;
    width: -webkit-fill-available; width: -moz-available;
    /*min-width: 60vw !important;*/
    max-width: 600px;
    margin: 0;
    position: fixed;
    top: 48px;
}
.modal-content__sec-title {
    font-size: 12px;
    color: #FFF;
    margin: 6px 12px;
    text-align: left;
    font-weight: 500;
    width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-content__qr .modal-content__sec-title {
    width: fit-content;
}
.modal-content__body {
    position: fixed;
    padding: 0;
    width: -webkit-fill-available; width: -moz-available;
    top: 48px;
    /*min-width: 60vw !important;*/
    max-width: 600px;
    margin: 0;
}
.modal__description {
    width: -webkit-fill-available; width: -moz-available;
    color: #434343;
    font-size: 12px;
    font-weight: 400;
    padding: 4px 12px;
    text-align: left;
    line-height: 25px;
}
.modal__content-text-area {
    font-family: "Poppins", "Rubik", sans-serif;
    word-break: break-all;
    font-size: 12px;
    line-height: 20px;
    margin-top: 4px;
    width: 332px;
    background-color: #F9F9F9;
    color: #6B6B6B;
    display: flex;
    border: 0px;
    padding: 12px 2px;
    border-radius: 4px;
    resize: none;
    overflow: auto;
    outline: none;
}
.modal__content-div-area {
    margin: 6px;
    width: -webkit-fill-available; width: -moz-available;
    height: calc(100vh - 196px); /*calc(100vh - 180px); */
    display: flow-root;
    border: 0px;
    padding: 8px;
    border-radius: 4px;
    resize: none;
    overflow: auto;
    outline: none;
    text-align: left;

    animation: fadeIn 400ms;
    -webkit-animation: fadeIn 400ms;
    -moz-animation: fadeIn 400ms;
    -o-animation: fadeIn 400ms;
    -ms-animation: fadeIn 400ms;
}
.modal__content-div-qr-area {
    display: contents;
    margin: 36px 0 0 0;
    border: 0px;
    padding: 0;
    overflow: hidden;
    width: 100%;

    animation: fadeIn 400ms;
    -webkit-animation: fadeIn 400ms;
    -moz-animation: fadeIn 400ms;
    -o-animation: fadeIn 400ms;
    -ms-animation: fadeIn 400ms;
}
.modal__content-agreement-div-area {
    margin-top: 4px;
    width: 95%;
    max-height: 320px;
    display: flex;
    border: 0px;
    padding: 12px;
    border-radius: 4px;
    resize: none;
    overflow: auto;
    outline: none;
    text-align: left;
    overflow: auto;
    border: 1px inset;
}
.modal__copy-content, .modal__okClose-content {
    font-size: 12px;
    margin: 8px 8px 8px 0;
    width: 93px;
    height: 32px;
    border: 0px;
    background-color: #638FC2;
    color: #FFFFFF;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}
.modal__okClose-bottom {
    font-size: 12px;
    width: 93px;
    height: 32px;
    border: 0px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    top: -15px;
}

/* phase 2 upgrades */
.accountMethods, .controllerOptions, .myLifeContainerList, .myLifeCollectionList {
    margin: 8px 8px;
    transition: all 500ms, transform 500ms;
    width: -webkit-fill-available; width: -moz-available;

    animation: fadeIn 400ms;
    -webkit-animation: fadeIn 400ms;
    -moz-animation: fadeIn 400ms;
    -o-animation: fadeIn 400ms;
    -ms-animation: fadeIn 400ms;
}
.accountMethods {
    /*height: calc(100vh - 370px);*/
    height: calc(100vh - 440px);
}
.accountMethod {
    cursor: pointer;
    text-decoration: none;
    padding: 2px 4px;
    /* border: 1px dotted #CCCCDE; */
    border-radius: 10px;
    color: #3C78D8;
    font-weight: 400;
    margin: 3px 1px;
    background-color: none;
    font-size: 1em;
    width: fit-content;
}
.accountMethod:hover {
    background-color: #fafafa;
}
/*.accountMethod:after {
    content: '    ';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512px' height='512px' viewBox='-112 0 512 512'%3E%3Cpath d='M64 352L160 256 64 160 96 128 224 256 96 384 64 352Z'/%3E%3C/svg%3E");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    opacity:0.7;
}*/

.controllerScrollTabs {
    height: 40px;
    min-height: 40px;
    overflow-y: hidden;
    overflow-x: auto;
    display: inline-flex;
    flex-direction: row;
    border-bottom: 2px solid #eee;
    width: calc(var(--home-w) - 30px);
    white-space: nowrap;
    max-width: calc(var(--home-w) - 10px);
}
.controllerScrollTabs .scrollingTabFilter {
    font-weight: 600;
    font-size: 11px;
    color:#404040;
    text-transform: uppercase;
    margin: auto 6px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.scrollingTabFilter:hover, .controllerScrollTabs .active {
    text-decoration: underline solid #2F88FF 2px;
    text-underline-offset: 8px;
    /*color: #2F88FF;*/
    padding: 0 0 1px 0;
}

.controllerNavigation {
    height: 40px;
    min-height: 40px;
}

.controllerOptions, .controllerMethods {
    height: calc(100vh - 300px);
    margin: 0 14px; /*14px*/
}

.homeContentBlock .controllerOptions, .controllerMethods, .controllerMethodContents {
    margin: 14px !important;
}

.level, .level label, .level1, .level1 label, .level2, .level2 label {
    cursor: pointer;
    border: 1px solid transparent;
}

.level:hover, .level1:hover, .level2:hover {
    text-decoration: underline;
}

.myLife_dynamicContent, .mySigningFeatures {
    height: calc(100vh - 310px);
    display: block; /*table-cell;*/
    width: 394px;
    min-width: 370px;
    transition: all 500ms, transform 500ms;
}

.myLife_dynamicContent td.tdTabButtonContainer {
    overflow: unset !important;
}

.myLife_dynamicContent .svg_blueFolderLighter_agreementConsideration table {
    margin: 0 !important;
}

.myLife_dynamicContent .myLifeRecordList {
    /*margin: 12px 0 0 0;*/
    /*padding: 0;
    border: 1px solid rgb(229, 232, 235);
    /*margin: 20px;*/
    margin: 14px;
    padding: 0;
    border: 1px solid rgb(229, 232, 235);
    border-radius: 18px;
    height: calc(100% - 14px);
    background-color: transparent;
}

.myLife_dynamicContent .myLifeRecordList .containerCollectionRows table {
    margin: 1px !important;
    padding: 1px;
    width: 100%;
    background-image: linear-gradient(#D5F0FE, #D5F0FE 30px, white 10%);
    border-radius: 16px 16px 0 0;
}
.myLife_dynamicContent .myLifeRecordList .containerCollectionRows table tr.logTH th:first-child {

}

.myLife_dynamicContent .containerGroup {
    padding: 8px 8px;
    display: -webkit-inline-box;
    border: 1px solid rgb(229, 232, 235);
    margin: 4px 10px 0;
    /*filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .2));*/
    transition: none !important;
}
.myLife_dynamicContent .containerGroup:hover {
    filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .1));
}
.myLife_dynamicContent .containerGroup:active {
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1);
    filter:none;
}

.myLife_dynamicContent .containerGroup .svg_blueFolderLighter {
    background-size: 42px;
    width: 42px;
    height: 42px;
}
.myLife_dynamicContent .containerGroup .svg_blueFolderLighter .sovDataContainerIcon {
    width: 24px;
    height: 29px;
    margin: 9px 7px;
}
.myLife_dynamicContent .containerGroup .sovDataContainerLabel {
    margin: 16px 8px 0 8px;
    font-size: 1em;
}

.myLife_dynamicContent .containerGroup .sovContainerRowCount {
    padding: 8px 0px;
    position: relative;
    border-radius: 50%;
    font-size: 0.75em;
    color: #434343;
    text-align: center;
    width: 30px;
    top: 0.7rem;
    height: fit-content;
    background-color: #eee;
    left: 10px;
}
.myLife_dynamicContent .containerGroup .sovContainerRowCount:after {
    content: '    ';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet' focusable='false' class='style-scope yt-icon' style='pointer-events: none; display: block; width: 100%25; height: 100%25;'%3E%3Cg mirror-in-rtl='' class='style-scope yt-icon'%3E%3Cpath d='M9.4,18.4l-0.7-0.7l5.6-5.6L8.6,6.4l0.7-0.7l6.4,6.4L9.4,18.4z' class='style-scope yt-icon'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 20px;
    background-position: right;
    background-repeat: no-repeat;
    opacity:0.7;
}

.myLife_dynamicContent .containerCollection .sovContainerCollectionRowCount {
    padding: 8px 0px;
    position: relative;
    border-radius: 50%;
    font-size: 0.75em;
    color: #434343;
    text-align: center;
    width: 30px;
    top: 0.7rem;
    height: fit-content;
    background-color: #eee;
    left: 10px;
}


.myLife_dynamicContent .containerCollection {
    padding: 2px 4px;
    display: -webkit-inline-box;
    border: 1px solid rgb(229, 232, 235);
    margin: 4px 10px;
    /*filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .2));*/
    transition: none !important;
}

.myLife_dynamicContent .containerCollection:hover {
    filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .1));
 
}
.myLife_dynamicContent .containerCollection:active {
    -webkit-box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .1);
    filter:none;
}

.myLife_dynamicContent .myLifeContainerList, .myLife_dynamicContent .myLifeCollectionList, .mySignatureOptions {
    border: 1px solid rgb(229, 232, 235);
    border-radius: 10px;
    margin: 10px 14px;
}

.myLife_dynamicContent .myLifeCollectionList .containerCollection .svg_blueFolderLighter {
    background-size: 42px;
    width: 42px;
    height: 42px;
}
.myLife_dynamicContent .myLifeCollectionList .containerCollection .svg_blueFolderLighter .sovDataContainerIcon {
    width: 18px;
    height: 24px;
    margin: 11px;
}
.myLife_dynamicContent .myLifeCollectionList .containerCollection .sovDataContainerLabel {
    margin: 18px 8px 0 8px;
    font-size: 1em;
}
.myLife_dynamicContent .myLifeCollectionList .containerCollection .sovContainerRowCount {
    padding: 5px 0px;
    position: relative;
    border-radius: 50%;
    font-size: 0.75em;
    color: #434343;
    text-align: center;
    width: 30px;
    top: 1.2rem;
    height: fit-content;
    background-color: #eee;
    left: 10px;
}

.myLife_dynamicContent .CollectionHeaderTabGroup  {
    background-color: transparent;
    display:none;
}

.myLife_dynamicContent .containerCollectionRows table thead {
    /*background-color: #D5F0FE;*/
}

.homeContentBlock .containerGroup .hoverSelect, .homeContentBlock .containerCollection .hoverSelect {
    cursor:pointer;
    width:28px;
    margin: auto 0 auto auto;
    height:fit-content;
}

.homeContentBlock .sovContainerRowCount, .homeContentBlock .sovContainerCollectionRowCount {
    display: none !important;
}

.sovContainerRowCount {
    padding:0 4px;
    position:fixed;
    top: 25px;
    left:26px;
    border-radius:50%;
    min-width:8px;
    font-size: 0.65em;
    color:#434343;
    text-align: center;
    width: 30px;
}
.sovContainerCollectionRowCount {
    padding:0 4px;
    position:fixed;
    top: 16px;
    left: 14px;
    border-radius:50%;
    min-width:8px;
    font-size: 0.65em;
    color: #434343; /*0095FF*/
    text-align: center;
    width: 30px;
}

.homeContentBlock .featureItem, .homeContentBlock .featureWelcomeAssist, .homeContentBlock .bannerFeatureItem {
    display: inline-flex;
    flex-direction: row;
    margin: 10px auto 0 0;
    height: 38px;
    align-items: center;
    width: calc(100% - 40px);
}
.homeContentBlock .featureWelcomeAssist {
    /*border: 2px solid #eee;*/
    border-radius: 10px;
    background: #fff;
}
.homeContentBlock .bannerFeatureItem {
    margin: 0 auto !important;
}
.homeContentBlock .featureLogo, .homeContentBlock .bannerFeatureLogo {
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.homeContentBlock .featureLogo img, .homeContentBlock .bannerFeatureLogo img {
    width: inherit;
    height: inherit;
}
.homeContentBlock .getStarted {
    margin: 4px 10px;
    font-size: 1.1em;
    color: #2F88FF;
    cursor: pointer;
}
.homeContentBlock .getStarted:hover {
    text-decoration: underline;
}
.homeContentBlock .getStarted::before {
    content: none;
}

.homeContentBlock .containerGroup {
    filter: drop-shadow( 1px 1px 4px rgb(255,255,255));
    border: 1px solid rgb(229, 232, 235);
    margin: 0px 14px 8px;
    width: -webkit-fill-available; width: -moz-available;
    display: flex;
    flex-flow: wrap;
}
.homeContentBlock .containerGroup:hover {
    filter: drop-shadow( 1px 1px 4px rgba(0, 0, 0, .1));
}

.homeContentBlock .containerGroup .sovDataContainerLabel {
    margin: auto 8px;
}

.containerGroup {
    cursor: pointer;
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 10px;
    color: #000;
    font-weight: 400;
    margin: 8px 10px;
    background-color: #fff;
    font-size: 1.2em;
    display: inline-block;
}
.containerGroup img.sovDataContainerIcon {
    width: 24px;
    height: auto;
    opacity: 1;
    margin: 18px 12px 0 12px;
}

img.signingFeatureIcon {
    width: 54px;
    height: fit-content;
    opacity: 1;
    margin: 4px
}

.myLifeDataObjectTable {
    padding: 0;
    margin: 0;
    border-spacing: 0;
}
.myLifeDataObjectTable:hover {
    background-color: #f6f6f6;
    cursor: pointer;
}
.myLifeDataObjectTable tr.trHeaderTitle {
    line-height: 24px;
}
.myLifeDataObjectTable .trHeaderTitle td {
    display: flex;
    padding: 12px 12px 0;
    font-size: 12px;
}

.mySignatureOptions img.itemRoot {
    width:14px;
    margin:0 18px;
    opacity: 0.5;    
}

.controllerOptions .myLifeDataObjectTable .trHeaderTitle td, .controllerMethods .myLifeDataObjectTable .trHeaderTitle td {
    padding: 8px 0px 8px 10px !important;
}

.controllerMethods .trHeaderTitle td {
    border-bottom: 1px solid rgb(229, 232, 235);
}

.controllerOptions .myLifeDataObjectTable .trHeaderTitle td .containerName, .controllerMethods .myLifeDataObjectTable .trHeaderTitle td .containerName {
    opacity: 0.9;
    font-size: 0.9em;
    margin: auto 0 auto auto;
}
.homeContentBlock .controllerOptions .myLifeDataObjectTable .trHeaderTitle td .containerName, .controllerMethods .myLifeDataObjectTable .trHeaderTitle td .containerName {
    display: none;
}
.controllerOptions .myLifeDataObjectTable .trDescription td, .controllerMethods .myLifeDataObjectTable .trDescription td {
    font-size: 10px;
    word-break: break-word;
    padding: 18px 14px;
    color: #555;
    /*border-top: 1px solid rgb(229, 232, 235);*/
    text-align: left;
    text-align-last: auto;
}
.controllerOptions .myLifeDataObjectTable .trDescription td span, .controllerMethods .myLifeDataObjectTable .trDescription td span {
    font-size: 14px;
}
.controllerOptions .actionButton {
    font-size: 11px;
}

.controllerOptions .myLifeDataObjectTable .trHeaderTitle td img.itemRoot, .controllerMethods .myLifeDataObjectTable .trHeaderTitle td img.itemRoot {
    display: block;
}

.myLifeDataObjectTable .trHeaderTitle td img.itemRoot {
    width: auto;
    margin: auto auto auto 0;
    opacity: 1;
    max-height: 24px;
    display: none;
}
.myLifeDataObjectTable .trHeaderTitle td .containerName {
    margin: 0 auto 0 6px;
    width: auto; /*164px;*/
}

.myLifeDataObjectTable .trHeaderTitle td div.stat {
    display: flex;
    margin: 0 0 0 auto; /*0 10px;*/
    font-size: 0.9em;
    display: none;
}
.myLifeDataObjectTable .trHeaderTitle td div.stat img {
    width:21px;
    margin:0 6px 0 0;
    opacity: 0.5;
}
.myLife_dynamicContent .myLifeContainerList .trHeaderTitle img.itemRoot {
    opacity:0.7;
}
.myLife_dynamicContent .myLifeContainerList .trContainer img.sovDataContainerIcon {
    width: 60px;
    height: 60px;
    opacity: 1;
    padding: 0 8px 0 0;
}
.myLife_dynamicContent .myLifeCollectionList .trContainer img.sovDataContainerIcon {
    width: 32px;
    /*height: 60px;*/
    opacity: 1;
    padding: 0 16px 0 16px;
}
.myLifeDataObjectTable tr.trContainer td {
    padding: 7px 14px 12px;
    width: -webkit-fill-available; width: -moz-available;
    display: inline-flex;
    flex-flow: row;
    align-items: center;
}
.myLifeDataObjectTable tr.trContainer td img.ControllerIcon {
    width: 40px;
    height: 40px;
    opacity: 1;
    padding: 0 8px 0 0;
}
.myLifeDataObjectTable tr.trPermissionsGroupOptions td {
    border-top: 1px solid rgb(229, 232, 235);
    padding: 14px;
    display: flex;
    flex-flow: row;
    align-items: center;
}
.myLifeDataObjectTable tr.trContainer td .sovContainerRowCount {
    
}

.myLifeDataObjectTable tr.trContainer p {
    font-size: 0.9em;
    word-break: break-word;
    padding: 0 8px;
}

.myLifeContainerList .myLifeDataObjectTable:not(:first-child) {
    border-top: 1px solid rgb(229, 232, 235);
}

.myLifeCollectionList .myLifeDataObjectTable:not(:first-child) {
    border-top: 1px solid rgb(229, 232, 235);
}

.mySigningFeatures table:not(:first-child) {
    border-top: 1px solid rgb(229, 232, 235);
}

div.sovDataContainerLabel {
    margin: 2px 8px; /* 0 0 38px*/
    font-size: 0.9em;
}

.myLifeContainerList .containerCollection {
    margin: 2px 10px 0px !important;
}

.homeContentBlock .containerCollection {
    filter: drop-shadow( 1px 1px 4px rgb(255, 255, 255));
    margin: 0px 14px 8px !important;
    display: flex;
    flex-flow: wrap;
    font-size: 1.2em;
}
.homeContentBlock .containerCollection:hover {
    filter: drop-shadow( 1px 1px 4px rgba(0, 0, 0, .1));
}

.homeContentBlock .containerCollection div.sovDataContainerLabel {
    margin: auto 8px;
}

.containerCollection {
    cursor: pointer;
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 10px;
    color: #000;
    font-weight: 400;
    margin: 0 10px;
    background-color: #fff;
    font-size: 1.05em;
    display: inline-block;
    border: 1px solid rgb(229, 232, 235);
    /*filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .2))*/
}
.containerCollection img.sovDataContainerIcon {
    width: 22px;
    height: 22px;
    opacity: 1;
    margin: 19px 14px;
}

.controllerOption, .methodOption {
    cursor: pointer;
    text-decoration: none;
    padding: 25px 10px;
    border: 2px dotted #CCCCDE;
    border-radius: 10px;
    font-weight: 400;
    margin: 4px auto 0;
    background-color: none;
    font-size: 1.13em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    text-align: center;
}
.controllerOption:hover, .methodOption:hover {
    background-color: #f5f5f5;
}

.myLifeRecordList .containerCollectionRows {
    overflow: auto;
    height: calc(100% - 4px);
}

.myLifeRecordList .containerCollectionRows table {
    margin: 10px 6px 0 !important;
    width: calc(100% - 2px) !important;
    /*display: grid;*/
}
.myLifeRecordList .containerCollectionRows table th, .myLifeRecordList .containerCollectionRows table td {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.btnControllerPermissionGroup {
    margin: 0 auto 0 0;
}

.home_Group {
    transition: all 500ms, transform 500ms;
    cursor: default;
    text-decoration: none;
    padding: 5px 8px;
    /* border: 1px dotted #CCCCDE; */
    border-radius: 10px;
    color: #707070;
    font-weight: 400;
    margin: 3px 3px; /*1px*/
    background-color: none;
    font-size: 1em;
}

table.prevData {
    margin-top: 70px;
    padding: 4px;
    position: absolute; /* fixed */
    transition: all 500ms, transform 500ms;
    width: 80%;
}
table.prevData tr {
    line-height: 40px;
    transition: all 500ms, transform 500ms;
}
.prevData .groupTitle {
    font-size: 14px;
    background-color: rgba(245,245,245,0.5);
    padding: 0 0 0 10px;
}.prevData .groupLabel {
    font-weight: 400;
    padding: 0 10px;
    line-height: 22px;
    font-size: 0.9em;
}
.prevData .left {
    font-weight: 400;
    padding: 4px;
    text-align: right;
    font-size: 0.9em;
    color: rgba(0,0,0,0.75);
    max-width: 40%;
    min-width: 20%;
}
.prevData .right {
    padding: 4px;
}
.prevData .right input, .prevData .right textarea, .prevData .right select {
    padding: 4px;
    font-weight: 400;
    font-size: 1em;
    width: calc(100% - 14px); /*100%;*/
    text-align-last: left;
}
.prevData .both {
    padding: 4px;
}
.prevData .both table {
    
}

.homeContentBlock .controllerMethods > img.itemRoot {
    margin: 18px 12px 0;
    width: fit-content;
    max-height: 30px !important;
    max-width: unset !important;
}
.homeContentBlock .controllerMethodContents > img.itemRoot {
    margin: 18px 12px 0;
    width: fit-content;
    max-height: 30px !important;
    max-width: unset !important;
}

.controllerOptions .prevHeader, .controllerMethods .prevHeader {
    display: inline-flex;
    color: #434343;
    margin: 10px 0;
}
.controllerOptions .prevHeader .did_scheme, .controllerMethods .prevHeader .did_scheme {
    margin: auto 2px;
    font-size: 12px;
    color: #434343;
}

.controllerOptions .prevHeader img, .controllerMethods .prevHeader img {
    position: unset;
    left:0;
    top:0;
}

.controllerOptions .prevHeader label, .controllerMethods .prevHeader label {
    top: 0;
}

.controllerMethods .controllerMethodCategories {
    /*display: inline-flex;*/
    display: none;
    padding: 0 8px 28px 8px;
}

.controllerMethods .cid_category {
    border-spacing: 0;
    word-break: break-word;
    text-align: left;
    text-align-last: auto;
    font-family: "Poppins", "Rubik", sans-serif;
    font-size: 10px;
    opacity: 0.8;
    border: 1px solid #14A6F7;
    padding: 3px 6px;
    border-radius: 9px;
    background: #E7F3FA;
    color: #404040;
    width: fit-content;
    margin: 0 6px 0 0;
    cursor: default;
}

.controllerMethodContents {
    margin: 0 14px;
    flex-direction: column;
}
.controllerMethodContents .prevHeader label {
    padding: 6px 0px;
    margin: auto 0;
}
.controllerMethodContents .prevHeader {
    display: inline-flex;
    margin: 10px 0; /*0 8px;*/
}

.controllerMethodContents .prevHeader .itemRoot {
    display: none;
}
.homeContentBlock .myLifeDataObjectTable .trHeaderTitle td img.itemRoot {
    max-height: 30px !important;
}

.controllerOptions > .itemRoot, .controllerMethods > .itemRoot {
    display: block;
    height: unset !important;
    max-height: 30px !important;
    width: fit-content;
}
.controllerMethodContents > .itemRoot {
    display: block;
    height: unset !important;
    max-height: 30px !important;
    width: fit-content;
}

.controllerMethodContents .prevHeader .btnBack {
    position: unset !important;
}

.controllerMethodContents .prevData {
    border: 1px solid rgb(229, 232, 235);
    border-radius: 10px;
    width: 100%; /*calc(100% - 32px);*/
    margin-top: 0;
    position: unset;
    min-height: 200px;
}

.controllerMethodContents .prevData td.headerGradient {
    padding: 0 0 8px;
    opacity: 0.5;
}
.controllerMethodContents .prevData td.headerGradient div {
    background: linear-gradient( 45deg, rgb(60,120,216), rgb(166,77,121), rgb(106,168,79) );
    height: 6px;
    width: calc(100% + 6px);
    position: relative;
    left: -3px;
    top: -6px;
    border-radius: 10px 10px 0 0;
}

.controllerMethods .myLifeDataObjectTable, .controllerMethodContents .prevData {
    box-shadow: rgb(200, 200, 200) 1px 1px 8px, rgb(255, 255, 255) -2px -2px 3px;
    border-spacing: 0;
}

.controllerMethods .myLifeDataObjectTable {
    height: 200px;
}
.controllerOptions .myLifeDataObjectTable, .controllerMethods .myLifeDataObjectTable {
    width: 100%; /*94*/
    border: 1px solid rgb(229, 232, 235);
    border-radius: 10px;
    margin: 0;
}
.controllerOptions .myLifeDataObjectTable tr.trHeaderTitle, .controllerMethods .myLifeDataObjectTable tr.trHeaderTitle {
    line-height: 10px;
}
.controllerOptions .myLifeDataObjectTable div.cid_status, .controllerMethods .myLifeDataObjectTable div.cid_status {
    font-size: 10px;
    opacity: 1;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 3px 6px;
    border-radius: 9px;
    background: #EEE;
    color: #404040;
}
.controllerOptions .myLifeDataObjectTable div.cid_category, .controllerMethods .myLifeDataObjectTable div.cid_category {
    font-size: 10px;
    opacity: 0.8;
    border: 1px solid #14A6F7;
    padding: 3px 6px;
    border-radius: 9px;
    background: #E7F3FA;
    color: #404040;
    width: fit-content;
    margin: 8px 0;
}
.controllerOptions .myLifeDataObjectTable div.cid_timestamp, .controllerMethods .myLifeDataObjectTable div.cid_timestamp {
    margin: auto 8px; /*auto 0 auto auto;*/
    font-size: 10px;
    opacity: 0.8;
}

.controllerOptions .myLifeDataObjectTable .trContainer td, .controllerMethods .myLifeDataObjectTable .trContainer td {
    flex-flow: column;
}
.controllerOptions div.containerName small {
    color: #909090;
}
.controllerOptions .controllerRecord, .controllerMethods .controllerRecord {
    padding: 8px 0;
    height: auto;
    margin: 4px 0 0 0;
}
.homeContentBlock .controllerOptions .controllerRecord, .controllerMethods .controllerRecord {
    margin: 0 0 8px 0;
}

.controllerOptions .myLifeDataObjectTable:not(:first-child), .controllerMethods .myLifeDataObjectTable:not(:first-child) {
    border-top: 1px solid rgb(229, 232, 235);
}

.controllerOptions table:not(:first-child), .controllerMethods table:not(:first-child) {
    border-top: 1px solid rgb(229, 232, 235);
}
.controllerOptions div.hoverSelectArrow, .controllerMethods div.hoverSelectArrow {
    /*border-radius: 50%;
    background: linear-gradient(135deg, rgb(255, 255, 255), rgb(225, 225, 225));*/

    padding: 2px;
    width: 28px;
    height: 28px;
    margin: 0 0 0 auto;
}
.controllerOptions div.hoverSelectArrow:hover, .controllerMethods div.hoverSelectArrow:hover {
    /*background: linear-gradient(135deg, rgb(255, 255, 255), rgb(195, 195, 195));*/
}
.controllerOptions img.hoverSelect, .controllerMethods img.hoverSelect {
    cursor:pointer;
    width:28px;
    margin:0 2px 0 auto;
    height:fit-content;
}
.controllerOptions img.hoverSelect:hover, .controllerMethods img.hoverSelect:hover {
    background-color: #F5F5F5;
    border-radius: 6px;
}
.controllerOptions div.stat, .controllerMethods div.stat {
    display: none;
}

.prevHeader {
    color: #434343;
    opacity: 0.85;
    font-size: 12px;
    border-radius: 10px;
    transition: all 500ms, transform 500ms;
    height: 40px;
}

.prevHeader img {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: 4px;
    left: -10px;
    cursor: pointer;
}

.prevHeader label {
    background-color: #fff;
    border-radius: 12px;
    padding: 4px 0px;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*top: -8px;*/
}


.methodContents, .controllerMethods, .myLifeCollectionList {
    transition: all 500ms, transform 500ms;
}

.methodContents table.prevData {
    margin-top: 10px !important;
    width: 360px;
    max-width: 95vw;
    padding: 0 15px
}
.myLifeCollectionList table.prevData {
    margin-top: 10px !important;
    width: 400px;
    max-width: 95vw;
    padding: 0 15px
}

.agreement_id {
    color: #6A1A41;
}

.did_scheme {
    color: #3C78D8;
}   
.did_method {
    color: #A64D79;
}
.did_identifier {
    color: #6AA84F;
}
.did_timestamp, .agreement_version, .agreement_timestamp {
    color: rgba(45,45,45,0.75);
    font-size: 0.75em;
    align-self: center;
    padding: 0 4px;
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.myLifeCollectionList {
    margin-top:8px;
}


/* * * * * * * * * * * * * * */
.issuedAccountKey {
    padding: 16px 20px;
    cursor: default;
    margin: 0 10px 8px 10px;
    font-size: 1.1em;
    background-color: #fff;
    border: 1px dotted #CCCCDE;
    border-radius: 8px;
}
.issuedAccountKey:hover { /*, .userControllerAgreement:hover*/
    background-color: #f5f5f5;
}

.issuedAccountKey_card {
    padding: 15px 15px 15px 15px;
    cursor: default;
    font-size: 1.4em;
    color: #fff;
    width: 345px;
}
.issuedAccountKey_card .emblems {
    display: flex;
    flex-direction: row;
    width: 325px;
    padding: 6px;
    height: 40px;
}
.issuedAccountKey_card .emblems .cid_logo {
    /*position: fixed;
    left: 20px;*/
    background: #fff;
    padding: 2px;
    border-radius: 3px;
    max-width: 160px;
    max-height: 40px;
    height: fit-content;
    border: 2px solid rgba(155,255,55,0.5);
}
.issuedAccountKey_card .cid {
    margin: 10px 0 10px 0;
    height: 65px;
    width: 345px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border-radius: 8px;
    filter: drop-shadow(1px 1px 1px #333);
}
.issuedAccountKey_card .cid .barcode-container {
    /*background-Color: #fff;*/
    padding: 0 10px;
    width: 345px;
    height: 72px;
}
.issuedAccountKey_card .cid .barcode-container svg {
    min-width: 325px;
}
.issuedAccountKey_card .displayAttributes {
    color:#fff;
    font-size: 0.7em;
    padding: 15px 0;
    width: 345px;
    display: inline-flex;
    flex-flow: wrap;
    align-items: flex-start;
    flex-direction: column;
}

.issuedAccountKey_cardReverse {
    padding: 15px 15px 15px 15px;
    cursor: default;
    font-size: 1.4em;
    color: #fff;
    width: 345px;
}
.issuedAccountKey_cardReverse .displayReverseAttributes {
    color:#fff;
    font-size: 0.65em;
    padding: 15px 8px 10px 25px;
    width: 325px;
    position: fixed;
    display: flex;
    justify-content: center;
    filter: drop-shadow(0px 0px 1px #111);
}

.issuedAccountKey_cardReverse .displayReverseAttributes .right {
    display: flex;
}
.issuedAccountKey_cardReverse .displayReverseAttributes input, .issuedAccountKey_cardReverse .displayReverseAttributes textarea {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color:#fff;
    text-align: left;
    text-align-last: auto;
    font-size: 1.2em;
}

.userControllerAgreement {
    height: calc(100vh - 188px);
    padding: 16px 20px;
    cursor: default;
    margin: 4px 0 0px 3px;
    font-size: 1em;
}


.issuedAccountKey_card .emblems div.issued {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='30px' height='30px' viewBox='0 0 16 16' id='wait-16px'%3E%3Cpath id='Path_14' data-name='Path 14' d='M-13.5,3.5V8a.5.5,0,0,1-.5.5.5.5,0,0,1-.5-.5V3.5A.5.5,0,0,1-14,3,.5.5,0,0,1-13.5,3.5ZM-13,.55a.5.5,0,0,0-.465-.532Q-13.731,0-14,0a8.009,8.009,0,0,0-8,8,8.009,8.009,0,0,0,8,8q.268,0,.534-.018A.5.5,0,0,0-13,15.45a.507.507,0,0,0-.533-.466c-.154.011-.309.016-.466.016a7.008,7.008,0,0,1-7-7,7.008,7.008,0,0,1,7-7c.157,0,.312,0,.466.016h.034A.5.5,0,0,0-13,.55Zm2.126,13.716a7.165,7.165,0,0,1-.842.354.5.5,0,0,0-.31.635.5.5,0,0,0,.473.337.516.516,0,0,0,.163-.027,8.087,8.087,0,0,0,.962-.4.5.5,0,0,0,.224-.671A.5.5,0,0,0-10.875,14.266ZM-8.738,3.383a.5.5,0,0,0,.376.171.5.5,0,0,0,.33-.124.5.5,0,0,0,.046-.706,7.93,7.93,0,0,0-.739-.739.5.5,0,0,0-.7.047.5.5,0,0,0,.046.7A6.91,6.91,0,0,1-8.738,3.383Zm-3.005-2.011a6.892,6.892,0,0,1,.845.351.5.5,0,0,0,.221.051.5.5,0,0,0,.448-.278.5.5,0,0,0-.227-.67,8.041,8.041,0,0,0-.964-.4.5.5,0,0,0-.635.312A.5.5,0,0,0-11.743,1.372ZM-6.73,9.919a.5.5,0,0,0-.633.314,7.106,7.106,0,0,1-.348.845.5.5,0,0,0,.229.67.5.5,0,0,0,.219.05.5.5,0,0,0,.45-.279,8.145,8.145,0,0,0,.4-.967A.5.5,0,0,0-6.73,9.919ZM-8.721,12.6a7.043,7.043,0,0,1-.644.649.5.5,0,0,0-.042.706.5.5,0,0,0,.374.168.493.493,0,0,0,.331-.126,7.9,7.9,0,0,0,.735-.74.5.5,0,0,0-.048-.706A.5.5,0,0,0-8.721,12.6Zm2.7-5.135A.5.5,0,0,0-6.551,7a.5.5,0,0,0-.465.532C-7.005,7.685-7,7.842-7,8s0,.3-.014.442a.5.5,0,0,0,.466.532h.033a.5.5,0,0,0,.5-.467C-6.005,8.34-6,8.17-6,8S-6.006,7.639-6.018,7.462Zm-1.354-1.72a.5.5,0,0,0,.474.339.508.508,0,0,0,.161-.027.5.5,0,0,0,.312-.635,8.056,8.056,0,0,0-.4-.964.5.5,0,0,0-.67-.226.5.5,0,0,0-.226.669A6.939,6.939,0,0,1-7.372,5.742Z' transform='translate(22)' style='&%2310; stroke-dasharray: 5;&%2310;'/%3E%3C/svg%3E");
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: right;
    margin: 0;
    filter: invert(1);
    height: 42px;
    width: 44px;
    position: fixed;
    right: 50px;
}
.issuedAccountKey_card .emblems div.issued::after {
    /*special note: color inversion applies here due to background-image using black stroke*/
    content: 'unclaimed';
    color: #000;
    font-size: 0.7em;
    position: relative;
    top: 36px;
    left: -4px;
    filter: drop-shadow(1px 1px 3px blue); /* color is inverted */
}
.issuedAccountKey_card .emblems div.claimed {
    background: url( '../images/status_verified_wh.svg' );
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: right;
    margin: 0;
    height: 42px;
    width: 44px;
    position: fixed;
    right: 50px;
    opacity: 0.8;
}
.issuedAccountKey_card .emblems div.claimed::after {
    content: 'claimed';
    color: #fff;
    font-size: 0.7em;
    position: relative;
    top: 30px;
    left: 0px;
    filter: drop-shadow(1px 1px 3px black);
}

.issuedAccountKey_card .emblems div.verified {
    background: url( '../images/status_verified_wh.svg' );
    background-size: 38px;
    background-repeat: no-repeat;
    background-position: right;
    margin: 0;
    filter: drop-shadow(2px 4px 6px gray);
    height: 42px;
    width: 294px;
    position: relative;
    right: 50px;
}
.issuedAccountKey_card .emblems div.verified::after {
    content: 'verified';
    color: #fff;
    font-size: 0.7em;
    position: relative;
    top: 36px;
    left: -4px;
    filter: drop-shadow(1px 1px 3px blue);
}
.issuedAccountKey_card .emblems div.selfRegister {
    background: url( '../images/link.svg' );
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: right;
    margin: 0;
    height: 42px;
    width: 44px;
    position: fixed;
    right: 50px;
    top: 15px;
    filter: invert(1);
    opacity: 0.8;
}
.issuedAccountKey_card .emblems div.selfRegister::after {
    content: 'selfRegister';
    color: black;
    font-size: 0.65em;
    position: relative;
    top: 30px;
    left: -12px;
    filter: drop-shadow(2px 4px 6px white); /* color is inverted */
}

.issuedAccountKey_card div.verified {
    background: url( '../images/status_verified_wh.svg' );
    background-size: 38px;
    background-repeat: no-repeat;
    background-position: right;
    margin: 0;
    filter: drop-shadow(2px 4px 6px gray);
    height: 42px;
    width: 294px;
    position: relative;
    right: 50px;
}
.issuedAccountKey_card div.claimed {
    background: url( '../images/status_verified_wh.svg' );
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: right;
    margin: 0;
    /*filter: drop-shadow(2px 4px 6px gray);*/
    height: 42px;
    width: 44px;
    position: fixed;
    right: 50px;
}

.userControllerAgreement div.icon {
    background-color: #F1F2F4;
    padding: 0 0 0 16px;
    background: url( '../images/agreement.svg' );
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right;
    margin: 0 4px 0 0;
}

.userControllerAgreement div.icon {
    background-color: #F1F2F4;
    padding: 0 0 0 16px;
    background: url( '../images/agreement.svg' );
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right;
    margin: 0 4px 0 0;
}

.userControllerAgreement td div.icon {
    height:20px;
}

.msgPromptVerified {
    opacity:0.85;
    width: 100%;
    text-align: left;
}

.msgPromptVerified::before {
    content: url( '../images/completed.svg' );
    display: inline-grid;
    vertical-align: sub;
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.msgPromptInfo {
    opacity:0.85;
    width: 100%;
    text-align: left;
}

.msgPromptInfo::before {
    content: url( '../images/about.svg' );
    display: inline-grid;
    vertical-align: sub;
    width: 18px;
    height: 18px;
    margin: 0px 10px 0 0;
    opacity: 0.5;
}

.caution {
    opacity:0.85;
    width: 100%;
    text-align: left;
    color:#A64D79;
}

.caution::before {
    content: url( '../images/caution.svg' );
    display: inline-grid;
    vertical-align: sub;
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.warning {
    opacity:0.85;
    width: 100%;
    text-align: left;
    color:#000;
}

.warning::before {
    content: url( '../images/warning.svg' );
    display: inline-grid;
    vertical-align: sub;
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.question {
    opacity:0.85;
    width: 100%;
    text-align: left;
    color:#000;
}

.question::before {
    content: url( '../images/question.svg' );
    display: inline-grid;
    vertical-align: sub;
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

.aboutMoreInfo a, .aboutMoreInfo a:visited {
    color: #3C78D8;
}

.toggleSwitchContainer {
    display: flex;
    max-width: 60px;
    border: 2px solid transparent;
}
.toggleSwitchContainer:focus{
    outline: none;
    border: 2px solid #A3BFE9;
    /*box-shadow: 0 0 3px #A3BFE9;
    -moz-box-shadow: 0 0 3px #A3BFE9;
    -webkit-box-shadow: 0 0 3px #A3BFE9;*/
  }

.toggleSwitchContainerSmall {
    margin: 0 8px 0 0;
    text-align: -webkit-left;
    height: 20px;
}
.toggleSwitchContainerSmall .switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 18px;
  }
  .toggleSwitchContainerSmall .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 1px;
    bottom: 0;
    background-color: white;
    -webkit-transition: .3s;
    transition: .3s;
  }

  
.toggleSwitchContainerSmall input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
    left: 2px;
  }

  .dataShareView_template input:checked + .slider {
    background-color: #153E75;
  }

  .containerDataSelector_forSharing {
    box-shadow: rgb(200, 200, 200) 1px 1px 5px, rgb(255, 255, 255) -2px -2px 5px;
    width: 96% !important;
    margin: 0 auto !important;
  }

  .containerDataSelector_forSharing table tr.logTH th {
    padding: 6px 4px;
  }

  .containerDataSelector_forSharing .containerObj {
    border-radius: 6px 6px 0 0;
  }

  .containerDataSelector_forSharing .recPrev .containerObj label {
    margin: 0 !important;
  }

  .containerDataSelector_forSharing .containerCollectionTabHeader table thead {
    background: #EEE;
  }  


td.btnControllerDataShares {
    /*display: none;*/
}

div.notifUserLogger {
    font-size: 11px;
    color: #fff;
    width: 100%;
    text-align: center;
    height: 40px;
    padding: 0;
}

/* FAB BUTTON */
div.fab {
    display: none;
    position: absolute;
    top: -78px;
    right: 14px;
    width: 54px;
    height: 54px;
    background-color: #fff;
    border:3px solid #f5f5f5;
    border-radius: 50%;
    cursor: pointer;

    background: url(../images/user.svg);
    background-size: 52px;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: center;

    background-color: #fff;
    -webkit-tap-highlight-color: transparent;
}

div.fab:hover, div.fabItem:hover {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    transition: all 100ms, transform 100ms;
}
div.fabItem .icon {
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255,255,255,1);
    border: 2px solid #fff;
    background-size: 32px;
    background-position: center;
}
.fabQR{
    background: url(../images/qrcode.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-origin: content-box;
}
.fabElecSignature{
    background: url(../images/signature.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-origin: content-box;
}
.fabIssueConsent{
    background: url(../images/issue.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-origin: content-box;
}
.fabInteractive{
    background: url(../images/enquire.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-origin: content-box;
}
.fabRemote{
    background: url(../images/connectionTry.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-origin: content-box;
}

div.fabList {
    display: none;
    position: fixed;
    bottom: 130px;
    right: 20px;
    width: fit-content;
    cursor: pointer;
    color: #000;
    padding: 0px;
    z-index: 2020;
}

div.fabList div.fabItem {
    font-size: 0.9em;
    border-radius: 8px;
    width: 280px;
    margin: 10px;
    opacity: 1;
}

div.fabItem div.fabText {
    border-radius: 5px;
    background-color: rgba(255,255,255,1);
    width: -webkit-fill-available; width: -moz-available;
    padding: 12px 8px;
    text-align: center;
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .4));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .4));
    margin: 0 0 0 4px;
}

div.fabItem div:hover {
    background-color: rgba(255,255,255,0.9);
}
div.fabItem img:hover {
    background-color: rgba(255,255,255,0.9);
}

/* FAB BUTTON */

.signDigitalMessage table {
    display: inline-table;
}

.signDigitalMessage .signRowSignature {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
}

.signDigitalMessage .signatureButtonHelpIcon {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
}

textarea.signature {
    height: 36px !important;
    width: calc( 100% - 24px ) !important;
    resize: none;
    border: 2px dashed #454545;
    background-color: #f5f5f5;
    cursor: default;
    font-size: 9px !important; /*0.75em !important;*/
    opacity: 0.5;
}

.signatureButtonIcon {
    /*position: absolute;
    right: 16px;*/
    cursor: pointer;
    margin: 4px;
    background-color: #f5f5f5;
    width: 36px;
    height: 32px;

    background: url(../images/signature.svg);
    background-size: 30px;
    background-repeat: no-repeat;
    background-origin: content-box;
}
.signatureButtonHelpIcon {
    position: relative;
    right: -4px;
    top: 26px;
    cursor: default;
    margin: 2px 0;
    background-color: #f5f5f5;
    width: 24px;
    height: 18px;
    opacity: 0.5;

    background: url(../images/about.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-origin: content-box;
    border: none;
}

.subjectData {
    color: #606060;
    width: 100%;
    border: 1px inset;
    padding: 0 8px;
    background-color: #F9F9F9;
}

.subjectData .dataSetName {
    font-size: 12px;
    padding: 6px 0px;
    font-weight: 600;
}
.subjectData .dataFieldName {
    font-size: 11px;
    padding: 1px 8px;
}




table.agreementData {
    padding: 4px;
    transition: all 500ms, transform 500ms;
    width: 100%;
    height: inherit;
    font-size: 0.75em;
}
table.agreementData tr {
    line-height: 18px;
    transition: all 500ms, transform 500ms;
}
.agreementData .groupTitle {
    font-weight: 600;
    background-color: #f5f5f5;
    padding: 0 0 0 10px;
}.agreementData .groupLabel {
    font-weight: 400;
    padding: 0 10px;
    line-height: 22px;
    font-size: 0.9em;
}
.agreementData .left {
    font-weight: 400;
    padding: 4px;
    text-align: right;
    font-size: 0.9em;
    color: rgba(0,0,0,0.75);
    max-width: 40%;
    min-width: 20%;
}
.agreementData .right {
    padding: 4px;
}
.agreementData .right input, .agreementData .right textarea {
    padding: 4px;
    font-weight: 400;
    font-size: 1em;
    width: 100%;
}

table.agreementSignature {
    width: 100%;
}

table.agreementAgreeAll {
    width: 100%;
    margin: 4px 0 0 0;
}
table.agreementAgreeAll tr {
    line-height: 32px;
}
table.agreementAgreeAll td.left {
    width: 80%;
    font-size: 12px;
}
table.agreementAgreeAll td.right {
    width: fit-content;
}

table.agreementSignature label {
    font-size: 12px;
    padding: 0 4px;
}

.agreementNext-btn { display: none; }

.modal-agreement__sec-title {
    font-size: 12px;
    color: #606060;
    margin: 0px 0 6px 0;
    text-align: left;
    font-weight: 400;
}

table.controllerAgreement {
    height: fit-content;
    width: 100%;
}
table.controllerAgreement tr {
    line-height: 26px;
}
table.controllerAgreement td {
    font-size: 11px;
    vertical-align: top;
}

table.controllerAgreement td.groupTitle {
    font-weight: 600;
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 4px;
}

table.controllerAgreement td.left {
    padding: 1px 4px;
}

table.controllerAgreement td div.agreedIcon {
    width: 22px;
}

.consentSelector {
    font-size: 0.75em;
}

.consentSelector .displayName {
    margin: 5px 2px;
    font-weight: 600;
}
.consentSelector input[type=checkbox] {
    width:18px;
    height:18px;
}
.consentSelector .smaller {
    font-size: 0.75em;
}
.consentSelector .indented {
    margin: 0 0 0 10px;
    line-height: 14px;
    opacity: 0.7;
}
.consentSelector .indented input[type=checkbox] {
    width:14px !important;
    height:14px !important;
}

.consentSelector .indented .displayName {
    font-weight: 400 !important;
    font-size: 0.9em;
    margin: 6px 2px;
}

.unselected {
    width: 28px;
    height: 18px;

    background: url(../images/unsaved.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-origin: content-box;
    border: none;
}
.selected {
    width: 28px;
    height: 18px;

    background: url(../images/completed.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-origin: content-box;
    border: none;
}

/* SVG public key styles */

.hex {
    clip-path: polygon(
        47.5% 5.66987%,
        48.2899% 5.30154%,
        49.13176% 5.07596%,
        50% 5%,
        50.86824% 5.07596%,
        51.7101% 5.30154%,
        52.5% 5.66987%,
        87.14102% 25.66987%,
        87.85495% 26.16978%,
        88.47124% 26.78606%,
        88.97114% 27.5%,
        89.33948% 28.2899%,
        89.56505% 29.13176%,
        89.64102% 30%,
        89.64102% 70%,
        89.56505% 70.86824%,
        89.33948% 71.7101%,
        88.97114% 72.5%,
        88.47124% 73.21394%,
        87.85495% 73.83022%,
        87.14102% 74.33013%,
        52.5% 94.33013%,
        51.7101% 94.69846%,
        50.86824% 94.92404%,
        50% 95%,
        49.13176% 94.92404%,
        48.2899% 94.69846%,
        47.5% 94.33013%,
        12.85898% 74.33013%,
        12.14505% 73.83022%,
        11.52876% 73.21394%,
        11.02886% 72.5%,
        10.66052% 71.7101%,
        10.43495% 70.86824%,
        10.35898% 70%,
        10.35898% 30%,
        10.43495% 29.13176%,
        10.66052% 28.2899%,
        11.02886% 27.5%,
        11.52876% 26.78606%,
        12.14505% 26.16978%,
        12.85898% 25.66987%
    );
}
.honeyCone {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(30deg);
}
.etch {
    stroke-width: 1;
    stroke: rgba(255,255,255,0.1);
}

/*** PREVIEW JSON ***/

.vault {
    overflow-y: hidden;
}

/* popup selector for vault 'item' */
.vaultContents {
    display: none; 
}

/* main DIV containing decrypted + encrypted objects */
.vaultPreview {
    height: calc(100vh - 96px - 50px);
    display: grid;
    /*place-items: center;*/
    display: inline-grid;
    align-content: space-evenly;
    width: 100%;
    overflow: hidden;
}

.vaultPreviewJsonBlock {
    /*height: calc(50vh - 96px - 50px);*/
    width: 100%;
    max-width: calc(100vw - 24px);
}

.jsonDecrypted {
    margin: 4px;
    border: 1px dashed #3C78D8;
    padding: 0;
    border-radius: 4px !important;
    height: calc(25vh - 100px);
}

.jsonDecrypted textarea {
    width: -moz-available !important;
    width: -webkit-fill-available !important; 
    height: 100% !important;
    border: 0 !important;
    margin: 0 !important;
    resize: none;
}

.vaultPreviewOptions {
    min-height: 70px;
    text-align: left;
    width: 100%;
    overflow: initial;
    height: max-content;
}

.jsonEnc {
    margin: 0px 4px 4px 4px;
    border: 1px dashed #A64D79;
    border-radius: 4px !important;
    overflow: auto;
}

.jsonEnc pre {
    height: -webkit-fill-available;
    margin: 0;
    padding: 10px 30px;
    width: 100%;
    font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
    font-size: 0.85em;
}

/* NB: custom styles overriding CSS styles (to fit screen layout better) */
.json-document {
    padding: 0 1em 1em 1.75em !important;
    overflow: auto;
    height: calc(50vh - 96px - 75px);
}

/* new options.withSelectors 'feature' > customization  */
.json-document .json-selector {
    padding: 0 2px 0 0;
    position: relative;
    width: 12px;
    min-height: 12px;
    height: 13px;
    top: 2px;
}

.vaultPreviewResult {
    border-spacing: 6px;
}

.vaultPreviewResult td {
    display: flex;
    flex-flow: inherit;
}

.vaultPreviewResult .userOption {
    padding: 0 6px;
    margin: 0;
    border: 1px solid #fff;
    background-color: #f5f5f5;
    font-size: 0.9em;
    border-radius: 6px;
    display: inline-flex;
}

.vaultPreviewResult td small {
    padding: 0 4px;
    position: relative;
    top: 4px;
}


/* operatorView LAYOUTS */

.consentListTemplates > input, select, textarea {
    margin: 4px 0;
    border-radius: 6px !important;
  }
  
  .consentListTemplates > table {
    width: 100vw;
    font-size: 12px;
    position: relative;
    border-collapse: collapse;
  }
  tr.logTH > th {
    font-weight: 400;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 2;
    line-height: 28px;
    margin: 0 6px;
    font-size: 0.9em;
    text-align: left;
    text-align-last: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  tr.recordTH > th {
    font-weight: 400;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 2;
    line-height: 44px;
    padding: 0 0 0 6px;
    ;
  }
  
  .consentListTemplates > table td, .consentListTemplates > table  th {
    z-index: 1;
    position: relative;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
    line-height: 44px;
    text-align: start;
  }

  .dataSubject_viewRecords + .svg_blueFolderLighter_recordView {
    margin: 10px 0 0 0;
  }
  .dataSubject_viewRecords .logTH {
    font-weight: 400;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 2;
    color: #000;
    background-color: transparent;
  }
  .dataSubject_viewRecords table {
    margin: 12px 0 0 0; /*10px 0 0, 0 5px*/
    border-spacing: 0;
    border-radius: 0 0 6px 6px;
    width: calc(100% - 8px);
    max-height: calc(100vh - 360px);
    display: inline-table;
    height: fit-content;
    background-color: transparent; /*#fff;*/
    /*display: flow-root;*/
    /*box-shadow: 0 2px 2px 0 rgb(77 77 79 / 8%), 0 0 2px 0 rgb(77 77 79 / 16%);*/
}
.dataSubject_viewRecords thead {
    line-height: 42px;
}
.homeContentBlock .dataSubject_viewRecords thead, .homeContentBlock .accountContainerHeader {
    background: #D5F0FE;
}
.homeContentBlock .dataSubject_viewRecords thead th {
    width: calc( (100% - 25px) / var(--tbl-cols) ) !important;
}
.homeContentBlock .dataSubject_viewRecords thead th:first-child {
    border-radius: 0.75em 0 0 0.75em;
    width: 34px !important;
}
.homeContentBlock .dataSubject_viewRecords thead th:last-child {
    border-radius:  0 0.75em 0.75em 0;
}

.utilityTableTarget .groupTitle {
    padding: 0px 8px !important;
}

.utilityTableTarget .left {
    padding: 0 0 0 8px !important;
}

table.containerDataSelector_forSharing .groupTitle {
    font-weight: 700;
    background-color: #eee;
    line-height: 22px;
}
table.containerDataSelector_forSharing .groupTitle label {
    margin: 0 4px;
}
.containerDataSelector_forSharing td.left, .containerDataSelector_forSharing td.right {
    border-bottom: none !important;
}
.dataSubjectRecordSelector {
    width: 46px;
    padding: 2px 0 0 6px !important;
}

table.recPrev .groupTitle {
    font-weight: 600;
    background-color: #eee;
    line-height: 44px;
}

table.recPrev .groupTitle label {
    margin: 0 4px;
}

.dataShareView_template {
    /*padding: 0;
    text-align: left;*/
    padding: 0 0 16px 8px;
    /*display: flex;*/
}
.dataShareView_template > div > table {
    margin: 0;
    border-spacing: 0;
    border-radius: 0 0 6px 6px;
    display: block;
    border: 1px solid #eee;
    width: fit-content;
}
.dataShareView_template .logTH {
    font-weight: 400;
    position: sticky;
    top: 0;
    z-index: 2;
    color: #000;
    line-height: 34px;
    padding: 0 0 0 4px;
}
.dataShareView_template .logTH th {
    /*background-color: #f0f0f0;
    border: 1px solid #fff;
    border-radius: 4px;*/
    margin: 3px 6px;
    line-height: normal; /*32px;*/
}
.dataShareView_template .logTH th:first-child {
    /*border-radius: 0.75em 0 0 0.75em;*/
}
.dataShareView_template .logTH th:last-child {
    /*border-radius:  0 0.75em 0.75em 0;*/
}

.dataShareView_template .logTH th.none {
    /*background-color: #fff;
    border: 1px solid #fff;*/
}

.dataShareView_template .dataRowSelector {
    line-height: 36px !important;
}
.dataShareView_template .dataRowSelector.on {
    color: #000;
}
.dataShareView_template .dataRowSelector.off {
    color: #C0C0C0;
}

.dataShareView_template td {
    font-weight: 400;
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
    max-width: 90px;
    border-bottom: 1px solid #eee;
}
.recPrev .containerObj img {
    width:30px;
    height:28px;
    padding:0 8px;
    position:relative;
    top:7px;
    left:-4px;
}
.recPrev .containerObj label {
    position:relative;
    top: -1px;
    left: -10px;
    font-size: 1.2em;
    font-weight: 500;
}

.operatorAgreementsLayout, .issuedDataSharesLayout, .consentAllEventsHistoryLayout {
    display: contents;
    font-size: 0.8em;
}

.operatorView .dataSubject_viewRecords table {
    margin: 0 0 4px 0 !important;
    background-image: linear-gradient(to bottom,rgba(238,238,238,1),rgba(238,238,238,0));
}
.operatorView .dataSubject_viewRecords table tr.logTH > th {
    line-height: 24px !important;
}

.operatorView .agreementResponse_recordTable .recPrev td.left {
    vertical-align: middle;
    border-bottom: 1px solid #eee;
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    font-size: 0.85em;
}
.operatorView .agreementResponse_recordTable .recPrev td.left label {
    color: #222;
    filter: drop-shadow(1px 1px 1px #AAA);
}
.operatorView .agreementResponse_recordTable .recPrev td.right {
    text-align: left;
    border-bottom: 1px solid #eee;
    margin: 4px;
    background-color: rgb(232, 232, 232);
    padding: 4px;
    font-weight: 300;
    border-radius: 4px;
    width: 70%;
}

.dataShareList {
    padding:0;
    font-size:1em;
    display:flex;
    flex-flow:column;
    height: calc(100% - 56px);
    overflow:auto;
    /*background-image: linear-gradient(to bottom,rgba(238,238,238,1),rgba(238,238,238,0));*/
}

.dataRow {
    font-size: 0.75em;
}

.dataRow .agreement_id {
    padding: 0 4px;
}

.dataRow .agreement_version {
    text-align: center;
}

/*.operatorAgreementsLayout th {
    padding: 0 6px;
    margin: 0;
    border: 1px solid #fff;
    background-color: #f5f5f5;
    font-size: 0.9em;
    border-radius: 6px;
    display: inline-flex;
}*/

/* operatorView LAYOUTS */

.operatorView {
    box-shadow: 0 0.5rem 1.2rem rgb(189 197 209 / 20%);
    background-clip: border-box;
    border: 1px solid rgb(229, 232, 235);
    border-radius: 0.5rem;

    position:relative;

    margin-left: auto;
    margin-right: auto;
    min-width: 400px !important;
    max-width: 80vw;
}

.simpleLayout {
    box-shadow: 0 0.5rem 1.2rem rgb(189 197 209 / 20%);
    background-clip: border-box;
    /*border-left: 1px solid rgb(229, 232, 235);
    border-top: 1px solid rgb(229, 232, 235);
    border-right: 1px solid rgb(229, 232, 235);
    border-bottom: 1px solid rgb(229, 232, 235);*/
    border-radius: 0.5rem;

    height: calc(100vh - 170px);
    width: 100%;
    max-width: 100vw;
    background: #fff;
    overflow: hidden;

    border-spacing: 0;
}
.simpleLayoutTabs {
    /*border-top: 1px solid transparent !important;*/
}

.homePageWithTabs {
    /*border-left: 1px solid rgb(229, 232, 235);
    border-right: 1px solid rgb(229, 232, 235);*/
}

.simpleLayout td {
    padding: 0;
}


/*div.sovDataContainerLabel:after {
    content: '    ';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512px' height='512px' viewBox='-112 0 512 512'%3E%3Cpath d='M64 352L160 256 64 160 96 128 224 256 96 384 64 352Z'/%3E%3C/svg%3E");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    opacity:0.7;
}*/

img.dataSpacesIcon, img.signContentIcon {
    opacity: 0.75;
    margin: 4px 0;
    width: 64px;
}

div.containerPreviewRowsBackButton, div.collectionPreviewRowsBackButton {
    background: url('../images/arrow_left.svg');
    width: 32px;
    height: 32px;
    border: none !important;
    cursor:pointer;
    position: relative;
    left: 5px !important;
    opacity: 1;
    top: 4px;
}

img.sovDataCollectiveNext {
    transform: rotate(180deg);
}

.myLifeTitleHeader, .mySignaturesTitleHeader {
    display: -webkit-inline-box;
    height: 40px;
    min-height: 40px;
    opacity: 0.9;
    -webkit-box-align: center;
    font-size: 14px;
    border-radius: 10px;
    margin: 0 4px;
    transition: all 500ms, transform 500ms;
}

.myLifeTitleHeader div, .mySignaturesTitleHeader div {
    /*position: relative;
    left: 0px;
    top: 0px;
    height:34px;*/
    display: -webkit-inline-box;
    color:#434343;
    font-size: 12px;
    padding: 0;
    transition: all 500ms, transform 500ms;
}

.level + .active, .level1 + .active, .level2 + .active {
    color: #000 !important;
    font-weight: 600;
}

.level {
    padding: 3px 0 0 22px !important;
}

.myLifeTitleHeader div img, .mySignaturesTitleHeader div img {
    position: relative;
}

div.console {
    overflow: auto;
    max-width: 360px;
}

.containerCollectionTabHeader {
    padding: 2px 10px 8px 14px;
    color: #000;
    font-size: 1.0em;
    /*filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .2));*/
    position: relative;
    /*width: calc(100% - 24px);*/
    display: grid;
    margin: 4px 0 0 0;
}

.containerCollectionTabHeader img {
    width: 20px;
    height: 20px;
    border: none;
    position: absolute;
    margin: 12px 18px;
}

.containerCollectionTabHeader > label {
    position: relative;
    left: 38px;
    font-size: 1.1em;
    top: -3px;
    max-width: 178px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.containerCollectionTabHeader  table.recPrev tr.logTH {
    line-height: 50px;
}


.containerCollectionRows table tr {
    line-height: 42px;
    background-color: #fff;
}

.containerCollectionRows table td {
    font-size: 0.9em;
    padding: 0 0 0 6px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    text-align-last: left;
}

td.empty {
    /*padding: 0 !important;*/
}

/* popup preview record: myVault */
#dialog_confirmation_mac .dialog__mainText {
    display: inline-flex;
}

#dialog_confirmation_mac .dialog__mainText table.recPrev {
    border: 1px solid #eee;
}

table.recPrev {
    width: 100%;
    border-radius: 4px;
    /*border: 1px solid #f5f5f5;*/
    background-color: #fff;
    margin: 0;
    padding: 0;
    border-spacing: 0;
    font-size: 12px;
}
table.recPrev tr {
    line-height: 48px; /*32px*/
}

table.recPrev td.left {
    vertical-align: middle;
    border-bottom: 1px solid #eee;
    width: min-content; /*48%;*/
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
}
table.recPrev td.right {
    text-align: left;
    border-bottom: 1px solid #eee;
    width: max-content; /*52%;*/
}

table.recPrev td.right div.data {
    font-size: 0.9em;
    line-height: 26px;
}

table.recPrev input, table.recPrev textarea, table.recPrev select {
    width: calc(100% - 14px);
    max-width: 260px;
    min-height: 24px;
    font-size: 12px;
    padding: 2px 4px;
    border: 2px solid transparent;
}
table.recPrev input[type=date] {
    width: 110px;
}
table.recPrev textarea {
    resize: none;
    min-height: 60px;
    margin: 1px;
}

table.recPrev input:focus, table.recPrev textarea:focus, table.recPrev select:focus {
    border: 2px solid #A3BFE9;
}

.dialog__mainText table.recPrev tr {
    line-height: 20px;
}

.homeContentBlock input, .homeContentBlock textarea, .homeContentBlock select, .login input[type=password] {
    width: calc(100% - 14px);
    min-height: 24px;
    font-size: 12px;
    padding: 2px 4px;
    border: 2px solid #f5f5f5;
    background-color: transparent;
}
.login input[type=password] {
    border: 2px solid #A3BFE9 !important;
}
.login input[type=password]:focus {
    border: 2px solid #7CB1F7 !important;
}
.homeContentBlock input[type=date] {
    width: 110px;
}
.homeContentBlock textarea {
    resize: none;
    min-height: 60px;
    margin: 1px;
}

.homeContentBlock input:focus, .profileBody textarea:focus, .profileBody select:focus {
    border: 2px solid #A3BFE9;
}

.homeContentBlock table.recPrev td.left {
    border-bottom: 1px solid transparent;
    width: 35% !important;
}
.homeContentBlock table.recPrev td.right {
    border-bottom: 1px solid transparent;
    width: 65% !important;
}

/* myVault list records */
.createRow {
    cursor: pointer;
    font-size: 1.7em !important;
    background-color: #eee;
    border: 1px solid #f5f5f5;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512px' height='512px' viewBox='-80 0 512 512'%3E%3Cpath d='M152 280L64 280 64 232 152 232 152 144 200 144 200 232 288 232 288 280 200 280 200 368 152 368 152 280Z'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 18px;
    opacity: 0.8;
    filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, .4));
    position: relative;
    left: 4px;
    top: -2px
}
.createAgreement {
    cursor: pointer;
    height: 18px;
    width: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' viewBox='0 0 48 48' fill='none'%3E%3Crect x='8' y='4' width='32' height='40' rx='2' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 4H25V20L20.5 16L16 20V4Z' fill='%232F88FF' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 28H26' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M16 34H32' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 18px;
    opacity: 0.8;
}

.clickForData:hover {
    background-color: #eee;
}

div.empty {
    background-color: #f5f5f5;
    border:1px solid #E2E2E2;
    width:12px;
    height: 12px;
}
img.vaultDataRowIcon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: block;
    opacity: 0.35;
    padding: 0 4px 0 2px
}
img.vaultDataRowIcon:hover {
    opacity: 0.6;
}
.groupIcon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512px' height='512px' viewBox='-32 0 512 512'%3E%3Cpath d='M64 96L200 96 200 232 64 232 64 96ZM248 96L384 96 384 232 248 232 248 96ZM64 280L200 280 200 416 64 416 64 280ZM248 280L384 280 384 416 248 416 248 280Z'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 20px;
    width: 20px;
    position: fixed;
    opacity: 0.6;
}
.recordIcon {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    position: relative;
    top: 0;
}

.deleteButton {
    border-color: gray;
}

.smallGreenPlus {
    color: #fff;
    border-radius: 50%;
    border: 1px solid #fff;
    padding: 0 6px;
    background-color: green;
    -webkit-filter: drop-shadow( 2px 1px 2px rgba(0, 0, 0, .4));
    filter: drop-shadow( 2px 1px 2px rgba(0, 0, 0, .4));
    margin: 0 8px 2px 0;
}
.smallOperatorPlus {
    color: #fff;
    border-radius: 50%;
    border: 1px solid #fff;
    padding: 0 6px;
    background-color: #A64D79;
    -webkit-filter: drop-shadow( 2px 1px 2px rgba(0, 0, 0, .4));
    filter: drop-shadow( 2px 1px 2px rgba(0, 0, 0, .4));
    margin: 0 8px 2px 0;
}

.userPublicAddress {
    font-size: 0.8em;
    color:#404040;
}

.swRefreshIcon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100' version='1.1'%3E%3Cg style='fill:none;stroke: %23000;stroke-width:12px;stroke-linecap:round;stroke-linejoin:round;'%3E%3Cpath d='m 50,10 0,35'/%3E%3Cpath d='M 20,29 C 4,52 15,90 50,90 85,90 100,47 74,20'/%3E%3C/g%3E%3Cpath style='fill: %23000;' d='m 2,21 29,-2 2,29'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 20px;
    width: 22px;
    position: fixed;
    opacity: 0.6;
}

/* SPIN ICON/LOGO */

.spinAxis64pxStop {
    width: 64px;
    height: 64px;
    left: -77px;
    position: relative;
    -webkit-animation: sqrA77px 2s infinite linear !important;
            animation: sqrA77px 2s infinite linear !important;
            animation-iteration-count: 1
}

.spinAxis64px {
    width: 64px;
    height: 64px;
    left: -77px;
    position: relative;
    -webkit-animation: sqrA77px 2s infinite linear !important;
            animation: sqrA77px 2s infinite linear !important;
  }
  
  @-webkit-keyframes sqrA77px {
    from {
      -webkit-transform: translateX(77px) rotateY(0deg) !important;
              transform: translateX(77px) rotateY(0deg) !important;
    }
    to {
      -webkit-transform: translateX(77px) rotateY(360deg) !important;
              transform: translateX(77px) rotateY(360deg) !important;
    }
  }
  
  @keyframes sqrA77px {
    from {
      -webkit-transform: translateX(77px) rotateY(0deg) !important;
              transform: translateX(77px) rotateY(0deg) !important;
    }
    to {
      -webkit-transform: translateX(77px) rotateY(360deg) !important;
              transform: translateX(77px) rotateY(360deg) !important;
    }
  }

.spinAxis100px {
    width: 100px;
    height: 100px;
    left: -128px;
    position: relative;
    -webkit-animation: sqrA128px 2s infinite linear;
            animation: sqrA128px 2s infinite linear;
  }
  
  @-webkit-keyframes sqrA128px {
    from {
      -webkit-transform: translateX(128px) rotateY(0deg);
              transform: translateX(128px) rotateY(0deg);
    }
    to {
      -webkit-transform: translateX(128px) rotateY(360deg);
              transform: translateX(128px) rotateY(360deg);
    }
  }
  
  @keyframes sqrA128px {
    from {
      -webkit-transform: translateX(128px) rotateY(0deg);
              transform: translateX(128px) rotateY(0deg);
    }
    to {
      -webkit-transform: translateX(128px) rotateY(360deg);
              transform: translateX(128px) rotateY(360deg);
    }
  }

.policyLayout {
    display:flex;
    overflow: hidden;
}

.body .polLefttSection {
    width:280px;
    height:calc(100vh - 90px);
    margin:5px;
    text-align:left;
    font-size:0.9em;
    overflow-y: auto;
    transition: all 500ms, transform 500ms;
}
.body .polLefttSection div.previewPolicyMenuItemsLeft {
    display:flex;
    flex-flow: column;
    height: calc(100vh - 130px);
    overflow: auto;
}
.body .polLefttSection div.previewPolicyMenuItemsLeft input {
    margin: 0 0 8px;
}
.body .polLefttSection .previewPolicyMenuItemsLeft div:hover {
    text-decoration: underline;
}
.body .polLefttSection div {
    margin:2px;
    padding: 6px;
}
.body .polLefttSection div.policy {
    font-weight: 700;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.body .polLefttSection .previewPolicyMenuItemsLeft .policyShowHideIcon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    border-radius: 50%;
    background-size: 24px;
    background-image: url("../images/arrow_r_20.svg");
    transform: rotate(180deg);
    position: fixed;
    background-color: transparent; /*#f5f5f5;*/
    left: 290px;
    top: 60px;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index: 1;

    padding: 4px;
    margin: 4px 2px;
}

.body .polLefttSection .previewPolicyMenuItemsLeft .policyShowHideIcon:hover {
    box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 9%) 0px -3px 5px;
    background-color: #fff;
}

.body .polLefttSection div.subtitle {
    background-color: #f8f9fa;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: 0.85em;
    color: rgba(0,0,0,0.75);
    opacity: 0.75;
}
.body .polLefttSection div.chapter {
    cursor: pointer;
    font-size: 0.9em;
}
.body .polLefttSection div.chapter-section {
    cursor: pointer;
    font-size: 0.8em;
    padding: 8px 6px 8px 6px;
}
.body .polLefttSection div.chapter-section:hover {
    background: #eee;
    border-radius: 3px;
}

.body .polRightSection {
    width:calc(100vw - 340px);
    height:calc(100vh - 150px);
    padding: 25px;
    text-align:left;
    font-size:0.8em;
    background-color: #F1F1F1;
    transition: all 500ms, transform 500ms;
    font-size: 15px;
}
.body .polRightSection .previewPolicyContainerRight {
    display:flex;
    flex-flow: column;
    height: calc(100vh - 100px - 70px);
    overflow: auto;
    border: 1px solid rgb(229, 232, 235);
    background-color: #fff;
    border-radius: 6px;

    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;

    -webkit-filter: drop-shadow( 4px 4px 6px rgba(0, 0, 0, .1));
    filter: drop-shadow( 4px 4px 6px rgba(0, 0, 0, .1));
    padding: 10px;
}
.body .polRightSection .previewPolicyContainerRight > div:first-child{
    min-height: 38px;
}

.body .polRightSection .previewPolicyContainerRight .title {
    padding: 8px;
    font-weight: 600;
    position: absolute;
    display: flex;
    background-color: #fff;
    width: calc(100% - 40px);
    overflow: hidden;
    white-space: nowrap;
}
.body .polRightSection .previewPolicyContainerRight .subtitle {
    padding: 12px;
    font-weight: 500;
    font-size: 0.9em;
}
.body .polRightSection .previewPolicyContainerRight .subtitle .li {
    text-decoration: underline;
}
.body .polRightSection .previewPolicyContainerRight .subtitle .text {
    padding: 12px 2px 4px 2px;
}
.body .polRightSection div.idx {
    padding: 0 !important;
}

.body .polRightSection div.polData {
    padding: 10px 0;
}
.body .polRightSection div.polData label {
    color: #454545;
    background-color: #f8f9fa;
    border-radius: 0 8px 8px 0;
    padding: 4px 24px 4px 12px;
    font-size: 0.8em;
}
.body .polRightSection div.polData div {
    padding: 4px 8px 6px 2px;
    word-break: keep-all;
    word-wrap: break-word;
    margin: 0 0 0 12px;
    font-size: 0.9em;
}
.body .polRightSection div.polData b {
    font-size: 0.95em;
}

.body .polRightSection .categories {
    display: inline-flex;
    margin: 10px 0;
    padding: 15px 6px;
    background: #f0f0f0;
    border-radius: 15px;
}

.body .polRightSection .categories span {
    margin:auto 6px auto 12px;
    font-size:11px;
}

.body .polRightSection table {
    padding: 10px 15px;
    align-self: flex-start;
    display: block;
    font-size: 0.9em;
}
.body .polRightSection table th, td {
    padding: 8px 4px;
}

.body .polRightSection table th {
    background-color: lightgray;
    border: 1px solid #fff;
    border-radius: 4px;
}

.body .polRightSection .subjCategory {
    border-spacing: 0;
    word-break: break-word;
    text-align: left;
    text-align-last: auto;
    font-family: "Poppins", "Rubik", sans-serif;
    font-size: 10px;
    opacity: 0.8;
    border: 1px solid #14A6F7;
    padding: 3px 6px;
    border-radius: 9px;
    background: #E7F3FA;
    color: #404040;
    width: fit-content;
    margin: 2px 6px;
    cursor: default;
}

@keyframes fadeIn {
    0% { opacity: 0.25; }
    100% { opacity: 1; }
  }
  
  @-moz-keyframes fadeIn {
    0% { opacity: 0.25; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0.25; }
    100% { opacity: 1; }
  }
  
  @-o-keyframes fadeIn {
    0% { opacity: 0.25; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes fadeIn {
    0% { opacity: 0.25; }
    100% { opacity: 1; }
  }




  @keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
  }
  
  @-moz-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
  }
  
  @-webkit-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
  }
  
  @-o-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
  }
  
  @-ms-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
  }

.drownout {
    color: #333;
    opacity: 0.8;
}


.navName label {
    font-size: 1.1em;
    /*text-align: left;
    margin: 0 0 6px;
    white-space: nowrap;*/
}

.homeDashboardButtons {
    height: 48px;
    text-align:center;
    font-size:11px;
    margin: 1px;
    padding: 2px 1px 0 1px; 
    border-radius: 0.55rem;
    box-shadow: rgb(200, 200, 200) 1px 1px 5px, rgb(255, 255, 255) -2px -2px 5px;
    width: -webkit-fill-available; width: -moz-available;
}

.homeDashboardButtons + .active {
    background-image: linear-gradient(rgb(205, 205, 205), rgba(200, 200, 200, 0));
    box-shadow: none;
}

.homeDashboardButtons .active .bannerButtonClicker {
    /*background: linear-gradient( rgba(225, 225, 225, 1), rgba(215, 245, 255, 0.5),rgba(255, 255, 255, 1) );*/
}

.homeDashboardButtons b {
    font-size: 1.6em;
}

/* button click animation */

.bannerButtonClicker {
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s; /* Safari */
    background: linear-gradient(rgba(255, 255, 255, 0.25),rgba(205, 205, 205,0));
    padding: 3px 1px 0 1px;
    height: 45px;
    position: relative;
    top: -1px;
  }
  
  .bannerButtonClicker:hover {
    transition-duration: 0s;
  }
  
  .bannerButtonClicker:active {
    opacity: 0.75;
    transition: all 0.75s;
    background: linear-gradient( rgba(225, 225, 225, 1), rgba(215, 245, 255, 0.5),rgba(255, 255, 255, 1) );
    border-radius: 0.4rem;
  }
  
  .bannerButtonClicker:active:after {
    box-shadow: none;
    opacity: 1;
    transition: 0s;
  }

.homeContentBlock {
    padding: 0 0 !important; /*0 16px !important*/
    overflow-y: auto;
    overflow-x: hidden;
    display: flow-root;
    height: calc(100vh - 225px); /* removed header row of buttons */
    background-image: linear-gradient(to bottom,rgba(255,255,255,1),rgba(238,238,238,0.25));
    text-align: center;
    text-align-last: center;
    vertical-align: baseline;
    transition: all 0.4s;
    max-width: calc(100vw - 2px);
    padding: 4px 0 !important;
}
.homeContentBlock .containerCollectionRows {
    min-width: 398px;
}
.privacyMode .homeContentBlock .containerCollectionRows table td.show {
    filter: none;
}
.privacyMode .homeContentBlock .containerCollectionRows table td {
    filter: blur(3px);
}

.privacyMode .homeContentBlock .containerCollectionRows table td:hover {
    filter: none;
}

.innData .recPrev {
    transition: all 500ms, transform 500ms;
}

.innData .recPrev {
    filter: blur(3px);
}

.innData .recPrev:hover {
    filter: blur(0px);
}

.innData table.recPrev tr, .innData table.recPrev .groupTitle {
    line-height: 18px !important;
}

.innData table.recPrev td.left {
    text-align: right;
    padding: 0 12px 0 0;
    font-size: 0.9em;
}

.innData table.recPrev td.left, .innData table.recPrev td.right {
    border-bottom: 1px solid #fff;
}


.dataShareList table {
    margin: 5px 5px 0 0 !important;
}

.homeContentBlock div, .homeContentBlock table {
    animation: fadeIn 400ms;
    -webkit-animation: fadeIn 400ms;
    -moz-animation: fadeIn 400ms;
    -o-animation: fadeIn 400ms;
    -ms-animation: fadeIn 400ms;
}

.homeContentBlock table.recPrev {
    background-color: #fff;
    font-size: 0.9em !important;
    width: calc(100% - 20px);
    margin: 0 10px;
}

.homeContentBlock table.recPrev td.groupTitle {
    padding: 0px 0 0 2px;
}
.homeContentBlock table.recPrev td.left {
    padding: 0px 0 0 6px;
}

.utilityTableTarget .addressGradBar {
    width: 100%;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.5rem 0.5rem 0 0;

    background-size: 600% 100% !important;
    animation: spectrumBackgroundBlend 22s linear infinite !important;
    animation-direction: alternate !important;
    overflow: hidden
}


.accountContainerHeader {
    width: auto;
    height: 72px;
    padding: 5px 0 0 16px;
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(229, 232, 235);
}
.accountContainerHeader img {
    width: fit-content;
    height: 30px;
    margin-right: 8px;
}
.accountContainerHeader strong {
    margin: 4px 6px;
    font-weight: 600;
    font-size: 16px;
}
.accountContainerHeader img.downBack {
    width: 13px;
    border-radius: 50%;
    height: 15px;
    margin-left: auto;
    cursor: pointer;
    opacity: 0.7;
    margin-right: 18px;
    padding: 8px 9px;
    border-radius: 50%;
    transition: all 500ms, transform 500ms;
    background: linear-gradient(to bottom,rgba(230,230,230,1),rgba(255,255,255,1));
    /*box-shadow: inset 2px 0px 7px #ccc, inset -2px -1px 1px #eee;*/
}

.accountContainerHeader img.downBack:hover {
    box-shadow: 2px 2px 4px #b8b9be, -2px -2px 2px #fff;
    /*animation: pulseIcon 500ms linear; /*, spectrumBackgroundSpin 8s ease infinite;*/
}
@keyframes pulseIcon {
    0% {background-color: #fff}
    100% {background-color: #bbb}
}
@keyframes pulseSpin {
    to {
        transform: rotate(1turn)
    }
}
/*img.downBack {
    width: 15px;
    border-radius: 50%;
    background: #fff;
    height: 15px;
    padding: 4px;
    position: absolute;
    right: 4px;
    top: 8px;
    cursor: pointer;
    filter: drop-shadow( 1px 1px 3px rgba(0, 0, 0, .2));
}*/

/*.utilityTableTarget .utilityTableTarget {
    padding: 16px !important;
}*/

.utilityTableTarget table.recPrev {
    border: none; /*1px solid rgb(229, 232, 235);*/
    border-radius: 10px;
    margin: 20px 16px;
    width: -webkit-fill-available; width: -moz-available;
}
.utilityTableTarget table.recPrev tr.trHeaderTitle {
    line-height: 48px;
}
.utilityTableTarget table.recPrev tr.trHeaderTitle .btnSave {
    cursor: pointer;
    transition: all .2s ease;
    /*position: relative;
    left: 275px;
    top: 8px;*/
    opacity: 1;
    width: 18px;
    border-radius: 10px;
    background: #fff;
    /*border: 1px solid #eee;*/
    padding: 4px;
    height: 16px;
    margin: 12px;
}
.utilityTableTarget table.recPrev tr.trHeaderTitle .btnSave:hover {
    background: #eee;
    border-color: #d1d9e6;
    box-shadow: 2px 2px 3px #b8b9be, -2px -2px 3px #fff;
}
.utilityTableTarget table.recPrev tr {
    line-height: 40px; /*32px;*/
}
.utilityTableTarget table.recPrev .groupTitle {
    line-height: 38px;
}
.utilityTableTarget table.recPrev tr.trHeaderTitle td {
    border-radius: 10px 10px 0 0 !important;
    border: 1px solid rgb(229, 232, 235);
    padding: 0 0 0 8px;
    /*background: linear-gradient(rgba(205, 205, 205,0.1),rgba(205, 205, 205,0.3));*/
}

.utilityTableTarget table.recPrev tr:not(.trHeaderTitle) td:first-child {
    border-left: 1px solid rgb(229, 232, 235);
    border-bottom: 1px solid transparent; /*rgb(229, 232, 235)*/
}
.utilityTableTarget table.recPrev tr:not(.trHeaderTitle) td:last-child {
    border-right: 1px solid rgb(229, 232, 235);
    border-bottom: 1px solid transparent; /*rgb(229, 232, 235)*/
}
.utilityTableTarget table.recPrev tr:last-child td:first-child {
    border-bottom: 1px solid rgb(229, 232, 235);
    border-left: 1px solid rgb(229, 232, 235);
    border-radius: 0 0 0 10px;
}
.utilityTableTarget table.recPrev tr:last-child td:last-child {
    border-right: 1px solid rgb(229, 232, 235);
    border-bottom: 1px solid rgb(229, 232, 235);
    border-radius: 0 0 10px 0;
}

.utilityTableTarget .componentListContainer {
    display: inline-flex;
    flex-flow: column;
}

.utilityTableTarget .featureItem {
    margin: 15px 15px 0;
    display: inline-flex;
    flex-flow: column;
    filter: drop-shadow( 2px 2px 2px rgba(0, 0, 0, .12));
    background: #fff;
    padding: 10px 20px 20px;
    border-radius: 8px;
}

.utilityTableTarget .featureItem .featureLogo {
    width: 40px;
    height: 40px;
    margin: 10px auto 10px 10px; /*20px auto;*/
    padding: 3px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #b8b9be, -3px -3px 7px #fff;
}
.utilityTableTarget .featureItem .featureLogo img {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
}

.utilityTableTarget .featureItem div.taskTitle {
    font-size: 1.6em;
    padding: 10px 0px;
    margin: 0 auto 0 0; /*0 auto;*/
    line-height: 28px;
}

.welcomeRight .featureItem div.taskTitle {
    font-size: 1.1em;
    color: #000;
    line-height: 28px;
}

.utilityTableTarget .featureItem div.taskDescription {
    font-size: 0.95em;
    color: #404040;
    padding: 0px 4px;
}

.utilityTableTarget .featureItem img.taskCompleted {
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 0.65;
    position: relative;
    left: -2px;
    border-radius: 50%;
    border: 2px solid #fff;
    padding: 3px;
    top: 4px;
    background: #fff;
}

.accountNotificationDialog {
    display: none;
    position: fixed;
    left: calc(100vw - 180px);
    top: 60px; /*40px;*/
    z-index: 2;

    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;

    transition: all 500ms, transform 500ms;
}

.accountNotificationDialog .accountNotificationContent {
    width: 180px;
    background-color: #fff;
    border-radius: 0 0 0 8px;
    filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .4));
    padding: 0 4px 8px 0;
}

.accountNotificationContent .accountLogoBar {
    height:3px;
    margin:0;
    opacity:1;

    background-size: 600% 100% !important;
    animation: spectrumBackgroundBlend 10s linear infinite !important;
    animation-direction: alternate !important;
    overflow: hidden
}

.accountNotificationDialog .accountNotificationContent tr {
    line-height: 20px;
}

.accountNotificationDialog .accountNotificationContent table {
    width: 100%;
    border-spacing: 0;
}
.accountNotificationDialog .accountNotificationContent td.logo {
    padding: 0px 2px 0 4px  !important;
    margin: 0 !important;
    width: 40px;
    cursor: pointer;
}
.accountNotificationDialog .accountNotificationContent td.text {
    cursor: pointer;
}
.accountNotificationDialog .accountNotificationContent td.textLarge {
    font-size: 1.2em;
}
.accountNotificationDialog .accountNotificationContent td.logo img {
    width: 25px;
}

.accountNotificationDialog .accountNotificationContent a {
    font-size: 0.8em;
    cursor: pointer;
}

.previewDataJsonBlock {
    height: calc(100vh - 180px);
}

#signin_file::-webkit-file-upload-button {
    visibility: hidden;
}
#signin_file::before {
    content: 'browse: key file...';
    display: inline-block;
    background: linear-gradient(top, #f9f9f9, #e3e3e3);
    border: none;
    border-radius: 3px;
    padding: 0px 75% 2px 4px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 400;
    font-size: 8pt;
    color: #888;
    position: relative;
    top: 2px;
    left: -2px;
  }
  #signin_file:hover::before {
    border-color: black;
  }
  #signin_file:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
  }

/*.homeMessageBlock {
    overflow: auto;
    padding: 8px 0 !important;
    display: inline-table;
    min-width: 225px;
    position: inherit;
    vertical-align: top;
  }
  .homeMessageBlock a {
    cursor: pointer;
    text-decoration: underline;
    color: #3C78D8;
    margin: 0;
    padding: 3px 8px
  }
  .homeMessageBlock a:hover {
    text-decoration: underline;
  }*/


  /* CONSENT WORKFLOW TEMPLATE */

  .previewReadonly table.recPrev tr {
    line-height: 28px !important;
  }
  .previewReadonly table.recPrev .groupTitle {
    text-align: left;
  }
  .previewReadonly table.recPrev .groupTitle label {
    margin: 0 auto 0 180px;
  }
  .previewReadonly table.recPrev td.left {
      font-size: 0.9em;
      width: 150px;
      padding: 0 15px
  }
  .previewReadonly table.recPrev td.left label {
    color: #333;
    filter: drop-shadow(1px 1px 1px #AAA);
  }
  .previewReadonly table.recPrev td.right {
    /*width: 60%;*/
  }
  .previewReadonly table.recPrev td.right input + span.slider {
    font-size:1.4em;
    background-color: #eee;
  }
  .previewReadonly table.recPrev td.right input + span.slider::before {
    text-align: center;
    content: "✕";
    color: #fff;
    background-color: #C80334;
  }
  .previewReadonly table.recPrev td.right input:checked + span.slider::before {
    text-align: center;
    content: "✔";
    color:#fff;
    background-color: #2F80ED;
    }
  .previewReadonly table.recPrev .tranonymous td.right input:checked + span.slider::before {
        content: "";
        background-color: #28548E;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.6138 8.54479L4.1875 10.25H2C1.58579 10.25 1.25 10.5858 1.25 11C1.25 11.4142 1.58579 11.75 2 11.75H22C22.4142 11.75 22.75 11.4142 22.75 11C22.75 10.5858 22.4142 10.25 22 10.25H19.8125L19.3862 8.54479C18.8405 6.36211 18.5677 5.27077 17.7539 4.63538C16.9401 4 15.8152 4 13.5653 4H10.4347C8.1848 4 7.05988 4 6.24609 4.63538C5.43231 5.27077 5.15947 6.36211 4.6138 8.54479ZM6.5 21C8.12316 21 9.48826 19.8951 9.88417 18.3963L10.9938 17.8415C11.6272 17.5248 12.3728 17.5248 13.0062 17.8415L14.1158 18.3963C14.5117 19.8951 15.8768 21 17.5 21C19.433 21 21 19.433 21 17.5C21 15.567 19.433 14 17.5 14C15.8399 14 14.4498 15.1558 14.0903 16.7065L13.6771 16.4999C12.6213 15.972 11.3787 15.972 10.3229 16.4999L9.90967 16.7065C9.55023 15.1558 8.16009 14 6.5 14C4.567 14 3 15.567 3 17.5C3 19.433 4.567 21 6.5 21Z' fill='%23fff'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }

  .agreementReview_consentAccept {
    background-color: #EBF6F0;
    border: 1px solid #69B88B;
    color:#69B88B;
    display:block;
    font-family: "Poppins", "Rubik", sans-serif;
    font-size:18px;
    font-weight:300;
    max-width:250px;
    padding:15px;
    text-align:center;
    text-decoration:none;
    border-radius: 6px;
    filter: drop-shadow( 2px 2px 4px rgba(99, 143, 194, .9));
  }
  .agreementReview_consentDecline {
    background-color: white;
    border: 1px solid #638FC2;
    color: #638FC2;
    display:block;
    font-family: "Poppins", "Rubik", sans-serif;
    font-size:18px;
    font-weight: 400;
    max-width:250px;
    padding:15px;
    text-align:center;
    text-decoration:none;
    border-radius: 6px;
    filter: drop-shadow( 2px 2px 4px rgba(99, 143, 194, .6));
  }

  .previewContainerCollectionIcon_agreementConsideration {
    width:20px;
    height:20px;
    padding:0 8px;
    position:relative;
    top:4px;
  }

  .consentAgreed {
    background-color:#4ADB0E;
    height:16px;
    width:16px;
    border-radius:50%;
    filter: drop-shadow(2px 2px 2px #aaa);
    border: 1px solid #fff;
    text-align: center;
    font-size: 0.8em;
  }
  .consentDeclined {
    background-color:#FF0000;
    height:16px;
    width:16px;
    border-radius:50%;
    filter: drop-shadow(2px 2px 2px #aaa);
    border: 1px solid #fff;
    text-align: center;
    font-size: 0.8em;
  }

  /* expander - preview agreementData */
  .agreementResponse_recordTable {
    padding:8px 10px 8px 10px;
    border-radius:8px;
    background-Color:#fff;
    width:100%;
    /*filter: drop-shadow(rgba(0, 0, 0, 0.1) 2px 2px 2px);*/
    box-shadow: 0 2px 2px 0 rgb(77 77 79 / 8%), 0 0 2px 0 rgb(77 77 79 / 16%);
  }
  .agreementResponse_dataSubjectHeader {
    padding:2px;
    width:100%;
    border:1px solid #eee;
    border-radius:6px;
    display:flex;
    font-size:0.95em;
    background-color:#f5f5f5;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2), -1px -1px 2px #fff;
  }
  .agreementResponse_dataSubjectRecord {
    transition: all 500ms ease 0s, transform 500ms ease 0s;
    overflow: hidden;
    width: 100%;
    /*background-color: rgb(255, 255, 255);*/
    font-size: 0.9em;
    padding: 0px;
    margin: 4px;
    position: relative;
    top: 2px;
    /*min-height: 18px;*/
  }
  .agreementResponse_dataSubjectFooter {
    margin: 10px 0 0 6px;
    font-size: 0.8em;
    color: #666;
    display: flex;
  }
  .agreementResponse_recordTable .consentRecordViewCounter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 488.85 488.85' style='enable-background:new 0 0 488.85 488.85;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M244.425,98.725c-93.4,0-178.1,51.1-240.6,134.1c-5.1,6.8-5.1,16.3,0,23.1c62.5,83.1,147.2,134.2,240.6,134.2 s178.1-51.1,240.6-134.1c5.1-6.8,5.1-16.3,0-23.1C422.525,149.825,337.825,98.725,244.425,98.725z M251.125,347.025 c-62,3.9-113.2-47.2-109.3-109.3c3.2-51.2,44.7-92.7,95.9-95.9c62-3.9,113.2,47.2,109.3,109.3 C343.725,302.225,302.225,343.725,251.125,347.025z M248.025,299.625c-33.4,2.1-61-25.4-58.8-58.8c1.7-27.6,24.1-49.9,51.7-51.7 c33.4-2.1,61,25.4,58.8,58.8C297.925,275.625,275.525,297.925,248.025,299.625z' fill='%23999'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-attachment: scroll;
    width: 16px;
    height: 16px;
    margin: 2px 3px;
  }
  .agreementResponse_recordTable .consentRecordViewCounter .allViews {
    font-size: 0.8em;
    position: relative;
    left: 22px;
    top: 1px;
  }

  .notificationGroup {
    display: flex;
    align-items: flex-start;
    opacity: 0.8;
    padding: 10px 4px;
    border-radius: 0.55em;
    margin: 5px 10px;
    cursor: pointer;
    /*background: linear-gradient(to bottom,rgba(238,238,238,1),rgba(238,238,238,0.25));
    filter: drop-shadow( 1px 1px 4px rgb(255,255,255));
    border: 1px solid rgb(229, 232, 235);*/
  }
  .notificationGroup:hover {
    background: linear-gradient(to bottom,rgba(230,230,230,1),rgba(238,238,238,0.25));
  }
  .notificationGroup img {
    width: 20px;
    margin: 0 4px
  }
  .notificationGroup .down {
    transform: rotate(90deg)
  }
  .notificationGroup .up {
    transform: rotate(270deg)
  }
  
  .notificationGroup label {
    margin: 1px 0 0 4px;
    font-size: 1.15em;
    font-weight: 600;
    cursor:pointer;
  }

  .notificationGroupContent {
    /*transition: height 400ms;*/
    overflow:hidden;
    height:max-content;
    margin: 0px 8px 8px;
    /*-webkit-transition: height 400ms; 
    -moz-transition: height 400ms; 
    -ms-transition: height 400ms; 
    -o-transition: height 400ms; 
    transition: height 400ms;*/
  }

  .dataSubjectAgreementCard {
    background-Color: none;
    width:95%;
    padding:0px 8px 0px;
    cursor: pointer;
    border-left: 1px solid #D8DBDE;
    border-right: 1px solid #D8DBDE;
  }
  .dataSubjectAgreementCard:hover {
    background-Color:#eee;
  }

  .notificationGroupContent .dataSubjectAgreementCard:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 0;
    border-top: 1px solid #D8DBDE;
  }
  .notificationGroupContent .dataSubjectAgreementCard:not(:first-child):not(:last-child) table {
    border-top: 1px solid #D8DBDE;
  }
  .notificationGroupContent .dataSubjectAgreementCard:not(:first-child):last-child {
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #D8DBDE;
    border-bottom: 1px solid #D8DBDE;
    border-left: 1px solid #D8DBDE;
    border-right: 1px solid #D8DBDE;
  }
  .notificationGroupContent .dataSubjectAgreementCard:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom: 1px solid #D8DBDE;
  }

  .svg_physicalCardTemplate_BrightRed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Layer_1' viewBox='0 0 1280 800'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23E31731;%7D.cls-2%7Bfill:%23620E19;%7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='1280' height='800' rx='60' ry='60' transform='translate(1280 800) rotate(180)'/%3E%3Cpath class='cls-2' d='M692.28,0h527.72c33.14,0,60,26.86,60,60v251.94h-418.61c-37.68,0-71.17-23.99-83.31-59.66L692.28,0Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .svg_physicalCardTemplate_Red {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Layer_1' viewBox='0 0 1280 800'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%236A1A41;%7D.cls-2%7Bfill:%23521432;%7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='1280' height='800' rx='60' ry='60' transform='translate(1280 800) rotate(180)'/%3E%3Cpath class='cls-2' d='M692.28,0h527.72c33.14,0,60,26.86,60,60v251.94h-418.61c-37.68,0-71.17-23.99-83.31-59.66L692.28,0Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .svg_physicalCardTemplate_Blue {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Layer_1' viewBox='0 0 1280 800'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%230062FF;%7D.cls-2%7Bfill:%231345B2;%7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='1280' height='800' rx='60' ry='60' transform='translate(1280 800) rotate(180)'/%3E%3Cpath class='cls-2' d='M692.28,0h527.72c33.14,0,60,26.86,60,60v251.94h-418.61c-37.68,0-71.17-23.99-83.31-59.66L692.28,0Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .svg_physicalCardTemplate_Black {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Layer_1' viewBox='0 0 1280 800'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23404040;%7D.cls-2%7Bfill:%23101010;%7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='1280' height='800' rx='60' ry='60' transform='translate(1280 800) rotate(180)'/%3E%3Cpath class='cls-2' d='M692.28,0h527.72c33.14,0,60,26.86,60,60v251.94h-418.61c-37.68,0-71.17-23.99-83.31-59.66L692.28,0Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .svg_physicalCardTemplate_Teal {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Layer_1' viewBox='0 0 1280 800'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2338A8AE;%7D.cls-2%7Bfill:%23225659;%7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='1280' height='800' rx='60' ry='60' transform='translate(1280 800) rotate(180)'/%3E%3Cpath class='cls-2' d='M692.28,0h527.72c33.14,0,60,26.86,60,60v251.94h-418.61c-37.68,0-71.17-23.99-83.31-59.66L692.28,0Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .svg_physicalCardTemplate_Blue {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Layer_1' viewBox='0 0 1280 800'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23558AB9;%7D.cls-2%7Bfill:%2305559D;%7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='1280' height='800' rx='60' ry='60' transform='translate(1280 800) rotate(180)'/%3E%3Cpath class='cls-2' d='M692.28,0h527.72c33.14,0,60,26.86,60,60v251.94h-418.61c-37.68,0-71.17-23.99-83.31-59.66L692.28,0Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .svg_blueFolder {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' viewBox='0 0 421.65 343.37'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2300c9fa;%7D.cls-2%7Bfill:%2363e3ff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M205.99,43.14L158.73,4c-3.12-2.59-7.05-4-11.11-4H13.04C5.84,0,0,5.84,0,13.04V330.33c0,7.2,5.84,13.04,13.04,13.04H408.61c7.2,0,13.04-5.84,13.04-13.04V60.19c0-7.2-5.84-13.04-13.04-13.04H217.1c-4.06,0-7.99-1.42-11.11-4Z'/%3E%3Cpath class='cls-2' d='M421.46,71.46H0V330.33c0,7.2,5.84,13.04,13.04,13.04H408.59c3.58,0,6.82-1.44,9.17-3.77s3.7-5.81,3.7-9.26v-127.49s0-131.38,0-131.38Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }
  .svg_blueFolderLighter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' viewBox='0 0 421.65 343.37'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ABEEFE;%7D.cls-2%7Bfill:%23CCF5FE;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M205.99,43.14L158.73,4c-3.12-2.59-7.05-4-11.11-4H13.04C5.84,0,0,5.84,0,13.04V330.33c0,7.2,5.84,13.04,13.04,13.04H408.61c7.2,0,13.04-5.84,13.04-13.04V60.19c0-7.2-5.84-13.04-13.04-13.04H217.1c-4.06,0-7.99-1.42-11.11-4Z'/%3E%3Cpath class='cls-2' d='M421.46,71.46H0V330.33c0,7.2,5.84,13.04,13.04,13.04H408.59c3.58,0,6.82-1.44,9.17-3.77s3.7-5.81,3.7-9.26v-127.49s0-131.38,0-131.38Z'/%3E%3C/svg%3E");
    background-size: 52px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-attachment: scroll;
    width: 52px;
    height: 52px;
    margin: 4px 8px 4px 8px;
  }
  .svg_grayFolderLighter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' viewBox='0 0 421.65 343.37'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23E8E8E8;%7D.cls-2%7Bfill:%23EEE;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M205.99,43.14L158.73,4c-3.12-2.59-7.05-4-11.11-4H13.04C5.84,0,0,5.84,0,13.04V330.33c0,7.2,5.84,13.04,13.04,13.04H408.61c7.2,0,13.04-5.84,13.04-13.04V60.19c0-7.2-5.84-13.04-13.04-13.04H217.1c-4.06,0-7.99-1.42-11.11-4Z'/%3E%3Cpath class='cls-2' d='M421.46,71.46H0V330.33c0,7.2,5.84,13.04,13.04,13.04H408.59c3.58,0,6.82-1.44,9.17-3.77s3.7-5.81,3.7-9.26v-127.49s0-131.38,0-131.38Z'/%3E%3C/svg%3E");
    background-size: 52px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-attachment: scroll;
    width: 52px;
    height: 52px;
    margin: 4px 8px 4px 8px;
  }
  .svg_blueFolderLighter_recordView {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' viewBox='0 0 421.65 343.37'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:rgba(171,238,254,0.5);%7D.cls-2%7Bfill:%23FFF;stroke:%23FFF;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M205.99,43.14L158.73,4c-3.12-2.59-7.05-4-11.11-4H13.04C5.84,0,0,5.84,0,13.04V330.33c0,7.2,5.84,13.04,13.04,13.04H408.61c7.2,0,13.04-5.84,13.04-13.04V60.19c0-7.2-5.84-13.04-13.04-13.04H217.1c-4.06,0-7.99-1.42-11.11-4Z'/%3E%3Cpath class='cls-2' d='M421.46,71.46H0V330.33c0,7.2,5.84,13.04,13.04,13.04H408.59c3.58,0,6.82-1.44,9.17-3.77s3.7-5.81,3.7-9.26v-127.49s0-131.38,0-131.38Z'/%3E%3C/svg%3E");
    background-size: contain; /*380px;*/
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
    background-attachment: initial;
    margin: 0; /*0px 6px 4px 8px;*/
    height: calc(100% - 36px);
    display: inline-block;
  }

  .svg_blueFolderLighter_agreementConsideration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' viewBox='0 0 421.65 343.37'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:rgba(171,238,254,0.5);%7D.cls-2%7Bfill:%23FFF;stroke:%23FFF;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M205.99,43.14L158.73,4c-3.12-2.59-7.05-4-11.11-4H13.04C5.84,0,0,5.84,0,13.04V330.33c0,7.2,5.84,13.04,13.04,13.04H408.61c7.2,0,13.04-5.84,13.04-13.04V60.19c0-7.2-5.84-13.04-13.04-13.04H217.1c-4.06,0-7.99-1.42-11.11-4Z'/%3E%3Cpath class='cls-2' d='M421.46,71.46H0V330.33c0,7.2,5.84,13.04,13.04,13.04H408.59c3.58,0,6.82-1.44,9.17-3.77s3.7-5.81,3.7-9.26v-127.49s0-131.38,0-131.38Z'/%3E%3C/svg%3E");
    background-size: cover; /*380px;*/
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
  }
  .svg_blueFolderLighter_agreementConsideration table {
    margin: 14px 0 0 0 !important; /*46px 0 0 0 !important*/
    display: flow-root; /*inline-block;*/
  }

  .svg_icon_smallTick {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='text-default w-5'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");;
    background-size: contain; /*380px;*/
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
    background-attachment: initial;
  }

  div.getStarted {
    text-decoration: none;
    color: #638FC2;
    text-align: center;
    cursor: pointer;
    display: flex;
    margin: 0px auto;
    justify-content: center;
    align-items: end;
  }
  div.getStarted:hover {
    text-decoration: underline;
  }
  div.getStarted::before {
    content: url( '../images/about.svg' );
    display: inline-grid;
    vertical-align: sub;
    width: 18px;
    height: 18px;
    margin: 0px 10px 3px 0;
    opacity: 0.3;
}

  /* HOME BANNER */
  .homeBanner {
    padding: 15px 10px !important;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
  }
  .homeBanner .bannerFeatureLogo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  }
  .homeBanner .bannerFeatureLogo {
    width: 30px;
    height: 30px;
    padding: 2px;
    border-radius: 50%;
    cursor: pointer;
  }
  .homeBanner .bannerFeatureLogo img {
    width: inherit; /*28px*/
    height: inherit; /*28px*/
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  }
  .homeBanner .bannerFeatureLogo img.featureAdditionalInfoBubble {
    position: relative;
    top: -14px;
    left: 18px;
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: none;
  }
  .homeBanner .bannerFeatureLogo div.featureAdditionalInfoBubble {
    position: relative;
    top: -14px;
    left: 18px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    font-size: 8px;
    color: #111;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    vertical-align: baseline;
    border: 1px solid rgb(46,108,190);
}
.mytippy-content div.featureAdditionalInfoBubble {
    width: 15px;
    height: 15px;
    background-color: #fff;
    font-size: 11px !important;
    color: #111;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    vertical-align: baseline;
    border: 1px solid rgb(46,108,190);
    display: inline-block;
    margin: 0 0 0 4px;
}


.homeBanner .ui-tooltip-content::after, .homeBanner .ui-tooltip-content::before {
    content: "";
    position: absolute;
    border-style: solid;
    display: block;
    left: 90px;
 }
 .homeBanner .ui-tooltip-content::before {
    bottom: -10px;
    border-color: #AAA transparent;
    border-width: 10px 10px 0;
 }
 .homeBanner .ui-tooltip-content::after {
    bottom: -7px;
    border-color: white transparent;
    border-width: 10px 10px 0;
 }

  /*.homeBanner .featureLogoBigger {
    margin: 0 0 18px 0;
    position: relative;
    left: -2px;
    top: -2px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }*/
  .homeBanner .featureLogoBigger img {
    background: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }
  .homeBanner .featureLogo:hover {
    filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .4));
  }
  .homeBanner .featureLogoBigger:hover {
    filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .4));
  }


  /* WELCOME FORM */
  .spectrum-frame {
        width:100vw;
        height:100vh;
        overflow:hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    .spectrum-background {
        background: linear-gradient(45deg,#D503d8, #369ed6, #CA0132, #1456b0, #70CAbd, #344496, #42b800);
        background-size: 600% 100%;
        animation: spectrumBackgroundBlend 16s linear infinite !important; /*, spectrumBackgroundSpin 8s ease infinite;*/
        animation-direction: alternate !important;
        overflow: hidden;
        position: relative;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    .spectrum-background-rgba50 {
        /* >> disabled: 
        --var-opac: 0.5;
        background: linear-gradient(45deg,rgba(213,3,216,var(--var-opac)), rgba(54,158,214,var(--var-opac)), rgba(202,1,50,var(--var-opac)), rgba(20,86,176,var(--var-opac)), rgba(112,202,189,var(--var-opac)), rgb(52,68,150,var(--var-opac)), rgb(66,184,0,var(--var-opac)));
        */
        background: linear-gradient(45deg,rgba(213,3,216,0.5), rgba(54,158,214,0.5), rgba(202,1,50,0.5), rgba(20,86,176,0.5), rgba(112,202,189,0.5), rgb(52,68,150,0.5), rgb(66,184,0,0.5));
        background-size: 600% 100%;
        animation: spectrumBackgroundBlend 16s linear infinite !important; /*, spectrumBackgroundSpin 8s ease infinite;*/
        animation-direction: alternate !important;
        overflow: hidden;
        position: relative;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    @keyframes spectrumBackgroundBlend {
        0% {background-position: 0%}
        100% {background-position: 100%}
    }
    .welcomeContainer {
        min-width: 345px;
        height: 80vh;
        margin: 10vh auto;
        filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .3));
        border: 1px solid rgb(229, 232, 235);
        border-radius: 4px;
        z-index: 2;
        position: relative;
        max-width: 80vw;
        font-size: 0.9em;
        overflow: hidden;
    }
    .welcomeFloatBox {
        width: -webkit-fill-available; width: -moz-available;
        height:-webkit-fill-available;
        display:inline-flex;
        flex-direction: row;
    }

    .welcomeLeft {
        padding: 14px;
        font-weight:500;
        height:-webkit-fill-available;
        width:auto; /*50%*/
        text-align: center;
        background-color: #fff;
    }
    .welcomeRight {
        width: inherit;
        background-color: rgba(255,255,255,0.75);
        overflow: auto;
        max-height: 85vh;
        display: inline-flex;
        font-size: 1.1em;
        text-align: center;
        flex-flow: column;
    }

    .welcomeRight .getStartedGuide {
        padding: 0px 8px;
        color: #000;
        line-height: 50px;
        background-color: #fff;
        font-size: 0.8em;
        display: flex;
        justify-content: flex-end;
        position: sticky;
        top: 0;
        z-index: 9;
    }
    .welcomeRight .getStartedGuide .mainTitle {
        font-weight: 500;
        font-size: 1.2em;
        margin: auto 4px auto 8px;
        display: flex;
        flex: auto;
    }
    .welcomeRight .getStartedGuide .subTitle {
        display: none;
        text-align: end;
        padding: 0 4px;
        white-space: nowrap;
        display: flex;
        align-self: flex-end;
    }
    .welcomeRight .getStartedGuide .closeDiv {
        display: flex;
        align-self: flex-start;
        margin: 10px 2px;
    }

    .welcomeRight .getStartedGuide .closeDiv img {
        margin: 0 0 0 20px;
        width: 28px;
        height: 28px;
        background: #fff;
        filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .4));
        border-radius: 50%;
        cursor: pointer;
    }
    .welcomeLeft .featureLogo {
        width: 22px;
        height: 22px;
        padding: 2px;
        border-radius: 50%;
        cursor: pointer;
        /*transition: transform 0.1s;*/
        box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
    }
    .welcomeLeft .featureLogoBigger {
        margin: 0 0 18px 0;
        position: relative;
        left: -2px;
        top: -2px;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        cursor: pointer;
    }
    .welcomeLeft .featureLogo img {
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        padding: 1px;
        box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
    }
    .welcomeLeft .featureLogoBigger img {
        background: #fff;
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }
    .welcomeLeft .featureLogo:hover {
        filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .4));
    }
    .welcomeLeft .featureLogoBigger:hover {
        filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .4));
    }

    .welcomeRight .actionOptions {
        padding: 15px 0;
        display: inline-flex;
        flex-flow: column;
    }
    .welcomeRight .sessionExistingIcon, .welcomeRight .sessionNewIcon {
        font-size: 0.85em;
    }
    .welcomeRight .sessionExistingIcon label, .welcomeRight .sessionNewIcon label {
        display: none;
    }
    .welcomeRight .actionOptions button {
        min-width: 180px;
        margin: 10px;
    }

    .welcomeRight .componentListContainer {
        padding: 10px;
    }
    .welcomeRight .featureItem {
        font-size: 1.5em;
        padding: 2px 0;
        border-radius: 14px;
        margin: 0; /*0 0 10px 0*/

        transition: all 750ms, transform 750ms;
        animation: fadeIn 750ms;
        -webkit-animation: fadeIn 750ms;
        -moz-animation: fadeIn 750ms;
        -o-animation: fadeIn 750ms;
        -ms-animation: fadeIn 750ms;
    }
    .welcomeRight .featureItem:hover {
        /*filter: drop-shadow( 2px 2px 3px rgba(0, 0, 0, .1));
        background: rgba(255,255,255,0.5);*/
    }
    .welcomeRight .featureItem .featureLogo {
        width: 60px;
        height: 60px;
        margin: 20px auto;
        padding: 4px;
        border-radius: 50%;
        box-shadow: 3px 3px 6px #888, -2px -2px 6px #fff;
    }
    .welcomeRight .featureItem .featureLogo img.featureIcon {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
        box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
        padding: 10px;
    }
    .welcomeRight .featureItem .featureLogo img.featureAdditionalInfoBubble {
        position: relative;
        top: -30px;
        left: 25px;
        width: 22px;
        height: 22px;
        background-color: transparent;
        border: none;
        border-radius: 50%;
        filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .5));
        opacity: 0.9;
    }

    .welcomeRight .taskDescription, .welcomeRight .taskBulletPoints {
        margin:20px auto; /*20px 15px;*/
        transition: transform 0.4s;
        width: -webkit-fill-available; width: -moz-available; /*fit-content;*/
        line-height: 32px;
    }

    .welcomeRight .taskBulletPoints {
        font-size: 0.6em;
        display: none;
    }

    .welcomeRight .taskDescription {
        font-size: 0.55em;
        background: rgba(255,255,255, 0.5);
        padding: 18px;
        border-radius: 8px
    }

    /* About form */
    .aboutDeviceInfo {
        font-size: 11px;
        border: 1px solid #eee;
        border-radius: 6px;
        background-color: #f5f5f5;
        padding: 2px 8px;
    }
    .aboutDeviceInfo td:nth-child(1) { 
        text-align: right;
        padding: 2px;
    }
    .aboutDeviceInfo td:nth-child(2) { 
        text-align: left;
        padding: 4px;
    }
    .aboutDeviceInfo hr {
        margin: 0 8%;
        opacity: 0.5;
    }
    .aboutCustomConsole {
        width:100%;
        font-size: 11px;
        border: 1px solid #eee;
        border-radius: 6px;
        background-color: #f5f5f5;
        padding: 4px 8px;
    }


    /* myLife */
    .enableFeatureWithCheckbox {
        padding: 15px 15px;
        display: flow-root;
        font-size: 0.9em;
        margin: 15px 5px;
        border: 1px dotted #c0c0c0;
        border-radius: 6px;
        background: #eee;
        /*width: 450px;*/
        min-width: 305px;
    }

    /* Controller cleanup */
    .controllerMethodContents .actionButton {
        filter: drop-shadow( 1px 1px 3px rgba(0, 0, 0, .2));
    }
    .controllerMethodContents .actionButton:hover {
        filter: drop-shadow( 1px 1px 3px rgba(0, 0, 0, .4));
    }

    /**/
    .sunken_insetEffect {
        padding: 15px;
        border: 2px solid #eee;
        margin: 20px;
        border-radius: 18px;
        height: calc(100% - 70px);
        -webkit-box-shadow: inset 1px 2px 3px #ccc;
        background-color: #f8f9fa;
    }

    /* FLIP CARD */
    .flip-card {
        background-color: transparent;
        width: 100%;
        perspective: 1000px; /*needed for 3d flip/rotation effect */
        margin: 0 0 15px 0;
      }
      
      .flip-card-inner {
        position: relative;
        width: 100%;
        height: 230px; /*256px;*/
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
      }
      
      /* DISABLED: now triggered by click-event (2023-03-09) */
      /*.flip-card:active .flip-card-inner {
        transform: rotateY(180deg);
      }*/
      
      .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 230px; /*256px;*/
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }


      /*dialog .flip-card-front, .flip-card-back {
        width: 100% !important;
        height: 272px !important;
      }*/

      dialog.previewObject {
        min-width: 400px !important;
        background-color: transparent;
        top: 25%;
        left: 45%;
      }
      dialog.previewObject .cancelButton {
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: calc(100% + 25px);
        top: 0;
        z-index: 1;
        cursor: pointer;
      }
      dialog.previewObject .issuedAccountKey_card {
        width: 392px;
      }      
      dialog.previewObject .svgTemplate {
        justify-content: center;
        background-position: center;
        width: inherit !important;
        height: inherit !important;
      }
      dialog.previewObject .emblems .cid_logo {
        position: relative;
        width: fit-content;
        height: fit-content;
        top: 13px;
      }
      dialog.previewObject .emblems div {
        display: none;
      }

      .flip-card-front {
        color: black;
      }
      
      .flip-card-back {
        color: white;
        transform: rotateY(180deg);
      }

    /* UI animation signals < 'pls notice me' */
    .uiSignal_enlarge {
        animation: enlarge 2s ease infinite;
    }
    @keyframes enlarge {
        30% { transform: scale(1.01); }
        40% { transform: scale(1.01); }
        50% { transform: scale(1.02); }
        70% { transform: scale(1.02); }
        100% { transform: scale(1.03); }
    }
    .uiSignal_hithere {
        animation: hithere 2s ease infinite;
    }
    @keyframes hithere {
        30% { transform: scale(1.01); }
        40%, 60% { transform: rotate(-10deg) scale(1.01); }
        50% { transform: rotate(10deg) scale(1.01); }
        70% { transform: rotate(0deg) scale(1.01); }
        100% { transform: scale(1); }
    }

    .uiSignal_bounce {
       animation: bounce2 2s ease infinite;
    }
    @keyframes bounce2 {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-20px);}
        60% {transform: translateY(-10px);}
    }

    .uiSignal_bounceFast {
        animation: bounce2 1s ease infinite;
     }
     @keyframes bounce2 {
         0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
         40% {transform: translateY(-20px);}
         60% {transform: translateY(-10px);}
     }

    .uiSignal_swing:hover {
        transform-origin: top center;
        animation: swing 2s ease infinite;
    }
    @keyframes swing {
        20% { transform: rotate(10deg); }	
        40% { transform: rotate(-7deg); }
        60% { transform: rotate(5deg); }	
        80% { transform: rotate(-2deg); }	
        100% { transform: rotate(0deg); }
    }


/* * * * * * * * * * * * * * */
/* 	custom tooltip: greg 	 */
/* * * * * * * * * * * * * * */
.ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 13px "Poppins", "Rubik", sans-serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }
  .arrow {
    width: auto;
    height: 10px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -10px;
  }
  .arrow.top {
    top: -10px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -10px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -10px;
    top: auto;
  }

  div.response .accept, .recordedResponse-accept {
    background-color: #EBF6F0;
    color:#404040;
    border: 1px solid #69B88B;
    padding:4px;
    border-radius: 50%; /*2px;*/
  }
  div.response .accept {
    padding: 2px 2px;
    border-radius: 5px;
    font-size: 0.85em;
    background-color: #69B88B;
    color: #FFF;
    filter: drop-shadow(1px 1px 2px #888);
  }
  div.response .decline, .recordedResponse-decline {
    background-color: #F6EAEA;
    color:#404040;
    border: 1px solid #B96A6A;
    padding:4px;
    border-radius: 50%; /*2px;*/
  }
  div.response .decline {
    padding: 2px 2px;
    border-radius: 5px;
    font-size: 0.85em;
    background-color: #B96A6A;
    color: #FFF;
    filter: drop-shadow(1px 1px 2px #888);
  }
  .recordedResponse {
    padding: 2px !important;
  }

  table.banner {
    background: linear-gradient(90deg, rgb(54, 158, 214), rgb(202, 1, 50));
    width: 100%;
    color: #fff;
    border-radius: 4px 4px 0 0;
    display: none;
    /*display:none*/
  }
  div.banner {
    padding: 4px;
    background: linear-gradient(90deg, rgb(54, 158, 214), rgb(202, 1, 50));
    /*width: 100%;*/
    border-radius: 3px 3px 0 0;
    color: #fff;
  }
  .hintPublicKey {
    filter: invert(1);
    opacity: 1;
    background: url(../images/about.svg);
    background-repeat: no-repeat;
    background-position: initial;
    background-size: 20px;
  }
  .hintInfo {
    filter: invert(1);
    opacity: 1;
    content: url( '../images/about.svg' );
  }
  .tippy-content {
    padding: 0 !important;
  }
  .mytippy-content {
    padding: 4px 8px;
    font-size: 0.9em;
  }
  .mytippy-bannerContent {
    padding: 0px;
    font-size: 0.9em;
  }
  .mytippy-bannerContent div.banner {
    padding: 4px 8px;
  }
  .mytippy-bannerContent div {
    padding: 4px 8px;
  }

  .featureHelp {
    position: fixed;
    bottom: 10px;
    right: 10px;
    height: auto;
    display: inline-flex;
    flex-flow: column;
  }

  .featureHelpContent {
    display: none;
    position: fixed;
    top: 50px;
    z-index: 9;
    left: 54px;
    border: 0px solid #fff;
    margin: 0;
    padding: 8px;
    width: -webkit-fill-available; width: -moz-available;
    font-size: 0.6em;
    text-align: left;
    background: #fff; /*linear-gradient(to bottom,rgba(230,230,230,1),rgba(238,238,238,0.9));*/
    height: -webkit-fill-available;
    flex-flow: column;
    overflow: auto;
  }

  .featureHelpContent button {
    font-size: 0.75em;
    cursor: pointer;
    padding: 2px 8px;
    margin: 10px;
    position: fixed;
    right: 10px;
  }
  .featureHelpContent div {
    display: inline-flex;
    flex-flow: row;
  }
  .featureHelpContent .helpItem {
    display: inline-flex;
    flex-direction: column;
    margin: 24px 0 0 0;
  }
  .featureHelpContent .helpTitleOuter {
    padding: 4px;
    border-radius: 20px;
    margin: 2px;
    width: fit-content;
  }
  .featureHelpContent .helpTitleInner {
    font-size: 1em;
    background-Color: #fff;
    border-radius: 16px;
    padding: 4px 8px;
    background-image: linear-gradient(to bottom, rgb(220, 220, 220), rgba(200, 200, 200, 0));
  }

  .featureHelpContent .helpItem .helpDescription {
    /*line-height: 50px;*/
    cursor: pointer;
    font-weight: 600;
  }
  .featureHelpContent .helpItem .helpDescription:hover {
    /*background: linear-gradient(to bottom,rgba(238,238,238,1),rgba(238,238,238,0.25));*/
    text-decoration: underline;
  }
  .featureHelpContent .helpItem .helpResponses {
    display: none;
    margin: 0 4px;
  }
  .featureHelpContent li {
    font-size: 0.9em;
    line-height: 22px;
    margin: 18px 0 18px 18px;
  }
  .featureHelpContent img.expanderIcon {
    width: 20px;
    padding: 0px 4px;
    
  }
  .featureHelpContent .down {
    transform: rotate(90deg)
  }
  .featureHelpContent .up {
    transform: rotate(270deg)
  }

  .helpNotificationButton {
    display: flex;
    right: 58px;
    width: 30px;
    height: 30px;
    top: 14px;
    padding: 0;
    margin: 0;
    border: none;
  }
  .featureHelpButton {
    cursor: pointer;
    width: 78px;
    font-size: 0.8em;
    font-weight: 600;
    background-color: #7F8C9D;
    color: #222;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' aria-hidden='true'%3E%3Cg id='Layer_4'%3E%3Cpath d='M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1'%3E%3C/circle%3E%3Cpath d='M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    padding: 10px;
    margin: 15px;
    border: 2px solid #fff;
    border-radius: 28px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-origin: content-box;
    display: inline-flex;
    place-content: flex-end;
    background-size: contain;
    box-shadow: 3px 3px 6px #888, -2px -2px 6px #fff;
    opacity: 0.5;
  }
  .featureHelpButton:hover, .helpNotificationButton:hover {
    opacity: 1;
  }

  .notificationLogo {
    padding: 15px;
    margin: 0;
    opacity: 0.5;
    box-shadow: none;
    border: none;
    background-color: #fff;
    background-size: 20px;
    background-position: center;
    width: 30px;
  }
  .notificationLogo_itemsPresent {
    display: none;
    width: 10px;
    height: 10px;
    position:relative;
    top: 0px;
    left: -9px;
    border-radius:50%;
    filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .3));
  }
  .helpNotificationLogo {
    padding: 15px;
    margin: 0;
    opacity: 0.5;
    box-shadow: none;
    border: none;
    background-color: #fff;
    background-size: 30px;
    background-position: center;
    width: 30px;
  }

  .overflowEllipsis {    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .register .issuePvtKey {
    width: 100%;
  }

  .pinExpired .accountLogoLarge svg {
    background: rgba(0,0,0,0.9);
    border-radius: 50%;
    border: 4px solid rgb(255, 255, 255);
    padding: 8px;
    filter: drop-shadow(0px 0px 6px black);
  }
  .pinExpired .accountLogoLarge svg:hover {
    animation: spin 8.15s linear infinite;
  }
  .accountLogoMedium svg {
    filter: drop-shadow(2px 4px 2px rgb(0 0 0 / 0.4));
  }
  .accountCreateButtons {
    background-color: #fff;
    cursor: pointer;
    box-shadow: 2px 2px 3px #e8e8e8, -2px -2px 3px #fff;
    border-radius: 6px;
    padding: 4px 4px 4px 0;
    min-width: 240px;
  }
  .accountCreateButtons:hover {
    background-color: #f5f5f5;
  }
  .accountCreateStepDone {
    opacity: 0.2;
    width: 22px;
    position: absolute;
    margin: 6px -12px;
    padding: 5px;
    border-radius: 50%;
    background: rgba(89,160,255,0.4);
    /*filter: drop-shadow( 2px 2px 3px rgba(0, 0, 0, .5))*/
  }
  .accountCreateStepLink {
    /*display: none;*/
    opacity: 0.15;
  }

  .displayAddr span:hover {
    text-decoration: underline;
  }

  .myControllersContentBlock {
    padding: 10px 0 0 0 !important;
  }

  .dataSelections {
    display:flex;
    align-items:center;
    padding:0;
    width: calc(100% - 4px);
    height: 54px;
  }
  .dataSelections div {
    display: flex;
    align-items: center;
  }

  .dataSelections .level {
    padding: 0 0 0 22px !important;
  }
  .dataSelections .level + .active, .dataSelections .level1 + .active, .dataSelections .level2 + .active {
    color: #000 !important;
    font-weight: 600;
    font-size: 1.2em
  }

  .findResource {
    cursor: pointer;
    background-color: #eee;
    border: 1px solid #2F88FF;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='30px' height='30px' viewBox='0 0 16 16'%3E%3Cpath d='M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    opacity: 1;
    position: relative;
    left: 4px;
    top: 0px
}
.findResource:hover {
    filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, .4));
}

.containerCollectionRows .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: 0px 28px;
    text-align-last: right;
    border-radius: 0 0 15px 15px;
    background: #fff
  }

.containerCollectionRows .recordTarget {
    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: block;
    padding: 0px 15px 30px;
  }

.containerCollectionRows table.recPrev {
    border: 1px solid #eee !important;
    margin: 0 !important;
  }

.containerCollectionRows table.recPrev tr {
    line-height: 40px;   
}

.containerCollectionRows table.recPrev td {
    font-size: 12px !important;
    padding: 14px 4px;
}

.containerCollectionRows table.recPrev td.left {
    vertical-align: middle;
    border-bottom: 1px solid #eee !important;
    width: min-content;
    overflow: hidden;
    text-overflow: ellipsis;
}
.containerCollectionRows table.recPrev td.right {
    text-align: left;
    text-align-last: left;
    border-bottom: 1px solid #eee !important;
    width: max-content;
    padding: 4px;
}
.containerCollectionRows .toggleSwitchContainer {
    padding: 8px;
}
.containerCollectionRows input:checked + .slider:before {
    left: 6px;
}
.containerCollectionRows .slider.round:before {
    height: 16px;
    width: 16px;
    left: 0px;
    bottom: 0px;
}

.homeContentBlock .accountContainerHeader {
    padding: 5px 0 5px 16px !important
}

.homeContentBlock .accountMethods, .homeContentBlock .controllerOptions, .homeContentBlock .myLifeContainerList, .homeContentBlock .myLifeCollectionList {
    margin: 0 8px 8px;
}

.homeContentBlock   .dataSubject_viewRecords table {
    margin: 0 0 0 0 !important;
}

.homeContentBlock .singleEntry .svg_blueFolderLighter {
    background-image: none !important;
}
.homeContentBlock .singleEntry .svg_blueFolderLighter img.sovDataContainerIcon {
    width: 36px;
    height: 36px;
    margin: 5px;
    /*border: 2px solid #DDD;*/
    border-radius: 50%;
    padding: 2px;
    /*background-color: #f5f5f5;*/
}

.validationRequired_Error {
    display: flex;
}
.validationRequired_Error input, .validationRequired_Error select, .validationRequired_Error textarea {
    background-color: #FDF8E7;
    border: 2px dotted #FBCBC5 !important;
}
.validationRequired_Error::before {
    content: '';
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' viewBox='0 0 24 24' fill='none' style='&%2310; filter: drop-shadow(2px 2px 2px gray);&%2310;'%3E%3Cpath d='M19.42 4.44994C19.3203 4.38116 19.2053 4.3379 19.085 4.32395C18.9647 4.31 18.8428 4.32579 18.73 4.36994C17.5425 4.8846 16.2857 5.22155 15 5.36994C14.1879 5.15273 13.4127 4.81569 12.7 4.36994C11.7802 3.80143 10.763 3.40813 9.7 3.20994C8.41 3.08994 5.34 4.09994 4.7 4.30994C4.55144 4.36012 4.42234 4.4556 4.33086 4.58295C4.23938 4.71031 4.19012 4.86314 4.19 5.01994V19.9999C4.19 20.1989 4.26902 20.3896 4.40967 20.5303C4.55032 20.6709 4.74109 20.7499 4.94 20.7499C5.13891 20.7499 5.32968 20.6709 5.47033 20.5303C5.61098 20.3896 5.69 20.1989 5.69 19.9999V14.1399C6.93659 13.6982 8.23315 13.4127 9.55 13.2899C10.3967 13.4978 11.2062 13.8351 11.95 14.2899C12.8201 14.8218 13.7734 15.2038 14.77 15.4199H15C16.4474 15.2326 17.8633 14.8526 19.21 14.2899C19.3506 14.2342 19.4713 14.1379 19.5568 14.0132C19.6423 13.8885 19.6887 13.7411 19.69 13.5899V5.06994C19.6975 4.95258 19.6769 4.83512 19.63 4.7273C19.583 4.61947 19.511 4.5244 19.42 4.44994Z' fill='%23FF0000'/%3E%3C/svg%3E");*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 128 128' aria-hidden='true' role='img' class='iconify iconify--noto' preserveAspectRatio='xMidYMid meet'%3E%3ClinearGradient id='IconifyId17ecdb2904d178eab5645' gradientUnits='userSpaceOnUse' x1='64.002' y1='100.076' x2='64.002' y2='28.635'%3E%3Cstop offset='.485' stop-color='%23504f4f'/%3E%3Cstop offset='1' stop-color='%23757575'/%3E%3C/linearGradient%3E%3Cpath d='M50.92 67.87L29.87 61.8c-1.04-.3-1.62-1.4-1.29-2.43l3.38-10.39a1.914 1.914 0 0 1 2.51-1.19l20.78 8.04c1.29.5 2.66-.49 2.6-1.87L56.81 30c-.05-1.09.82-2 1.91-2h11.05c1.09 0 1.96.91 1.91 2l-1.05 24.48c-.06 1.38 1.32 2.36 2.6 1.87l20.34-7.87c1.03-.4 2.18.16 2.52 1.21l3.34 10.62c.32 1.03-.27 2.12-1.3 2.41l-21.48 6.09a1.92 1.92 0 0 0-1.01 2.99L89.6 90.38c.64.85.46 2.06-.4 2.69l-8.96 6.55c-.9.66-2.16.41-2.75-.53L65.05 79.2c-.75-1.19-2.48-1.2-3.23-.02L49.55 98.41c-.59.92-1.82 1.16-2.71.54l-9.01-6.29a1.916 1.916 0 0 1-.43-2.73l14.5-19.06c.83-1.07.32-2.62-.98-3z' fill='url(%23IconifyId17ecdb2904d178eab5645)'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    width: 14px;
    margin: 0;
}

/*.validationTypeError-tel {
    display: flex;
}*/
.validationTypeError-tel input {
    background-color: #FDF8E7;
    border: 2px dotted #FBCBC5 !important;
}
/*.validationTypeError-tel::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='-10 20 190 190' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M92.955 101.426L89.935 91.2039L60.626 91.5849L57.353 101.737L35.445 114.539L21.357 98.2079C21.357 98.2079 33.118 76.4089 74.022 76.4089C114.926 76.4089 128.642 100.245 128.642 100.245L115.163 114.627L92.955 101.426ZM65.18 111.688L65.334 120.903L55.836 120.976L55.858 111.73L65.18 111.688ZM65.562 134.567L55.801 134.505L55.824 125.132L65.404 125.16L65.562 134.567ZM65.639 139.041L65.783 147.647L55.769 147.735L55.791 138.934L65.639 139.041ZM80.092 120.787L70.184 120.864L70.12 111.665L79.94 111.62L80.092 120.787ZM80.322 134.663L70.279 134.599L70.214 125.175L80.165 125.206L80.322 134.663ZM80.536 147.518L70.371 147.607L70.311 139.092L80.398 139.201L80.536 147.518ZM94.471 120.676L85.117 120.748L85.038 111.597L94.437 111.554L94.471 120.676ZM94.523 134.755L85.238 134.694L85.156 125.22L94.488 125.248L94.523 134.755ZM94.57 147.394L85.349 147.476L85.277 139.254L94.54 139.355L94.57 147.394Z' fill='%23504f4f'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    width: 22px;
    margin: 0 0 0 2px;
}*/

/*.validationTypeError-email {
    display: flex;
}*/
.validationTypeError-email input {
    background-color: #FDF8E7;
    border: 2px dotted #FBCBC5 !important;
}
/*.validationTypeError-email::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM16 12V13.5C16 14.8807 17.1193 16 18.5 16V16C19.8807 16 21 14.8807 21 13.5V12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21H16' stroke='%23504f4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    width: 14px;
    margin: 0 0 0 2px;
}*/